코딩컨벤션의 목적
컨벤션 사용의 첫번째 목적은 서로의 코드를 보고 이해하기 쉽도록 하는 것이고, 두번째는 버그를 최소화 할 수 있도록 하는 것입니다. 가장 기본적인 것들만 컨벤션으로 정했습니다. react-create-app 의 ESLint 설정을 기본으로 아래 내용들을 지켜주시면 됩니다.
들여쓰기와 개행
space와 tab을 섞어서 사용하지 않는다 ⇒ tab 사용
문장의 종료
한 줄에 하나의 문장만 허용하며, 문장 종료 시에는 세미콜론(;)을 사용한다.
명명 규칙
1.
카멜 케이스를 사용한다.
2.
예약어를 사용하지 않는다.
3.
생성자 이름은 대문자 카멜 케이스을 사용한다.
class ConstructorName {
...
};
JavaScript
복사
4.
URL, HTML 같은 범용적인 대문자 약어는 대문자 그대로 사용한다.
parseHTML
parseXML
JavaScript
복사
5.
암묵적 전역 변수를 사용하지 않는다. 전역 변수의 사용은 최대한 지양한다.
6.
변수의 명명은 기능 중심으로 고민해본다.
선언과 할당
변수
값이 변하지 않는 변수는 const를, 값이 변하는 변수는 let을 사용하여 선언한다. var는 절대로 사용하지 않도록 한다.
const를 우선하여 선언하면 "이 변수는 결코 재할당되지 않습니다"라고 알려줌으로써 코드를 읽기 쉽게 하여 유지보수에 도움이 된다. let은 블록 범위로 할당되기 때문에 다른 많은 프로그래밍 언어에서와 같은 규칙으로 적용되어 실수를 피하는데 도움이 된다.
배열과 객체
배열과 객체는 반드시 리터럴로 선언한다.
리터럴 표기법은 생성자 함수보다 짧고 명확하며 실수를 줄일 수 있다.
// 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'
};
JavaScript
복사
함수
함수 생성자를 사용하여 선언하지 않는다.
문자열로 전달되는 파라미터가 수행 시점에 eval로 처리되어 실행 속도가 느려진다.
템플릿 문자열 (템플릿 리터럴)
변수 등을 조합해서 문자열을 생성하는 경우 템플릿 문자열을 이용한다.
자바스크립트에서 문자열을 보다 쉽고 명확하게 다룰 수 있어 코드 복잡도가 낮아진다.
// Bad
function sayHi(name) {
return 'How are you, ' + name + '?';
}
// Bad
function sayHi(name) {
return ['How are you, ', name, '?'].join();
}
// Bad - 일반적인 경우, 홑따옴표를 사용
function sayHi(name) {
return `How are you name?`;
}
// Good
function sayHi(name) {
return `How are you, ${name}?`;
}
JavaScript
복사
모듈
1.
항상 import와 export를 이용한다.
다른 모듈 로드 방법과 혼용하여 사용하면 코드의 일관성이 없어진다 ⇒ 수업에서 사용하는 방법 사용
// Best
import {es6} from './AirbnbStyleGuide';
export default es6;
// Bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;
// Good
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;
JavaScript
복사
2.
export 위치 통일을 위해 컴포넌트 생성시 rfc 를 사용한 틀을 기본으로 사용한다.
3.
최상위 태그를 한 번에 알아 볼 수 있도록 리턴문을 감싸는 최상위 태그는 <></>로한다.
조건 확인하기
삼중 등호 연산자인 ===, !==만 사용한다.
==이나 !=는 암묵적 캐스팅으로 타입에 관계없이 판단되어 조건문의 의도를 파악하기 어렵고 버그로 이어진다.
주석
1. 주석은 설명하려는 구문에 맞춰 들여쓰기 한다.
2.
설명하려는 구문의 위에 작성한다.
// Bad
function someFunction() {
...
// statement에 관한 주석
statements
}
// Good
function someFunction() {
...
// statement에 관한 주석
statements
}
JavaScript
복사
3.
console.log코드는 commit 전에 다른 사람과 중복되지 않게 삭제나 주석 처리 한다.
4.
기능이 구현 되면 console.log같은 기능과 관계 없는 주석들은 삭제해준다.
참고
