추가 적립 안내

이 책에는 실전에서 유용하게 활용할 수 있는 70여 가지 이상의 자바스크립트 테스팅 예제가 실려 있다. 이 책에 실린 예제들을 따라 하다 보면, 버그 없고 견고한 웹을 구성하기 위한 자바스크립트 코드를 테스트하는 데 필요한 이론적 배경 지식은 물론, 테스트와 디버깅을 수행하는 데 필요한 도구 사용법, 자바스크립트 코드 최적화 방법 등을 익힐 수 있다. 그리고 자바스크립트를 처음 공부하는 초보자도 쉽게 따라 할 수 있도록 웹을 구성하는 세 가지 요소인 HTML과 CSS, 자바스크립트의 문법도 함께 설명한다.

이 책에서 다루는 내용
- HTML과 CSS, 자바스크립트 사이의 관계
- 자바스크립트 오류의 여러 가지 종류
- 자바스크립트 임시 테스트 수행
- 자바스크립트 코드 검증
- 테스트에 관련된 여러 가지 개념
- 테스트 계획 수립과 실행
- 자바스크립트 예외 처리를 활용해 더 복잡한 코드를 테스트하는 방법
- 자바스크립트를 활용한 사용자 인터페이스 테스트 수행
- 구글 크롬과 자바스크립트 디버거, 파이어폭스의 벵크맨(Venkman) 확장기능 등의 도구를 이용한 코드 디버깅
- Sahi와 QUnit, JsLitmus를 사용한 테스트 과정 자동화

이 책의 대상 독자
초보 자바스크립트 개발자나 자바스크립트를 HTML, CSS와 함께 사용해본 경험이 있는 초보 개발자

이 책의 구성
1장. 자바스크립트 테스팅에서는 HTML, CSS 등의 웹 개발 구성 요소들을 살펴보고, 그 안에서 자바스크립트의 역할과 가장 자주 접하게 될 에러의 종류를 살펴본다.
2장. 자바스크립트에서의 임시 테스팅과 디버깅에서는 간단한 임시 테스트 용도의 자바스크립트 프로그램을 작성하면서 자바스크립트 프로그램에 임시 테스트를 하는 이유와 가장 많이 사용되는 자바스크립트의 기능을 알아본다.
3장. 문법 검증에서는 검증된 자바스크립트 코드를 작성하는 방법을 설명한다. 3장을 마치고 나면, 자바스크립트 개발자로서 기술을 향상시킬 뿐만 아니라 자바스크립트 코드를 테스트하는 데 있어서 검증의 역할은 무엇인지 좀 더 깊이 이해할 수 있다.
4장. 테스트 계획하기에서는 테스트 계획 수립의 중요성과 테스트 수행에 사용되는 전략과 개념을 살펴보고, 간단한 테스트 계획을 수립하면서 테스트 계획을 세운다는 것이 어떤 의미인지 체험해본다.
5장. 테스트 계획 실행하기에서는 수립된 테스트 계획을 실행에 옮겨본다. 4장에서 배운 이론을 적용하여 버그를 찾고 수정하는 과정을 실습을 통해 익힌다.
6장. 더 복잡한 코드 테스트하기에서는 코드를 테스트하는 정교한 방법을 살펴본다. 코드를 테스트하는 데 자바스크립트 내장 에러 객체를 사용하는 방법과 콘솔의 로그를 사용하는 방법, 임의의 메시지를 작성하는 방법, 에러를 잡는 방법을 살펴본다.
7장. 디버깅 도구에서는 작성한 코드가 수동으로 테스트하기에 너무 크고 복잡할 경우 사용할 수 있는 방법을 알아본다. 인터넷 익스플로러 8과 파이어폭스 3.6, 크롬 5.0, 사파리 4.0, 오페라 10을 비롯한 시중에서 인기 있는 웹 브라우저가 제공하는 디버깅 도구의 도움을 받아 본다.
8장. 테스팅 도구에서는 서로 다른 브라우저 및 플랫폼 간 호환이 가능한 무료 테스팅 도구를 사용하여 테스트를 자동화하는 방법을 살펴본다. 사용자 인터페이스에 대한 테스트와 테스트 자동화 및 경고(assertion)를 이용하는 방법과 벤치마킹(benchmarking) 테스트에 대해서도 알아본다.

1장 자바스크립트 테스팅
자바스크립트는 웹 페이지의 어느 부분에 적합한가?
HTML의 내용
실습 예제 - HTML 문서 작성
속성을 이용하여 HTML 엘리먼트에 스타일 적용하기
HTML 엘리먼트에 id와 class 이름 지정하기
CSS
실습 예제 CSS로 HTML 문서에 스타일 적용하기
ID와 클래스 이름을 이용해 HTML 엘리먼트를 참조하고 스타일 적용하기
클래스 선택자와 ID 선택자의 차이점
클래스 선택자와 ID 선택자의 다른 용도
모든 CSS 속성의 목록
자바스크립트로 웹 페이지에 동적인 요소 가미하기
실습 예제 HTML 문서에 동작 부여하기
자바스크립트 문법
자바스크립트 이벤트
문서에서 엘리먼트 찾기
정리
자바스크립트와 서버 측 언어의 차이점
웹 페이지가 자바스크립트 없이도 동작해야 하는 이유
테스팅이란 무엇인가
왜 테스트를 해야 하는가
오류의 종류
불러오기 오류
실습 예제 불러오기 오류 체험하기
부분적으로 올바른 자바스크립트
실습 예제 불러오기 오류 체험하기
실행시간 오류
실습 예제 실행시간 오류 체험하기
논리 오류
실습 예제 논리 오류 체험하기
오류 없는 자바스크립트 코드 작성을 위한 조언
객체와 변수, 함수의 이름이 올바른지 확인하라
문법이 올바른지 확인하라
코드를 작성하기 전에 계획을 세워라
코드의 정확성을 확인하라
적절한 텍스트 편집기를 선택해 오류를 방지하라
요약

2장 자바스크립트에서의 임시 테스팅과 디버깅
임시 테스팅의 목적: 스크립트가 제대로 실행되게 만들자!
웹 브라우저에서 자바스크립트 오류가 발생하면 어떤 일이 일어나는가?
웹 브라우저 간의 차이점과 웹 브라우저 호환성 테스팅의 필요성
실습 예제 웹 브라우저의 기능을 비롯한 정보 가로채기
기능 테스트를 이용해 웹 브라우저 간의 차이점 테스트하기
실습 예제 서로 다른 웹 브라우저 간의 기능 테스트
적합한 곳에서 출력을 얻고 값을 설정하고 있는가
폼 값에 접근하기
실습 예제 폼 값에 접근하기
폼의 값에 접근하는 그밖의 기법
웹 페이지의 다른 부분에 접근하기
실습 예제 알맞은 곳에서 올바른 값 가져오기
스크립트가 기대한 결과를 내는가?
스크립트가 동작하지 않을 때 취할 수 있는 조치
코드를 시각적으로 검사하기
alert()을 이용해 코드의 동작 확인하기
alert()을 이용해 어떤 값이 사용되는지 확인하기
실습 예제 alert()을 이용하여 코드 검사하기
덜 요란한 방법으로 어떤 코드에서 어떤 값을 사용하는지 알아내기
실습 예제 사용 중인 변수 값을 '조용히' 확인하기
스크립트의 일부를 주석 처리해 테스팅 단순화하기
실습 예제 검사 과정 단순화하기
시간 차이 문제 : HTML과 상호작용 하기 전에 HTML을 불러왔는지 확인하자
임시 테스팅만으로 충분하지 않은 이유
요약

3장 문법 검증
검증과 테스팅의 차이점
유효하지만 잘못 된 코드 검증으로 찾을 수 없는 오류
유효하지 않지만 원하는 대로 동작하는 코드
유효하지 않고 제대로 동작하지도 않는 코드 검증이 아니면 찾아내기 힘든 오류
코드의 품질
자바스크립트를 작성하기 전에 HTML과 CSS를 먼저 검증하자
코드를 검증하지 않으면 어떤 일이 생길까?
컬러 코딩 편집기로 검증 오류 찾기
검증으로 찾을 수 있는 일반적인 오류
온라인 검증기 JS린트
실습 예제 JS린트를 이용해서 검증 오류 찾아내기
유효한 코드에서 발생하는 검증 경고
유효한 코드의 검증 경고를 수정해야 할까?
검증 경고를 수정하지 않으면 어떻게 될까?
검증 오류 고치기
use strict 구문 누락 오류
실습 예제 'use strict' 오류 고치기
++의 잘못된 사용
실습 예제 ++의 잘못된 사용 오류 고치기
정의하지 않은 함수 오류
실습 예제 정의하지 않은 함수 오류 고치기
너무 많은 var 구문 사용
실습 예제 너무 많은 var 구문 사용 고치기
\/를 사용해야 할 곳에 / 사용하기
실습 예제 /를 \/로 대체하기
===를 사용해야 할 곳에 == 사용하기
실습 예제 ==를 ===로 대체하기
정의하지 않은 alert
실습 예제 정의하지 않은 alert 오류 고치기
HTML 이벤트 핸들러 사용 지양하기
실습 예제 HTML 이벤트 핸들러 사용 지양하기
수정 사항 요약
자바스크립트 린트 다운로드하기
요약

4장 테스트 계획하기
소프트웨어 생명주기 훑어보기
애자일 방법론
실전에서의 애자일 방법론과 소프트웨어 생명주기
분석과 설계
구현과 테스팅
배치
유지보수
테스트를 하려면 반드시 테스트 계획을 세워야 할까
테스트 계획은 언제 수립할까
얼마나 많은 테스트가 필요할까
코드가 의도하는 바가 무엇인가
코드가 요구사항을 만족하는지 테스트하기
사용자의 잘못된 행동 테스트하기
정리
주요 테스팅 관련 개념과 전략
기능적 요구사항 테스트
비기능적 요구사항 테스트
수용 테스트
블랙 박스 테스트
사용성 테스트
경계 값 테스트
등가 분할
베타 테스트
화이트 박스 테스트
분기 테스트
파레토 테스트
단위 테스트
웹 페이지 테스트
성능 테스트
통합 테스트
회귀 테스트: 코드 변경 후에 테스트 적용하기
테스트 순서
테스트 계획 문서화하기
테스트 계획
버전 부여하기
테스트 전략
버그 보고 양식
예제 테스트 계획 정리
요약

5장 테스트 계획 실행하기
순서대로 테스트 계획 적용하기
테스트 케이스 1: 유효하고 적절한 값으로 테스트하기
실습 예제 테스트 케이스 1a : 화이트 박스 테스트를 바탕으로 유효하고 적절한 값 테스트하기
테스트 케이스 1b: 블랙박스 테스트를 바탕으로 유효하지만 적절하지 않은 값 테스트하기
실습 예제 테스트 케이스 1bi : 경계 값 테스트를 바탕으로 유효하지만 적절하지 않은 값 테스트하기
실습 예제 테스트 케이스 1bii : 예측된 유효하지 않은 값 테스트
테스트 케이스 2 : 프로그램 논리 테스트하기
실습 예제 프로그램 논리 테스트
테스트 케이스 3 : 통합 테스트와 유효하지 않은 값 테스트
실습 예제 테스트 케이스 3 : 기대했던 값으로 프로그램 전체 테스트하기
실습 예제 테스트 케이스 3b 두 번째 폼의 견고성 테스트
기대하지 않은 테스트 결과가 나올 때 어떻게 해야 할까
회귀 테스트 수행하기
실습 예제 버그 수정과 회귀 테스트 수행
성능 문제 코드를 압축하여 불러오기 속도 높이기
Ajax의 사용이 테스트에 미치는 영향
서버 측 테스트의 차이점
웹 사이트 방문자가 자바스크립트를 비활성화 했을 때 벌어지는 일
요약

6장 더 복잡한 코드 테스트하기
여러 개의 자바스크립트 파일을 사용할 때 발생하는 문제
이벤트 핸들러 결합하기
이름 충돌
자바스크립트 라이브러리 사용하기
다른 사람이 만든 라이브러리도 테스트해야 할까?
라이브러리 코드에 수행하는 테스트의 종류
성능 테스트
프로파일링 테스트
라이브러리의 GUI와 위젯 부가 기능 테스트
고의적으로 자바스크립트 오류 던지기
throw 구문
try catch, finally 구문
내장 객체로 오류 잡아내기
오류 객체
RangeError 객체
ReferenceError 객체
TypeError 객체
SyntaxError 객체
URIError 객체
EvalError 객체
오류 콘솔 로그 활용하기
오류 메시지
임의의 메시지 작성하기
스크립트 수정하고 테스트하기
실습 예제 코딩, 수정, 그리고 오류 던지고 잡기
요약

7장 디버깅 도구
IE8 개발자 도구(그리고 IE6과 IE7의 개발자 툴바 플러그인)
IE 개발자 도구 사용하기
열기
사용자 인터페이스 훑어보기
IE 디버깅 도구를 활용한 디버깅 기초
실습 예제 IE8 개발자 도구를 활용한 HTML 디버깅
실습 예제 IE8 개발자 도구를 활용한 CSS 디버깅
자바스크립트 디버깅하기
실습 예제 IE8 개발자 도구를 활용한 자바스크립트 디버깅
사파리나 구글 크롬의 웹 검사기와 자바스크립트 디버거
사파리와 구글 크롬의 차이점
크롬을 이용한 디버깅
사용자 인터페이스 훑어보기
실습 예제 구글 크롬을 이용한 디버깅
오페라 자바스크립트 디버거 [드래곤플라이]
드래곤플라이 사용하기
드래곤플라이 시작하기
실습 예제 오페라 드래곤플라이를 활용한 디버깅
Inspection과 Call Stack
Continue, Step Into, Step Over, Step Out과 오류 시 정지하기
드래곤플라이 설정
파이어폭스와 뱅크맨 확장 기능
파이어폭스의 뱅크맨 확장기능 사용하기
뱅크맨 자바스크립트 디버거 확장기능 설치하기
뱅크맨 실행
사용자 인터페이스 훑어보기
실습 예제 파이어폭스의 뱅크맨 확장기능을 이용한 디버깅
Breakpoints와 Call Stack
Local Variables와 Watches
실습 예제 뱅크맨을 활용한 고급 디버깅
파이어폭스와 파이어버그 확장 기능
요약

8장 테스팅 도구
Sahi
실습 예제 Sahi를 사용한 사용자 인터페이스 테스팅
Sahi로 더 복잡한 테스팅 수행하기
QUnit
실습 예제 QUnit로 자바스크립트 테스팅하기
실제 상황에서 QUnit 적용하기
다양한 상황에서의 고급 경고 테스트
JSLitmus
실습 예제 임시 자바스크립트 벤치마크 테스트 만들기
JSLitmus로 더 복잡한 테스팅하기
좀 더 살펴봐야 할 테스팅 도구
요약

자바스크립트JavaScript는 오늘날 웹 개발에 있어 매우 중요한 부분을 차지한다. 그만큼 시중에 많은 자바스크립트 프레임워크가 있지만, 그러한 프레임워크 없이 자바스크립트 프로그램을 작성하고 테스트하고 디버그debug하는 방법을 배우는 것은 더 나은 자바스크립트 개발자로 거듭나는 데 도움이 된다. 그러나 테스팅과 디버깅은 시간이 오래 걸리며 지루하고 고통스러운 작업이다. 이 책은 쉽고 매끄러운 테스팅을 위한 전략과 조언을 전하고, 도구 사용 방법을 소개하여 여러분의 고충을 덜어주고자 한다.
이 책은 학습 효과를 극대화하기 위해 단계별로 쉽게 따라 할 수 있는 예제 방식으로 구성됐다. 먼저 자바스크립트 개발자로서 자주 접하게 될 에러의 종류를 살펴보고, 간단한 예제를 통해 자바스크립트의 핵심적인 기능을 알아보겠다.
책의 내용을 따라가면서 검증을 통해 더 좋은 자바스크립트 코드를 만드는 방법을 배워보자. 이 방법만으로도 버그가 적고 빠른 자바스크립트 코드를 작성하는 훌륭한 개발자로 성장하는 데 큰 도움을 얻을 수 있으리라 생각한다.
여러 가지 테스팅 관련 개념을 살펴보고 그 개념들을 활용해 테스트 계획을 세운 후 테스트 계획을 실제 코드에 적용해 봄으로써, 자바스크립트 프로그램이 커졌을 때 코드를 테스트하는 더 좋은 방법을 배워본다. 또한 좀 더 복잡한 자바스크립트 코드에 테스트 계획을 적용할 수 있도록 여러 종류의 자바스크립트 에러를 찾아 내는 자바스크립트 내장 기능을 살펴본다. 이를 바탕으로 문제의 근본적인 원인을 규명하고 적절한 조치를 취할 수 있다.
(/ 저자서문 중에서)

어릴 적에 까만 바탕에 회색 텍스트가 깜빡거리는 컴퓨터를 가지고 놀 때가 생각납니다. 동네 컴퓨터 학원에서 배웠던 GW-BASIC과 삼촌이 읽던 낡은 책으로 C 언어를 독학하던 일도 떠오릅니다. 옛말에 십 년이면 강산도 변한다고 했는데, 그 때의 컴퓨팅 환경과 지금을 비교해보면 강산이 변한 정도가 아니라 땅과 바다가 뒤바뀐 정도라고 해도 과언이 아니지요.
컴퓨터의 성능은 말할 수 없이 빨라졌고, 전 세계의 모든 컴퓨터는 인터넷이라는 공통분모로 엮여 있습니다. 거의 모든 사람의 손에 스마트폰이 들려있는가 하면, 거대한 컴퓨팅 자원을 내 맘대로 가져다 쓸 수 있는 클라우드 컴퓨팅은 이미 보편화된 지 오래입니다.
이러한 변화를 우리 눈앞에 보여주는 창구가 바로 웹이라고 할 수 있습니다. 웹과 브라우저를 통해 우리는 멀리 떨어진 친구와 소식을 전하고, 구글의 전지구적 인프라를 이용해서 정보를 검색하는 등 다양한 웹 서비스를 이용할 수 있습니다.
자바스크립트는 바로 이 '웹'을 동작하게 하는 톱니바퀴 역할을 합니다. 초기에는 웹 페이지에 약간의 동적인 요소를 가미하는 용도로 사용했지만, 브라우저와 서버 간의 통신을 가능토록 하는 Ajax를 거쳐, Node.js 등의 서버 측 기술까지 그 활용 범위를 넓혀가고 있습니다. 이처럼 자바스크립트는 웹 기술 발전의 근간을 이루고 있으며, 그 중요성은 나날이 커지고 있습니다. 하지만 그 중요성에 비해 좋은 자바스크립트 코드를 만들고, 테스트하고 디버깅하는 일에 대해 체계적으로 정리한 자료를 찾기 어려운 실정입니다.
이 책은 바로 그러한 어려움에 보탬을 주고자 만들어진 책입니다. 자바스크립트를 처음 공부하는 초보자도 쉽게 따라할 수 있도록 웹을 구성하는 세 가지 요소인 HTML과 CSS, 자바스크립트의 문법을 설명합니다. 그리고 책의 예제를 따라 하다 보면 자바스크립트 코드를 테스트하는 데 필요한 이론적 배경 지식은 물론, 테스트와 디버깅을 수행하는 데 필요한 도구 사용법, 자바스크립트 코드 최적화 방법 등을 익힐 수 있습니다.
회사 업무와 번역을 병행하는 일이 쉽지 않았고, 특히 한 쪽 팔밖에 사용할 수 없는 역자에게 번역 작업은 남들보다 더 고된 일이었습니다. 하지만 이 책을 읽는 독자 여러분께 조금이라도 도움이 됐으면 하는 마음으로 단어 하나도 그냥 넘기지 않았고, 간혹 제대로 작동하지 않는 예제 코드는 직접 정정, 보완했습니다. 부디 이 책이 좋은 자바스크립트 애플리케이션을 만드는 많은 분께 도움이 되길 바랍니다.
마지막으로 좋은 책을 번역할 수 있는 기회를 주시고, 수시로 조언을 아끼지 않으신 에이콘출판사에 감사의 말씀을 전합니다. 아, 그리고 알쏭달쏭한 중국 인명을 깔끔하게 정리해준 내 친구 보경이에게도 약속대로 심심한 감사를 표하는 바입니다.
(/ 옮긴이의 말 중에서)