air-bnb guide line 을 바탕으로, clean code 철학을 추가

모든 규칙은 서로를 배려하고 이해하기 위해 존재한다!

모든 코드는 다른 사람이 봐도 이해할 수 있도록 작성하는 것을 목표로 한다.

Airbnb JavaScript 스타일 가이드를 참고한다. 아래 세부 내용에 나와있지 않은 내용은 Airbnb의 가이드 라인을 참고한다.

• 탭 사이즈는 2로 한다.

  \t을 사용하지 않고 space로 사용한다.

• 한 줄의 최대 길이는 80자로 제한한다.

  VSCode의 Prettier 설정 등을 통해 통일하도록 한다.

• 변수, 함수 명에 대한 Naming Convention

  • 변수, 함수, 인스턴스는 Camel Case를 사용한다.

    함수의 경우 동사+명사 형태로 구성한다.

  • Class, Contructor는 Pascal Case를 사용한다.
  • 글자의 길이
    • 글자의 길이는 20자 이내로 제한한다.
    • 4단어 이상이 들어가거나, 부득이하게 20자 이상이 되는 경우 팀원과의 상의를 거친다.
  • flag로 사용되는 변수
    • Boolean의 경우 조동사+flag 종류로 구성된다.

      ex) isNum, hasNum

  • 약칭의 사용
    • 약어는 되도록 사용하지 않는다. ex) Not Allow) index> idx, count > cnt, array > arr, to > 2
    • 부득이하게 약어가 필요하다고 판단되는 경우 팀원과의 상의를 거친다.

• 최대 tab depth의 제한

  • tab의 최대 depth는 4로 제한한다.
  • 이 이상으로 depth가 깊어지면 함수를 통해 나눌 수 있도록 한다.
  • 그 이상으로 개선할 수 없다고 판단되는 경우, 팀원들과의 코드리뷰를 통해 개선한다.

      function func() {
        //tab1
        if(){
          //tab2
          array.reduce((pre, cur) => {
            //tab3
            if(cur == status){
              //tab4
            }
          }
        }
      }

• 주석 규칙

  • 한줄은 //로 적고, 그 이상은 /** */로 적는다.

    // 한줄 주석
    /**
     * 여러줄
     * 주석
     */    

  • 함수에 대한 주석
    • backend에서 공통적으로 사용하는 함수의 경우, 모듈화를 통해 하나의 파일로 관리한다.
    • 하나의 파일의 시작 부분에 주석으로 상세 내용을 작성한다.
      • 함수의 전체 기능에 대한 설명
      • 함수의 파라미터에 대한 설명 (type: ..., 역할)

• bracket({}) 규칙

  • if문의 실행문이 한 줄일 때
    • 반복문, 함수의 탈출
      • 한줄로 작성한다.
      • 다만, 부득이하게 두 줄 이상이 되는 경우 주석으로 표기하고 탈출문의 경우 아래에 한칸을 띄우고 로직을 작성한다.

        if(trigger) return;
        
        // logic start

    • (arguments)이후의 bracket
      • 아래의 방법으로 통일한다.

           function func(){
             //...
           }        

• magic number 지양

  • magic number나 문자열을 비교할 경우, constant.js에 상수화 하여 관리한다.

      //constant.js
      const LEFT = 'left';
      //other_logic_file.js
      if(dir === LEFT){
        //...
      }
      // 아래와 같은 경우는 금지한다.
      if(direction === ‘left’)

  • 에러 메시지를 반환할 필요가 있는 경우
    • constant.js에 상수를 대문자로 생성한다.
    • const 어쩌구_ERROR_MESSAGE = ‘어쩌구에 실패했습니다’;

• else if의 사용

  • 불가피한 경우를 제외하고 else if의 사용을 최대한 줄인다.

    ex) 조건을 만족하면 탈출하는 if로 구현하는 등

• arrow function의 사용 (익명 함수)

  • 테스트가 필요한 기능이면 arrow function을 사용하지 않는다.
  • 한줄로 끝나는 경우, 테스트가 필요없는 경우 등에는 arrow function의 사용이 가능하다.

• 함수 파라미터 개수 제한

  • 함수의 인자로 변수를 선언하는 것은 3개까지 가능하다.

      function foo(x, y, z);
    
      // 4개 부터는 객체로 묶어서 보낸다.
      function foo(object);

• 비동기 함수의 사용

  • Promise함수의 사용은 지양하고 async, await를 사용하도록 한다.
  • 다만 로직을 짜는 데 있어 promise를 불가피하게 사용할 경우, 주석으로 표시하고 commit에 그 이유를 작성한다.

• 데이터 베이스 명명 규칙

  • DB 이름 (스키마)
    • 데이터베이스 명은 영어 대문자로 구성한다.
    • 길이는 8자 이내로 구성한다.
  • 테이블
    • 테이블은 영어 대문자로 구성, 대분류_의미있는 테이블 명 형태로 작성한다.
    • 테이블 명의 구성은 최대 3단어까지 사용할 수 있다.
    • 각 단어의 최대 길이는 8자 이내로 구성한다.
    • 최대 길이는 26자 이내로 구성한다.
  • 컬럼

    • 컬럼은 snake 표기법을 따르고, 의미있는 컬럼명_접미사 형태로 작성한다.

    • 컬럼의 성질을 나타내는 접미사를 사용한다. (사용하는 데이터의 타입을 나타내는 것이 아님에 유의)

      접미사 list

      • CNT : count 조회수 등의 count에 사용된다.
      • DT : date 날짜인 경우를 나타낸다.
      • FK : foreign key를 나타내는데 사용한다.
      • FL : flag 0, 1로 구성된 상태를 나타낸다.
      • ID : id 계정 등의 아이디를 나타낸다.
      • NM : name 이름, 별명 등 식별 가능하며 중복이 가능한 문자열 나타내는 데 사용한다.
      • NO : number 나이, 휴대폰 번호 등 숫자를 나타낸다.
      • ORD : order 정렬에 사용되는 index를 나타낸다.
      • PK : primary key를 나타내는데 사용한다.
      • ST : status 회원의 등급, 성별 등의 상태를 나타낸다.

air-bnb guide line
w3schools
google

eslint + prettier
eslint + react