협업을 위한 코드 컨벤션

🏷 코드 컨벤션

Airbnb JavaScript Style Guide는 Airbnb에서 사용하는 자바스크립트 코딩 스타일 가이드로, 자바스크립트 코드의 가독성, 일관성, 유지보수성을 향상시키기 위한 목적으로 작성되었습니다. 협업을 위해서는 필수라고 생각합니다.

이 가이드를 따르는 이유는 다음과 같습니다.

• 일관성 유지: 코드를 작성할 때 일관성을 유지하는 것은 중요합니다. Airbnb 가이드는 많은 사람들이 협업하고 유지보수를 할 때 코드를 일관되게 작성할 수 있도록 도와줍니다.
• 가독성 향상: 가독성이 좋은 코드는 이해하기 쉽고 유지보수가 용이합니다. Airbnb 가이드는 가독성이 좋은 코드를 작성하는 방법에 대해 명확한 규칙을 제공합니다.
• 보안 강화: Airbnb 가이드는 보안 취약점을 예방하기 위한 규칙을 포함하고 있습니다. 이러한 규칙은 코드를 작성할 때 보안 문제를 고려할 수 있도록 도와줍니다.
• 최신 기술 적용: Airbnb 가이드는 최신 자바스크립트 문법과 기술을 사용하는 방법에 대해 지속적으로 업데이트됩니다. 따라서 이 가이드를 따르면 최신 기술을 적용한 더 나은 코드를 작성할 수 있습니다.
• 적극적인 개발자 커뮤니티: Airbnb 가이드는 매우 인기 있는 자바스크립트 스타일 가이드 중 하나이며, 많은 개발자들이 활발하게 이용하고 있습니다. 따라서 이 가이드를 따르면 다른 개발자들과 소통이 쉬워지며, 적극적인 개발자 커뮤니티에 참여할 수 있습니다.

따라서 Airbnb JavaScript Style Guide를 따르면 더 나은 코드를 작성하고, 일관성을 유지하며, 보안 문제를 예방할 수 있습니다. 또한 이를 따르면 다른 개발자들과 적극적인 커뮤니케이션을 할 수 있어 협업과 유지보수가 더욱 수월해집니다.

(cf. https://github.com/airbnb/javascript 한글판 - https://github.com/ParkSB/javascript-style-guide )

✅ ESLint

• 주역할) 코드 에러, 문법 강제 등 품질 개선
• 부역할) 코드 포맷터. prettier에 비해 특화 되어 있지 않음.

{
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"  // import/export
		"sourceType": "default" // require
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "rules": {
    "no-console": "off",
    "max-classes-per-file": ["error", 10]
  },
  "extends": ["airbnb", "plugin:prettier/recommended"]
  // 꼭 배열의 맨 마지막이여야 모든 중복 규칙을 비활성화 시킬 수 있습니다.
}

plugins

우선 plugin 종류는 여러 가지 있는데, 예를 들어

• eslint-config-airbnb-base: 에어비엔비 린트 플러그인
• eslint-config-next: Next.js 전용 린트 플러그인
• eslint-plugin-react: 리액트 전용 플러그인
• eslint-plugin-prettier: 린트 위에 사용할 프리티어 플러그인
• eslint-config-prettier: 요건 린트 설정과 중복되는 부분이 있으면 프리티어 룰에서 제외하는 플러그인
• @typescript-eslint/eslint-plugin: : 타입스크립트 전용 린트

extends

• eslint rule 설정이 저장되어 있는 외부 file을 extends 하는 부분. 외부에서 제공해주는 설정을 변경하고 싶으면 rule set이 적용된다.

rules

• 직접 lint rule을 적용하는 부분. extends로 자동으로 설정된 rules 중에, 특정 rule을 끄거나, error → warning으로 나오도록 변경하는 등 설정을 바꿀 수 있습니다.

env

• 구성 파일에서 환경을 지정하려면 env 키를 사용하고 각 환경을 true로 설정하여 사용하도록 설정할 환경을 지정합니다.

ESLint 공식문서

✅ Prettier

• 주역할) 코드 포맷터

/* 사용하실때는 주석을 삭제해주세요 ~! */
{
  "bracketSpacing": true, // 객체 리터럴에서 괄호에 공백 삽입 여부
  "singleQuote": true, // 쌍따옴표
  "semi": true, // 세미콜론 자동
  "useTabs": false, // 탭x
  "tabWidth": 2, // 탭 사이즈 2
  "trailingComma": "all",
  "printWidth": 80, // 80자 이상 넘어가면 자동 넘어감
  "editor.formatOnSave": false,
  "[javascript]": {
    "editor.formatOnSave": true  // vscode에서 저장 시, 포맷팅
  }
}

✅ 주석 작성법 통일

• TODO 주석은 코드 작성 중에 처리해야 할 작업을 나타내며, 다른 개발자나 나중에 자신이 해당 코드를 다시 살펴봤을 때 참고할 수 있도록 합니다. 예를 들어, "TODO: 사용자 인증 로직 구현" 이라는 주석은 해당 코드에 사용자 인증 로직을 구현해야 한다는 작업을 나타내며, 추후에 해당 작업을 수행할 개발자에게 도움이 됩니다.
• FIXME 주석은 코드에 수정이 필요한 문제점을 나타내며, 수정이 필요한 사항이나 버그를 나타냅니다. 예를 들어, "FIXME: 이 부분에서 메모리 누수 발생 가능성" 이라는 주석은 해당 코드에 메모리 누수가 발생할 가능성이 있다는 문제점을 나타내며, 수정이 필요하다는 것을 알려줍니다.
• REVIEW 주석은 코드나 문서의 검토 결과를 기록합니다. 예를 들어, "REVIEW: 이 부분은 검토가 필요합니다. 특히 이 부분의 로직이 정확한지 확인해주세요." 라는 주석은 해당 코드나 문서의 검토가 필요하다는 것을 나타내며, 다른 개발자나 리뷰어들이 해당 내용을 확인할 수 있습니다.
• NOTE 주석은 코드나 문서에서 특정 내용을 기록할 때 사용됩니다. 예를 들어, "NOTE: 이 부분은 기존 코드와 호환되지 않을 수 있습니다. 수정이 필요합니다." 라는 주석은 해당 코드나 문서에서 특정 부분이 기존 코드와 호환되지 않는 문제가 있다는 것을 알려줍니다.
• 함수 상단에 JSDoc으로 주석 작성.

유의해야 할 코드스타일 정리

• 3.5 Group your shorthand properties at the beginning of your object declaration

  • Object사용 시, 선언되어있는 값이라면 value입력없이 바로 사용.

  • value 없이 사용하는 값들은 상단에 value를 지정해주는 것들은 하단에 배치

    const anakinSkywalker = 'Anakin Skywalker';
    const lukeSkywalker = 'Luke Skywalker';
    
    // bad
    const obj = {
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      lukeSkywalker,
      episodeThree: 3,
      mayTheFourth: 4,
      anakinSkywalker,
    };
    
    // good
    const obj = {
      lukeSkywalker,
      anakinSkywalker,
      episodeOne: 1,
      twoJediWalkIntoACantina: 2,
      episodeThree: 3,
      mayTheFourth: 4,
    };

• 함수 인수를 변경하는 대신 기본 매개변수 구문을 사용하기.

  // really bad
  function handleThings(opts) {
    // \* 함수 인수를 변경하면 안됩니다.
    옵션이 거짓이면 원하는 개체로 설정되지만 미묘한 버그가 발생할 수 있습니다.
    opts = opts || {};
    // ...
  }
  
  // still bad
  function handleThings(opts) {
  if (opts === void 0) {
    opts = {};
    }
    // ...
  }
  
  // good
    function handleThings(opts = {}) {
    // ...

• 인라인 콜백을 전달할 때와 같이 익명 함수를 사용해야 하는 경우 arrow 함수 표기법을 사용합니다.

  // bad
  [1, 2, 3].map((number) => {
    const nextNumber = number + 1;
    `A string containing the ${nextNumber}.`;
  });
  
  // good
  [1, 2, 3].map((number) => `A string containing the ${number + 1}.`);
  
  // good
  [1, 2, 3].map((number) => {
    const nextNumber = number + 1;
    return `A string containing the ${nextNumber}.`;
  });
  
  // good
  [1, 2, 3].map((number, index) => ({
    [index]: number,
  }));
  
  // No implicit return with side effects
  function foo(callback) {
    const val = callback();
    if (val === true) {
      // Do something if callback returns true
    }
  }
  
  let bool = false;
  
  // bad
  foo(() => bool = true);
  
  // good
  foo(() => {
    bool = true;
  });

• 삼항식보다 간단하게 작성이 가능다면 더 간단하게 표현하기.

  // bad
  const foo = a ? a : b;
  const bar = c ? true : false;
  const baz = c ? false : true;
  const quux = a != null ? a : b;
  
  // good
  const foo = a || b;
  const bar = !!c;
  const baz = !c;
  const quux = a ?? b;
  

• 블록내에서 중괄호 사용 가이드

  // bad
  if (test)
  return false;
  
  // good
  if (test) return false;
  
  // good
  if (test) {
  	return false;
  }
  
  // bad
  function foo() { return false; }
  
  // good
  function bar() {
  	return false;
  }
  

• Use \\* ... for multiline comments.

  // bad
  // make() returns a new element
  // based on the passed in tag name
  //
  // @param {String} tag
  // @return {Element} element
  function make(tag) {
    // ...
    return element;
  }
  
  // good
   /**
   * make() returns a new element
   * based on the passed-in tag name
   */
    function make(tag) {
  	  // ...
  	  return
    }