전체 글 103

(항해44일차) 220418 리액트 클론프로젝트 4일차

시간이 어떻게 가는지도 모를만큼 정신없이 지나가고 있다. 따라하기만 하면 될 줄 알았던 클론코딩은 정말 어려웠다. 크롬익스텐션의 도움을 많이 받고 있다. 최대한 비슷한 구조로 코드를 짜보려고 하니 시간이 오래 걸린다. 하지만 오래걸리는 만큼 왜 이런 식으로 코드를 구상했는지 생각해보는 재미가 있다. 컴포넌트의 구조를 생각하는 것도 재밌지만 버튼은 버튼, 디브는 디브로만 쓸 줄 알았던 나에게 클론코딩은 많은 가르침을 주고 있다. 과연 얼마나 제대로 따라했을지는 모르겠지만 말이다. 정말 다양한 태그와 요소가 있고, 쓰는 방법도 많다. 가령 라벨 태그의 for값을 input태그의 id값으로 주고 input의 타입을 checkbox로 지정하면 클릭 시 체크되는 범위가 라벨태그 전체로 늘어난다. 이외에도 dl, ..

카테고리 없음 2022.04.19

(항해38일차) 220412 리액트 미니프로젝트 5일차

오늘 기본적인 기능 구현이 마무리되어 프론트 엔드 세 명이 각자의 브랜치를 메인에 연결하는 작업을 했다. 코드를 합치는 과정은 아직 매우 부담스럽다. 함께 쓰는 컴포넌트의 속성이 서로 다른 경우가 있거나 역할분담이 애매해져 같은 부분에 해당하는 코드를 작성할 때 충돌이 많이 발생한다. 함께 확인하면서 조심스럽게 코드를 고쳐도 막상 합친 코드를 실행시키면 꼭 크고 작은 오류들이 발생한다. 이번 프로젝트에서는 최소단위 컴포넌트를 공동으로 작업하고 나눠가져서 다행히 충돌이 많지 않았다. 하지만 역할 분배는 아쉬움이 남았다. 우리는 각자 페이지를 나누고 페이지에 해당하는 기능을 구현하기로 했는데, 막상 작업을 진행하다 보니 서로 필요한 기능이 겹쳐 같은 기능을 각자 만들어 사용했다. 일을 두번한 셈이다. 과정이..

(항해37일차) 220411 리액트 미니프로젝트 4일차

미니프로젝트의 절반이 지나갔다. 오늘은 처음으로 서버와 연결에 성공한 날이다. 토요일에도 짧은 데이터를 주고 받기는 했지만, 오늘은 실제로 작성한 게시물을 보내고, 다시 서버에서 게시물을 받아와 리스트로 만들었다. 서버와 통신하기 위해서는 몇 가지 약속이 필요하다. 미리 약속한 주소(url)가 있어야 한다. 어떤 요청(get, post, put, delete 등)인지 알려야 한다. 필요한 데이터를 넘기고, 누가(토큰) 요청했는지도 알려줄 수 있다. 이번 프로젝트에서는 axios라고 하는 비동기 통신 라이브러리를 사용하기로 했다. axios는 헤더로 유저정보(토큰)를, 바디로 데이터를 보내고 응답을 받는 간단한 구조이다. 헤더나 baseURL의 겨우에는 전역 객체로 만들고, 각 상황별 요청에 해당하는 객체..