변수명, 함수명을 고민을 우선적으로 하되, 주석이 필요한 경우는 어떤 역할을 하는지 다른 사람이 이해할 수 있도록 작성하자

만약 해야할 사항이 있다면 // TODO: 주석으로 해야할 내용을 표시해두자

컴포넌트 파일의 확장자는 .tsx,로 정한다

변수/함수명은 20자 미만, 주석으로 변수 설명

1. 변수/함수명은 이해할 수 있을 정도로 충분히 고민해봐야 합니다.

   ex) isLoading (x), isUserDataLoading (o)

2. 대부분의 경우 카멜 케이스를 사용해야 합니다.

   // Bad
   const is_snake_case = 'Bad';
   
   // Good
   const camelCase = 'Good';
   

3. 상수는 영문 대문자 스네이크 표기법을 사용합니다.

   상수라 함은 변하지 않는 고정적인 값을 의미함 (예를 들면 픽셀값 등…)

   const SYMOBLIC_CONSTANTS
   

4. 클래스 생성자 / 생성자 함수는 대문자 카멜 케이스를 생성합니다.

   // 클래스
   class ClassName {}
   
   // 생성자 함수
   function Person(){} 
   

5. URL, HTML 같은 범용적인 대문자 약어는 대문자 그대로 사용합니다.

   const parseHTML = () => {}
   const parseXML = () => {}
   

이벤트 핸들러명 규칙

1. 아래의 예시처럼 handle 으로 시작하도록 한다.

   // Good
   const handleClick
   
   // Bad 
   const clickHandler
   const onClick
   const onSubmit
   const onClickHandler
   

전역 변수는 되도록 사용하지 않습니다.

변수 선언 시, var는 절대 사용하지 않도록 합니다. 되도록 const를 사용하되 부득이한 경우 let을 사용하도록 합니다.

외부 모듈과 내부 모듈을 구분지어 import 합시다.

1. 다운로드 받은 패키지 모듈과 내부에서 만든 모듈을 구분해서 가져오도록 합시다.

   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';
   

배열과 객체는 리터럴로 선언합니다.

// 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'
};

객체나 배열을 사용할 때, 되도록 불변성을 지키면서 작성하도록 합시다.

spread 연산자나 lodash, immer 라이브러리 등을 활용할 것!

const hanSeo = [ 1, 2, 3]
const geonHui = hanSeo(x)
const geonHui = [...hanSeo]

const geonHui[0] = 10000

const hanSeo[0] = 1 (x)
const hanSeo[0] = 10000(o)

함수 표현식 대신 화살표 함수를 사용합니다.

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

// 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;
});

객체의 프로퍼티에 접근할 때는 Destructuring을 이용합니다.

// Bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// Bad
const first = arr[0];
const second = arr[1];

// Good
function getFullName(obj) {
  const {firstName, lastName} = obj;

  return `${firstName} ${lastName}`;
}

// Good
const [first, second] = arr;

// Good
function getFullName({firstName, lastName}) {
  return `${firstName} ${lastName}`;
}

비교시에 === 와 !== 연산자만 사용합시다.

==와 !=는 암묵적 캐스팅으로 인해 버그가 발생하기 쉬워지기 때문입니다.