화면에 붙여보자
xxxxxxxxxx
<html>
<body>
<button id="btn-desc">-</button>
<span id="counter-display"></span>
<button id="btn-inc">+</button>
<script src="ClickCounter.js"></script>
<script src="ClickCountView.js"></script>
<script>
(() => {
const data = { value: 0 }
const counterDesc = App.ClickCounter(data).setCountFn( v => v - 1 )
const counterInc = App.ClickCounter(data).setCountFn( v => v + 1 )
const updateEl = document.querySelector('#counter-display')
const btnDesc = document.querySelector('#btn-desc')
const btnInc = document.querySelector('#btn-inc')
const descCounterView = App.ClickCountView(counterDesc, {updateEl, triggerEl: btnDesc})
const incCounterView = App.ClickCountView(counterInc, {updateEl, triggerEl: btnInc})
descCounterView.updateView()
})()
</script>
</body>
</html>
정리 - 스펙4
컴파일러가 없어 테스트하는 것이 필요
TDD
SOLID하고 DRY(Don't Repeat Yourself)한 코드
견고한 어플리케이션을 만들 수 있다!
'FrontEnd' 카테고리의 다른 글
Webpack Core Concepts (0) | 2020.02.18 |
---|---|
크롬 개발자 도구 시작하기 (0) | 2020.01.06 |
견고한 JS 소프트웨어 만들기 강의노트4 (0) | 2019.09.29 |
견고한 JS 소프트웨어 만들기 강의노트3 (0) | 2019.09.15 |
견고한 JS 소프트웨어 만들기 강의노트2 (0) | 2019.09.15 |