견고한 JS 소프트웨어 만들기 강의노트1

인프런에서 견고한 JS 소프트웨어 만들기를 수강하며 적은 강의노트입니다.

보다 자세한 내용은 강의를 통해 확인하실 수 있습니다.

 

아리송한 상황들

자바스크립트는 빌드과정이 없기때문에 실행하기전 코드의 에러를 검출할 수 없습니다.

console.log = 4
console.log('4');
// ERROR

또한 타입이 헷갈릴 때도 있습니다.

xxxxxxxxxx
let f = '1' + 1
// '11'
let s = '2' * 3
// 6
let t = 1 + '2' + 3 * 4
// '1212'

컴파일러가 없으니 테스트가 최선이다.

이러한 문제를 극복할 방법으로 테스트주도개발(TDD)에 대해 알아보자!

JS 소프트웨어를 견고하게 만드는 것이 이 강의의 목표.

 

몇 가지 테스트 개념들

단위 테스트

단위(Unit): Input에 따라 계산한 결과를 Output으로 내놓는 것 (대게 함수로 표현)

준비(arrange, Input을 준비함), 실행(act, Input을 받아 실행함), 단언(assert, 결과를 검증) 패턴을 따른다.

테스트 주도 개발

단위 테스트를 기반으로 진행함

적색, 녹색, 청색(리팩터) 순환

 

설치 (재스민 프레임워크)

https://jasmine.github.io/pages/getting_started.html

테스트 러너(Test Runner): 재스민, 소스, 테스트 코드를 실행 (Stand alone으로 설치한 재스민은 HTML 파일이 테스트 러너)

설치방법

1. Stand alone
2. 카르마(karma)와 함께 설치 (자동화)

다운로드

• 학습할 소스코드 다운로드

xxxxxxxxxx
git clone https://github.com/jeonghwan-kim/lecture-develop-fe-with-tdd.git
git checkout -f install-jasmine

• 소스설명

xxxxxxxxxx
describe('hello world', ()=> { // Test Suite: 테스트 유닛들의 모음 
    it('true is true', ()=> { // Test Spec: 테스트 단위
        expect(true).toBe(true) // 매쳐: 검증자 
    })
})

 

테스트할 수 없는 코드

​x
<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. 관심가 분리되지 않음

onclick내에서 counter++; countDisplay()

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

2. 재사용성이 떨어짐

counter를 전역으로 사용하여 전역 Scope를 어지럽힘

횟수를 표시하는 span의 id를 displayCount함수에서 하드코딩함 (아이디를 직접 알려줌)

테스트 할 방법

1. 코드를 UI에서 분리
2. 자바스크립트를 별도 파일로 분리

 

모듈 패턴

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

1. 임의 함수를 호출하여 생성하는 모듈
2. 즉각 실행 함수(IIFE) 기반의 모듈

임의 모듈 패턴

xxxxxxxxxx
// 이름공간으로 활용한다.
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()

즉각 실행 함수(IFEE) 모듈 패턴

싱글톤 인스턴스가 됨

xxxxxxxxxx
var App = App || {}
App.Person = (function() {
    let name = ""
    
    return {
        getName(God) {
            name = name || God.makeName()
            return anme
        },
        setName(newName) {
            name = newName
        }
    }
})() // 함수 선언 즉시 실행한다. (싱글톤)
​
// 사용
App.Person.getName(God)

모듈 생성 원칙

1. 단일 책임 원칙에 따라 모듈은 한 가지 역할만 한다.
2. 모듈 자신이 사용할 객체가 있다면 의존성 주입 형태로 제공한다.