프론트엔드 코드 컨벤션

⚡️코드잽 프론트엔드팀 코드 컨벤션

📍 코드잽 프론트엔드 팀의 코드 컨벤션은 Airbnb JavaScript Style Guide와 TOAST UI 코드 컨벤션을 기반으로 작성되었습니다.
이외 헷갈리거나 모르는 것이 생기면 동료와 함께 의논합니다😎

들여쓰기

• 공백문자(space) 2개를 사용한다.

공백

• 콤마 다음에 값이 올 경우 공백이 있어야 한다.

• 키워드, 연산자와 다른 코드 사이에 공백이 있어야 한다.

• 시작 괄호 바로 다음과 끝 괄호 바로 이전에 공백이 있으면 안 된다.

  // Bad
  const array = [ a, b, c ];
  const func = ( a, b ) => {...};
  
  // Good
  const array = [a, b, c];
  const func = (a, b) => {...};

개행

• 선언, 로직, return 문 사이에 반드시 개행을 한다.
• EOL을 추가한다.

문자열

• 특별한 경우를 제외하고 작은 따옴표(')를 사용한다.

전역 변수

• 전역 변수를 사용하지 않는다.

명명 규칙

• 상수는 UPPER_CASE를 사용한다. (ex. COLOR.RED)

• 변수는 camelCase를 사용한다.

• 함수는 camelCase를 사용한다.

  • 컴포넌트에서 정의하는 핸들러 함수는 handle prefix를 사용한다.
  • 매개변수로 전달받는 핸들러 함수는 on prefix를 사용한다.

  interface Props {
    onClick: (event) => void;
  }
  
  const Component = (props) => {
    const handleClick = () => {};
    ...
  }

• 컴포넌트는 PascalCase를 사용한다.

• 타입과 인터페이스는 PascalCase 를 사용한다.

  • 접두사, 접미사를 사용하지 않는다.
  • 컴포넌트의 매개변수는 Props 인터페이스로 정의한다.

• URL, HTML 같은 범용적인 대문자 약어는 대문자 그대로 사용한다.

선언과 할당

변수

• 값이 변하지 않는 변수는 const를, 값이 변하는 변수는 let을 사용하여 선언한다. var는 절대로 사용하지 않도록 한다.
• const를 let 보다 위에 선언한다.
• const와 let은 사용 시점에 선언 및 할당을 한다.
• 외부 모듈과 내부 모듈을 구분하여 사용한다.

배열과 객체

• 배열과 객체는 반드시 리터럴로 선언한다.
• 배열의 이름은 복수형(List)으로 선언한다.
• 배열 복사 시 전개연산자(…)를 사용한다.
• 객체의 프로퍼티가 1개인 경우에만 한 줄 정의를 허용하며, 2개 이상일 경우에는 개행을 강제한다.
• 객체의 메서드 표현 시 축약 메소드 표기를 사용한다.

// Bad
const atom = {
  value: 1,

  addValue: function(value) {
    return atom.value + value;
  }
};

// Good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  }
};

함수

• 함수 선언문은 변수 선언문 다음에 오도록 한다.

• 함수 표현식 대신 화살표 함수를 사용한다.

  화살표 함수는 별도의 this 바인딩 없이 상위 컨텍스트에 바인딩되기 때문에 함수 표현식보다 혼란이 적으며 덜 장황하고 추론이 쉽다.

• 화살표 함수의 파라미터가 하나이면 괄호를 생략한다.

  // Bad
  [1, 2, 3].map((x) => {(x) => x * x);
  
  // Good
  [1, 2, 3].map(x => x * x);
  [1, 2, 3].map((y, x) => x + y);

• 암시적 반환을 최대한 활용한다.

  // Bad
  [1, 2, 3].map(number => {
    return `A string containing the ${number + 1}.`;
  });
  
  // Good
  [1, 2, 3].map(number => `A string containing the ${number + 1}.`);

템플릿 문자열

• 변수 등을 조합해서 문자열을 생성하는 경우 템플릿 문자열(${})을 이용한다.

블록 구문

• 한 줄짜리 블록일 경우라도 {}를 생략하지 않으며 명확히 줄 바꿈 하여 사용한다.

• 키워드와 조건문 사이에 공백을 사용한다.

  // Bad
  for(var i=0;i<100;i+=1) {
  
  // Good
  for(var i-0 ; i < 100; i+=1) {

• switch-case 사용 시 첫 번째 case문을 제외하고 case문 사용 이전에 개행한다.

  // Good
  switch (value) {
    case 1:
      doSomething1();
      break;
  
    case 2:
      doSomething2();
      break;
  }

• switch-case 사용 시 각 구문은 break, return, throw 중 한 개로 끝나야 하며 default문을 반드시 사용한다.

  // Good
  switch (value) {
    case 1:
    case 2:
      doSomething();
      break;
  
    case 3:
      return true;
  
    default:
      throw new Error();
  }

반환하기

• Early Return을 지향한다.

• 함수 내에서 반환은 한 번만 한다.

  특정 값을 반환해야 하는 경우, 함수 맨 마지막에서 한 번만 반환한다. 단, 예외로 빠져나가는 경우는 제외한다. 코드를 예측하기 쉬우며 흐름이 간결한 함수를 작성할 수 있다.

  // Bad
  function getResult() {
    if (condition) {
      return someDataInTrue;
    }
    
    return someDataInFalse;
  }
  
  // Allow - 예외처리로 바로 빠져나감
  function foo(isValid) {
    if (!isValid) {
      return;
    }
    
    return someDataInTrue;
  }
  
  // Good
  function getResult() {
    let resultData;
  
    if (condition) {
      resultData = someDataInTrue;
    } else {
      resultData = someDataInFalse;
    }
  
    return resultData;
  }

주석

• 가능한 주석이 필요 없는 네이밍을 사용한다.

• 필요한 경우 JSDoc을 사용하여 힌트를 제공한다.

• 주석은 설명하려는 구문에 맞춰 들여쓰기 한다.

• 문장 끝에 주석을 작성할 경우, 한 줄 주석을 사용하며 공백을 추가한다.

  // Good
  var someValue = data1; // 주석 표시 전후 공백

• 여러 줄 주석 을 작성할 떄는 * 의 들여쓰기를 맞춘다. 주석의 첫 줄과 마지막 줄은 비워둔다.

  // Good
  /*
   * 주석내용 
   */

• 코드 블럭 주석 처리를 위해서는 한 줄 주석을 사용한다.

  // Bad - 여러 줄 주석을 사용
  /*
   * var foo = '';
   * var bar = '';
   */
  
  // Good - 한 줄 주석 사용
  // var foo = '';
  // var bar = '';

가져오기/내보내기

• 컴포넌트는 index.ts에서 export 한다.

• 컴포넌트는 default export 방식으로 내보낸다.

• 컴포넌트가 아니라면 named export 방식으로 내보낸다.

  (ex. export const Props = {...} )

컴포넌트 생성규칙

• 컴포넌트는 동일한 이름의 폴더에 다음 3개의 파일과 함께 생성한다.

  1. MyComponent.tsx : 컴포넌트를 정의하는 파일

  2. style.ts : 스타일을 정의하는 파일

  3. index.ts : 외부로 내보내기 위한 파일

     ⇒ import를 정리하고, 외부로 내보낼 객체를 구분한다.