FrontEnd Code Convention

폴더 이름

camelCase

폴더 구조

src
├── api // 모든 api 요청은 여기서 선언
├── assets // image or media
├── components
│   ├── common // 공통으로 쓰는 경우 이곳에
│   │    └── Button.tsx
│   └── Login // 기능별로 묶어서 폴더로 정리
├── pages
│   ├── LoginPage.tsx // page별
├── utils
│   ├── constants // 상수 선언
│   ├── hooks // custom hooks
│   ├── unterfaces // interface 설정
│   ├── type // type 설정
│   └── styles // 전역, theme 스타일 설정
├── App.tsx
└── index.tsx

파일 이름

• 컴포넌트 : PascalCase.tsx
• 그 외 : camelCase.ts

in File

Variable

• camelCase

Function

• camelCase
• 동사 + 명사
• 가능한 어떤 동작을 하는 함수인지 이해하기 쉽도록 작성
• (최소 기능으로 나눌 수 있다면 함수 이름이 너무 길어지는 케이스가 줄어듬)

Functional Components

• PascalCase
• 컴포넌트 만들 때 함수형 컴포넌트 정의와 export 선언은 따로 작성

const SomeComponent: React.FC<SomeInterface> = () => {
  return ();
}

export default SomeComponent;

custom hooks

• use를 앞에 붙여 작성

Interface

• PascalCase
• props 의 Interface 를 선언할때 : [컴포넌트명]Props ( ex : ChatProps )
  • props 의 Interface 의 경우 해당 컴포넌트 파일 상단에 Interface 정의 (export 하지 않음)
• 기본 Interface 의 경우 : I[이름] ( ex: IUser )

Type

• [이름]Type ( ex : ReplyType )
• 앞글자는 대문자로

Contant

• 대문자가 기본, 언더바(_)로 단어 구분
• 2번 이상 사용되는 string은 constants.ts 에 꼭 넣기