티스토리 뷰
인프런 김정환 님 견고한 JS 소프트웨어 만들기 강의 노트 입니다.
1. 화면에 붙여보자
git checkout -f index.html-3index.html
<html>
<body>
<!-- 감소 버튼 생성 -->
<button id="btn-decrease">-</button>
<span id="counter-display"></span>
<button id="btn-increase">+</button>
<script src="ClickCounter.js"></script>
<script src="ClickCountView.js"></script>
<script>
(() => {
const data = { value: 0 };
const counterDec = App.ClickCounter(data).setCountFn(v => v - 1);
const counterInc = App.ClickCounter(data).setCountFn(v => v + 1);
// const counterInc = App.ClickCounter(data).setCountFn(v => v + 2); // 숫자를 2씩 증가하고 싶다면
const updateEl = document.querySelector('#counter-display')
const btnDecrease = document.querySelector('#btn-decrease')
const btnIncrease = document.querySelector('#btn-increase')
const decCounterView = App.ClickCountView(counterDec, { updateEl, triggerEl: btnDecrease })
const incCounterView = App.ClickCountView(counterInc, { updateEl, triggerEl: btnIncrease })
// decCounterView나 incCounterView 중에 아무거나 해도 됨
decCounterView.updateView()
})()
</script>
</body>
</html>2. 정리
자바스크립트는 런타임에 에러를 발생시키기 때문에 자바스크립트로 개발할 때는 독특한 마음가짐을 가져야 한다.
컴파일러가 없는 한 테스트가 안전한 개발을 하기 위한 최선의 방법이다.
테스트주도개발 TDD는 테스트 실패 -> 테스트 성공 -> 리팩토링의 순서로 진행되며
테스트 코드는 준비 -> 실행 -> 검증 순서로 작성한다.
테스트할 수 있는 좋은 코드는 SOLID하고 DRY한 코드다.
SOLID: https://velog.io/@kyle/%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5-SOLID-%EC%9B%90%EC%B9%99-%EC%9D%B4%EB%9E%80
DRY: https://velog.io/@leehs27/DryCode
반응형
'Programming > TDD' 카테고리의 다른 글
| 04-추가 요구사항도 쉽게 받을 수 있는 코드 만들기 (0) | 2022.01.16 |
|---|---|
| 03-중간정리 (0) | 2022.01.16 |
| 02-모듈패턴으로 기존 코드 개선하기 (0) | 2022.01.16 |
| 01-TDD 이론 및 패턴 소개 (0) | 2022.01.16 |
댓글