| 항목 | 케이스 | 비고 |
|---|---|---|
| 변수 | camelCase |
- 변수는 명사형으로 작성한다 |
| 함수 | camelCase |
- 함수는 동사형으로 작성한다 <br> - 동사 + 명사 순서로 작성 |
| 디렉토리 | camelCase |
|
| 리액트 컴포넌트 | PascalCase |
|
| 상수 | SCREAMING_SNAKE_CASE |
|
| 클래스 | PascalCase |
|
| 컴포넌트 파일 | PascalCase |
|
| 컴포넌트 파일을 제외한 파일들 | camelCase |
✅ 리액트 컴포넌트 ⇒ export default 사용
✅ 리액트 컴포넌트 외 파일 (utils, hook 등) ⇒ export default 사용 X
✅ 각각 export vs export {a, b} ⇒ export {a, b}
🔹 컴포넌트 기반 폴더 구조
✔️ 역할 별(components, utils...)로 나누고, 내부에선 관심사 별로 분리
🔹 Barrel 패턴 적용!
✔️ 모든 폴더마다 `index.ts` 추가하기로 → 필요시 제거 가능
🔹 폴더 구조 예시
src/
├── components/
│ ├── common/ # 재사용되는 공통 컴포넌트 (버튼, 토스트 등)
│ ├── 도메인1/ # 특정 도메인 관련 컴포넌트 (헤더, 푸터, 특정 영역 등)
│ ├── Header/
│ │ ├── Header.tsx
│ │ └── index.ts
│ ├── RollingNewsBar/
│ │ ├── RollingNewsItem.tsx
│ │ ├── RollingNewsBar.tsx
│ │ └── index.ts
│ └── index.ts
├── utils/ # 유틸리티 함수 모음
├── assets/ # 이미지, 아이콘 등 정적 파일
│ ├── images/
│ └── icons/
├── hooks/ # 커스텀 훅
├── pages/ # 페이지 단위 컴포넌트
│ ├── 페이지1/
│ │ ├── index.ts
│ │ ├── 페이지1.tsx # 페이지1 섹션 A + 섹션 B 포함
│ │ ├── 페이지1 섹션A.tsx
│ │ └── 페이지1 섹션B.tsx
│ ├── 페이지2/
│ └── 페이지3.tsx # 크기가 작은 경우 폴더로 분리하지 않아도 OK
├── types/ # 타입 정의 파일
├── stores/ # 상태 관리 관련 파일
├── styles/ # 글로벌 CSS 변수, 재사용 CSS 파일
├── constants/ # 상수 관리
├── contexts/ # 컨텍스트 관리
└── services/ # API 로직 관리