javascript.info - 코드 품질(2)

***다음 글의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다.

JavaScript Fundamentals 3.3 ~ 3.6

 

---

 

    3.3 주석    

한 줄 주석 : //

여러 줄 주석 : /* ... */

 

만약 이 함수가 무슨 역할을 하는지 주석을 많이 달아야 한다면,

함수를 리팩토링 하는게 나을 수도 있다.

 

   리팩토링 : 함수 분리하기   

함수 분리 전)

function showPrimes(n) {
  nextPrime:
  for (let i = 2; i < n; i++) {

    // i가 소수인지를 확인함
    for (let j = 2; j < i; j++) {
      if (i % j == 0) continue nextPrime;
    }

    alert(i);
  }
}

분리 후) self-descriptive한 코드.

function showPrimes(n) {

  for (let i = 2; i < n; i++) {
    if (!isPrime(i)) continue;

    alert(i);
  }
}

function isPrime(n) {
  for (let i = 2; i < n; i++) {
    if (n % i == 0) return false;
  }

  return true;
}

 

   리팩토링 팁 : 함수 만들기   

코드가 쭉 늘어져 있는 경우, 새로운 함수를 만들고 코드의 일부를 새로 만든 함수에 옮기는 것을 권장.

 

 

좋은 주석이란? 

- 컴포넌트 간 상호작용에 대한 설명, 상황에 따른 제어 흐름 등.

- JSDoc을 사용해 함수에 관한 문서를 작성. 함수 사용방법 등.

- 왜 이런 방법으로 문제를 해결했는지 설명하는 주석 (나중에 다시 봤을 때 왜 이렇게 작성했었는지 한 번에 알기 쉬움.

직관적으로 봤을때 보이지 않는 미묘한 부분이 해당 코드에 존재한다면, 주석을 남기는 게 좋음!

 

---

    3.4 닌자 코드    

- 이렇게 코드 짜지 말라는 리스트

https://ko.javascript.info/ninja-code

닌자 코드

---

    3.5 테스트 자동화와 Mocha    

BDD : Behavior Driven Development 

=> test, ducument, examples.

 

함수를 작성 하기 전, 작성할 함수가 어떻게 작동할지 설명하는 것을 spec이라고 하며, 이는 사용 방법과, 테스트를 포함한다.

describe("pow", function() {

  it("raises to n-th power", function() {
    assert.equal(pow(2, 3), 8);
  });

});

BDD에선 스펙을 먼저 작성하고 난 후에 구현을 시작.

 

    3.6 폴리필    

바벨

- 트랜스파일러(transpiler). 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔준다.

웹팩과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스 파일러를 동작시켜 준다.

- 폴리필 polyfill. 누락된 새로운 기능을 메꿔주는(fill in)역할.

주요 폴리필 :

• core js – 다양한 폴리필을 제공합니다. 특정 기능의 폴리필만 사용하는 것도 가능합니다.
• polyfill.io – 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스입니다.