<aside> <img src="/icons/arrow-right-basic_gray.svg" alt="/icons/arrow-right-basic_gray.svg" width="40px" /> 해당 페이지는 부스트캠프 웹·모바일 8기 그룹 프로젝트 web13_Boarlog의 code 컨벤션을 정리한 페이지입니다.

</aside>

• 추가, 변경하고 싶은 내용이 있으면 언제든지 이야기 해요

  • 슬랙에 이야기 해주세요.
  • 기존 내용과 겹치면 결투신청

• 변수명, 함수명 : camelCase

  • 변수

    • 클래스명과 변수명은 명사를 사용해요.
    • 배열 변수명은 복수형 대신 단수 + List를 사용해요.
      • ex.  chatList (O) chats (x)

  • 함수

    • 함수명은 어떤 기능을 하는지 드러날 수 있도록 동사 + 𝝰로 작성해요.

    • 함수의 반환값이 boolean이라면 is + 대상 + 상태 로 작성해요. (ex. isLoadSuccess)

    • function 키워드 대신 화살표 함수를 사용해요.

      • 암시적 반환이 포함된 화살표 함수는 성능상 더 느리기는 하지만, 이보다 최적화되지 않은 루프를 고려하는 것이 좋아요. (출처)
      • ES6 문법에 맞추기 위함도 있어요.

    • parameter의 개수와 상관 없이 소괄호로 parameter를 묶어요.

      // err을 괄호로 묶는다.
      socket.on('error', (err) => {
          console.log(err);
      })
      

  • 가독성을 위해 const는 let보다 위에 작성해요.

  • 약어 및 이니셜은 항상 모두 대문자로 사용해요. (ex. SMS (O) sms(X), HTTP (O) Http(X))

  • 한글 발음을 그대로 사용하지 않아요 (ex. dongDaeMun-동대문).

    • 꼭 필요한 경우에만 논의 후에 한글로 사용해요.
    • https://tosspayments-dev.oopy.io/chapters/frontend/posts/hangul-coding-convention
    • 한글 컨벤션

  • 앞에 _가 있는 경우는 private 변수 또는 함수를 의미해요.

    • 외부에서 접근할 수 없다면, 메서드명 이나 속성명에 _을 사용하지 않아요.
    • 변수 이름과 getter/setter 메서드 이름을 분리하기 위해, 멤버 변수 이름에는 _를 사용하고, getter/setter 메서드 이름에는 _를 제외한다.
    • 예시

• React 컴포넌트, 클래스명 : PascalCase

• 상수명 : UPPER_SNAKE_CASE

  • 상수명은 대문자를 사용하고, 단어와 단어사이는 _로 연결한다.
  • 매직 넘버 사용은 최대한 지양한다.
    • ex. 0 < number < 7 (x), 0 < number < MAX_NUMBER (0)

• 파일명

  • 백엔드 파일명은 kebab-case로 작성하고 목적을 "."으로 구분하여 작성해요.
    • ex. user-article.contorller.js
  • 프론트엔드 파일명은 다음과 같이 사용해요
    • 컴포넌트인 경우 PascalCase 를 사용해요.
    • 컴포넌트 이외의 파일명은 camelCase 를 사용해요 (ex. util.ts).
      • 백엔드 파일과 구분하기 쉽고,
      • 더블 클릭으로 블록 지정하기 편해서 사용해요.
    • jsx가 포함된 컴포넌트 파일은 확장자를 .tsx로 이외는 .ts로 작성해요.

• 디렉토리명 : lower-kebap-case

  • 단수형 대신 복수형을 사용해요
    • ex. components (o) component (x)
  • 컴포넌트 폴더만 PascalCase 를 사용해요

• 기타

  • 핸들러 : 이벤트 핸들러는 on으로 시작해요.
  • TS 타입/인터페이스 : PascalCase
    • 꼭 필요한 상황이 아니면 확장성을 고려해서 type말고 interface로 작성해요.

• export

  • 파일을 1개의 클래스로 export 하는 경우, 파일명은 클래스명과 같아야 해요.

    // file contents
    class CheckBox {
      // ...
    }
    export default CheckBox;
    
    // in some other file
    // bad
    import CheckBox from "./checkBox";
    
    // bad
    import CheckBox from "./check_box";
    
    // good
    import CheckBox from "./CheckBox";
    

  • Default export가 함수일 경우, camelCase를 이용해요. 파일명은 함수명과 같아야 해요.

    function makeStyleGuide() {
    }
    
    export default makeStyleGuide;
    

  • Singleton / function library / 빈 오브젝트를 export 하는 경우에는 PascalCase를 사용해요.

    const AirbnbStyleGuide = {
      es6: {
      }
    };
    
    export default AirbnbStyleGuide;
    

• 이외의 내용은 prettier에게 맡겨요.

  • FE prettier

    /*231114*/
    {
      "printWidth": 120,
      "tapWidth": 2,
      "semi": true,
      "quoteProps": "as-needed",
      "bracketSameLine": false,
      "trailingComma": "none",
      "endOfLine": "auto"
    }
    

  • BE prettier

    /*231114*/
    {
      "singleQuote": true,
      "trailingComma": "none",
      "semi": true,
      "tabWidth": 2,
      "printWidth": 120,
      "arrowParens": "always",
      "bracketSpacing": true,
      "endOfLine": "lf"
    }