코딩 컨벤션

🦖 FE 컨벤션

🪄 Case conventions

항목	케이스	비고
변수	camelCase	- 변수는 명사형으로 작성한다
함수	camelCase	- 함수는 동사형으로 작성한다 - 동사 + 명사 순서로 작성
디렉토리	camelCase
리액트 컴포넌트	PascalCase
상수	SCREAMING_SNAKE_CASE
클래스	PascalCase
컴포넌트 파일	PascalCase
컴포넌트 파일을 제외한 파일들	camelCase

🚀 export 관련

✅ 리액트 컴포넌트 ⇒ 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 로직 관리

🐧 BE 컨벤션