Top

JavaScript Testing [버그 없는 웹을 위한 자바스크립트 코드 테스트와 디버깅]

  • 원서명JavaScript Testing Beginner's Guide (ISBN 9781849510004)
  • 지은이리앙 유시안 유진
  • 옮긴이최광민
  • ISBN : 9788960775398
  • 25,000원
  • 2014년 03월 31일 펴냄
  • 페이퍼백 | 312쪽 | 188*235mm
  • 시리즈 : acorn+PACKT, 소프트웨어 테스팅

책 소개

요약

이 책에는 실전에서 유용하게 활용할 수 있는 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) 테스트에 대해서도 알아본다.

저자/역자 소개

저자 서문

자바스크립트JavaScript는 오늘날 웹 개발에 있어 매우 중요한 부분을 차지한다. 그만큼 시중에 많은 자바스크립트 프레임워크가 있지만, 그러한 프레임워크 없이 자바스크립트 프로그램을 작성하고 테스트하고 디버그debug하는 방법을 배우는 것은 더 나은 자바스크립트 개발자로 거듭나는 데 도움이 된다. 그러나 테스팅과 디버깅은 시간이 오래 걸리며 지루하고 고통스러운 작업이다. 이 책은 쉽고 매끄러운 테스팅을 위한 전략과 조언을 전하고, 도구 사용 방법을 소개하여 여러분의 고충을 덜어주고자 한다.

저자 소개

리앙 유시안 유진(Liang Yuxian Eugene)

파이썬/장고(Python/Django)나 자바스크립트/제이쿼리(JavaScript/JQuery)를 이용해 만들어진 웹 애플리케이션을 바탕으로 다양한 문제를 창의적으로 해결하는 것을 즐긴다. 추천 알고리즘과 링크 분석, 데이터 시각화, 데이터 마이닝, 비스니스 인텔리전스(business intelligence), 지능형 사용자 인터페이스에 관련된 연구도 진행하고 있으며, 현재 대만 타이페이에 위치한 국립 정치 대학교(NCCU, National Cheng Chi University)에서 경영과 컴퓨터과학 두 가지 학위를 이수 중이다. 최근에는 개인 블로그(http://www.liangeugene.com)를 개설했다.

옮긴이의 말

어릴 적에 까만 바탕에 회색 텍스트가 깜빡거리는 컴퓨터를 가지고 놀 때가 생각납니다. 동네 컴퓨터 학원에서 배웠던 GW-BASIC과 삼촌이 읽던 낡은 책으로 C 언어를 독학하던 일도 떠오릅니다. 옛날 말에 십 년이면 강산도 변한다고 했는데, 그 때의 컴퓨팅 환경과 지금을 비교해 보면 강산이 변한 정도가 아니라 땅과 바다가 뒤바뀐 정도라고 해도 과언이 아니지요.

컴퓨터의 성능은 말할 수 없이 빨라졌고, 전 세계의 모든 컴퓨터는 인터넷이라는 공통분모로 엮여있습니다. 거의 모든 사람의 손에 스마트 폰이 들려있는가 하면, 거대한 컴퓨팅 자원을 내 맘대로 가져다 쓸 수 있는 클라우드 컴퓨팅은 이미 보편화된 지 오래입니다.

이러한 변화를 우리 눈앞에 보여주는 창구가 바로 웹이라고 할 수 있습니다. 웹과 브라우저를 통해 우리는 멀리 떨어진 친구와 소식을 전하고, 구글의 전지구적 인프라를 이용해서 정보를 검색하는 등 다양한 웹 서비스를 이용할 수 있습니다.

자바스크립트는 바로 이 ‘웹’을 동작하게 하는 톱니바퀴 역할을 합니다. 초기에는 웹 페이지에 약간의 동적인 요소를 가미하는 용도로 사용했지만, 브라우저와 서버간의 통신을 가능토록 하는 Ajax를 거쳐, Node.js 등의 서버 측 기술까지 그 활용 범위를 넓혀가고 있습니다. 이처럼 자바스크립트는 웹 기술 발전의 근간을 이루고 있으며, 그 중요성은 나날이 커지고 있습니다. 하지만 그 중요성에 비해 좋은 자바스크립트 코드를 만들고, 테스트하고 디버깅하는 일에 대해 체계적으로 정리한 자료를 찾기 어려운 실정입니다.

이 책은 바로 그러한 어려움에 보탬을 주고자 만들어진 책입니다. 자바스크립트를 처음 공부하는 초보자도 쉽게 따라할 수 있도록 웹을 구성하는 세 가지 요소인 HTML과 CSS, 자바스크립트의 문법을 설명합니다. 그리고 책의 예제를 따라 하다 보면 자바스크립트 코드를 테스트하는 데 필요한 이론적 배경 지식은 물론, 테스트와 디버깅을 수행하는 데 필요한 도구 사용법, 자바스크립트 코드 최적화 방법 등을 익힐 수 있습니다.

회사 업무와 번역을 병행하는 일이 쉽지 않았고, 특히 한 쪽 팔 밖에 사용할 수 없는 역자에게 번역 작업은 남들보다 더 고된 일이었습니다. 하지만 이 책을 읽는 독자 여러분께 조금이라도 도움이 됐으면 하는 마음으로 단어 하나도 그냥 넘기지 않았고, 간혹 제대로 작동하지 않는 예제 코드는 직접 정정했습니다. 부디 이 책이 좋은 자바스크립트 애플리케이션을 만드는 많은 분께 도움이 되길 바랍니다.

마지막으로 좋은 책을 번역할 수 있는 기회를 주시고, 수시로 조언을 아끼지 않으신 에이콘출판사에 감사의 말씀을 전합니다. 아, 그리고 알쏭달쏭한 중국 인명을 깔끔하게 정리해준 내 친구 보경이에게도 약속대로 심심한 감사를 표하는 바입니다.

옮긴이 소개

최광민

한양대학교 컴퓨터 전공을 마치고, 현재 삼성SDS CSP 연구소에 재직 중이다. 주요 연구 분야는 클라우드 컴퓨팅이지만, 흥미로운 기술이라면 무엇이든 배우고 즐길 준비가 돼있다.

목차

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

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

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

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

    도서 오류 신고

    에이콘출판사에 관심을 가져 주셔서 고맙습니다. 도서의 오탈자 정보를 알려주시면 다음 개정판 인쇄 시 반영하겠습니다.

    오탈자 정보는 다음과 같이 입력해 주시면 됩니다.

    (예시) p.100 아래에서 3행 : '몇일'동안 -> 며칠동안