3. Coding Convention ‐ Front‐end - TEAM-PROJECT-ACC/trip-at-five-client GitHub Wiki

작성자 : 장원일

Front-end

들여쓰기

• 들여쓰기는 space 2|4(선택해야 합니다) 문자를 사용합니다.

문자열

• 아래 이유로 특별한 경우를 제외하고 문자열은 작은 따옴표를 사용합니다.
  • js 문자열은 ''와 ""는 구분이 없기 때문에 shift를 누르는 수고와 피로가 낮음
  • json은 ""로 작성되기 때문에 json과 구별하기 위해 사용
  • ""와 ''를 혼용하여 사용하는 경우 "" 내부의 '' 보다 '' 내부의 "" 가 가독성이 더 좋음

let text = '123';

문장

• 함수(메서드)를 제외한 문장의 끝에는 반드시 ; (세미콜론)을 사용합니다.
• 한 줄에 하나의 문장만 허용합니다.

함수 선언문/함수 표현식

• 컴포넌트 내부 메서드 또는 콜백함수, 익명함수 구분 없이 함수는 모두 화살표 함수(함수 표현식)를 사용합니다.

식별자

• 컴포넌트를 제외한 식별자는 소문자로 시작합니다.
• 함수, 변수명에 대해서는 camel-case를 사용합니다.
• 상수는 모두 대문자로 작성하며 snake-case를 사용합니다.
• boolean 타입의 변수명은 is, has, can의 접두사를 사용하여 선언합니다.
• boolean 타입을 제외한 변수명은 명사로 선언합니다.
• 함수명은 동사로 선언합니다.
• 식별자만 보고 데이터의 형태 또는 기능을 유추할 수 있어야 합니다. (직관적 의미의 이름)
• 너무 길지 않은 식별자는 줄임말을 지양합니다.
• 배열의 변수명은 요소의 이름 뒤에 list를 붙여 선언합니다.
• 컴포넌트 내부에서 직접 정의하는 이벤트 핸들러 함수는 handle 로 시작합니다.
• props로 전달하는 이벤트 함수는 on으로 시작합니다.

function ParentComponent() {
  const handelClick = () => {}

  return (
    <ChildComponent onClick={handleClick}>
  )
}

default export / export

• 컴포넌트 또는 유틸리티와 같은 공용 기능의 함수 등을 내보낼 시 export default 가 아닌 export를 사용합니다.

export function numUtil() {}

export function stringUtil() {}

반복되는 문자열의 사용

• 반복되는 문자열은 유형에 따라 객체로 묶어 사용합니다. (Enum 타입)
• Object.freeze() 메서드를 사용하여 데이터 타입의 불변성을 유지합니다.
• Enum 타입의 객체는 pascal-case로 선언합니다.

// pascal-case 사용
const ColorSet = {
  RED: 'red',
  BLUE: 'blue',
  GREEN: 'green',
};

// Enum 객체 변환
Object.freeze(ColorSet);