디렉터리 구조
📁 public
- assets
📁 src
📁 components
- index.ts (인덱싱)
- Function.tsx (실제 컴포넌트)
- Function.style.ts (스타일 컴포넌트)
📁 pages
- [페이지]
- index.tsx (실제 페이지)
- styles.ts (스타일)
- components/ (지역 컴포넌트)
- ( 📁 components 구조와 동일 )
- types/
- hooks/
- utils/
- contants/
📁 apis
📁 styles
📁 states
📁 types
📁 utils
📁 constants
구조 설명
컴포넌트 폴더 구조
- 해당 컴포넌트에서 쓰일 공통된 로직 (constants, hooks, types, utils)은 폴더로 생성한다.
- 컴포넌트 아래에 다른 depth 를 가진 하위 컴포넌트가 생기더라도 같은 레벨에 폴더를 생성한다.
- @emotion/Styled 컴포넌트는 분리한다. (파일명:컴포넌트명.style.ts)
index.ts 파일
index.tsx가 아닌index.ts를 사용한다.
- index.ts는 해당 폴더의 컴포넌트를 모아서 export 해주는 용도로만 사용한다.