코딩 컨벤션

💻 Javascript 코딩 컨벤션

목차

1. 명명규칙
   • 파일명
   • 네이밍
   • 식별자 유형별 규칙
2. 들여쓰기
3. 문장의 종료
4. 전역 변수
5. 선언과 할당
   • 변수
   • 배열과 객체
   • 함수
   • 화살표 함수
   • Promise Executor 함수
   • Destructuring
   • 템플릿 문자열
6. 클래스와 생성자
7. 모듈
8. 블록 구문
9. 조건 확인하기
10. 반환하기
11. 순회하기
12. 콜백 함수의 스코프
13. 주석
14. 공백

문서 정보

버전	일자	이력사항	작성자
v1.0	2020-11-16	초안 작성	김민섭, 박재윤, 윤영우, 최홍일

• 본 문서는 TOAST 코딩 컨벤션과 Google 코딩 컨벤션을 참조하여 작성하였다.

코딩 컨벤션

명명규칙

파일명

• 기본: lowercase(전부 소문자)

• 단어가 섞일 경우: dash(-)

  • ex) issue tracker인 경우

    issue-tracker

• 파일별 기능 구분 시: dot(.)

  • ex) issue-tracker의 컨트롤러, 서비스 등을 표현할 경우

    issue-tracker.controller issue-tracker.service

• 리액트 컴포넌트 파일 및 폴더: UpperCamelCase

네이밍

• 의미가 없거나 약어가 모호한 것은 쓰지 말자. ex) err, pc는 x
• (지역 변수 or private 변수)명은 '_'로 시작한다.
• URL, HTML 같은 범용적인 대문자 약어는 대문자 그대로 사용한다.

식별자 유형별 규칙

• Pacakage names : lowerCamelCase
• Method names : lowerCamelCase
• Class names : UpperCamelCase
• Enum names : UpperCamelCase Enum 은 열거형 으로 클래스와 유사하게 작성된다.
• Constant names ( 상수 ) : CONSTANT_CASE

들여쓰기

• space 2번으로 들여쓰기를 한다.

문장의 종료

• 한 줄에 하나의 문장만 허용하며, 문장 종료 시에는 반드시 세미콜론(;)을 사용한다.

전역 변수

• 암묵적 전역 변수를 사용하지 않는다. (최대한 지양하자)

선언과 할당

변수

• 값이 변하지 않는 변수는 const를, 값이 변하는 변수는 let을 사용하여 선언한다. var는 절대로 사용하지 않도록 한다.
• const를 let 보다 위에 선언한다.
• const와 let은 사용 시점에 선언 및 할당을 한다.
• 외부 모듈과 내부 모듈을 구분하여 사용한다.

const lodash = require('lodash');
const $ = require(jquery);
const handlebars = require('handlebars');
const d3 = require('d3');

const pluginFactory from '../../factories/pluginFactory';
const predicate from '../../helpers/predicate';
const raphaelRenderUtil from '../../plugins/raphaelRenderUtil';

• 자기 참조 할당은 하지 않는다.

// 참고 ESLint - no-self-assign

// Bad
foo = foo;

[a, b] = [a, b];

[a, ...b] = [x, ...b];

({a, b} = {a, x});

// Good
foo = bar;

let foo = foo;

[foo = 1] = [foo];

배열과 객체

• 배열과 객체는 반드시 리터럴로 선언한다.

// Bad
const emptyArr = new Array();
const arr = new Array(1, 2, 3, 4, 5);

// Bad - 객체 생성자 사용
const emptyObj = new Object();
const obj = new Object();

// Good
const emptyArr = [];
const arr = [1, 2, 3, 4, 5];

// Good
const emptyObj = {};
const obj = {
  pro1: 'val1', 
  pro2: 'val2'
};

• 배열 복사 시 순환문을 사용하지 않는다.

const len = items.length;
let i;

// Bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// Good
const itemsCopy = [...items];

• 배열의 요소중 하나라도 줄 바꿈이 있다면 배열 안의 요소는 일관되게 모두 줄 바꿈을 해주어야 한다.
• 객체의 프로퍼티가 1개인 경우에만 한 줄 정의를 허용하며, 2개 이상일 경우에는 개행을 강제한다.
• 객체 리터럴 정의 시 콜론 앞은 공백을 허용하지 않으며 콜론 뒤는 항상 공백을 강제한다.
• 객체의 메서드 표현 시 축약 메소드 표기를 사용한다.

// Bad
const atom = {
  value: 1,

  addValue: function(value) {
    return atom.value + value;
  }
};

// Good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  }
};

• 메서드 문법 사용 시 메서드 사이에 개행을 추가한다.

함수

• 함수 생성자를 사용하여 선언하지 않고, 함수는 함수 표현식으로 선언한다.
• 함수는 사용 전에 선언해야 하며, 함수 선언문은 변수 선언문 다음에 오도록 한다.

화살표 함수

• arrow function의 매개변수는 1개여도 괄호를 사용한다.
• 함수 표현식 대신 화살표 함수를 사용한다.
• 암시적 반환을 최대한 활용한다.
• 암시적 반환을 사용할 경우 함수 본문 전에 개행을 하지 않는다.

Promise Executor 함수

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

Destructuring

• 오브젝트의 프로퍼티에 접근할 때는 Destructuring을 이용한다.

템플릿 문자열

• 변수 등을 조합해서 문자열을 생성하는 경우 템플릿 문자열(백틱)을 이용한다.

클래스와 생성자

• class와 extends를 이용해서 객체 생성 및 상속을 구현한다.
• 필요한 생성자는 우선적으로 선언해둔다. (초기 값이 없는경우 undefined 로 선언한다.)

모듈

• FE 개발에서는 항상 import와 export를 이용한다. (require는 사용하지 않는다.)
• wildcard import는 사용하지 않는다.
• import문으로부터 직접 export하지 않는다.

블록 구문

• 한 줄짜리 블록일 경우라도 {}를 생략하지 않으며 명확히 줄 바꿈 하여 사용한다.
• 키워드와 조건문 사이에 빈칸을 사용한다.
• do-while문 사용 시 while문 끝에 세미콜론을 쓴다.
• switch-case 사용 시 첫 번째 case문을 제외하고 case문 사용 이전에 개행한다.
• switch-case 사용 시 각 구문은 break, return, throw 중 한 개로 끝나야 하며 default문이 없으면 // no default 표시를 해준다.

조건 확인하기

• 삼중 등호 연산자인 ===, !==만 사용한다.

반환하기

• 함수 내에서 반환은 한 번만 한다. 특정 값을 반환해야 하는 경우, 함수 맨 마지막에서 한 번만 반환한다. 단, 예외로 빠져나가는 경우는 제외한다. 코드를 예측하기 쉬우며 흐름이 간결한 함수를 작성할 수 있다.
• return문 바로 위는 한 칸 비워 놓는다.

// Bad
function getResult() {
  ...
  if (condition) {
    ...
    return someDataInTrue;
  }
  ...
  return someDataInFalse;
}

// Allow
function foo(isValid) {
  ...
  // 예외처리로 바로 빠져나감
  if (!isValid) {
    return;
  }
  ...
  
  return someDataInTrue;
}

// Good
function getResult() {
  let resultData;
  ...

  if (condition) {
    ...
    resultData = someDataInTrue;
  } else {
    ...
    resultData = someDataInFalse;
  }

  return resultData;
}

순회하기

• 반복문 사용은 일반화된 순회 메서드 사용을 권장한다.
• 반목문은 상황에 맞는 것을 선택한다. (for문, forEach 등)
• 반복을 위한 변수는 반복문에 선언한다.

콜백 함수의 스코프

• 콜백 등 익명 함수를 사용하는 경우, 최대한 클로저 사용을 피하고 각 스코프에 알맞게 변수를 선언한다.

주석

• 코드와 관련된 주석은 달지 않는다. 코드를 통해 최대한 내용을 표현하는 것에 집중한다.
  • 단, 경고를 위한 주석이나 코드의 출처를 남기는 주석은 제외한다.
• TODO 주석은 작성이 가능하나 아래의 양식을 꼭 지켜야함.
  • // TODO: 내용
  • 개발이 완료되면 바로 지운다.

공백

• 키워드, 연산자와 다른 코드 사이에 공백이 있어야 한다.
• 시작 괄호 바로 다음과 끝 괄호 바로 이전에 공백이 있으면 안 된다.
• 콤마 다음에 값이 올 경우 공백이 있어야 한다.