Skip to content

Code Convention (FE)

Jump to bottom
Ki-jong Song edited this page Aug 14, 2023 · 2 revisions

기본 스타일 (Basic Style)

들여쓰기 (Indentation)

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

HTML

웹 표준 및 접근성

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

클래스명 (Class naming)

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

// sns 리스트 
.list-sns

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

TypeScript

명명 규칙

  • 일반적인 변수, 함수: camelCase
  • 상수: UPPER_SNAKE_CASE
  • 컴포넌트: PascalCase

선언

  • 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];

전역변수

  • 전역변수를 무분별하게 사용하지 않는다.

함수

  • 화살표 함수를 사용한다.
  • 화살표 함수는 별도의 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;
});

템플릿 문자열

  • 변수 등을 조합해서 문자열을 생성하는 경우 템플릿 문자열을 이용한다.
// Bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

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

등위 연산자

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

주석

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

출처

UI TOAST FE-GUIDE

Clone this wiki locally