화 목 (2시간) 2시

• components 폴더 구조 (1 순위)

  • 도메인 별로 좀 더 묶어주고, 나눠주는 연습이 필요할 것 같다고 느꼈습니다.
  • 파일이나 폴더의 수가 너무 많아지면, 나중에 프로젝트를 유지보수하는 것이 어려워질 수 있어요. 그렇기 때문에 이런 부분에 대한 습관을 가지는 것이 좋습니다.
  • hooks들로 api 통신 등을 분리한 부분은 아주 잘 되어있어요! 다만 hooks라는 별도의 폴더에 모두 몰아놓기보다는 전체적으로 공통적으로 사용할 만한 것들만 공통 폴더에 두고 (useDebounce, useTimeoutFn 같은) ‘인증’ ‘검색’ ‘글 작성’ 등의 도메인으로 컴포넌트들과 colocation(가까이 놓기)를 하는 것도 고려해주시면 좋을 것 같아요.

  통일성이 없다

  찾기 힘들다

  훅을 너무 빼놨어.. (기준없이) - 여러 번 쓰이는 것만 뺐어야 했다

  hype : 기능별로 type, api 등

• SWR, React-query(Tanstack query) 같은 data sync 라이브러리 사용 (2 순위)

  • fetch state를 관리할 수 있어 큰 앱에서는 이런 류의 라이브러리가 도움이 많이 되고, 최근들어 많이 사용하고 있는 추세입니다.
  • 이를 사용하면, recoil 같은 라이브러리가 필요하지 않아질 수도 있습니다. (좀 더 앱이 간단해짐)

  Recoil vs React-query vs context-api?

  왜 썼나 고민..?

• TS 마이그레이션 (3 순위)

• eslint 설정…

• absolute path 사용하기 (한명이 ㅋㅋㅋ)

  • https://medium.com/@davidmieloch/tilde-paths-with-eslint-typescript-and-webpack-971f694c9b15 같은 가이드를 참조해보시면 좋을 것 같습니다!
  • relative path의 장점도 있지만, 트랜스파일러 설정을 조정하여 absolute path를 사용하면 어떤 임포트 패스를 사용하고 있는지가 모든 파일에서 동일하게 나타나기 때문에 좀 더 임포트 상황을 파악하기가 쉬워집니다.

• 간단한 지적사항들

  • 일부 빌드툴 등 개발환경에서만 사용되는 의존성들을 devDependencies로 정리 (실제 프로그램에 특별히 큰 영향을 주는 것은 아니지만, 늘 정리해 두는 것이 좋아요)
    • https://github.com/prgrms-fe-devcourse/FEDC3_Tripend_JAEHO/blob/develop/package.json#L23-L34

• Header 컴포넌트 Common으로 빼기

더 생각했으면 하는 점

• 로그인/회원가입 - 동우
  • Auth
    • Signin
    • Signup
    • RequireAuth
  • api
    • auth.ts
    • core
      • index.ts
  • util
    • constants
      • auth
    • validate
      • signup
    • storage.js