모던 자바스크립트 (자바스크립트 기본 / 코드 품질) 1. 코드 작성 및 테스트

엄격모드

: 자바스크립트는 오랫동안 호환성 이슈 없이 발전해 오면서 기존의 기능을 변경하지 않으면서 새로운 기능이 추가됨

: 기존에 작성한 코드가 망가지지 않는다는 장점이 있었으나 초기 개발자들의 실수나 불완전한 결정이

  코드에 박제되는 문제 발생 

: 이러한 문제는 ECMAScript5가 등잔한 2009년 이전까지 지속

: ES5 이후 기존 기능과의 호환성 문제 해결을 위해 'use strict' 라는 지시자를 도입

 

 

 

'use strict'

: 해당 지시자가 스크립트 최상단에 오면 스크립트 전체가 모던한 방식으로 동작

: 콘솔에서 사용시 shift + enter를 눌러 줄바꿈 

: 클래스와 모듈을 사용할 경우 use strict는 자동으로 적용됨

 

 

 

 

nullish 병합 연산자

x = (a !== null && a !== undefined) ? a : b;
x = a ?? b

# 동일한 결과

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛

: 피연산자 중 값이 확정되어 있는 변수를 찾을 수 있음

: 구식 브라우저의 경우 지원되지 않을 수 있음 

 

 

 

크롬으로 디버깅 하기

: https://ko.javascript.info/debugging-chrome

Chrome으로 디버깅하기

: debugger 명령어를 스크립트 내에 적어주면 중단점을 설정한 효과

: 크롬 개발자도구에서 resume을 통해 실행추적도 가능

 

 

 

 

좋은 주석

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

- 주석에 들어가면 좋은 내용

: 고차원 수준 아키텍처

: 함수 용례

: 당장 봐선 명확해 보이지 않는 해결 방법에 대한 설명

 

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

: 코드가 어떻게 동작하는지와 코드가 무엇을 하는지에 대한 설명

=> 코드를 간결하게 짤 수 없는 상황이나 코드 자체만으로 어떤 일을 하는지 판단할 수 없는 경우에만 사용

 

 

 

 

 

테스트 자동화

: 테스트 자동화는 테스트 코드가 실제 동작에 관여하는 코드와 별개로 작성 되었을 때 가능

 

- BDD (Behavior Driven Development)

: 테스트, 문서, 예시를 한데 모아놓은 개념

 

 

 

 

명세서 (Spectification)

: 코드가 무슨 일을 하는지 상상한 후 자연어로 표현해 놓은 것

: 명세서에는 유스케이스에 대한 자세한 설명과 테스트가 담겨있음

describe("pow", function() {

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

});

- Spec의 요소

ㆍdescribe("title", function() { ... })
: 구현하고자 하는 기능에 대한 설명

 

ㆍ it("유스케이스 설명", function(), { ... })
: 두 번째 인수에는 유스케이스 테스트 함수

 

- 개발 순서

1. 명세서 초안 작성. 초안에는 기본적인 테스트도 포함

2. 명세서 초안을 보고 코드 작성

3. 코드가 작동하는지 확인하기 위해 Mocha라는 테스트 프레임워크를 사용해 명세서 실행

4. 모든 테스트를 통과하는지 확인

5. 명세서에 지금까지 고려하지 않았던 유스케이스 몇 가지를 추가

6. 테스트를 모두 통과할 때까지 코드 수정

 

- Spec을 실행하기 위한 라이브러리

ㆍMocha

: describe, it 과 같은 테스팅 함수와 테스트 실행관련 주요 함수를 제공하는

  핵심 테스트 프레임워크

 

ㆍChai

: 다양한 assertion을 제공해주는 라이브러리

: assert, equal 등 제공

 

ㆍSinon

: 함수의 정보를 캐내는 데 사용되는 라이브러리.

: 내장함수 등을 모방

 

- 참조

: https://ko.javascript.info/testing-mocha

테스트 자동화와 Mocha

 

 

 

 

 

코딩스타일

- Linter 

: 작성한 코드가 코드 스타일 가이드에 준수하고 있는지 확인

: JSLint / JSHint / ESLint 등이 있음

 

- 참조

: https://ko.javascript.info/coding-style

코딩 스타일

 

 

 

닌자코드

: 다른 사람이 이해하기 어려운 복잡한 코드

- 참조

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

닌자 코드

 

 

 

 

폴리필

: 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드

: 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나 새롭게 구현한 함수의 스크립트

 

- 바벨

: 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔주는 트랜스 파일러

 

- core js

: 다양한 폴리필 제공

 

- polyfill.io

: 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스