코드 컨벤션

[ FE ]

✓ 컨벤션 기준

타입스크립트를 위한 클린코드

공통

• 코드는 최대한 명령형이 아닌 선언형으로 작성한다.

변수(Variable)

키워드

• var 합당한 이유 없이 절대 금지
• const 를 기본 키워드로 사용하고 재할당이 필요할 시 let 사용
• 조건판단
  • 부정조건문 금지
  • 3개 이상일 경우, 변수로 할당
  • 2개의 경우, 알아보기 힘든 경우에 변수로 할당
  • early return 사용

네이밍

동일한 유형의 변수는 동일한 단어를 사용

• 변수 : camel case
• 상수 : 대문자 + snake case

예시

//변수
const value = 1;

//상수
const COLOR_VALUE = "#000";

//조건 판단
const isSameAll = a === b && b === c && c === d;

if (isSameAll) {
  return true;
}

함수(Function)

✓ 하나의 함수는 하나의 기능만 담당

네이밍

• 카멜케이스
• 동사 + 명사(optional)
• 생략보다는 풀네임으로

파라미터

• 3개 미만의 경우 일반 파라미터 전달
• 3개 이상부터 객체 구조분해 할당으로 파라미터 전달
• spread 연산자 사용시 → 유연하게 대처 (어려우면 팀원들과 논의하기)

생성

• function 키워드를 사용
• 익명 함수의 경우 에로우 함수 사용

예시

function add(a, b) {}

function add(a, b, ...numbers) {}

function add({ a, b, c }) {}

컴포넌트(Component)

네이밍

• 파스칼케이스 사용

props

• 항상 객체로 넘김

타입(Type)

네이밍

• 객체를 나타낼 때에는 Interface 사용
• 네이밍의 경우 파스칼케이스 사용 (I 접두사 금지)
• enum의 경우, 내부 상수는 CONSTANT_CASE
• 명사형 혹은 명사형 구문으로 작성(UserProps, UserGenerator)

범위

• 함수 파라미터, 함수 반환값, 객체나 특정 값만 설정
• 컴포넌트의 경우 Props 타입을 생성 ex) CarProps

예시

type CarName = string;
type CarType = "르블랑" | "팰리세이드";

type Car = {

};

type  KiaCar= Car & {

};

interface Car {
	brand: string;
};

interface Car {
	price: number;
};

Car = {
	brand: string;
	price: number;
}

interface HyundaiCar extends Car {

};