추가 적립 안내

전략 없이 log로 디버깅하는 웹 개발자를 위한 안내서 『자바스크립트 테스트와 디버깅』. 테스트와 디버깅의 중요성을 알면서도 안정적인 코드를 만들어 나가거나 버그를 수정, 배포하는 작업이 막막하게 느껴지는 개발자들을 위한 안내서이다. 단위 테스트로 오류가 최소화된 자바스크립트 코드를 만들어 보고, 각종 디버깅 도구를 다루는 방법과 사용 예제를 통해 보다 우아하게 UI를 개발할 수 있는 노하우를 전수한다.

자바스크립트 디버깅을 어려워하거나, 전략 없이 log로 디버깅하는 웹 개발자를 위한 안내서.

디버깅이 반드시 필요한 과정임을 알고 있지만, 단순히 결과 확인에 그치거나 무작정 로그 기록에만 의존해 온 개발자라면 이 책을 통해 효율적인 디버깅 방법을 배워 보자.
이 책에는 데스크톱에서 모바일 웹까지 다양한 개발 환경에서 사용할 수 있는 각종 디버깅 도구의 사용법을 담았으며, 코드 테스트와 다이나트레이스, 피들러 등 성능 개선에 대한 내용을 곁들였다.

- 이 책의 구성
* 1부 테스팅: 디버깅을 적게 하는 프로그램을 만들기 위해 테스트 코드 작성 방법부터 배워 본다.
* 2부 디버깅': 각종 데스크톱 브라우저와 모바일 웹까지 여러 환경에서 사용할 수 있는 디버깅 도구의 사용법과 팁을 알아본다.
* 3부 성능 개선: 성능을 측정하고 개선하는 도구에 대해서 살펴본다.

I. 테스팅
01. TDD를 적용한 단위 테스트
_1.1 테스트의 종류
__1.1.1 테스트 수준에 따른 분류
__1.1.2 테스트 목적에 따른 분류
__1.1.3 테스트 방법에 따른 분류
_1.2 테스트 주도 개발(TDD)이란 무엇인가
_1.3 TDD 진행 방법
_1.4 TDD에서 유의해야 할 점
_1.5 TDD의 장점

02. 자바스크립트 단위 테스트 도구
_2.1 QUnit
__2.1.1 환경 설정
__2.1.2 테스트 함수
__2.1.3 단언문(assertion)
__2.1.4 비동기 테스트에 사용하는 함수
_2.2 그 밖에 유용한 함수
__2.2.1 일부 모듈(module)만 실행하기
__2.2.2 QUnit을 활용하여 자동화된 CI 테스트 구축하기
_2.3 테스텀(Testem)
__2.3.1 설치 방법
__2.3.2 사용 방법
__2.3.3 기타 설정 및 기능

03. 자바스크립트 단위 테스트 패턴
_3.1 테스트 케이스 패턴
_3.2 기본적인 DOM 테스트
_3.3 시스템 창 테스트 (alert, confirm)
_3.4 이벤트 테스트
__3.4.1 가짜 이벤트를 이용한 테스트
__3.4.2 이벤트와 연관된 부분을 함수로 분리한 테스트
_3.5 Ajax 테스트
__3.5.1 동기 테스트
__3.5.2 비동기 테스트
_3.6 Timer(setTimeout, setInterval) 테스트

04. 테스트 더블을 이용한 테스트
_4.1 테스트 더블(Test Double)
__4.1.1 스텁 객체를 사용한 테스트
__4.1.2 목 객체를 사용한 테스트
_4.2 테스트 더블의 사용 전략 및 장단점
__4.2.1 테스트 더블의 사용 전략
__4.2.2 테스트 더블의 장점
__4.2.3 테스트 더블 사용의 단점

II. 디버깅
05. 파이어폭스(Firefox) 디버깅
_5.1 파이어버그
__5.1.1 파이어폭스 설치
__5.1.2 파이어버그 설치
_5.2 콘솔(Console) 이용하기
__5.2.1 콘솔 탭
__5.2.2 콘솔 객체
_5.3 HTML, CSS 디버깅
__5.3.1 HTML 탭
__5.3.2 CSS 탭
_5.4 스크립트 디버깅
_5.5 네트워크 디버깅
_5.6 쿠키

06. 인터넷 익스플로러 디버깅
_6.1 IE 하위 버전(6~7) 디버깅
__6.1.1 디버깅 도구 설치하기
__6.1.2 IE 개발자 도구(IE developer tool bar)
__6.1.3 스크립트 디버깅
__6.1.4 스크립트 편집기
__6.1.5 네트워크 프로파일링
_6.2 IE 상위 버전(8~9) 디버깅
__6.2.1 엘리먼트 선택 도구(HTML, CSS 탭)
__6.2.2 스크립트 탭
__6.2.3 네트워크 탭(IE 9 이상)
__6.2.4 프로파일러

07. 크롬, 사파리 디버깅
_7.1 디버깅 도구 실행
_7.2 엘리먼트(Elements) 탭
_7.3 자원 탭(Resources)
_7.4 네트워크 탭(Network)
_7.5 스크립트 탭(Sources)
_7.6 타임라인 탭
_7.7 프로파일 탭 (Profiles)
_7.8 검사 탭 (Audits)
_7.9 콘솔 탭
_7.10 기타 기능
_7._11 기타 설정

08. 오페라 디버깅
_8.1 엘리먼트 탭(documents)
_8.2 스크립트 탭(Scripts)
_8.3 네트워크 탭
_8.4 자원 탭(Resources)
_8.5 스토리지 탭(Storage Inspector)
_8.6 에러 로그 탭(Error Log)
_8.7 콘솔 탭(Console)
_8.8 유용한 도구들(Utilities)

09. 모바일 웹 디버깅
_9.1 모바일 웹 디버깅 환경
_9.2 데스크톱에서 모바일 디버깅
_9.3 모바일 사파리(Safari) 디버깅 도구
_9.4 JS콘솔 (JSConsole)
_9.5 와이너리(weinre - WEb INspector REmote)
__9.5.1 설치 및 실행 방법
__9.5.2 사용 방법
_9.6 아더울프(Aardwolf)
__9.6.1 설치 및 실행 방법
__9.6.2 사용 방법

III. 성능 개선
10. 다이나트레이스
_10.1 설치 및 실행 방법
_10.2 시작하기
_10.3 성능 리포트(Performance Report)
__10.3.1 요약 보기(Summary)
__10.3.2 캐시(Cache)
__10.3.3 네트워크(Network)
__10.3.4 서버 성능(Server-Side)
__10.3.5 자바스크립트(JavaScript), Ajax
__10.3.6 타임라인(Timeline)과 주요 성과 지표(KPI-Key Performance Indicator)
_10.4 사용자 경험 리포트(User Experience Report)
_10.5 타임라인(Timeline)
__10.5.1 타임라인 기능
__10.5.2 자바스크립트 개선
__10.5.3 네트워크
_10.6 퓨어패스(PurePaths)
_10.7 핫 스팟(Hot spot)
_10.8 설정 및 기타 기능

_11. 웹페이지 테스트
__11.1 사용 방법 및 주요 기능
__11.2 분석적 검토(Analytical review)
___11.2.1 측정 방법
__11.2.2 테스트 설정(Test Setting)
__11.2.3 고급 설정(Advanced)
__11.2.4 권한(Auth)
__11.2.5 스크립트(Script)
__11.2.6 광고 제거(Block)
__11.2.7 단일 고장점(Single Point Of Failure, SPOF)
__11.2.8 비디오(Video)
__11.3 페이지 측정 및 결과 확인
__11.3.1 요약 보기(Summary)
__11.3.2 상세 보기(Detail)
__11.3.3 성능 리뷰(Performance Review)
__11.3.4 페이지 스피드(Page Speed)
__11.3.5 콘텐츠 분해(Content breakdown)
__11.3.6 도메인(Domain)
_11.4 기타 테스트
__11.4.1 시각적 비교(Visual Comparison)
__11.4.2 모바일(Mobile)
__11.4.3 경로추적(Tracerouter)
__11.4.4 API 활용하기

12. 피들러(Fiddler)
_12.1 설치하기
_12.2 실행 방법
_12.3 자동 응답(AutoResponder)
__12.3.1 기본 자동 응답 기능
__12.3.2 요청 지연하기
__12.3.3 모바일 자동 응답 기능
__12.3.4 HTTPS 자동 응답 기능
_12.4 필터 기능
__12.4.1 특정 조건 요청만 기록
__12.4.2 중단점(BreakPoint) 설정
_12.5 피들러 스크립트(Rule)
__12.5.1 Global Scope
__12.5.2 이벤트(OnBeforeRequest, onBeforeResponse)
_12.6 자바스크립트 포맷터

부록 기타 자바스크립트 개발 도구
_A 성능 개선 도구
__A.1 스피드 트레이서(Speed Tracer)
__A.2 모바일 성능 북마크릿(Mobile Perf bookmarklet)
__A.3 JSPerf
_B 문서화 도구
__B.1 YUIDOC
_C 압축 도구
__C.1 UglifyJS
__C.2 Clean CSS
__C.3 HTML Compressor
__C.4 해제 도구
_D 테스트 커버리지 도구(Test Coverage Tool)
__D.1 이스탄불(Istanbul) 설치 및 사용 방법
__D.2 결과 확인
_E 정적 코드 검사 도구
__E.1 JSHint
__E.2 CSSLint
_F 빌드 도구(grunt)
__F.1 설치 방법
__F.2 실행 방법