개발자와 디자이너가 함께 보는 자바스크립트 프로그래밍

팀 라이트 저자(글) · 이대엽 번역

에이콘출판 · 2015년 05월 27일

책 소개

『개발자와 디자이너가 함께 보는 자바스크립트 프로그래밍』은 점진적 기능 향상으로 시작해 기본적인 자바스크립트 코드 작성법, 관련 웹 개발 기법 등 다양한 주제가 한데 어우러진 책이다. 책은 새 프로그램을 작성하거나 기존 코드를 효율적으로 수정하는 데 필요한 모든 자바스크립트 개념과 기술, 디자인과 개발에 쓰일 견고하고 안전한 코드 작성, 사용성, 재사용성, 접근성, 명료함, 보안, 성능의 극대화, 코드가 실행될 브라우저 환경의 완벽 활용, 행위와 데이터 상호작용을 만들어 내기 위한 DOM 접근, 손쉽고 효율적인 접근을 위한 데이터 저장, 변수, 함수, 반복문을 비롯한 핵심 언어 기능 활용, 자바스크립트 라이브러리를 활용한 생산성 향상 등을 다루고 있다.

작가정보

저자(글) 팀 라이트

저자 팀 라이트(Tim Wright)는 2004년부터 웹 디자이너이자 프론트엔드 개발자로 활동해 왔으며, 주로 CSS, HTML5, 접근성, 사용자 경험에 관심을 두고 데스크톱에서 모바일 기기로 자연스럽게 확장되는 능력을 갖춘 애플리케이션을 구축해 왔고, 전국의 다양한 대학교에서 근무해 오면서 그 과정에서 웹 표준의 발전을 도모해왔다. 아울러 스매싱 매거진(Smashing Magazine), 사이트포인트(SitePoint), 웹 디자이너 디팟(Web Designer Depot)과 같은 인기 있는 웹 디자인 관련 사이트에 HTML5와 CSS3부터 사용자 경험과 고급 자바스크립트 기법에 이르기까지 프론트엔드 개발의 모든 부문에 관해 수많은 글을 기고해 왔다. 또한, 자신의 개인 블로그인 csskarma.com을 통해 많은 글을 쓰고 있다. 팀은 버지니아공대에서 마케팅경영 학사학위를 받았으며, 그래픽 디자인을 전공했다.

번역 이대엽

역자 이대엽은 책 만드는 일을 하고 있으며, 이따금 IT 관련 서적을 번역하기도 한다. 『자바 API 디자인』 『풀스택 자바스크립트 개발』 『테스트 주도 개발로 배우는 객체 지향 설계와 실천』 『자바스크립트 개론』 『모듈라 자바』 『시작하세요! 맥 OS X 라이언』 『도메인 주도 설계』 『하이버네이트 완벽 가이드』 『개념을 잡아주는 프로그래밍 정석』 등을 번역했다.

목차

• 1장 점진적 기능 향상
  __점진적 기능 향상의 정의
  ____역사
  ____목적
  ____접근성
  ____재사용성
  ____점진적 기능 향상 대 단계적 기능 축소
  __구조 계층
  ____HTML5에 의미 더하기
  __표현 계층
  ____인라인 CSS
  ____스타일시트 연결
  __행위 계층
  ____인라인 자바스크립트
  ____내장 자바스크립트
  ____외부 및 분리형 자바스크립트
  __점진적 기능 향상의 혜택
  ____성능
  ____미래를 위한 대비
  ____터치 인터페이스
  __점진적 기능 향상에 관한 마지막 조언
  __정리
  __연습문제
  
  2장 브라우저에서의 자바스크립트
  __자바스크립트의 민중사
  ____기원
  ____점진적 기능 향상
  ____행위 계층
  ____오늘을 지나서
  __브라우저와 자바스크립트의 상호작용
  ____HTTP 요청
  ____자바스크립트와 렌더링 엔진
  __자바스크립트가 할 수 있는 일
  ____HTML 변경
  ____서버와의 통신
  ____데이터 저장
  __자바스크립트를 사용하는 법
  ____사용자 경험 개선
  ____책임감 있게 자바스크립트 사용
  ____실패 처리 기법 작성
  __자바스크립트를 사용하는 데 도움되는 도구
  ____언어에 내장된 도구
  ____브라우저에 내장된 도구
  __정리
  __연습문제
  
  3장 자바스크립트 용어
  __기초
  ____문서 객체 모델
  ____부모
  ____자식
  ____형제
  ____변수
  ____문자열
  ____주석
  ____연산자
  ____use strict
  __저장소
  ____캐시
  ____배열
  ____쿠키
  ____자바스크립트 객체 표기법
  ____객체
  __상호작용 생성
  ____반복문
  __조건문
  ____switch 문
  ____함수
  ____익명 함수
  ____콜백 함수
  ____메소드
  ____이벤트
  ____Ajax
  __정리
  __연습문제
  
  4장 DOM 접근
  __DOM이란 무엇인가?
  __DOM 트리
  ____엘리먼트 노드
  ____텍스트 노드
  ____속성 노드
  __엘리먼트 노드 사용
  ____ID를 이용한 엘리먼트 선택
  ____태그 이름을 이용한 엘리먼트 선택
  ____클래스를 이용한 엘리먼트 선택
  ____자바스크립트에서 CSS 선택자를 이용한 노드 선택
  __속성 노드 사용
  ____속성 구하기
  ____속성 설정
  ____속성 제거
  __텍스트 노드 다루기와 콘텐츠 변경
  __DOM 탐색
  ____첫 번째 자식과 마지막 자식에 접근
  ____DOM에서 동적으로 노드를 추가하거나 제거
  ____DOM에 엘리먼트 추가
  ____DOM에서 엘리먼트 제거
  __정리
  __연습문제
  
  5장 자바스크립트에서의 데이터 저장
  __변수
  ____문자열
  ____숫자
  ____불린
  ____변수의 성능
  __배열
  ____기본 배열
  ____연관 배열
  ____다차원 배열
  ____배열에 데이터 넣기
  ____배열 메소드 사용
  __join
  __slice
  __shift와 unshift
  __러닝
  __pop
  __concat
  __sort
  __객체
  ____객체의 성능
  __JSON
  ____JSON 사용의 이점
  ____API 사용
  __HTML5의 웹 스토리지
  ____localStorage와 sessionStorage
  __setItem
  __getItem
  __removeItem
  ____JSON을 이용한 데이터 덩어리 저장
  ____책임감 있는 웹 스토리지 사용
  __정리
  __연습문제
  
  6장 변수, 함수, 반복문
  __변수 정의
  ____변수 그룹화
  ____예약어
  __함수
  ____기본 함수
  ____익명 함수
  __유효범위
  ____함수를 이용한 함수 호출
  ____데이터 반환
  ____메소드로서의 함수
  __반복문
  ____for 문
  __조건문
  ____if 문
  ____if/else 문
  ____switch 문
  ____if와 switch
  __종합 예제
  __정리
  __연습문제
  
  7장 이벤트를 통한 사용자와의 상호작용
  __이벤트 첨부
  ____이벤트 핸들러
  ____이벤트 리스너
  ____이벤트 바인딩
  ____이벤트 바인딩 해제
  __마우스 이벤트와 키보드 이벤트
  ____click
  ____focus와 blur
  ____접근성
  ____change
  ____mouseover와 mouseover(호버)
  ____submit
  ____기본 동작 방지
  ____keydown, keypress, keyup
  ____종합 예제
  __터치와 방향 이벤트
  ____touchstart와 touchend
  ____touchmove
  ____orientationchange
  ____터치 이벤트 지원
  __종합 예제
  __정리
  __연습문제
  
  8장 Ajax를 이용한 서버와의 통신
  __Ajax의 역사
  ____서버 통신
  ____XMLHttpRequest
  __Ajax 호출 생성
  ____서버에 요청 전송
  ____서버에서 데이터 돌려받기
  ____반복적인 Ajax 호출
  __Ajax 데이터 형식
  ____XML
  ____HTML
  ____JSON
  __Ajax 접근성
  ____라이브 영역과 ARIA
  __자주 저지르는 Ajax 관련 실수
  ____피드백 제공
  __종합 예제
  __Ajax는 어디로 가고 있나?
  __정리
  __연습문제
  
  9장 코드 구성
  __일반적인 코드 작성 스타일 규칙
  ____유효범위
  ____빨리 실패하기
  ____사용자 경험
  __코드 설계
  ____파일과 디렉토리
  ____문서 내의 스크립트
  ____변수 선언
  ____변수와 함수의 명명
  ____주석
  ____들여쓰기
  ____공백
  ____문장 공백
  ____줄바꿈
  ____수학과 연산자
  ____eval( ) 사용
  ____스타일 가이드를 과도하게 받아들이기
  __코드 구조
  ____함수
  ____익명 함수
  ____변수로서의 함수
  ____메소드로서의 함수
  ____자바스크립트 개발 패턴
  __정리
  __연습문제
  
  10장 라이브러리 활용
  __자바스크립트 라이브러리 기초
  ____라이브러리 학습 과정
  ____문법
  ____목표에 집중
  ____지름길 트기
  ____브라우저 문제 해결
  ____인기 있는 라이브러리
  __제이쿼리 기초
  ____document.ready
  ____선택자
  ____DOM 탐색
  ____스타일 정보 추가
  ____이벤트 바인딩
  ____애니메이션
  __제이쿼리 중급
  ____제이쿼리의 Ajax 활용
  ____제이쿼리에서의 데이터 순회
  ____함수 연쇄 호출
  __플러그인을 통한 라이브러리 확장
  ____플러그인 제작
  __라이브러리의 좋은 점
  ____대중성과 커뮤니티
  ____효율적인 코드
  __라이브러리의 나쁜 점
  ____부하
  ____성능
  ____과도한 의존과 유통 기한
  __마이크로라이브러리의 활용
  ____좋은 점
  ____나쁜 점
  __정리
  __연습문제
  
  11장 HTML5 자바스크립트 API
  __HTML5란 무엇인가?
  __마크업(HTML로도 알려진)
  ____더 나은 시맨틱 만들기
  ____좀 더 접근성 높은 콘텐츠 제작
  __자바스크립트 API
  ____navigator 객체
  ____지오로케이션
  ____오디오와 비디오
  ____히스토리 API
  ____웹 워커
  __디바이스 API
  ____배터리 상태 API
  ____진동 API
  ____네트워크 정보 API
  __기능 탐지를 이용한 디바이스 API 활용
  __정리
  __연습 문제
  
  12장 자바스크립트를 통한 전진
  __핵심 주제에 대한 간략한 복습
  ____점진적 기능 향상
  ____DOM 조작
  ____데이터 저장소
  ____서버 통신
  __디자이너를 위한 자바스크립트
  ____고급 인터페이스 디자인
  ____자바스크립트에서의 CSS 변환
  ____데스크톱에서의 상호작용
  __개발자를 위한 자바스크립트
  ____자바스크립트 템플릿
  ____NodeJS를 이용한 서버 측 자바스크립트
  __정리
  __연습문제
  
  부록 A 모범 답안

출판사 서평

★ 요약 ★

자바스크립트를 체계적으로 배우는 가장 확실한 방법! 기존의 자바스크립트 책과는 전혀 다른 구성이 돋보이는 보기 드문 책이다. 이 책은 점진적 기능 향상으로 시작해 기본적인 자바스크립트 코드 작성법, 관련 웹 개발 기법 등 다양한 주제가 한데 어우러져 있다. 따라서 자바스크립트뿐 아니라 웹 개발에 관심이 있는 개발자나 디자이너가 자바스크립트를 체계적으로 시작하고 가장 현대적인 코드 작성법을 배우는 데 적합하다. 아울러 프론트엔드 개발이라는 큰 그림을 놓치지 않고 그 안에서 자바스크립트를 적절히 활용하는 데 주안점을 두고 있기에 기존의 자바스크립트 프로그래머들도 배울 만한 내용이 많을 책이다.

★추천의 글★

“현대적인 웹 인터페이스, 서버 측 기술, HTML5 게임에서, 오늘날 자바스크립트는 그 어떤 때보다도 매우 중요하고 두루 사용되는 도구로 자리매김했다. 자바스크립트를 시작하려고 하거나 자바스크립트라는 언어의 실제적인 핵심 지식을 좀 더 깊이 있게 이해하고자 하는 분들에게 이 책을 적극 추천한다.”
- 에반 버차드(Evan Burchard) / 독립 웹 개발자

“전에 자바스크립트에 관한 다른 책을 두어 권 정도 읽어봤지만, 백엔드 개발자로서 이 책을 읽으며 짜릿한 흥분을 느꼈다. ‘점진적 기능 향상’과 ‘단계적 기능 축소’의 의미 차이를 설명한 부분은 프론트엔드 개발을 처음 접하는 사람이 잘 이해할 수 있는 방식으로 정리돼 있다. 팀, 정말 멋집니다!”
- 조 데본(Joe Devon) / StartupDevs.com의 공동 설립자

“팀 라이트는 자바스크립트를 배우려는 초보 프론트엔드 개발자를 위한 유쾌한 실용서를 써냈다. 이 책의 강점은 자바스크립트를 잘 소개하고 있을뿐더러 자바 스크립트를 언제 어디에 사용해야 할지에 대한 맥락을 잘 보여준다는 사실이다.”
- R. S. 도이엘(R. S. Doiel) / USC 웹 서비스의 선임 소프트웨어 엔지니어

“현대적인 자바스크립트 개발을 굉장히 잘 소개한 책이다. 흥미진진한 미래까지 이어지는 자바스크립트의 역사를 다루며 시작하는 이 책은 초보 개발자가 현업에서 실제 응용할 수 있는 방법을 알려준다. 내가 초보일 때 이 책이 나왔더라면 좋았을 텐데!”
- 힐리샤 헤이굿(Hillisha Haygood) / 스포팅 뉴스의 선임 웹 개발자

“팀은 최전선에서 점진적 기능 향상을 유지하면서 자바스크립트 코드를 작성하기 위한 귀중한 기법들을 선사한다. 자바스크립트를 처음 접하는 사람들에게 이 책은 소중한 자산이 될 것이다. 기초적인 사항을 모두 다룬 다음 곧바로 터치 이벤트, Ajax, HTML5 API로 넘어가는 이 책의 예제는 명료하며 이해하기도 쉽다. 이 책을 읽고 나면 큰 효과를 낼 수 있는 자바스크립트를 언제 어떻게 사용해야 할지 배울 수 있을 것이다.”
- 톰 리드베터(Tom Leadbetter) / 프리랜서 웹 디자이너

“초보 개발자와 베테랑 개발자 모두에게 가치 있는 책이다. 읽기 쉽게 구성되어 있고 자바스크립트에 익숙해지는 단계별 과정을 알려주는 책으로서 특히 초보 개발자에게 매우 좋다. 베테랑 개발자는 어느새 까맣게 잊어버렸을 다양한 모범사례를 떠올릴 수 있을 것이다.”
- 크리스토퍼 스웨너(Christopher Swenor) / zMags의 기술 부문 과장

★ 이 책에서 다루는 내용 ★

■ 새 프로그램을 작성하거나 기존 코드를 효율적으로 수정하는 데 필요한 모든 자바스크립트 개념과 기술
■ 디자인과 개발에 쓰일 견고하고 안전한 코드 작성
■ 사용성, 재사용성, 접근성, 명료함, 보안, 성능의 극대화
■ 코드가 실행될 브라우저 환경의 완벽 활용
■ 행위와 데이터 상호작용을 만들어 내기 위한 DOM 접근
■ 손쉽고 효율적인 접근을 위한 데이터 저장
■ 변수, 함수, 반복문을 비롯한 핵심 언어 기능 활용
■ 이벤트를 통한 사용자와의 상호작용
■ Ajax를 통한 서버와의 통신
■ 자바스크립트 라이브러리를 활용한 생산성 향상

★ 이 책의 대상 독자 ★

이 책은 자바스크립트에 관해 알고 싶은 초보 웹 디자이너나 개발자를 위한 책이다. 이 책을 읽기 전에 HTML과 CSS에 관해 알고 있어야 하며, 점진적 기능 향상(progressive enhancement)의 개념에 친숙해야 한다. 이 책은 완전 초보를 비롯해 자바스크립트에 관한 지식을 넓히고자 하는 숙련된 웹 베테랑에게도 똑같이 도움될 수 있다. 이 책을 통해 빠르게 변화하는 업계에 관해 좀 더 배우고 싶어하는 열정이 스며들길 바란다.

★ 지은이의 말 ★

자바스크립트에 관한 책을 쓰기로 마음먹었을 때 이 언어를 배우는 법이 자연스럽게 느껴지는 식으로 책을 만들고 싶었다. 나는 자바스크립트를 학교나 책에서 배우지 않았다. 내가 알고 있는 자바스크립트 지식은 현실 세계의 애플리케이션과 시행착오, 자기 동기부여에서 나온 것이다. 나는 여러분이 이 책의 내용을 금세 따라가면서도, 자바스크립트 언어에 대한 탄탄한 기반을 다질 수 있고 지나치게 많은 정보로 위압감을 느끼지는 않게 하는 독특한 방식으로 정보를 제공하고 싶었다. 전반적으로는 신속하게 진행하지만 기본적으로 구획을 나눠 구간마다 집중적이고 명확하게 공부했던 나의 학습 경험을 살려 이 책의 내용을 설명하고자 노력했다. 자바스크립트 언어는 한 번에 모든 것을 배운다면 혼란스러울 수 있다. 동일한 작업을 달성하는 데는 수백 가지의 방법이 있는데, 대부분은 꼭 알아야 할 필요가 없는 기법들이다. 따라서 이 책에서는 같은 작업을 하기 위한 지나치게 많은 방법을 보여주기보다는 한 가지라도 정말 잘 해내는 데 집중할 수 있도록 최선을 다했다.

이 책의 구성은 기존 자바스크립트 책과는 조금 다르다. 전 책에 걸쳐 용어를 빈번하게 소개하고 용어가 새로 등장할 때마다 설명하면 독자들은 한 번에 너무 많은 정보를 주입 받는다는 느낌이 들 수 있다. 이렇게 되면 당면한 주요 문제에 집중하는 것을 방해한다. 나는 아무도 읽지 않는 용어집을 따로 실어 용어를 설명하는 대신 이 책의 초반부에 집어넣어 이러한 문제를 해결했다. 이와 같은 내용을 담은 초반부에서 여러분은 자바스크립트 언어에 담긴 각종 핵심 개념을 간결하게 설명한 내용도 읽을 수 있다. 이런 방식을 통해, 자질구레한 용어 정의에 귀중한 시간을 낭비하지 않아도 되고 우리가 함께 하는 이 짧은 시간 동안 최대한 많은 지식을 얻는 데 집중할 수 있다.

자바스크립트 같은 견고한 언어를 배우는 과정은 언뜻 보기에는 어려운 일처럼 보일지도 모르지만 그리 심각하지는 않으니 걱정할 필요는 없다. 기초 개념을 이해하고 나면 나머지는 말을 배우는 과정과 같다. 언어를 적절히 조직화하는 방법과 성능 최적화, 그리고 무엇보다도 CSS를 사용해야 하는 시점 등이 다소 어려울 수는 있다. 이 책을 거의 다 읽을 때쯤이면 자바스크립트를 책임감 있게 사용함으로써 더 나은 사용자 경험을 효과적으로 만들어내는 데 필요한 지식들을 모두 얻게 될 것이다.

자바스크립트는 놀랍도록 다채로운 역사를 지녔으며 전망이 매우 밝은 언어다. 이 책을 읽는 과정에서 자바스크립트라는 언어의 기초적인 사항들을 배울 것이며, 동시에 HTML5 자바스크립트 API와 터치가 가능한 인터페이스를 제작하는 방법 등 좀 더 수준 높은 주제에 관해서도 익힐 수 있을 것이다. 자바스크립트는 분명히 코드이지만 지루함과는 거리가 멀다는 사실을 확실히 알게 될 것이다. 자바스크립트를 이용해 꽤 멋들어진 인터페이스도 만들 수 고, 그 과정에서 재미도 느낄 수 있으리라.

이 책이 오래도록 여러분에게 도움을 주고 자바스크립트에 지속적인 관심을 갖게 할 발판이 되길 바란다. 자바스크립트를 배우는 여정의 첫 단계로 이 책을 선택한 여러분을 환영한다. 이미 자바스크립트를 알고 있는 분이라면, 다시 찾아주어 반갑다.

★ 옮긴이의 말 ★

자바스크립트가 프론트엔드를 위한 가장 강력한 언어로 자리매김한 지 벌써 수년이 지났지만 시중에 나온 책 가운데 극히 일부를 제외하면 초보자에게 올바른 자바스크립트 코딩 기법을 체계적으로 알려주는 책은 많지 않다. 게다가 기존에 나온 책들은 대부분 자바스크립트 문법이나 코드 작성법에만 초점을 맞추고 있고 실제 프로젝트에서 자바스크립트를 올바르게 활용하는 방향이나 기법에 대해서는 다루지 않는 경우가 대부분이다. 하지만 실제 프로젝트에서는 단순히 자바스크립트 코드를 잘 작성하는 것은 기본이고 자바스크립트라는 기술이 본연의 목적을 잘 달성하고, 다른 요소와 조화롭게 어우러지게끔 적절히 배치하고 구성하는 등의 기술도 필요하다.
이 책에는 현장에서 꼭 필요로 하는 현대적인 자바스크립트 개발 방법론이 간결하게 정리돼 있다. 기본적인 자바스크립트 코드 작성법은 물론, 점진적 기능 향상(progressive enhancement)과 단계적 기능 축소(graceful degradation) 등의 현대적인 자바스크립트 개발 기법, 효율적인 코드 구성, 웹의 동작 원리와 HTML5 자바스크립트 API, 외부 라이브러리 활용법 등 자바스크립트 개발을 둘러싼 다양한 주제를 간결하고도 빠짐없이 소개한다. 게다가 웹 개발을 처음 시작하는 개발자나 디자이너도 읽고 이해할 수 있을 정도로 쉽게 쓰여 있어서 웹 개발에 막 입문한 분들이 올바른 자바스크립트 개발 기법을 체계적으로 익히는 데 적당하다.
요즘 자바스크립트는 전례 없는 부흥기를 맞고 있다. Node.js 같은 서버 측 자바스크립트까지 나오면서 자바스크립트는 활동 영역을 급격히 확대해 나가고 있으며, 새로 만들어지는 오픈소스 프로젝트에서도 자바스크립트가 압도적으로 많이 사용되고 있다. 이 같은 자바스크립트의 부흥기에 이런 책이 나왔다는 것이 반갑고, 이 책을 번역할 수 있게 되어 감사하다.

기본정보

ISBN	9788960777101
발행(출시)일자	2015년 05월 27일
쪽수	456쪽
크기	188 * 235 * 22 mm / 859 g
총권수	1권
시리즈명	에이콘 웹프로페셔널 시리즈
원서(번역서)명/저자명	Learning JavaScript : A Hands-On Guide to the Fundamentals of Modern JavaScript/Tim Wright