개발자 메뉴얼 | 코드 규칙

✨ 자바스크립트 컨벤션

다음과 같은 규칙으로 코드를 작성합니다. Prettier 와 ESLint 로 포맷팅 한 내용은 적지 않았습니다.

기본 컨벤션

• 범용적인 약자 (HTML, URL) 등은 대문자로 작성한다.

• 함수 사이에 띄어쓰기를 하여 작성한다.

• 구조분해 할당을 습관화한다.

• switch-case 문법은 개행하여 쓰고, default 값이 없으면 no-default 주석을 단다.

• 같은 폴더에 있는 경우 상대 경로를, 다른 폴더에 있는 파일은 절대 경로를 사용한다. 부모 폴더에 있는 경우 상대 경로를 허용한다.

• 렌더링 구문 안에 삼항연산자가 있는 경우 로직을 분리시켜 최상단에서 변수로 선언한다.

• else-if 와 else 사용을 지양한다.

• children 을 Prop 으로 받는 경우 PropsWithChildren 으로 타입을 통일한다.

    interface TempProps extends PropWithChildren { // }

    const Header = ({}: React.PropsWithChildren<HeaderProps>) { // ... }

이름 컨벤션

1. true 나 false 의 값을 반환하는 함수의 경우만 is 접두사를 붙인다.

const isLoading = () => {
 // logic

  return loadingStatus;
}

let loadingStatus: Boolean = true;

2. 네트워크 요청을 하는 API 함수의 이름은 다음 컨벤션을 따른다.

• CRUD + 역할 + 명사

3. 이벤트 핸들러 이름은 handle 접두사를 붙인다.

// handle ~ 동사 + 명사

handleSubmitUser (O)
handleUserSubmit (X)

4. 복수명을 나타내는 복수명의 경우 s 나 es 를 붙여서 표시한다.

5. 컴포넌트의 인터페이스 타입은 Props 접미사를 붙인다.