🧩 Coding convention

참고:
eslint-config-airbnb
Airbnb JavaScript Style Guide
Airbnb JavaScript Style Guide - kr
Integrating Prettier + ESLint + Airbnb Style Guide in VSCode

1. 코딩 컨벤션

코딩 컨벤션, 가독성이 좋고 유지보수가 용이한 코드를 작성하기 위한 코딩 스타일 규약. 코딩 컨벤션을 준수하면 성능에 영향을 주거나 오류를 발생시키는 잠재적 위험 요소를 줄일 수 있다.

• 다양한 기업의 코딩 컨벤션
  Airbnb Style Guide - 본 프로젝트 사용 컨벤션
  JavaScript Standard Style
  Idiomatic JavaScript Style Guide
  Google Style Guide
  

2. Airbnb Style Guide Install

1. npm과 npx를 설치한다.
2. VSCode 익스텐션 ESLint, Prettier를 설치한다.
3. ESLint와 Prettier 라이브러리를 프로젝트에 설치한다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행한다.

> npm install -D eslint prettier

5. Airbnb config를 설치한다. npm 5+를 사용한다면 다음 명령어를 통해 모든 패키지를 설치할 수 있다.

> npx install-peerdeps --dev eslint-config-airbnb

6. eslint-config-prettier와 eslint-plugin-prettier를 설치한다.

> npm install -D eslint-config-prettier eslint-plugin-prettier

7. 프로젝트의 루트 디렉토리에 .eslintrc.json 파일을 생성하고 다음 내용을 작성한다.

{
  "extends": ["airbnb", "prettier"], //이 설정 파일은 airbnb 스타일 가이드와 prettier의 스타일 가이드를 확장한다.
  "plugins": ["prettier"], //prettier 플러그인을 사용한다.
  "rules": {
    "prettier/prettier": ["error"], //prettier에서 발생한 모든 스타일 경고를 에러로 취급한다.
    "no-unused-vars": "warn", //선언했으나 사용되지 않은 변수가 있다면 경고로 표시한다.
    "no-undef": "off" //알 수 없는 값에 대해 경고를 끈다.
  },
  "env": {
    "browser": true, //브라우저 환경에서 작동할지 여부를 설정한다.
    "node": true, //Node 환경에서 작동할지 여부를 설정한다.
    "es2021": true //ECMAScript 2021 표준을 지원할지 여부를 설정한다.
  },
  "overrides": [
    {
      "env": {
        "node": true //Node 환경에서 작동할지 여부를 설정한다.
      },
      "files": [".eslintrc.{js,cjs}"], //이 설정이 적용되는 파일들의 패턴을 명시한다.
      "parserOptions": {
        "sourceType": "script" //설정 파일의 소스 타입을 'script'로 명시한다.
      }
    }
  ],
  "parserOptions": {
    "ecmaVersion": "latest", //마지막 ECMASclima의 버전을 사용해 파싱한다.
    "sourceType": "module" //전체 프로젝트의 소스 타입을 'module'로 명시한다.
  }
}

8. 프로젝트의 루트 디렉토리에 .prettierrc 파일을 생성하고 Prettier config file을 참고하여 원하는 포맷팅 옵션을 설정한다.

{
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": true, // JSX에 singe 쿼테이션 사용 여부
  "printWidth": 100, //  줄 바꿈 할 폭 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed", // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비 
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

9. VSCode의 User Setting 파일(setting.json)에 "editor.formatOnSave": true를 삽입한다.

3. 명명 규칙

• 단어를 생략하거나 약어를 사용하지 않는다. 단, HTML,URL 등과 같은 범용적인 약어는 사용할 수 있다. 약어 사용시에는 모두 대문자로 작성한다.
• 한글 발음을 로마자로 그대로 표기하지 않는다
• 특수 문자는 가급적 사용하지 않는다. 단, 상수의 이름에서 단어를 구분하기 위한 용도와 Private 지시자 표시를 위하여 언더스코어(_)를 사용한다
• 2글자 이상 대문자를 연속해서 사용하지 않는다. 단, 상수 이름이나 약어는 예외로 한다
• 상수 이름이나 약어 이름을 대문자를 사용한다
• 이름을 통해 역할과 목적을 할 수 있도록 간결하고 명료하게 작성한다

3.1 함수: 카멜 표기법 (CamelCase)

• 동사를 사용하여 작성한다
• 카멜 표기법을 준수한다. 복합어 이름은 첫 번째 단어를 소문자로 작성하고, 두 번째 이상의 단어 첫 글자를 대문자로 작성하여 단어를 구분한다.
• Getter, Setter 메소드는 반드시 'get + 멤버변수 이름', 'set + 멤버변수 이름' 형식으로 작성한다. 단, Getter 메소드의 반환값이 Boolean 인 경우 get 대신 is 조합을 사용한다
• 이벤트 핸들러 메소드는 handle + 이벤트명 으로 시작하도록 정의한다. 브라우저에서 제공하는 이벤트가 아니라 특정 모듈이나 함수에서 비동기 콜백 함수(이벤트) 모델을 사용하는 경우에도 동일하다.

// 나쁜 예
apple();
car();

// 좋은 예
isChecked();
getElement();

3.2 변수: 카멜 표기법 (CamelCase)

• 변수명은 길어도 좋으니 한 눈에 알아볼 수 있도록 최대한 명시적으로 작성한다
• 변수 이름은 명사를 사용하여 작성한다
• 카멜 표기법을 준수한다. 복합어 이름은 첫 번째 단어를 소문자로 작성하고, 두 번째 이상의 단어 첫 글자를 대문자로 작성하여 단어를 구분한다.
• 변수 이름의 첫 글자로 연속된 두 개의 언더스코어(__) 기호와 달러 기호($)는 사용하지 않는다.
• 변수 이름은 한 글자 이상으로 사용 의도를 충분히 알 수 있을 만큼 간결하고 명확하게 작성한다. 단, 임시 변수는 한 글자 이름을 사용할 수 있다.

3.3 파일명

• JavaScript 파일은 하나의 디렉토리 아래에 서브 디렉토리 단위로 나누어 작성한다.
• JavaScript 파일은 네임스페이스를 포함하여 모듈 단위로 구성한다. 파일 이름 규칙은 각각 네임스페이스 + 모듈 이름 규칙을 따른다

4. HTML/CSS

NHN 코딩 컨벤션

4.1 HTML

1. 유효하고 읽을 수 있는 DOM 작성
2. 인라인 스타일과 스크립트를 사용하지 않기
3. 웹 접근성 준수하기
4. 이미지에 alt 태그 사용
5. 페이지 단 하나의 h1
6. 제목 및 메타 태그 사용(SEO 최적화)
7. html의 유효성을 검사
8. 이미지 및 성능 최적화 검사

4.2 CSS

0. class 명명 규칙 : 본인이 맡은 페이지 기준 e.g. <div class="login-wrapper"></div>

1. 여백 px값 다를 때 :

   • 좌측 기준 올림으로 짝수 맞추기

2. 좌우 px값 다를 때 :

   • 큰 값 기준으로 올림으로 맞추기

3. 이미지 export :

   • 이미지 확장자는 .png로 통일

4. 미디어 쿼리 사용

5. 마진상쇄 flex 에서는 마진상쇄가 일어나지 않으니 고려하지 않아도 된다. flex가 아니라면 밑의 사항 지키기 자식 요소는 margin-top 만 사용한다. 부모 요소는 padding 으로 조절, margin 사용하지 않는다. 빈 요소는 height , min-height , max-height 셋 중 하나를 준다.

6. 상황에 따른 적절한 단위 사용

7. rem 단위

   • 폰트사이즈, 마진, 패딩.

8. px 단위

   • 브라우저 크기 상관없이 정확히 고정된 사이즈여야 할 때.
     • border-radius, border-line

9. 백분율(%) 단위

   • 가로 비율에 따른 반응형에 사용한다.(부모 요소의 크기에 영향을 받음)
   • 이미지에 사용.
     • 너비를 주고, 세로는 auto로 하여 종횡비를 맞춰 늘어나고 줄어들게 한다.(global style에 적용되어있다.)
   • vh(viewport height) 단위
     • 세로 비율에 따른 반응형에 사용한다.(보여지는 브라우저 화면에 영향을 받음)

10. float, flex, grid

    • 주 레이아웃은 flex로 처리한다.
    • float와 grid는 사용을 지양한다.