최대한 간결하고 읽기 쉽게 코드를 작성해야 합니다.
복잡한 문제도 간결하고 읽기 쉽게 만드는 게 기술입니다.
우선 코딩에 무조건 따라야 할 규칙은 없다고 합니다.
(이 글 또한 정답이 아닙니다.)
중괄호
if (condition){
// 코드!
// 코드!!
// 코드!!!
}자바스크립트 프로젝트에서 여는 중괄호 앞에는 공백이 있어야 합니다.
코드가 간단하다면 한 줄로 작성할 수 있지만 위 예시와 같이 가독성을 높이는 게 좋습니다.
코드의 길이
가로로 너무 길게 늘어진다면 여러 줄로 작성하는게 좋습니다.
최대 가로 길이는 같이 일하는 분들과 합의하는게 좋고 일반적으로 80~120자로 제한한다고 합니다.
들여쓰기
- 가로 들여 쓰기
스페이스 두 번 또는 네 번!
개인적으로는 탭(Tab) 키를 사용합니다.
다양한 글을 읽어보니까 탭 보다 스페이스를 사용하는 의견이 많아보입니다.
(탭 보다 스페이스가 들여쓰기를 좀 더 유연하게 사용할 수 있다는 장점이 있다고 얘기합니다.)
hello(Good,
Morning,
Afternoon,
Night,
) {
// 코드!
}- 세로 들여 쓰기
변수 선언, 반복문, 리턴문 사이에 세로 들여쓰기를 해주는 빈줄을 넣어 코드를 분리합니다.
function hello(x, n){
let result = 1;
for(let i = 0; i < n; i++){
result *= x;
}
result = result;
}위 예시에서 볼 수 있듯 let, for, result 사이에 빈줄을 넣어 코드를 분리해 가독성을 높였습니다.
세미콜론
모든 구문의 끝엔 세미콜론을 써주는 것이 좋습니다. 세미콜론을 생략하고 코딩하는 습관을 들이면 에러를 발생시키는 코드를 만들 수 있습니다. 에러를 줄이기 위해서라도 세미콜론을 사용하는 것이 좋습니다.
중첩
가능한 중첩문을 최대한 덜 사용하는 것이 좋습니다.
반복문이 중첩될 경우 깊이가 깊어지면 continue 를 사용하는 것이 좋을 수 있습니다.
개인의 코딩 스타일도 중요하지만 전박적으로 팀 전용 가이드를 따르는 것이 가장 중요합니다.
Google Guide, Airbnb Guide, Standard Guide 등 초보자는 스타일 가이드를 잡고 코딩을 시작하는 것이 좋습니다.
ESLint 를 통해 코드가 스타일 가이드를 준수하고 있는지 자동으로 확인 할 수 있기 때문에 ESLint를 활용을 적극 권장 드립니다.
ESLint 설치 방법
1. Node.js 설치
2. npm i -g eslint
3. 프로젝트 관련 파일이 담긴 폴더에 .eslintrc 파일을 생성
4. .eslintrc 파일에서 원하는 설정을 하면 됩니다.
