Code Convention

변수명

• 변수명은 기본적으로 camelCase를 사용한다.

• boolean 형을 갖는 변수는 앞에 is를 붙인다.

• css는 기본적으로 kebab-case를 사용한다.

• 타입 이름은 type은 ~Types로 한다.

• 인터페이스 이름은 props type은 ~Props로 한다.

  • API : 응답 ~Response, ~Request

  • 예시 코드

    //댓글 조회
    export interface CommentReadResponse extends BaseResponse {
      data?: PaginationResponse<CommentProps>;
    }

    // base
    export interface BaseResponse {
      message?: string;
      status?: number;
      code?: string;
    }
    
    export interface PaginationResponse<T> {
      content: T[];
      numberOfElements: number; //content의 요소가 몇개인지
      offset: number; // 현재 페이지에서 시작하는 요소의 index 번호
      pageNumber: number; //페이지 넘버
      pageSize: number; //페이지 사이즈
      totalElements: number; // 전체 요소 수
      totalPage: number;
    }

• props로 받는 className string은 styleClass로 통일한다.

  • className 여러 개 사용하는 컴포넌트는 컴포넌트 + style로 통일한다.

함수명

• 함수명은 기본적으로 camelCase를 사용한다.
• 가능한 동사 + 명사의 형태를 사용한다.
• 함수명을 축약하지 않는다.
• 함수형 컴포넌트의 경우 첫 글자를 대문자로 시작한다.

이벤트 핸들러

• 이벤트 핸들러 함수 이름은 handle~로 통일한다.
• props 내 이벤트 핸들러는 handleOn<EventName>으로 통일한다.

모듈

• Component에서는 다음과 같이 import, export 한다. 이 때, import 할 경우에는 반드시 [경로 alias](https://github.com/dnd-side-project/dnd-8th-1-frontend/blob/develop/tsconfig.json) 를 사용한다.
  • import Layout from ‘@components’
  • export {Layout, Layout2...}
• index에서는 다음과 같이 import , export 한다.
  • export { default as Layout } from './Layout';
  • export { default as Layout2 } from './Layout2';

스타일

• 스타일 클래스 이름은 kebab-case 를 이용한다.
• Storybook을 통해 컴포넌트 문서화를 진행한다.