기본 코딩 컨벤션

www.notion.so/kakasoo/1-2ebc8cbd7384425ca9d55e3683ba0ba3

1. 기본 코딩 컨벤션

 

이 컨벤션은 NHN과 Toast의 컨벤션을 보고 정리한 것입니다, 둘은 NHN 계열의 자료로, 전자는 2009년, 후자는 2019년에 정리된 문서입니다.

문서의 맨 마지막 참고자료에 두 컨벤션을 게시하였습니다.

기본 코딩 컨벤션

1. 네이밍 규칙
   1. 이름은 소문자, 숫자, 언더스코어(_)의 조합으로 작성하며, 시작은 소문자로만 작성한다.
   2. id 및 class 네이밍 규칙
      1. PC 화면에서의 HTML을 작성할 때에는 아래와 같이 레이아웃 약속어를 따른다.
      2. 카멜 표기법을 원칙으로 한다.
         1. 클래스 선언 시에는 첫 글자를 대문자로 한 카멜 케이스를 사용한다.
   3. 상수는 영문 대문자 스네이크 표기법을 사용한다.
   4. 배열의 이름은 복수형으로 만든다.
   5. 정규표현식의 첫 글자는 'r'로 시작한다.
   6. 함수는 동사와 명사의 조합으로 하되, 형용사를 넣지 않는다.
   7. 이벤트 핸들러는 'on'으로 시작한다.
   8. 반환 값이 boolean형인 함수는 'is'로 시작한다.
   9. private 변수명은 언더스코어(_)로 시작한다.
   10. 범용적인 대문자 약어 (ex. URL, HTML)등은 대문자 그대로 사용한다.
2. 들여쓰기 : 사용자의 개발 환경에 따라서 들여쓰기가 다르게 보일 수 있으므로 Tab과 Space 중 하나만을 사용함을 원칙으로 한다.
3. 문장종료 : 세미콜론(;)을 필수로 한다.
4. 전역변수
   1. 절대 사용하지 않는다.
   2. 암묵적 전역 변수를 사용하지 않는다. (ex. let a = b = 0; 이라고 작성 시 b는 전역)
5. 선언과 할당

   1. 변수

      1. const는 let보다 상단에 작성한다. → 가독성이 높아진다.
         1. var는 사용하지 않는다. → var에 관한 모든 규칙은 작성하지 않는다. (ES5 문법)
      2. const와 let은 사용 시점에 선언 및 할당한다. = 그룹화
      3. 선언과 할당을 동시에 하는 변수를, 선언만 하는 변수보다 먼저 선언한다.

   2. 배열과 객체

      1. 외부 모듈과 내부 모듈을 구분하여 사용한다.

         1. 블록 스코프 밖에서 변수를 선언하지 않는다.
         2. 외부 모듈과 내부 모듈을 변수 참조할 때에는 선언 사이에 공백 을 둔다.

      2. 배열과 객체는 생성자 함수를 사용하지 않고 리터럴로 선언한다.

      3. 복잡한 객체를 복사할 때에는 전개 연산자를 사용한다.

         const itemsCopy = [...item];

      4. 객체의 프로퍼티가 1개인 경우에만 한 줄로 정의하고, 2개 이상인 경우에는 개행한다.

   3. 함수

      1. 함수 생성자는 사용하지 않는다. → 함수 생성자를 사용하면 수행 시점에 eval로 처리되어 실행 속도가 느려진다.

      2. 메서드와 메서드 사이는 개행한다.

      3. 즉시 실행 함수는 혼선을 줄이기 위해 한 가지 방식으로만 사용하고, 이견이 없을 시 아래 예시와 같이 작성한다.

         (function() { ... }());

   4. 화살표 함수

      1. 함수 표현식 대신 화살표 함수를 사용한다. → 별도의 this 바인딩 없이 상위 컨텍스트에 바인딩되기 때문에 추론이 쉽다는 장점이 있다.

         1. 화살표 함수의 파라미터가 1개일 때에는 괄호를 생략한다.

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

         3. 클래스 내부에서 사용할 경우에는 이견이 있을 수 있다. 클래스 내부에서 화살표 함수를 쓸 경우 프로토타입이 되어 객체마다 메모리를 사용한다.

            class TestObj { constructor() {} a () { console.log('a'); } b = () => console.log('b'); } let obj1 = new TestObj(); let obj2 = new TestObj(); obj1.a === obj2.a // True obj2.b === obj2.b // false

   5. Promise Exeutor 함수

      1. Promise Executor 함수에는 async 함수를 사용하지 않는다.

   6. Destructuring

      1. 오브젝트의 프로퍼티에 접근할 경우 구조분해할당(Destructuring)을 사용한다.

         1. 새로운 이름으로 정의할 경우에는 사용하지 않아도 된다.

            // GOOD const changeFirstName = user.firstName; const {firstName: changeFirstName} = user;

   7. 템플릿 문자열

      1. 변수 등을 조합한 문자열을 생성할 경우 템플릿 문자열을 사용한다.
6. 클래스와 생성자
   1. class와 extends를 활용하여 객체 생성 및 상속을 구현한다.
   2. mixin을 사용할 때에만 prototype을 사용한다.
7. 모듈
   1. 항상 import와 export를 이용한다.
   2. wildcard import ('*')를 사용하지 않는다. (import * as module name은 허용된다.) → 식별자 충돌을 예방한다.
8. 블록구문
   1. 한 줄 짜리 블록이라도 스코프를 사용한다. → 잠재적인 위험 요소를 줄인다.
   2. 키워드와 조건문 사이는 빈칸을 사용한다.
   3. switch문은 cas와 case, deault 사이에 개행을 둔다.
      1. case 마지막에 default문이 없다면 주석으로 표기한다.
9. 데이터형
   1. 미리 약속된 데이터형 확인법을 사용한다. (typeof)
10. 조건확인
    1. 삼중 등호 연산자 ('===', '!==')만 사용한다.
11. 반환하기
    1. 함수에서 반환은 한 번만 한다. 단, 예외처리는 제외한다.
    2. return문 바로 위는 한 칸을 비워 놓는다.
12. 순회하기
    1. 일반화된 순회 메서드를 사용한다. (for문, for of문, for in문, forEach문)
    2. for-in문에서는 hasOwnProperty 반드시 조건 검사를 수행한다. → 상속받은 프로퍼티로 인해 문제를 예방한다.
13. 주석
    1. 주석을 설명하려는 구문에 맞춰서 들여쓰기를 한다.
    2. 여러 줄 주석을 하는 경우 첫 줄과 마지막 줄은 비운다.
    3. 코드를 주석 처리 할 때에는 한 줄 주석을 사용한다.
14. 참고자료
    1. https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf - NHN 코딩 컨벤션 (2009년 당시 네이버)
    2. https://ui.toast.com/fe-guide/ko_CODING-CONVENSION/ - TOAST UI