클린코드 자바스크립트[12] 코드 스타일

공백

공백도 코드 작성의 일부이다.

코드의 구조를 한눈에 파악하기 쉽도록 아래처럼 구성한다. (각 구성 사이에 한 줄씩 띄어준다.)
1. 선언
2. 로직
3. 반환

Eslint의 padding-line-between-statements 를 사용하면 공백을 미리 설정해둘 수 있다.

Indent depth

들여쓰기는 최대 2 depth 정도로 구성한다.
(depth가 너무 깊어지면 코드를 해석하기가 어려워진다.)

depth를 줄이는 방법

• 의식적으로 코드를 작성하는 방법

1. Early return
2. Async await
3. 고차함수
4. 함수를 나누고 추상화하기
5. 메서드 체이닝

• 도구를 사용해서 통일하는 방법

1. Editer config로 indent size 통일하기
2. Prettier 에서 tab width 정의
3. Eslint에서 indent 정의

스타일 가이드

네이밍 컨벤션을 포함하는 규칙을 위한 가이드라인으로 하나의 팀 혹은 집단을 위해 존재한다. (즉 협업에 큰 도움을 주기 위함)

스타일 가이드를 잘 활용하면 아래와 같은 이점이 있다.

• 서로를 이해하기 위한 시간 절약
• 코드 품질 향상
• 일관성 유지
• 가독성 향상
• 유지보수 용이성

유명한 스타일 가이드로는 아래와 같은 것들이 있다.

• Redux style guide
• Google style guide
• Js standard guide**
• Airbnb js style guide
• rushstack style guide

에어비엔비 Eslint 참조하고 Eslint custom 해보기!