Skip to content

Latest commit

 

History

History
153 lines (116 loc) · 5.13 KB

README.md

File metadata and controls

153 lines (116 loc) · 5.13 KB
Raw

프론트엔드 개발과 TDD

1. 동기부여

아리송한 상황

  • 클라이언트 측 자바스크립트를 다루는 것은 복잡함
    • 서버쪽은 노드JS 버전을 마음대로 변경할 수 있다
    • 클라이언트 쪽은 사용자가가 사용할 브라우져 버전을 강제할 수 없다
  • 자바스크립트 언어 자체의 특징
    • console.log 함수가 매우 쉽게 덮어 쓰여질 수 있다
    • 이것은 의도된 언어 스펙이지만 개발자들이 실수할 가능성이 높다
  • 타입
    • '1' + 1 = '11'
    • '2' * 3 = 6
    • 1 + '2' + 3 * 4 = '1212'
  • 이러한 문제를 극복하는 방법으로 테스트주도개발(TDD)을 알아보자

2. 준비

자스민 프레임웍

  • 자스민은 피보탈 랩스에서 만든 BDD(Behavior Driven Development) 프레임웍크로서 자동화된 단위 테스트 도구
  • 단위 테스트(unit test)란 코드의 기능 단위(funtionality unit)를 테스트 하는 것을 말한다
    • 무엇이 기능인가? 결정하기 쉽지 않음
    • TDD를 다른 관점에서 바라본 BDD라는 해결책을 제시
  • BDD
    • 유저 스토리 개념을 끌어들인 테스트 작성법
    • 예를 들어 어떤 버튼을 클릭하면 경고 창을 띄우는 유저 스토리를 생각해 보자
      • Given: 초기 상황
      • When: 어떤 이벤트가 발생
      • Then: 후속 결과를 기대
    • describe('어떤 버튼은', ()=> {
  describe('클릭했을 때', ()=> {
    it('경고창을 띄운다', ()=> {

    })
  })
})
    • 테스트 단위를 스팩(spec)이라고 함
      • 자스민에서는 it 함수로 만든다

설치

  • getting_started
  • 두 가지 설치 방법: 스탠드어론, 노드JS
    • 스탠드어론으로 설치 하겠음
  • 러너
    • 자스민 코드와 소스 파일, 스펙을 파일을 참조하는 html 파일
    • setting/index.html 파일 확인
  • 헬로월드
    • checkout

3. 프론트엔드 코드 테스트

테스트할 수 없는 코드

  • 프론트엔드 코드 테스트는 비교적 어렵다. 테스트할 수 없게 작성했기 때문
<button onclick="counter++; countDisplay()">증가</button>
<span id="counter-display">0</span>

<script>
  var counter = 0;

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

  • 이 코드의 문제는

    • 관심사가 분리되지 않았음
      • 클릭 이벤트 처리기를 인라인 형태로 정의한 점
    • 재사용성이 떨어짐
      • counter로 전역 공간을 어지럽힌 점
      • 횟수를 표시하는 span id를 displayCout 함수에서 하드코딩한 점

  • 어떻게 하면 테스트할 수 있게 코딩할 수 있을까?

    • UI에서 완전히 떼어놓고 코드를 모듈화 시키면 비즈니스 로직만 테스트할 수 있음
    • 자바스크립트를 별도로 빼내면 다른 곳에서도 재사용할수 있고 테스트성도 좋아짐
    • 카운터 예제로 프론트엔트 코드 테스트를 알아보겠다

모듈 패턴

// todo

카운터 모듈

  • 카운터에는 데이터가 있다. 이것을 다루는 ClickCounter 모듈을 먼저 만들자
    • 전역 공간에 있는 counter를 ClickCounter 모듈에 캡슐화하여 관리하겠다
  • 스펙은 다음과 같다
    • ClickCounter 모듈의
      • getCounter() 는
        • 카운터 값을 반환한다
      • increase() 는
        • 카운터를 1 올린다
      • decrease() 는
        • 카운터를 1 내린다

카운트 뷰 모듈

  • 다음으로 돔 접근을 위해 ClickCountView 모듈을 만들자

    • 클릭 이벤트 처리기와 횟수 표시하는 엘레멘트를 캡슐화하여 관리하겠다

  • 스펙은 다음과 같다

    • ClickCountView 모듈은
      • 클릭 이벤트가 발생하면 increseAndUpdateView를 실행한다
      • increseAndUpdateView()는
        • ClickCounter의 increase 함수를 실행한다
        • updateView 함수를 실행한다
        • updateEl의 텍스트를 설정한다
      • updateView()는
        • 클릭한적이 없으면 "0"을 출력한다

  • ClickCountView 모듈 로직 코드 테스팅

    • 버튼 클릭 이벤트 처리기의 역할
      • 총 클릭 횟수를 저장한 변수값을 증가한다
      • 돔 업데이트 함수 호출

  • DOM을 바꾸는 코드 테스팅

  • 이벤트 처리기 동작 코드 테스팅

    • 마크업에 할당문을 넣지 말고 모듈 스스로 타깃 요소의 클릭 처리기로 할당할 수 있게 만들자

테스트 용이한 코드를 작성하려면

  • 데이터와 뷰를 분리하여 생각한다
  • 화면을 컴포넌트 단위로 생각한다
  • 뷰는 돔을 캡슐화 해야한다

지금가지 사용한 자시민 api 정리

// todo

4. [실습1] BgColorSettingDisplay

  • // todo

5. [실습2] SidebarDisplay

  • // todo

정리

  • TDD를 통해...
  • BgColorSetting

참고 자료

  • 자바스크립트 패턴과 테스트 (도서, 래리 스펜서, 세스 리쳐즈 지음, 이일웅 길벗)
  • Jasmine 자바스크립트 테스팅 (도서, 파울로 라고나 지음, 이일웅 옮김, 에이콘)