Skip to content

Coding Convention

Jump to bottom
JIAH LEE edited this page Aug 14, 2022 · 3 revisions

기본 스타일

들여쓰기

  • space와 tab을 섞어서 사용하지 않는다.
  • 2칸으로 통일한다.


HTML

웹 표준 및 접근성

  • W3C, validator를 통과할 수 있도록 웹 표준에 맞게 작성한다.
  • 시맨틱 태그 사용 및 접근성을 고려하도록 노력한다.

클래스명

  • kebab-case를 사용한다.
  • 기능-용도순으로 명명한다.
// 서치용 헤더 
.header-search

// sns 리스트 
.list-sns

// 랭귀지선택 버튼
.btn-lang

따옴표

  • 속성값에는 반드시 큰따옴표를 사용한다.
<a href="/" class="home">Home</a>


JavaScript

명명 규칙

  • 일반적인 변수, 함수: camelCase

    let myVar = 1;

const myArr = [1, 2, 3];

function myFunction() {

}

  • 상수: UPPER_SNAKE_CASE

    const MAX_NUM = 10;

  • 컴포넌트: PascalCase

    const Header = () => {

}

선언과 할당

  • 값이 변하지 않는 변수는 const, 변하는 변수는 let을 사용하여 선언한다.
  • var는 사용하지 않는다.

배열과 객체

  • 배열과 객체는 반드시 리터럴로 선언한다.
    리터럴 표기법은 생성자 함수보다 짧고 명확하며 실수를 줄일 수 있다.

    참고 [ESLint - no-new-object](https://eslint.org/docs/latest/rules/no-new-object)

// Bad
const emptyArr = new Array();
const emptyObj = new Object();

// Good
const emptyArr = [];
const emptyObj = {};

  • 배열 복사 시에는 전개 연산자를 사용한다.
    전개 연산자를 사용하면 좀 더 명확하게 정의할 수 있고 가독성이 좋아진다.

    참고 [mdn – Spread Operator](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

const len = items.length;
let i;

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

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

전역변수

전역변수를 무분별하게 사용하지 않는다.
암묵적 결합, 긴 생명 주기, 스코프 체인 상에서 종점에 존재, 네임스페이스 오염 등의 문제가 있다.

함수

  • 함수 생성자로 선언하지 않는다.
    문자열로 전달되는 파라미터가 수행 시점에 eval로 처리되어 실행 속도가 느려진다.

    // Bad - 함수 생성자 사용
const doSomething = new Function('param1', 'param2', 'return param1 + param2;');

// Good - 함수 선언식 사용
function doSomething(param1, param2) {
  return param1 + param2;
}

// Good - 함수 표현식 사용
const doSomething = function(param1, param2) {
  return param1 + param2;
};

  • 함수는 사용 전에 선언하며 선언문은 변수 선언문 다음에 오도록 한다.

    // Good
const sum = function(param1, param2) {
  return param1 + param2;
};
const sumedValue = sum(1, 2);

  • 함수 표현식 대신 화살표 함수를 사용한다.
    화살표 함수는 별도의 this 바인딩 없이 상위 컨텐스트에 바인딩되기 때문에 함수 표현식보다 혼란이 적으며 덜 장황하고 추론이 쉽다.

    참고 [ESLint - prefer-arrow-callback](https://eslint.org/docs/latest/rules/prefer-arrow-callback)

// Bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// Good
[1, 2, 3].map(x => {
  const y = x + 1;
  return x * y;
});

  • 화살표 함수의 파라미터가 하나이면 괄호를 생략한다.
    파라미터가 하나일 때 괄호를 생략하면 화살표 함수의 장점을 살릴 수 있다.

    참고 ESLint - arrow-parens

// Bad
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

// Good
[1, 2, 3].map(x => x * x);

// Good
[1, 2, 3].reduce((y, x) => x + y);

  • 암시적 반환을 최대한 활용한다.
    함수의 본체가 하나의 표현식이면 중괄호를 생략하고 암시적 반환을 사용할 수 있다. 그 외에는 return문을 명시해야 한다.

    // Bad
[1, 2, 3].map(number => {
  const nextNumber = number + 1;
  `A string containing the ${nextNumber}.`;
});

// Good - 암시적 return을 사용
[1, 2, 3].map(number => `A string containing the ${number + 1}.`);

  • 암시적 반환을 사용할 경우 함수 본문 전에 개행하지 않는다.
    실수로 인한 return문 누락과 암시적 반환을 구별하는데 도움이 된다.

    // Bad
(foo) =>
  bar;

(foo) =>
  (bar);

(foo) =>
  bar =>
    baz;

// Good
(foo) => bar;

(foo) => (bar);

(foo) => bar => baz;

(foo) => (
  bar()
);

템플릿 문자열

변수 등을 조합해서 문자열을 생성하는 경우 템플릿 문자열을 이용한다. 문자열을 보다 쉽고 명확하게 다룰 수 있어 코드 복잡도가 낮아진다.

// Bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// Good
function sayHi(name) {
  return `How are you, ${name}?`;
}

블록 구문

한 줄짜리 블록일 경우라도 {}를 생략하지 않으며 명확히 줄바꿈하여 사용한다. 한 줄짜리 블록일 경우 {}를 생략할 수 있지만 코드 구조를 애매하게 만든다. 당장은 두 줄을 줄일 수 있지만 이후 오류 발생 확률이 높아 잠재된 위험 요소가 된다.

// Bad
if(condition) doSomething();

// Good
if (condition) {
  ...
}

조건 확인하기

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

주석

  • 여러 줄 주석을 작성할 경우 *의 들여쓰기를 맞춘다.
// Bad - '*' 표시의 정렬
/*
* 주석내용
*/

// Good - '*' 표시의 정렬을 맞춘다
/*
 * 주석내용 
 */
  • 코드 리뷰를 위해 주석을 사용할 경우 아래 단어를 사용한다.
CHECK:: 확인사항
HELP:: 논의가 필요한 사항
ERROR:: 에러로 인한 수정이 필요한 부분  
FIX:: 리팩토링이 필요한 부분

출처

UI TOAST FE-GUIDE

Clone this wiki locally