→ 가독성과 유지보수를 위해

규모가 작을때

• 페이지 2~3개 컴포넌트 20개 이하
• 폴더: components, pages, hooks, assets, contexts

규모가 클때

• assets : 공통으로 사용하는 PageA.css, 이미지 등
• components : 공통으로 사용하는 컴포넌트 (shared로 두어도 됨). 내부에 ui, form 디렉토리로 나누어서 관심사 별로 분리
• context : 공통으로 사용하는 컨텍스트
• data : 공통으로 사용하는 데이터 ex) 리덕스(store), 리코일(atoms) 등의 상태 저장소, json 파일, 상수 등
• features/crews : (도메인 단위) 특정 주제에 관한 components, hooks, servies 등을 모아 놓는다. 재귀형태로 큰 프로젝트 구조가 각 주제별로 또 디렉토리로 들어가 있다. (nested) features/crews/goals 또는 features/crews, features/goals crew/hooks ← 크루라는 데이터만 조작하는 훅 ex) auth, user, stats
• Hooks : 공통으로 사용하는 훅들
• layouts : 페이지에서 사용하는 레이아웃 ex) 사이드 바, Nav 바, 페이지 컨테이너 등
• pages : 각 페이지들을 디렉토리로 둔다. > 각 디렉토리 내부 해당 컴포넌트를 묶어서 페이지를 리턴하는 컴포넌트는 index.tsx로 넣는다. ex) Home, Login 해당 페이지에서만 사용하는 모든 코드 (훅, 컴포넌트 등)들이 들어간다.
• servies : 페이지 로깅, 분석, 데이터 패치 등의 코드들
• types : 공통으로 사용하는 타입들 index.d.ts
• utils : 유틸 함수들, 각 유틸 함수는 순수함수로 구성한다. (외부 요인 따라 결과값 달라지지 않도록) 파일 하나당 유틸 함수 하나만 export하고 디렉토리 내부에 index.js를 두어 재export

코드 분석 - 실력 늘이기