화면에 붙여보자
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 |