개발 환경

• prettier : 코드의 문법, 스타일
• eslint : 코드 포맷팅
• airbnb : 기본 컨벤션

코드 컨벤션

FE

• 변수명은 camelCase
• 컴포넌트 파일명은 PascalCase
• 상수는 constants 폴더 안에, 항목 별로 분리하며 상수 명은 UPPER_CASE
• 페이지 파일 명은 OOOPage.tsx
• 디렉토리 구조는 하단 구조를 따르되 기능별에 따른 폴더가 추가될 수 있음
• Imports 순서 : 외부 라이브러리 → 내부 모듈 → 상대 경로 모듈

src/
├── public/                  // 정적 파일 (이미지, 아이콘 등)
├── src/                     // 애플리케이션 소스 코드
│   ├── assets/              // 스타일, 이미지 등 정적 리소스
│   ├── api/                 // API 호출, 데이터 관련 함수
│   │   ├── __mock__/        // 모킹 관련 파일
│   ├── components/          // 재사용 가능한 컴포넌트
│   ├── pages/               // 페이지 단위 컴포넌트
│   ├── hooks/               // 커스텀 훅
│   ├── utils/               // 유틸리티 함수
│   ├── context/             // 전역 상태 관리 (Context API 등)
│   ├── types/               // TypeScript 타입 정의
│   ├── constants.ts         // 상수 정의
│   ├── App.tsx              // 최상위 App 컴포넌트
│   └── main.tsx             // 애플리케이션 진입점
└──config/                   // 설정 관련 파일

BE

• 파일 이름 : 케밥 케이스(kebab-case)
• 클래스 이름 : 파스칼 케이스(PascalCase)
• 변수 이름 : 카멜 케이스(camelCase)