자바스크립트 웹 애플리케이션 JavaScript Web Applications - 제이쿼리, Node.js, 웹소켓, 스파인, 백본, 자바스크립트MVC

괜찮다고 말하지만 괜찮지 않은 너와 나, 우리가 안고 사는 우울. 그리고 그 감정이 가져온 마음의 병 우울증. 화제의 채널



♣ 모던 자바스크립트 애플리케이션 개발에 필요한 모든 이야기

네스케이프의 내부 스크립트로 시작된 출발이지만, 이제 자바스크립트는 모던 웹 구축에 있어서 없어서는 안 될 존재가 되었다. 이 책은 이러한 자바스크립트의 최신 기술로 모던 리치 웹 애플리케이션을 만드는 방법을 제시한다. 제이쿼리, 웹소켓, Node.js, 백본, CommonJS, 자바스크립트MVC, Ajax, 스파인 등 프로젝트에 필요한 거의 모든 자바스크립트 기술을 만나보자!



♣ 대상 독자

이 책은 자바스크립트 초보자를 대상으로 하는 책이 아니므로 자바스크립트 언어의 기초 지식이 없다면 『더글라스 크락포드의 자바스크립트 핵심 가이드』(2008, 한빛미디어) 등의 입문서를 참고하기 바란다. jQuery 같은 라이브러리를 이용한 자바스크립트 경험이 있는 개발자가 좀 더 고급 기능을 지원하는 자바스크립트 애플리케이션을 개발할 수 있도록 돕는 것이 이 책의 목표다. 숙련된 자바스크립트 개발자에게 유용한 참고서가 될 것이다.



♣ 데스크톱에서나 가능했던 일이 웹에서도 일어난다!

데스크톱의 기능을 웹으로 가져가서 리치 자바스크립트 애플리케이션을 만드는 일이 가능할까? 이 책은 모던 애플리케이션을 만드는 데 필요한 애플리케이션 구조, 템플릿팅, 프레임워크, 서버와 통신 등에 대한 거의 모든 정보를 담아 위 질문에 대한 해답을 제시한다. 차근차근 따라 하면 누구라도 멋지게 해낼 수 있다!



♣ 더 멋진 웹 애플리케이션을 위해 최신 도구를 총동원하라!

이 책은 제이쿼리, 웹소켓, Node.js, 백본, CommonJS, 자바스크립트MVC, Ajax뿐 아니라 저자가 직접 개발한 스파인 프레임워크를 독자에게 선사한다. 덕분에 반응성이 향상되고 사용자 경험성이 적용된 자바스크립트 애플리케이션을 만드는 방법을 수월하게 익힐 수 있다.



* MVC 패턴으로 애플리케이션 내부의 의존성 관리하기

* 템플릿팅과 데이터 바인딩하기

* Ajax와 크로스 도메인 요청으로 원격 데이터 로딩하기

* 웹소켓과 Node.js로 실시간 애플리케이션 만들기

* 파일 드롭 이벤트로 데이터를 업로드하고 진행상황을 표시하기

* jQuery, 스파인, 백본 등의 주요 프레임워크와 라이브러리 사용하기

* 테스트 프로그램을 구현하고 콘솔로 애플리케이션 디버그하기

* 캐싱과 최소화로 효율적으로 배포하기



[1장] 자바스크립트 역사를 살펴보면서 과거의 사건이 현재 자바스크립트 구현과 커뮤니티에 어떤 영향을 미쳤는지 설명한다. MVC 아키텍처 패턴을 소개하고, 자바스크립트 생성자 함수, 프로토타입 상속, 자신만의 클래스 라이브러리 만드는 방법 등을 살펴본다.



[2장] 히스토리 API와 동작 등을 포함한 기초적인 브라우저 이벤트를 설명한다. jQuery로 이벤트를 바인드하는 방법, 이벤트를 위임하는 방법, 커스텀 이벤트를 만드는 방법 등을 살펴본다. 발행구독 패턴으로 DOM 이외의 이벤트를 사용하는 방법도 살펴본다.



[3장] 애플리케이션에서 MVC 모델을 사용하는 방법, 원격 데이터를 로딩하고 조작하는 방법을 설명한다. MVC와 명칭공간이 왜 중요한지를 살펴본 다음 직접 ORM 라이브러리를 만들어 모델 데이터를 관리하는 방법을 확인한다. 다음으로 JSONP, 크로스 도메인 Ajax를 이용해 원격 데이터를 로드하는 방법을 살펴본다. 마지막으로 HTML5 로컬 저장소를 이용해 모델 데이터를 영구 저장하고 RESTful 서버에 요청하는 방법을 배운다.



[4장] 컨트롤러 패턴으로 상태를 클라이언트에 저장하는 방법을 보여준다. 모듈로 로직을 캡슐화해서 전역 명칭공간이 오염되는 것을 방지할 수 있는지 살펴본다. 이벤트를 리스닝하고 DOM을 조작하는 작업을 수행할 때 어떻게 컨트롤러와 뷰가 서로 투명하게 상호작용할 수 있는지 살펴본다. 마지막으로 URL 해시 조각을 사용한 라우팅과 새로운 HTML5 히스토리 API를 사용한 라우팅을 살펴본다. 각 기법의 장단점도 확인할 수 있다.



[5장] 뷰와 자바스크립트 템플릿팅을 설명한다. 동적으로 뷰를 렌더링하는 방법, 다양한 템플릿팅 라이브러리, 템플릿을 저장할 장소(페이지에 직접 삽입, 스크립트 태그에 저장, 원격 로딩) 등을 살펴본다. 그리고 모델 데이터와 뷰 데이터가 동적으로 동기화될 수 있도록 모델 컨트롤러와 뷰를 연결하는 데이터 바인딩 방법도 배운다.



[6장] CommonJS 모듈을 이용해 자바스크립트 의존성을 관리하는 방법을 자세히 살펴본다. CommonJS가 등장한 이유와, 역사 및 브라우저에서 야블, RequireJS 같은 라이브러리로 CommonJS 모듈을 만드는 방법을 배운다. 그리고 서버에서 자동으로 모듈을 감싸서 성능을 높이고 시간을 절약하는 방법을 살펴본다. 마지막으로 스프로켓이나 LABjs 같은 CommonJS의 다양한 대안을 확인한다.



[7장] HTML5 파일 API가 제공하는 장점을 살펴본다. 브라우저 지원 상황, 다중 업로드, 브라우저로 드래그한 파일과 클립보드 이벤트로 넘어온 파일받기 등을 살펴보고, 블랍과 슬라이스로 파일을 읽고 결과를 브라우저에 표시하는 방법을 살펴본다. 새로운 XMLHttpRequest 레벨 2 규격 명세를 이용해 백그라운드로 파일을 업로딩하고 사용자에게 실시간 프로그래스바를 보여주고 jQuery의 Ajax API를 업로드 및 통합하는 방법도 알아본다.



[8장] 실시간 애플리케이션과 웹소켓 같은 기술을 즐길 수 있다. 과거에는 어떻게 실시간을 구현했는지 살펴보고 현재 브라우저의 지원 현황을 확인한다. 웹소켓과 웹소켓의 고수준 구현, 브라우저 지원, 자바스크립트 API 등을 자세히 살펴본다. 그리고 웹소켓을 이용해 서버와 클라이언트를 연결하는 간단한 RPC 서버를 예로 보여준다. Socket.IO를 살펴본 다음에는 애플리케이션 아키텍처와 사용자 경험에 실시간이 얼마나 중요한 역할을 하는지 배운다.



[9장] 자바스크립트 웹 애플리케이션 개발의 중요한 부분인 테스팅과 디버깅을 살펴본다. 먼저 크로스 브라우저 테스팅과 관련한 문제(어떤 브라우저로 테스트해야 하는지), 단위 테스트, QUnit, 자스민 같은 테스팅 라이브러리를 살펴본다. 다음으로 자동화된 테스팅 그리고 셀렌 같은 지속적인 통합 서버를 살펴본다. 파이어폭스와 웹킷의 웹 인스펙터, 콘솔, 자바스크립트 디버거 등을 사용하는 방법을 살펴본다.



[10장] 자바스크립트의 또 다른 중요한 과정인(그러나 이 과정을 무시하는 사람이 많다) 배포를 살펴본다. 성능을 고려하여 캐싱, 최소화, gzip 압축 등을 사용하는 방법과 애플리케이션 초기 로드 시간을 줄일 수 있는 다양한 기법을 살펴본다. 마지막으로 CDN으로 정적 컨텐츠를 제공하는 방법도 살펴보고 브라우저의 내장 감사 기능을 이용하는 방법도 살펴본다. 브라우저 내장 감사 기능은 사이트 성능 개선에 크게 도움을 줄 것이다.



[11장] 11, 12, 13장에서는 애플리케이션 개발에 사용할 수 있는 유명한 자바스크립트 라이브러리를 소개한다. 스파인은 MVC 호환 경량 라이브러리로 이 책에서 살펴본 많은 개념을 활용한다. 11장에서 클래스, 이벤트, 모델, 컨트롤러 같은 스파인 라이브러리의 핵심 기능을 살펴보고, 배운 기법을 활용해 연락처 관리 애플리케이션 예제를 만들어본다.



[12장] 자바스크립트 애플리케이션 분야에서 매우 유명한 백본 라이브러리를 소개한다. 모델, 콜렉션, 컨트롤러, 뷰 같은 백본의 핵심 개념과 클래스를 살펴본다. 그리고 RESTful JSON 쿼리를 이용해 모델 데이터와 서버를 동기화하는 방법 그리고 서버에서 백본으로 적절하게 응답하는 방법을 살펴본다. 마지막으로 백본 라이브러리를 활용해 할 일 목록 애플리케이션 예제를 만들어본다.



[13장] 인기 있는 프레임워크인 jQuery를 기반으로 하는 자바스크립트MVC 라이브러리를 살펴본다. 클래스, 모델, 컨트롤러, 클라이언트 템플릿을 활용한 뷰 렌더링 등과 같은 자바스크립트MVC 라이브러리의 모든 기초를 배운다. 13장에서는 실용적인 CRUD 리스트 예제를 이용해 자바스크립트MVC를 이용하면 얼마나 쉽게 추상적이고, 재활용할 수 있으며, 메모리 걱정 없는 위젯을 만들 수 있는지 보여준다.



[부록 A] 짧은 시간에 jQuery를 파악할 수 있도록 간단하게 설명한다. 이 책의 대부분 예제는 jQuery를 사용하므로 jQuery에 익숙해지는 것이 좋다. DOM 탐색, DOM 조작, 이벤트 바인딩, 이벤트 발생, 이벤트 위임 등과 같은 jQuery 핵심 API를 살펴본다. 다음으로 jQuery의 Ajax API로 GET/POST JSON 요청을 만드는 방법을 살펴본다. jQuery를 확장하고 캡슐화하는 방법 등을 익혀 모범 웹 시민이 되는 방법을 보여준다. 마지막으로 실용적인 Growl jQuery 플러그인 예제를 만들어본다.



[부록 B] CSS의 문법, 변수, 믹스인, 동작, 중첩 규칙 등을 상속받는 CSS의 상위 집합 Less를 살펴본다. Less를 이용해 CSS 코딩양(특히 CSS3 개발사 전용 규칙과 관련한)을 크게 줄일 수 있다. Less의 주요 문법 개선사항, 명령행 도구나 자바스크립트를 이용해 Less 파일을 CSS로 컴파일하는 방법 등을 살펴본다.



[부록 C] 마지막 부록에서는 CSS3를 활용하는 방법을 설명한다. CSS3의 탄생 배경을 제공하고 브라우저 개발사 접두어를 설명하고 규격 명세에 추가된 주요 사항을 살펴본다. CSS3의 여러 기능 중에 둥근 모서리, rgba 색, 그림자 효과, 그레이디언트, 트랜지션, 트랜스폼 등을 살펴본다. 마지막으로 모더나이저를 이용해 자연스럽게 디그라데이션하는 방법과 새로운 박스 사이징 규격 명세를 사용하는 실용 예제도 살펴본다.