#3 JavaScript 코드 품질

# 크롬으로 디버깅 하는 방법

Chrome으로 디버깅하기

1. Watch – 표현식을 평가하고 결과를 보여줍니다.

   Add Expression 버튼 +를 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여줍니다. 입력한 표현식은 실행 과정 중에 계속해서 재평가됩니다.

2. Call Stack – 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시합니다.

   실행은 index.html 안에서 hello()를 호출하는 과정 중에 멈췄습니다. 함수 hello 내에 중단점을 설정했기 때문에, 콜 스택(Call Stack) 최상단엔 hello가 위치합니다. index.html에서 함수 hello를 정의하지 않았기 때문에 콜 스택 하단엔 'anonymous’가 출력됩니다.

   콜 스택 내의 항목을 클릭하면 디버거가 해당 코드로 휙 움직이고, 변수 역시 재평가됩니다. 'anonymous’를 클릭해 직접 확인해 봅시다.

3. Scope – 현재 정의된 모든 변수를 출력합니다.

   Local은 함수의 지역변수를 보여줍니다. 지역 변수 정보는 소스 코드 영역에서도 확인(강조 표시)할 수 있습니다.

   Global은 함수 바깥에 정의된 전역 변수를 보여줍니다.

   Local 하위 항목으로 this에 대한 정보도 출력되는데, 이에 대해선 추후에 학습하도록 하겠습니다.

# 코드 스타일

코딩 스타일

// 중괄호 
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.
`;

if (
  id === 123 &&
  moonPhase === 'Waning Gibbous' &&
  zodiacSign === 'Libra'
) {
  letTheSorceryBegin();
}

들여쓰기

가로 들여쓰기 - 스페이스 2개 혹은 4개 / 탭

세로 들여쓰기 - 변수 선언, 반복문, 리턴문 사이

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

세미콜론

자바스크립트 엔진에 의해 무시되더라도 모든 구문의 끝에 세미콜론 써주는 습관!!

중첩

for (let i = 0; i < 10; i++) {
  if (cond) {
    ... // <- 중첩 레벨이 하나 더 늘어났습니다.
  }
}
// continue써서 아래처럼 하기
for (let i = 0; i < 10; i++) {
  if (!cond) continue;
  ...  // <- 추가 중첩 레벨이 추가되지 않습니다.
}
// return; 으로 끝내줘서 else 쓰지 않기
function pow(x, n) {
  if (n < 0) {
    alert("'n'은 음수가 될 수 없습니다.");
    return;
  }

  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

함수 위치

방법 1) 헬퍼 함수 먼저 → 사용하려는 코드

function walkAround() {
  ...
}

// 헬퍼 함수를 사용하는 코드
let elem = createElement();
setHandler(elem);
walkAround();

방법 2) 사용하려는 코드 먼저 → 헬퍼 함수 (보통 이게 선호. 눈으로 읽는 순이기 때문에)

// 헬퍼 함수를 사용하는 코드
let elem = createElement();
setHandler(elem);
walkAround();

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

유명 스타일 가이드:

• Google의 자바스크립트 스타일 가이드
• Airbnb의 자바스크립트 스타일 가이드
• Idiomatic.JS
• StandardJS
• 기타 등등

Linter 사용하기

ESLint 사용해서 자동으로 체크하면서 버그 예방.

 

# 주석

주석

-주석을 쓰기보다는 함수 자체가 이를 설명할 수 있도록 함수로 나눠라.

-보통 설명을 많이 쓰면 좋지 않다.

-아키텍쳐나 매개변수 정보를 담고 있는 주석은 좋다.

/**
 * x를 n번 곱한 수를 반환함
 *
 * @param {number} x 거듭제곱할 숫자
 * @param {number} n 곱할 횟수, 반드시 자연수여야 함
 * @return {number} x의 n 거듭제곱을 반환함
 */
function pow(x, n) {
  ...
} 

-왜 이런 방법으로 해결하였는지를 설명하는 주석 O (나중에 실수 방지)

주석에 들어가면 좋은 내용

• 고차원 수준 아키텍처
• 함수 용례
• 당장 봐선 명확해 보이지 않는 해결 방법에 대한 설명

주석에 들어가면 좋지 않은 내용

• '코드가 어떻게 동작하는지’와 '코드가 무엇을 하는지’에 대한 설명
• 코드를 간결하게 짤 수 없는 상황이나 코드 자체만으로도 어떤 일을 하는지 충분히 판단할 수 없는 경우에만 주석을 넣으세요.

주석은 JSDoc3 같은 자동 문서생성 도구에도 쓰입니다. 자동 문서생성 도구는 주석을 이용해 HTML 등의 포맷을 가진 문서를 자동으로 만들어줍니다.

테스트

Behavior Driven Development (BDD)

테스트 자동화와 Mocha

테스트 + 문서 + 예시를 한데 모아놓은 개념이다.

describe("pow", function() {

  it("주어진 숫자의 n 제곱", function() {
    assert.equal(pow(2, 3), 8);
  });

});

describe("title", function() { ... })

구현하고자 하는 기능에 대한 설명이 들어갑니다. 우리 예시에선 함수 pow가 어떤 동작을 하는지에 대한 설명이 들어갈 겁니다. it 블록을 한데 모아주는 역할도 합니다.

it("유스 케이스 설명", function() { ... })

it의 첫 번째 인수엔 특정 유스 케이스에 대한 설명이 들어갑니다. 이 설명은 누구나 읽을 수 있고 이해할 수 있는 자연어로 적어줍니다. 두 번째 인수엔 유스 케이스 테스트 함수가 들어갑니다.

assert.equal(value1, value2)

기능을 제대로 구현했다면 it 블록 내의 코드 assert.equal(value1, value2)이 에러 없이 실행됩니다.

---

https://ko.javascript.info/ 참조