첫 프로젝트 후기

프로젝트 진행하면서 겪은 이슈들과 느낀점들

js 기본 메서드 활용

• map
• forEach
• for in
• Cookie활용 ..
  기본기는 너무너무*999 중요하다.

리액트 관련

• useState
• useEffect

Redux 관련

• Redux - Store, dispatch, Action, Reducer

넥스트 관련 ( + Typescript )

• SSR이 무엇인지,

• SEO의 기능이 있기 때문에 도입함.

• serverSideProps를 주로 사용함.
  컴포넌트마다 redux store를 통해 state공유가 불가능하기 때문에, 멘붕이 왔었음.
  다른 컴포넌트로 이동할 때마다 렌더링을 하면서 state또한 모두 초기화가 되기 때문이다.
  그래서 다른 컴포넌트로 state들을 넘겨주기 위해 nextRouter를 사용하였다.

• nextRouter
  router.push()를 사용해서 state를 query로 넘겨줄 수 있었고, asPath를 통해 url주소에 모든 state 정보들이 나오는 것을 감출 수도 있다.
  뒤로가기 할때도, push에 url주소를 직접 입력하며 남용한 결과, 뒤로가기 버튼을 눌렀을 경우(routr.back()) 원하는 페이지가 나오지 않고 반복되는 버그가 발생하였다.
  push를 하게 되면 history가 stack에 쌓이게 되기 때문이다. 이를 막기 위해 router.replace()라는 고마운 기능이 있었다. 이것은 stack에 쌓이지 않고, 말글대로 replace(대체)를 해준다.

• 타입스크립트를 사용하면서 타입선언을 위해 interface를 사용하였다. (맛보기수준이였지만..)

배포 관련

• yarn lint - lint에러 수정
• yarn build - 빌드

주로 타입선언에 관한 오류, 사용하지 않은 state 및 변수, map의 return value가 없는 오류가 대부분이였다.

Git 관련

• 특정 브랜치 clone하기
  git clone -b {branch_name} --single-branch {저장소 URL}
• git rebase
  고치고 싶은 commit내용 바로 직전의 hash값을 이용해 수정한다.

느낀점

JS 기본 메서드들을 잘 활용하자!
API에서 받은 데이터를 원하는 형태로 가공하는 실력을 많이 길러야 할것 같다.가공하는데 시간이 꽤 오래 잡아먹어서 답답한 경우가 많았다. 머리로는 그려지는데 진행이 안되는 답답한 상황..

라이브러리 및 공용 컴포넌트를 잘 살펴보자!
전혀 새로운 타입이나 메서드들을 보고 당황하지 말고, 라이브러리인지 찾아보자.
하나부터 열까지 만들어야 한다는 부담감은 버리고 기존에 만들어져 있던 컴포넌트들을 잘 찾아 잠고할만한 기능이 없는지 먼저 확인해보는 습관을 길러야겠다.
열심히 만들려고 시간을 쓰고 막혀서 물어보면 이미 만들어져 있는 기능이라고 참고하시라는 말을 들으면 괜히 죄송하다..