[모던 JavaScript 튜토리얼] 3.2 코딩 스타일

23 Jan 2021 • Javascript

모던 JavaScript 튜토리얼을 읽고 정리하였습니다.

코딩 스타일

개발자는 가능한 한 간결하고 읽기 쉽게 코드를 작성해야 한다. 좋은 코드 스타일은 복잡한 문제를 간결하고 사람이 읽기 쉬운 코드로 작성해낼 수 있도록 하는데 큰 도움을 준다.

문법

중괄호

대부분의 자바스크립트 프로젝트에서 여는 중괄호는 이집션(Egyptian) 스타일을 따라 새로운 줄이 아닌 사용하는 키워드와 같은 줄에 작성한다. 여기에 더하여 여는 중괄호 앞엔 공백이 하나 있어야 한다.

if (condition) {
  ...
}

if (condition) doSomething()과 같은 단 한 줄짜리 구문은 중요하게 다뤄야할 에지 케이스이다. 코드가 짧다면 중괄호 없이 한 줄에 쓰는 것도 좋지만 그래도 중괄호를 사용하여 여러줄로 작성하는 것이 가장 가독성이 좋다.

if (n < 0) alert('Power ${n} is not supported');

if (n < 0) {
  alert('Power ${n} is not supported');
}

가로 길이

가로로 길게 늘어진 코드는 가독성이 떨어지므로 여러 줄로 나눠 작성하는 것이 좋다. 긴 문자열을 여러 줄에 나눠 작성하고 싶다면 백틱을 사용하면 된다.

let str = `
  ECMA International's TC39 is a group of JavaScript developers,
  implementers, academics, and more, collaborating with the community
  to maintain and evolve the definition of JavaScript.
`;

들여쓰기

들여쓰기에는 두 종류가 있다.

  • 가로 들여쓰기: 스페이스 두 개 혹은 네 개를 사용해 만듦 가로 들여쓰기는 스페이스 두 개 혹은 네 개를 사용하거나 탭 키를 이용해 만들 수가 있다. 요즘에는 탭 대신 스페이스를 이용하는 것이 더 우위에 있다. 탭 대신 스페이스를 사용하면 들여쓰기 정도를 유연하게 변경할 수가 있다. 아래 코드가 그 예시이다.

    show(parmeters,
     aligned, // 스페이스 다섯개를 사용하여 들여쓰기가 가능하다.
     one,
     after,
     another
) {
  ...
}

  • 세로 들여쓰기: 논리 블록 사이에 넣어 코드를 분리해주는 새 줄 함수 하나에 논리 블록 여러개가 들어갈 수 있는데, 아래 예시에서는 빈 줄을 넣어 각가의 논리 블록을 분리했다.

    function pow(x, n) {
  let result = 1;
  //              <--
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  //              <--
  return result;
}

세미콜론

자바스크립트 엔진에 의해 무시되더라도 모든 구문의 끝엔 세미콜론을 써주는 것이 좋다. 경험이 많은 자바스크립트 개발자라면 StandardJS에서 제시하는 스타일 가이드처럼 세미콜론 없이 코드를 작성할 수도 있으나, 초보 개발자라면 에러를 만들 확률을 줄이기 위해서라도 세미콜론을 사용하는 게 좋다.

중첩 레벨

가능하면 너무 깊은 중첩문은 사용하지 않도록 하자. 반복문을 사용할 때, 중첩문의 깊이가 깊어지면 continue 지시자를 쓰는게 좋은 대안이 될 수도 있다. 혹은 if/else와 return문을 조합해서도 중첩 레벨을 줄일 수도 있다.

함수의 위치

‘헬퍼’ 함수 여러 개를 만들어 사용하고 있다면, 아래와 같은 방법을 통해 코드 구조를 정돈할 수 있다.

  1. 헬퍼 함수를 사용하는 코드 위에서 헬퍼 함수를 모아 선언하기
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

let elem = createElemet();
setHandler(elem);
walkAround();
  1. 코드를 먼저, 함수는 그 당므에 선언하기
let elem = createElemet();
setHandler(elem);
walkAround();

// --- 헬퍼 함수 ---
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}
  1. 혼합: 코드 바로 위에서 필요한 헬퍼 함수 그때그때 선언하기

대개는 두번째 방법으로 코드를 정돈하는 것을 선호한다. 사람들은 이 코드가 무엇을 하는지 생각하며 코드를 읽기 때문에 코드가 먼저 나오는 것이 자연스럽기 때문이다. 이름만 보고도 헬퍼 함수의 역할을 쉽게 유추할 수 있게 헬퍼 함수를 선언했다면 함수 본문을 읽을 필요도 없다.

스타일 가이드

코딩 스타일 가이드는 코드를 어떻게 작성할지에 대한 전반적인 규칙을 담은 문서로, 다음과 같은 내용이 담겨져있다.

  • 따옴표 종류
  • 들여쓸 때 스페이스 개수
  • 최대 가로 길이

팀원 전체가 동일한 스타일 가이드를 따라 코드를 작성하면 일관적인 스타일의 코드를 만들 수 있으므로 팀원들이 모여 팀 전용 스타일 가이드를 만들 수도 있다. 요즘에는 이미 작성된 가이드 중 하나를 선택해 팀의 가이드로 삼는 편이다.

유명 스타일 가이드에는 다음과 같은 것들이 있다.

Linter

Linter라는 도구를 사용하면 내가 작성한 코드가 스타일 가이드를 준수하는지 자동으로 확인할 수 있고, 스타일 개선과 관련된 제안도 받을 수 있다. 이렇게 자동으로 스타일을 체크받다 보면, 변수나 함수 이름에 난 오타 등이 유발하는 버그를 미리 발견할 수 있어 좋다.

유명 Linter에는 다음과 같은 것들이 있다.

  • JSLint - 역사가 오래된 Linter
  • JSHint - JSLint보다 세팅이 좀 더 유연한 linter
  • ESLint - 가장 최근에 나온 linter

대부분의 linter는 플러그인 형태로 유명 에디터와 통합해 사용할 수 있으며, 원하는 스타일을 설정하는 것 역시 가능하다. ESLint를 사용한다고 가정할 때, 아래 절차를 따르면 에디터와 linter를 통합해 사용할 수 있다.

  1. Node.js를 설치한다.

  2. npm(자바스크립트 패키지 매니저)를 사용해 다음 명령어로 ESLint를 설치한다.

    npm install -g eslint

  3. 현재 작성 중인 자바스크립트 프로젝트의 루트 폴더 (프로젝트 관련 파일이 담긴 폴더)에 .eslintrc라는 설정 파일을 생성한다. 아래 처럼 설정 파일을 작성하면 되는데, 아래에서 extends는 eslint:recommended를 기반으로 이를 확장해 스타일 가이드를 설정하겠다는 것을 의미한다. 스타일 규칙을 모아놓은 세트를 웹에서 다운로드해 이를 기반으로 스타일 가이드를 설정하는 것도 가능하다. 자세한 내용은 다음 주소에서 확인해보자.

    {
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "no-console": 0,
    "indent": ["warning", 2]
  }
}

  4. 에디터에 ESLint 플러그인을 설치하거나 활성화한다.

 모던 JavaScript 튜토리얼s

Comments

Related Posts