다양한 프레임워크로 완성하는 웹 애플리케이션

자바스크립트 대표 MVC 프레임워크 수록
현재 가장 널리 쓰이는 Backbone.js, 구글에서 개발하는 Angular.js, MVVM 모델을 지원하는 Knockout.js를 모두 수록했다. 또한, 할 일 목록을 관리하는 Todo 애플리케이션을 자바스크립트로 완성하고, 이를 Backbone.js, Angular.js, Knockout.js로 개발해본다. 이를 통해 프레임워크를 이용한 개발의 장점을 스스로 파악할 수 있으며, 각 프레임워크의 장단점도 비교해보게 했다.

HTML5 고급 기능과 관련 라이브러리 해설
동시에 여러 일을 진행하는 웹 워커, 파일 처리, 드래그와 드롭, 애니메이션, 카메라나 마이크에 접근하는 미디어 장치 표준, 이미지 필터 처리, 오디오 필터 처리, 오프라인 웹 애플리케이션 기능을 설명한다. 웹 브라우저 히스토리를 처리하는 Sammy.js, 애니메이션 기능을 도와주는 stats.js, tween.js, 이미지 이펙트를 위한 glfx.js 라이브러리를 수록했다. 또한, RESTful 서비스 개발 방법을 설명했다.

소셜 네트워크 서비스(SNS) 프로젝트로 높이는 응용력
제대로 동작하는 소셜 네트워크 서비스를 직접 만들어보면서 다양한 라이브러리와 프레임워크를 어떻게 결합하여 사용하는지 설명했다. 친구 요청과 응답 처리, 소켓 처리, 글과 댓글 기능을 직접 만들어본다. 인증 처리를 위한 everyauth 모듈, 페이지 이동과 응답을 처리하기 위한 session, router 모듈을 사용하고, 사용자 지정(Custom) 모듈을 제작해 기능을 확장하는 방법을 보여준다.

웹 애플리케이션 제작을 위한 다양한 기술 수록
웹 앱 배포를 위한 폰갭 빌드, 간편한 문법으로 개발할 수 있는 커피스크립트, 다양한 자바스크립트 라이브러리를 관리하는 require.js, Node.js 서버의 실행을 책임지는 supervisor, forever 모듈 설명했다. 웹 에디터 제작에 널리 쓰이는 ACE, 다양한 차트를 표현하는 Chart.js, 스프레드시트를 만들어 주는 Handsontable jQuery 플러그인의 기본 사용법도 수록했다. 사용자가 몰릴 때 발생하는 서버 트래픽을 분산하기 위한 nginx 로드 밸런서, 굉장히 빠른 처리 속도를 자랑하는 인메모리 데이터베이스 레디스(Redis)를 Node.js에서 활용하는 방법까지 다뤘다. 빠르게 발전하는 자바스크립트 관련 기술 분야에서 가능하면 널리 쓰이는 분야별 대표 기술을 선정해 수록했다.

예제 코드: http://www.hanb.co.kr/exam/2041

[로드맵]
모던 웹 디자인을 위한 HTML5+CSS3
모던 웹을 위한 JavaScript+jQuery 입문
모던 웹을 위한 Node.js 프로그래밍
모던 웹을 위한 HTML5 프로그래밍

지은이 서문
『모던 웹을 위한 JavaScript + jQuery 입문』, 『모던 웹을 위한 Node.js 프로그래밍』, 『모던 웹 디자인을 위한 HTML5 + CSS3 입문』에 이어 『모던 웹을 위한 HTML5 프로그래밍』을 집필하게 되었습니다.
이 책의 목차를 보면 크게 상관 관계가 없는 내용이 나열되어 \"난잡하다\"라는 생각이 들 수 있습니다. 하지만 현대 웹 개발에 영향을 미치고 있는 몇 가지 현상을 이해하면 왜 이런 구조인지 이해할 수 있습니다.
현대 웹 개발은 크게 다음 형태로 발전하고 있습니다.
1 HTML5에 기능이 추가되어 기존에 웹 서버에서 처리하던 일을 웹 클라이언트에서 처리
· 웹 서버의 기능이 감소
· 경량 웹 프레임워크(Node.js express, Python Flask, Ruby Sinatra, Perl Dancer 등)의 발전
2 서버가 다양한 장치와 운영체제의 애플리케이션에 데이터를 제공
·RESTful 웹 서비스의 발달
·웹 클라이언트를 모바일 애플리케이션처럼 개발
·웹 클라이언트 애플리케이션 개발 프레임워크의 발전

책에서는 이러한 내용을 중심으로 진행합니다. 일단 HTML5에서 추가된 기능을 알아보고 경량 웹 프레임워크로 RESTful 웹 서비스를 만드는 방법을 살펴봅니다. 이어서 웹 클라이언트 애플리케이션 개발 프레임워크를 사용하는 방법을 알아봅니다.
부록에서는 자바스크립트의 단점으로 지적되는 문제를 어느 정도 해결한 자바스크립트 컴파일 엔진인 커피스크립트를 살펴봅니다. 또한 서비스를 만들었으면 서비스를 제대로 실행하는 방법을 알아야겠죠? 클라우드 서비스에서 실행하는 방법은 너무 고전적인 주제이므로 생략하고 클라우드 서비스에서 분산 처리를 어떻게 수행할 것인지로 로드밸런서를 알아봅니다. 마지막으로 데이터를 빠르게 탐색할 수 있는 redis 데이터베이스까지 알아봅니다.마지막으로 책 본문과 부록에 있는 내용을 모두 활용해 간단한 소셜 네트워크 서비스를 만들어 봅니다. 본문에서는 Node.js express 모듈과 MongoDB를 사용하지만 다른 웹 프레임워크를 사용해도 진행할 수 있습니다.
초기 기획한 책의 마지막 단계라 감회가 새롭습니다. 첫 번째 책을 출간했을 때는 침대에 누워 \"하루에 한 권 정도는 팔리겠지?\"하며 걱정하고 악몽까지 꿨는데 많은 독자 분께서 봐주셔서 이번 책까지 집필할 수 있었습니다. 감사합니다!
이 책을 집필하는 데 교정을 도와주신 조세민, 김주아, 이용규, 류태호, 임윤경, 김영현, 윤웅식, 변재원, 백선주, 윤명월, 김연화님께 감사의 말씀을 드립니다. 백선주, 윤명월, 김연화님은 모든 시리즈의 교정을 도와주셔서 한 번 더 감사의 말씀을 드립니다.
또한 책을 기획하고 힘든 순간마다 격려해주신 한동훈 과장님께도 감사의 말씀을 드립니다. 그리고 2년 6개월 동안 여러 일을 하면서 5권의 책을 집필하느라 저도 고생 많았습니다. 저에게도 수고했다고 말하고 싶습니다.
지은이_ 윤인성

PART I 개요

CHAPTER 1 웹 개발의 현재
__1.1 클라이언트 기술
____하이브리드 애플리케이션
____네이티브 애플리케이션
____서버 기술의 변화
__1.2 웹의 현재
____단일 페이지 애플리케이션
____플러그인의 영역 침범
____캐주얼 게임
____고성능 게임
__1.3 개발 효율성 향상
____ 스타일시트 컴파일 엔진
____자바스크립트 컴파일 엔진
____개발 환경

CHAPTER 2 자바스크립트 심화
__2.1 참조 복사
__2.2 함수의 메서드
__2.3 이벤트 순서
__2.4 속성 추가
__2.5 strict 모드

PART II HTML5 API

CHAPTER 3 기본 기능과 벤더 프리픽스 제거
__3.1 선택자
__3.2 전체 화면
__3.3 벤더 프리픽스 제거 함수

CHAPTER 4 히스토리
__4.1 Sammy.js 라이브러리
____기본
____요청 매개변수 처리
____트위터 검색 애플리케이션
__4.2 해시 관리
____해시 변경 이벤트
____페이지 라우트
__4.3 상태 관리
____pushState( ) 메서드와 popState 이벤트
____트위터 검색 애플리케이션

CHAPTER 5 웹 워커
__5.1 개요
____코드 진행
____UI 스레드
__5.2 웹 워커
____웹 워커 기본
____웹 워커를 사용한 연산

CHAPTER 6 파일
__6.1 파일 조작
____파일 정보 수집
____텍스트 파일 출력
____이미지 파일 출력
__6.2 Blob 객체
____생성과 접근
____인라인 웹 워커

CHAPTER 7 드래그와 드롭
__7.1 요소 드래그
____draggable 속성
____드래그 이벤트
__7.2 파일 드래그

CHAPTER 8 애니메이션 프레임
__8.1 애니메이션 프레임 요청
__8.2 stats.js 라이브러리
__8.3 tween.js 라이브러리

CHAPTER 9 미디어 장치
__9.1 미디어 장치 접근
__9.2 glfx.js 라이브러리
____기본
____토이 카메라
CHAPTER 10 웹 오디오
__10.1 오디오 소스
__10.2 오디오 로드
__10.3 음악 시각화

CHAPTER 11 오프라인 애플리케이션
__11.1 온라인과 오프라인 상태
__11.2 애플리케이션 캐시
__11.3 매니페스트 파일

PART III 웹 애플리케이션 개발

CHAPTER 12 RESTful 웹 서비스
__12.1 개요
____자원과 자원의 위치
____요청 방식
____상태 코드
__12.2 프로젝트 개요
____구조
____프로젝트 생성
____테스트 프로그램
__12.3 RESTful 웹 서비스 구현
____데이터 조회
____데이터 추가
____데이터 수정
____데이터 제거
__12.4 RESTful 웹 서비스 사용
____데이터 조회
____데이터 추가
____데이터 수정
____데이터 제거
__12.5 사용자 인증 구현
____해시
____사용자 조회
____가입
____로그인
____현재 사용자
____로그아웃
____기본 자원과 사용자 연동
__12.6 서버 전체 코드
__12.7 클라이언트 페이지
____페이지 라우트
____로그인 페이지
____가입 페이지
____메인 페이지
__12.8 클라이언트 전체 코드

CHAPTER 13 Backbone.js 라이브러리
__13.1 Underscore.js 라이브러리
____설정
____기본 사용
____템플릿 엔진
__13.2 Backbone.js 라이브러리 설정
__13.3 MVC 패턴
__13.4 Backbone.Model 객체
____생성
____이벤트
____변환
____상속
__13.5 Backbone.Collection 객체
____생성
____이벤트
____변환
____상속
__13.6 Backbone.View 객체
____상속
____템플릿
____이벤트
____선택
____제거
__13.7 Backbone.Router 객체
____정적 라우트
____동적 라우트
____라우터 상속
__13.8 데이터 동기화
____서버 구성
____Backbone.Model 객체 동기화
____Backbone.Collection 객체 동기화
__13.9 할 일 목록
____프로젝트 생성
____Backbone.Model 객체와 Backbone.Collection 객체
____Backbone.Router 객체
____Backbone.View 객체
____가입 페이지
____로그인 페이지
____메인 페이지
____리스트 아이템 요소
____정리
__13.10 트위터 검색
____페이지 생성
____리스트 뷰 구성
____리스트 뷰 데이터 구성
____요소 뷰 구성
____정리

CHAPTER 14 Knockout 라이브러리
__14.1 Knockout 라이브러리 설정
__14.2 MVVM 패턴
__14.3 기본 객체
____Observable 객체
____ObservableArray 객체
__14.4 바인딩
____모델 바인딩
____컬렉션 바인딩
____메서드 바인딩
____이벤트 바인딩
__14.5 바인딩 종류
____입력 양식 바인딩
____속성 바인딩
____스타일 바인딩
____조건 바인딩
__14.6 할 일 목록
____프로젝트 구성
____서버
____가입 페이지
____로그인 페이지
____뷰
____뷰모델
____정리
__14.7 사용자 정의 바인딩
__14.8 코드 에디터
____뷰
____뷰모델
____정리

CHAPTER 15 Angular.js 라이브러리
__15.1 설정
__15.2 컨트롤러 기본
____모델과 컬렉션
____메서드
____이벤트
__15.3 ng 속성
____ng 바인드 속성
____ng 이벤트 속성
____ng 외부 템플릿 속성
__15.4 페이지 라우트
____라우터 설정
____뷰 설정
____컨트롤러 설정
__15.5 서비스
__15.6 할 일 목록
____서버
____라우터
____가입 페이지
____로그인 페이지
____메인 페이지
____전체 코드
__15.7 강제 바인딩
__15.8 팩토리
__15.9 사용자 정의 속성
____attrs 객체
____element 객체
____scope 객체
__15.10 Chart.js 플러그인 응용

PART IV 프로젝트 개발

CHAPTER 16 소셜 네트워크 서비스
__16.1 실행 결과
__16.2 프로젝트 개요
____발생 코드
____친구 요청과 응답 처리
____소켓 처리
____글과 댓글 처리
__16.3 프로젝트 생성
__16.4 프로젝트 구성
____config 파일 구성
____routes 폴더 구성
____views 폴더 구성
____public 폴더 구성
__16.5 서버 구성
__16.6 Custom Global 모듈
__16.7 Custom Main 모듈
__16.8 Custom Auth 모듈
____가입
____로그인
____클라이언트
__16.9 Custom Socket 모듈
__16.10 Custom Friend 모듈
__16.11 Custom Post 모듈
__16.12 Custom Reply 모듈
__16.13 클라이언트
____라우터
____팩토리
____보조 함수
____Feeds 컨트롤러
____Friends Detail 컨트롤러
____Friends 컨트롤러
__16.14 전체 코드
__16.15 도전 과제

부록 A 폰갭 빌드
부록 B 커피스트립트
부록 C require.js
부록 D 단위 테스트
부록 E 서버 실행 모듈
부록 F 유용한 라이브러리
부록 G 로드밸런서
부록 H 레디스 데이터베이스

『모던 웹을 위한 JavaScript + jQuery 입문』, 『모던 웹을 위한 Node.js 프로그래밍』, 『모던 웹 디자인을 위한 HTML5 + CSS3 입문』에 이어 『모던 웹을 위한 HTML5 프로그래밍』을 집필하게 되었습니다.
이 책의 목차를 보면 크게 상관 관계가 없는 내용이 나열되어 “난잡하다”라는 생각이 들 수 있습니다. 하지만 현대 웹 개발에 영향을 미치고 있는 몇 가지 현상을 이해하면 왜 이런 구조인지 이해할 수 있습니다.
현대 웹 개발은 크게 다음 형태로 발전하고 있습니다.
1 HTML5에 기능이 추가되어 기존에 웹 서버에서 처리하던 일을 웹 클라이언트에서 처리
  • 웹 서버의 기능이 감소
  • 경량 웹 프레임워크(Node.js express, Python Flask, Ruby Sinatra, Perl Dancer 등)의 발전
2 서버가 다양한 장치와 운영체제의 애플리케이션에 데이터를 제공
  •RESTful 웹 서비스의 발달
  •웹 클라이언트를 모바일 애플리케이션처럼 개발
  •웹 클라이언트 애플리케이션 개발 프레임워크의 발전

책에서는 이러한 내용을 중심으로 진행합니다. 일단 HTML5에서 추가된 기능을 알아보고 경량 웹 프레임워크로 RESTful 웹 서비스를 만드는 방법을 살펴봅니다. 이어서 웹 클라이언트 애플리케이션 개발 프레임워크를 사용하는 방법을 알아봅니다.
부록에서는 자바스크립트의 단점으로 지적되는 문제를 어느 정도 해결한 자바스크립트 컴파일 엔진인 커피스크립트를 살펴봅니다. 또한 서비스를 만들었으면 서비스를 제대로 실행하는 방법을 알아야겠죠? 클라우드 서비스에서 실행하는 방법은 너무 고전적인 주제이므로 생략하고 클라우드 서비스에서 분산 처리를 어떻게 수행할 것인지로 로드밸런서를 알아봅니다. 마지막으로 데이터를 빠르게 탐색할 수 있는 redis 데이터베이스까지 알아봅니다.마지막으로 책 본문과 부록에 있는 내용을 모두 활용해 간단한 소셜 네트워크 서비스를 만들어 봅니다. 본문에서는 Node.js express 모듈과 MongoDB를 사용하지만 다른 웹 프레임워크를 사용해도 진행할 수 있습니다.
초기 기획한 책의 마지막 단계라 감회가 새롭습니다. 첫 번째 책을 출간했을 때는 침대에 누워 “하루에 한 권 정도는 팔리겠지?”하며 걱정하고 악몽까지 꿨는데 많은 독자 분께서 봐주셔서 이번 책까지 집필할 수 있었습니다. 감사합니다!
이 책을 집필하는 데 교정을 도와주신 조세민, 김주아, 이용규, 류태호, 임윤경, 김영현, 윤웅식, 변재원, 백선주, 윤명월, 김연화님께 감사의 말씀을 드립니다. 백선주, 윤명월, 김연화님은 모든 시리즈의 교정을 도와주셔서 한 번 더 감사의 말씀을 드립니다.
또한 책을 기획하고 힘든 순간마다 격려해주신 한동훈 과장님께도 감사의 말씀을 드립니다. 그리고 2년 6개월 동안 여러 일을 하면서 5권의 책을 집필하느라 저도 고생 많았습니다. 저에게도 수고했다고 말하고 싶습니다.
지은이_ 윤인성