인프런 김정환 님 견고한 JS 소프트웨어 만들기 강의 노트 입니다. 1. 화면에 붙여보자 git checkout -f index.html-3 index.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..
인프런 김정환 님 견고한 JS 소프트웨어 만들기 강의 노트 입니다. 1. 클릭카운터 모듈 - 스펙3 실무에서는 요구사항이 변경되거나 추가될 수 있다. 기능이 필요할지도 모른다는 건 뭘까. 카운터가 여러 개 필요할까? 지금 코드에서 모듈을 재사용할 수 있는 방법이 뭘까? 즉 확장성을 고려해서 코드를 짜야 한다. 세 번째 스펙. ClickCounter모듈은 '데이터'를 주입받는다. 증가 뿐만 아니라 감소까지 되려면 어떻게 해야 할까 버튼이 두 개 있어야 하고 counter도 두 개 있어야 한다. increase 함수와 decrease 함수가 존재해야 한다. 근데 현재 ClickCounter는 데이터를 closure로 관리하고 있기 때문에 외부 모듈과 공유할 수 없다. 증가를 위한 클릭 카운터와..
인프런 김정환 님 견고한 JS 소프트웨어 만들기 강의 노트 입니다. 1. 모듈 이용해서 화면 만들기 화면에 붙여보자 git checkout --force index.html-1index.html Increase 2. 개선된 점 before 증가 0 버튼 안에는 관심사가 혼재되어 있다. 버튼 태그 출력, counter값 증가시키고, countDisplay 함수 호출 index.html Increase ClickCounter.js var App = App || {} // 데이터 관련한 건 여기에 모여있음 App.ClickCounter = () => { // counter라는 전역변수 대신 지역변수 사용 // 이 value라는 데이터를 조회하거나 변경하려면 이 객체를 이용해야만 함. 외부에서는 접근 불가 le..
인프런 김정환 님 견고한 JS 소프트웨어 만들기 강의 노트 입니다. 1. 클릭카운터 모듈 - 스펙1 어떤 모듈을 만들 때, 크게 화면에 보이는 부분, 보이지 않는 부분으로 나누어 생각할 수 있다. 지금은 화면에 보이는 부분을 먼저 만들자 보자. ClickCounter는 카운터 데이터를 다루는 모듈이다. counter 변수를 전역 공간이 아니라 ClickCounter 안에서 관리하자. 첫 번째 스펙 ClickCounter 모듈의 getValue()는 counter 값을 반환한다. /* ClickCounter.spec.js */ // describe는 중첩해서 사용할 수 있다. describe('App.ClickCounter', () => { describe('getValue()'..