1. TDD 이론 및 패턴 소개 - 견고한 JS 소프트웨어 만들기 | 김정환

 

 

단위 테스트 (Unit Test)

단위(Unit)

: 특정 조건에서 어떻게 작동해야 할지 정의한 것 (인풋에 따라 계산한 결과를 아웃풋으로 내놓는 것) ≒ 함수
- 준비, 실행, 단언(결과 검증) 패턴을 따른다.

 

 

 

테스트주도개발(TDD)

1. 적색(Red) 단계

기능을 테스트할 수 있는 테스트 코드를 만든다 ≒ 단위 테스트

 

2. 녹색(Green) 단계

함수의 기능 코드를 테스트에 통과할 수준으로 작성

 

3. 청색(Blue) 단계 (리팩터)

추상화, 확장 가능, 중복되지 않는 소프트웨어 공학 원칙에 준수한 코드 작성

 

> git clone https://github.com/jeonghwan-kim/lecture-develop-fe-with-tdd.git

> git checkout -f install-jasmine

 

 

 

테스트할 수 없는 코드

<button type="button" onclick="counter++; countDisplay()">증가</button>
<span id="counter-display">0</span>

<script>
  var counter = 0;

  function countDisplay() {
  	var el = document.getElementById('counter-display');
  	el.innerHTML = counter;
  }
</script>

 

1. 관심사의 미분리

: 클릭 이벤트 처리기를 인라인 형태로 정의한 점

  * 단일 책임의 원칙 : 하나의 코드는 하나의 역할만 해야 한다.

<button type="button" onclick="counter++; countDisplay()">증가</button>

 

2. 전역 변수의 충돌

:  counter 변수로 전역 공간을 어지럽힌 점

var counter = 0;

 

3. 재사용의 어려움

: 횟수를 표시하는 span id를 displayCount 함수에서 하드코딩한 점

  * 오픈 클로즈 원칙 : 확장에는 열려있고 변경에는 닫혀 있어야 한다.

var el = document.getElementById('counter-display');

 

소프트웨어 공학 원칙에 맞는 테스트 코드는 어떻게 만들 수 있을까?

1. 코드를 UI에서 완전히 분리

2. 자바스크립트를 별도 파일로 분리

 

 

 

모듈 패턴

모듈 패턴이란?

: 함수로 데이터를 감추고 모듈 API를 담고 있는 객체를 반환하는 형태

 

1. 임의 함수 모듈 패턴 

// 이름 공간으로 활용한다.
var App = App || {}

// 이름공간에 함수를 추가한다. 의존성 있는 God 함수를 주입한다.
App.Person = function(God) {
  var name = God.makeName()

  // API를 노출한다.
  Return {
    getName : function() { return name },
    setName : function(newName) { name = newName }
  }
}

// 이렇게 사용한다.
const person = App.Person(God)
person.getName()

 

2. 즉시 실행 함수 모듈 패턴 (싱글톤 인스턴스가 됨)

var App = App || {}

App.Person = (function() {
  let name = ""

  return {
    getName(God) {
      name = name || God.makeName()
      return name
    }
    setName(newName) { name = newName }
  }
})() // 함수 선언 즉시 실행한다. 싱글톤이다.

// 이렇게 사용한다.
App.Person.getName(God)

 

모듈 생성 원칙

1. 단일 책임 원칙에 따라 모듈은 한 가지 역할만 한다

: 그 역할만 집중함으로서 모듈을 더욱 튼튼하게 만든다, 테스트하기도 쉽다.

 

2. 모듈 자신이 사용할 객체가 있다면 의존성 주입 형태로 제공한다

: 또는 팩토리 주입 형태로 제공한다, 테스트 하기도 쉽다.