화면에 붙여보자


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)한 코드

견고한 어플리케이션을 만들 수 있다!