ex-react-hooks 공부 후 깨달은 것

1. typescript 선택은 아주 만족스러웠다
   • javascript 로 개발하다 보면 타입 체크를 위한 조건문을 선언 해줘야 하는 경우가 있었다.
   • typescript 를 사용하면서 타입 체크를 위한 조건문을 사용할 필요가 없었다.
2. IDE 설정을 제대로 해주자
   
   • react 는 프레임워크가 아니다보니 디렉토리 구성이나 파일 명 등.. 제약이 없으나, 프로젝트 규모가 점차 커지면서 내가 구성한 구조에 불신(?) 이 생길 때가 있다. 
   • 하지만, IDE 설정을 제대로 해준다면 디렉토리나 파일 위치 또는 이름을 변경하면 발생하는 경로 수정을 자동으로 해주기에 신경 쓰지 않아도 된다.
3. eslint 와 prettier 는 사용하는게 좋다
   • 코드를 작성하다보면 함수 표현식 끝에 세미콜론을 붙이거나 안 붙이거나 뒤죽박죽 일 때가 있다. 또, string 값 선언 시 어디는 쌍따옴표, 다른 곳은 따옴표로 하는 경우도 있다.
   • 이렇게 사소한 부분을 eslint 와 prettier 의 도움을 받으면 편하다.
4. react hooks 을 사용한다면 eslint-plugin-react-hooks 는 좋은 선택이 된다
   • 많은 도움을 받은 부분이 있다면 '내가 짜놓은 부분을 useCallback 으로 개선하는게 좋을 것 같다.' 라고 친절하게 알려준다.
5. reducer 단위테스트를 적용 해 봤다.
   • 웹 프론트엔드는 어떻게 단위테스트를 해야하는지 궁금했다.
   • ui 변화에 대한 테스트는 어떻게 시작을 해야하는지 엄두가 안나서 일단 reducer 에만 적용 해 봤다.
   • best practice 인지는 모르겠으나, 액션 타입과 결과 값을 주고 테스트를 해보니 success 와 fail 이 제대로 동작하니 만족!
6. parcel 은 글쎄....?
   • parcel은 css module 이나 typescript 등 사용빈도가 높은 모듈이나 플러그인 설정을 별도로 해주지 않아도 자체적으로 내장하고 있어 초반에 환경을 구축하는데 편했다.
   • 하지만 parcel 에서 제공해주는 설정을 일부 수정하고자 설정 파일을 건들이다 보면 드는 생각이 그냥 webpack 을 사용하는게 나을 거 같다는 생각을 하게 된다.

 

--------

개선이 필요한 부분 .... 

 

1. flex layout 을 능숙하게 다룰 수 있도록 계속 해보자
2. 애니메이션 구현에 시간을 뺏긴 부분
3. 개발 중간에 반응형 앱으로 변경해보고 싶은 욕구를 참지 못한 것..ㅎㅎ (덕분에 마크업, 스타일 대규모 수정)