Coding Style
코드는 분명하고 읽기 쉬워야 합니다. 정확하고 인간이 읽기 쉬운 코드로 복잡한 업무를 수행하는 코드를 작성하는 것이야말로 프로그래밍의 기술입니다.
Syntax
아래 그림에는 코드 작성 시의 규칙이 나열되어 있습니다.
이제 이 법칙에 대해 하나하나 알아보도록 합시다. 알아두어야 할 것은 이것은 반드시 따라야 하는 것이 아니라 단지 권고되는 스타일일 뿐이라는 점입니다.
Curly Braces
자바스크립트 프로젝트에서 괄호는 새 줄이 아닌 라인 끝에 한 칸 띄워서 붙이는 Egyptian 스타일을 사용합니다.
if (condition) {
// do this
// ...and that
// ...and that
}
| cs |
조건문 다음에 오는 문장이 한 줄일 때가 미묘한 경우입니다. 그 경우에도 늘 괄호를 사용해야 합니까? 사용한다면 어디에?
가독성을 고려한다면 아래와 같은 경우들을 생각해 볼 수 있습니다.
요약하자면,
아주 짧은 코드의 경우 한 줄로 쓰는 것은 허용됩니다. 예) if (cond) return null
그러나 괄호를 사용하여 다른 줄에 쓰는 것이 권장됩니다.
라인 길이
가로로 너무 길면 읽기가 어려우므로 적당히 끊어야 합니다. 팀원 간에 합의된 길이를 정하는 것이 중요한데, 통상 80-120자 정도로 합니다.들여 쓰기
가로, 세로의 두 측면에서 생각해 볼 수가 있습니다.가로방향 들여쓰기: 2 또는 4 스페이스
가로방향 들여쓰기법은 스페이스와 Tab키 사용으로 오래동안 양분되어 왔습니다. 현재는 탭 키가 아닌 스페이스를 이용하는 것으로 정리되었다고 할 수 있습니다.탭 키보다 스페이스를 사용하면 보다 유연하게 들여쓰기를 사용 가능해집니다.
예를 들어 아래처럼 괄호에 맞춰서 파라미터를 쓸 수가 있습니다.
show(parameters,
aligned, // 5 spaces padding at the left
one,
after,
another
) {
// ...
}
| cs |
세로방향 띄어쓰기: 논리 구조에 따라 코드를 나누는 빈 줄 삽입
단순한 함수일지라도 내부 논리 구조에 따라 구분이 가능합니다. 아래의 예를 보면 변수 초기화, 메인 루프, 결과 리턴의 세 가지 구조가 빈 줄에 의해 분리되어 있습니다.
function pow(x, n) {
let result = 1;
// <--
for (let i = 0; i < n; i++) {
result *= x;
}
// <--
return result;
}
| cs |
이는 가독성을 위한 것으로 일반적으로 줄 띄어쓰기 없이 9줄 이상을 쓰는 것은 권장되지 않습니다.
세미 콜론
세미 콜론은 생략 가능하긴 하지만 각 문장 끝에 가급적 붙여줍니다. 이는 의도치 않은 에러를 피하기 위한 것입니다.더 숙달되면 StandardJS처럼 세미콜론을 안 붙여도 좋겠지만 그 수준이 되기 전에는 세미콜론을 붙이도록 합시다.
Nesting Levels
괄호를 지나치게 중첩시키는 것은 좋지 않습니다. 추가의 괄호를 피하기 위해서 continue 지시어를 적절히 사용하는 것도 도움이 됩니다.
for (let i = 0; i < 10; i++) {
if (cond) {
... // <- one more nesting level
}
}
| cs |
for (let i = 0; i < 10; i++) {
if (!cond) continue;
... // <- no extra nesting level
}
| cs |
if/else와 return으로도 비슷한 경우를 들 수 있습니다.
Option 1:
function pow(x, n) {
if (n < 0) {
alert("Negative 'n' not supported");
} else {
let result = 1;
for (let i = 0; i < n; i++) {
result *= x;
}
return result;
}
}
| cs |
Option 2:
function pow(x, n) {
if (n < 0) {
alert("Negative 'n' not supported");
return;
}
let result = 1;
for (let i = 0; i < n; i++) {
result *= x;
}
return result;
}
| cs |
예외가 되는 케이스인 0을 초반에 미리 처리해 버렸기 때문에 두번째가 더 가독성이 좋아집니다. 그리고 추가의 괄호 필요없이 메인 코드 내용을 진행할수 있습니다.
함수의 위치
코드 내에 몇개의 헬퍼 함수가 작성되는 경우가 있습니다. 이 때 이 함수들의 위치를 결정하는 세가지 방법이 있습니다.1. 함수들을 메인 코드 위에 위치시킨다.
// function declarations
function createElement() {
...
}
function setHandler(elem) {
...
}
function walkAround() {
...
}
// the code which uses them
let elem = createElement();
setHandler(elem);
walkAround();
| cs |
2. 코드 먼저, 함수는 뒤에
// the code which uses the functions
let elem = createElement();
setHandler(elem);
walkAround();
// --- helper functions ---
function createElement() {
...
}
function setHandler(elem) {
...
}
function walkAround() {
...
}
| cs |
3. 혼합형
대개는 2번을 권장합니다. 이는 우리가 코드를 읽을 때에 먼저 대략적으로 전체 코드가 무엇을 하는 것인지 알아야 하기 때문입니다. 그 이후 세부적으로 각각의 코드가 어떻게 되어 있는지 보는 것이 순서입니다.
스타일 가이드
스타일 가이드는 우리가 코드를 작성할 때, 따옴표를 어디에 쓰는지, 들여쓰기에 몇개의 스페이스를 사용하는지 등의 세부적인 룰을 제시합니다.팀원 모두가 같은 스타일을 사용한다면 누가 작성했는지와 관련 없이 코드가 일체감을 가질 수 있습니다.
직접 자신들만의 코딩 스타일을 만드는 것도 좋겠지만 그간 시행착오를 거친 좋은 선택지들이 있으니 그 중에서 고르는 것도 좋은 방법입니다. 그 예를 아래에 제시합니다.
아직 초보라면 이 글의 가장 상단에 제시한 cheatsheet로부터 시작해 보시고, 차차 자신만의 스타일을 선택하시면 되겠습니다.
Automated Linters
Linter란 자동으로 코딩 스타일을 체크하고 리팩토링 방향을 제시해 주는 툴입니다.이것을 사용함에 있어 좋은 점은 코딩 스타일 체크만으로도 버그를 일부-예를 들어 함수 혹은 변수 철자 같은- 잡을 수 있다는 것입니다. 이런 점 때문에 코딩 스타일을 고수하지 않더라도 linter를 설치하는 것이 권장됩니다.
가장 잘 알려진 것으로는
모두 훌륭하며 널리 알려진 에디터에는 플러근인으로서 사용 가능합니다.
예를 들어 ESLint를 사용하려면 다음의 과정을 따라야 합니다.
1. Node.JS 설치
2. npm install -g eslint 를 커맨드 입력하여 ESLint 설치(npm은 자바스크립트 패키지 인스톨러입니다)
3. .eslintrc 라는 config 파일을 해당 자바스크립트 루트폴더에 생성해 줍니다.
4. 에디터에 ESLint 플러그인을 설치/활성화 합니다.
.eslintrc 파일의 내용은 아래와 같습니다.
{
"extends": "eslint:recommended",
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"no-console": 0,
},
"indent": 2
}
| cs |
ESLint 설치에 대해 더 자세한 내용은 여기를 참조하시기 바랍니다.
안녕하세요. 모던 JS 튜토리얼 한국어 프로젝트 운영자입니다. 해당 프로젝트는 다음의 라이센스를 준수하고 있어서, 가능하시면 글의 출처를 명시해주시기 바랍니다. 컨텐츠 전파에 도움 주셔서 감사합니다.
답글삭제- https://github.com/javascript-tutorial/ko.javascript.info/blob/master/LICENSE.md