개발 환경

개발 환경

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

코드 컨벤션

FE

• 변수명은 camelCase
• 컴포넌트 파일명은 PascalCase
• 상수는 constants 폴더 안에, 항목 별로 분리하며 상수 명은 UPPER_CASE
• 페이지 파일 명은 OOOPage.tsx
• 디렉토리 구조는 하단 구조를 따름

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

BE

• 파일 이름 : 케밥 케이스(kebab-case)

• 클래스 이름 : 파스칼 케이스(PascalCase)

• 변수 이름 : 카멜 케이스(camelCase)

• DTO

  • request, response DTO 를 모두 선언해서 사용
  • DTO 네이밍

    • Request : CRUD(create, update, delete)와 객체 이름을 조합

      ex) create-user.dto.ts, update-user.dto.ts

    • Response: res를 prefix로 하여 반환하는 객체의 정보를 조합 (복수형의 경우 List)

      ex) res-user-list.dto.ts, res-user.dto.ts

• 폴더 구조

  src/
  ├── app.module.ts          // 루트 모듈
  ├── main.ts                // 애플리케이션 진입점
  ├── common/                // 공통 모듈, 필터, 파이프, 가드 등
  │   ├── filters/
  │   ├── pipes/
  │   └── guards/
  ├── modules/               // 모듈 별 폴더
  │   ├── users/             // 사용자 관련 모듈
  │   │   ├── users.controller.ts
  │   │   ├── users.service.ts
  │   │   ├── users.module.ts
  │   │   └── dto/          // 데이터 전송 객체 (DTO)
  │   ├── auth/              // 인증 관련 모듈
  │   │   ├── auth.controller.ts
  │   │   ├── auth.service.ts
  │   │   └── auth.module.ts
  │   └── ...                // 다른 모듈들
  └── config/                // 설정 관련 파일
      └── app.config.ts