단일 페이지 웹 애플리케이션

[1부] SPA 소개

▣ 01장: 첫 번째 단일 페이지 애플리케이션
1.1 SPA의 정의, 간단한 배경 소개, 주안점
1.1.1 간단한 배경 소개
1.1.2 자바스크립트 SPA가 뒤늦게 주목받은 이유
1.1.3 이 책의 목표
1.2 첫 번째 SPA 개발
1.2.1 SPA의 목표 정의
1.2.2 파일 구조 개발
1.2.3 크롬 개발자 도구 설정
1.2.4 HTML/CSS 개발
1.2.5 자바스크립트 추가
1.2.6 크롬 개발자 도구를 활용한 애플리케이션 검사
1.3 잘 작성된 SPA의 사용자 측면 장점
1.4 정리

▣ 02장: 자바스크립트 다시 배우기
2.1 변수 스코프
2.2 변수 끌어올림
2.3 변수 끌어올림 및 실행 컨텍스트 객체
2.3.1 끌어올림
2.3.2 실행 컨텍스트 및 실행 컨텍스트 객체
2.4 스코프 체인
2.5 자바스크립트 객체 및 프로토타입 체인
2.5.1 프로토타입 체인
2.6 함수 - 자세히 살펴보기
2.6.1 함수와 익명 함수
2.6.2 자기 실행 익명 함수
2.6.3 모듈 패턴 - 자바스크립트에서의 private 변수 활용
2.6.4 클로저
2.7 정리

[2부] SPA 클라이언트

▣ 03장: 셸 개발
3.1 셸 살펴보기
3.2 파일 및 네임스페이스 설정
3.2.1 파일 구조 형성
3.2.2 애플리케이션의 HTML 코드 작성
3.2.3 루트 CSS 네임스페이스 생성
3.2.4 루트 자바스크립트 네임스페이스 생성
3.3 기능 컨테이너 개발
3.3.1 전략 선택
3.3.2 셸 HTML 작성
3.3.3 셸 CSS 작성
3.4 기능 컨테이너 렌더링
3.4.1 HTML을 자바스크립트로 변경
3.4.2 자바스크립트에 HTML 템플릿 추가
3.4.3 셸 스타일 시트 작성
3.4.4 애플리케이션에서의 셸 사용
3.5 기능 컨테이너 관리
3.5.1 채팅 슬라이더를 여닫는 메서드 작성
3.5.2 채팅 슬라이더에 클릭 이벤트 핸들러 추가
3.6 애플리케이션 상태 관리
3.6.1 사용자가 기대하는 브라우저의 기본 동작
3.6.2 히스토리 컨트롤 관리 전략 선택
3.6.3 히스토리 이벤트 발생에 따른 앵커 변경
3.6.4 앵커를 활용한 애플리케이션 상태 주도
3.7 정리

▣ 04장: 기능 모듈 추가
4.1 기능 모듈 구현 전략
4.1.1 서드파티 모듈과의 비교
4.1.2 기능 모듈과 프랙탈 MVC 패턴
4.2 기능 모듈 파일 설정
4.2.1 파일 구조
4.2.2 파일 생성 및 작성
4.2.3 작업 결과 확인
4.3 메서드 API 설계
4.3.1 앵커 인터페이스 패턴
4.3.2 Chat 설정 API
4.3.3 Chat 초기화 API
4.3.4 Chat setSliderPosition API
4.3.5 설정 및 초기화 진행 과정
4.4 기능 API의 구현
4.4.1 스타일 시트
4.4.2 Chat 모듈 수정
4.4.3 셸 정리
4.4.4 실행 흐름 분석
4.5 자주 사용하는 메서드 추가
4.5.1 removeSlider 메서드
4.5.2 handleResize 메서드
4.6 정리

▣ 05장: 모델 개발
5.1 모델 이해
5.1.1 개발 과제
5.1.2 모델이 해야 하는 일
5.1.3 모델이 하지 말아야 하는 일
5.2 모델 및 다른 파일 설정
5.2.1 파일 구조 기획
5.2.2 파일 작성
5.2.3 통일된 터치-마우스 라이브러리 활용
5.3.1 person 객체 설계
5.3.2 people 객체 API 설계
5.3.3 people 객체 API 문서화
5.4 people 객체 개발
5.4.1 가짜 사람 목록 개발
5.4.2 people 객체의 사용
5.4.3 people 객체 마무리
5.4.4 people 객체 API 테스트
5.5 셸에서의 로그인/로그아웃 활성화
5.5.1 로그인 사용자 경험 설계
5.5.2 셸 자바스크립트 업데이트
5.5.3 셸 스타일 시트 업데이트
5.5.4 UI를 활용한 로그인/로그아웃 테스트
5.6 정리

▣ 06장: 모델 및 데이터 모듈 완성
6.1 chat 객체 설계
6.1.1 메서드 및 이벤트 설계
6.1.2 chat 객체 API 문서화
6.2 chat 객체 개발
6.2.1 join 메서드를 시작으로 한 chat 객체 구현
6.2.2 chat.join에 반응하기 위한 기능 모듈 수정
6.2.3 chat.join 메서드 테스트
6.2.4 chat 객체에 메시지 전달 기능 추가
6.2.5 메시징 에뮬레이션을 위한 가짜 모듈 수정
6.2.6 채팅 메시지 테스트
6.3 모델에 아바타 지원 기능 추가
6.3.1 chat 객체에 아바타 지원 기능 추가
6.3.2 아바타 에뮬레이션을 위한 가짜 모듈 수정
6.3.3 아바타 지원 테스트
6.3.4 테스트 주도 개발
6.4 Chat 기능 모듈 완성
6.4.1 채팅 자바스크립트 수정
6.4.2 스타일 시트 업데이트
6.4.3 채팅 UI 테스트
6.5 아바타 기능 모듈 생성
6.5.1 아바타 자바스크립트 생성
6.5.2 아바타 스타일 시트 생성
6.5.3 셸 및 브라우저 문서 업데이트
6.5.4 아바타 기능 모듈 테스트
6.6 데이터 바인딩과 제이쿼리
6.7 데이터 모듈 생성
6.8 정리

[3부] SPA 서버

▣ 07장: 웹 서버
7.1 서버의 역할
7.1.1 인증 및 권한 부여
7.1.2 유효성 검증
7.1.3 데이터 보존과 동기화
7.2 Node.js
7.2.1 왜 Node.js인가?
7.2.2 Node.js를 활용한 'Hello World' 개발
7.2.3 커넥트 설치 및 사용
7.2.4 커넥트 미들웨어 추가
7.2.5 익스프레스 설치와 활용
7.2.6 익스프레스 미들웨어 추가
7.2.7 익스프레스 환경 설정 활용
7.2.8 익스프레스를 활용한 정적 파일 제공
7.3 고급 라우팅
7.3.1 User CRUD 라우트
7.3.2 범용적 CRUD 라우팅
7.3.3 별도 Node.js 모듈로의 라우팅 이관
7.4 인증과 권한 부여 추가
7.4.1 기본 인증
7.5 웹 소켓 및 Socket.IO
7.5.1 간단한 Socket.IO
7.5.2 Socket.IO 및 메시징 서버
7.5.3 Socket.IO를 활용한 자바스크립트 업데이트
7.6 정리

▣ 08장: 서버 데이터베이스
8.1 데이터베이스의 역할
8.1.1 데이터 저장소 선택
8.1.2 데이터 변형 필요성의 제거
8.1.3 필요한 곳으로의 로직 이동
8.2 몽고디비 소개
8.2.1 문서 중심 저장소
8.2.2 동적 문서 구조
8.2.3 몽고디비 시작하기
8.3 몽고디비 드라이버 활용
8.3.1 프로젝트 파일 준비
8.3.2 몽고디비 설치 및 연결
8.3.3 몽고디비 CRUD 메서드 활용
8.3.4 서버 애플리케이션에 CRUD 추가
8.4 클라이언트 데이터 유효성 검증
8.4.1 객체 타입의 유효성 검증
8.4.2 객체 유효성 검사
8.5 별도 CRUD 모듈 생성
8.5.1 파일 구조 준비
8.5.2 CRUD 로직의 모듈 이관
8.6 Chat 모듈 개발
8.6.1 chat 모듈 개발
8.6.2 adduser 메시지 핸들러의 작성
8.6.3 updatechat 메시지 핸들러의 작성
8.6.4 disconnect 메시지 핸들러 작성
8.6.5 updateavatar 메시지 핸들러 작성
8.7 정리

▣ 09장: SPA 배포 준비
9.1 검색 엔진을 위한 SPA 최적화
9.1.1 구글이 SPA를 크롤링하는 방식
9.2 클라우드 및 서드파티 서비스
9.2.1 사이트 애널리틱스
9.2.2 클라이언트 측 에러 로깅
9.2.3 콘텐츠 전달 네트워크
9.3 캐싱 및 캐시 버스팅
9.3.1 캐싱 가능성
9.3.2 웹 저장소
9.3.3 HTTP 캐싱
9.3.4 서버 캐싱
9.3.5 데이터베이스 쿼리 캐싱
9.4 정리

▣ 부록 A: 자바스크립트 코딩 표준
A.1 코딩 표준이 필요한 이유
A.2 코드 레이아웃과 주석
A.2.1 가독성을 위한 코드 레이아웃
A.2.2 문서 설명을 위한 주석
A.3 변수명
A.3.1 명명 관례를 활용한 주석 줄이기와 개선
A.3.2 명명 가이드라인의 활용
A.3.3 가이드라인 실전 활용
A. 4 변수 선언 및 대입
A.5 함수
A.6 네임스페이스
A.7 파일명 및 레이아웃
A.8 구문
A.8.1 라벨
A.8.2 명령
A.8.3 다른 구문
A.9 코드 유효성 검증
A.9.1 JSLint 설치
A.9.2 JSLint 설정
A.9.3 JSLint 활용
A.10 모듈 템플릿
A.11 정리

▣ 부록B: SPA 테스트
B.1 테스트 모드 설정
B.2 테스트 프레임워크 선택
B.3 nodeunit 설정
B.4 테스트 스위트 작성
B.4.1 Node.js의 모듈 로드
B.4.2 단일 nodeunit 테스트 설정
B.4.3 첫 번째 실전 테스트 작성
B.4.4 이벤트 및 테스트 매핑
B.4.5 테스트 스위트 작성
B.5 테스트에 맞춘 SPA 수정
B.6 정리

이 책을 쓰겠다고 생각했을 때 우리는 2/3 정도를 SPA 클라이언트 개발에 초점을 맞추려고 했다. 그다음 나머지 1/3에서는 웹 서버와 SPA를 제공하는 데 필요한 서비스를 다루려고 했다. 하지만 웹 서버로 뭘 사용해야 할지 결정하기가 어려웠다. 우리는 루비/레일즈, 자바/톰캣, mod_perl, 기타 플랫폼을 사용해 전통적인 웹사이트 및 SPA 사이트에 사용하는 수많은 웹 서비스를 구현한 바 있지만, 이들 기술은 모두 단점(특히 SPA를 지원할 때)이 있었으므로 우리는 더 나은 기술을 원했다.

우리는 최근 Node.js를 웹 서버로 사용하고 몽고디비를 데이터베이스로 사용하는 '순수' 자바스크립트 스택으로 완전히 전환했다. 물론 이 과정에서 어려운 점도 있었지만 우리는 이를 통해 뭔가 자유로워지는 기분을 느꼈고, 자바스크립트의 강력한 힘을 경험할 수 있었다. 이와 같이 통일된 언어와 데이터 형식으로 얻을 수 있는 장점은 대개 다중 언어 스택을 사용할 때 잃게 되는 특정 언어 관련 기능보다 훨씬 이점이 크다.

우리는 '순수' 자바스크립트 스택이야말로 독자들에게 줄 수 있는 이 책의 가장 큰 가치라고 생각한다. 이들 요소를 이와 같이 모두 결합한 책은 우리가 알고 있는 한 없기 때문이다. 또, 앞으로는 이와 같은 애플리케이션 스택이 계속해서 인기를 얻고 단일 페이지 애플리케이션에서 가장 많이 사용하는 스택 중 하나가 될 것이라고 기대한다.

★ 로드맵 ★

1장은 단일 페이지 애플리케이션을 소개하는 장이다. 이 장에서는 자바스크립트 SPA를 정의하고 다른 유형의 SPA와 비교한다. 또, 전통적인 웹사이트와 SPA를 비교하고, SPA만의 장점과 SPA를 사용할 때의 해결 과제를 다룬다. 이 장에서는 SPA 개발 과정을 차근차근 알려줌으로써 장을 마칠 즈음에는 실제로 개발한 SPA를 사용할 수 있게 해준다.

2장에서는 SPA를 개발하는 데 핵심이 되는 자바스크립트로 할 수 있는 일과 자바스크립트에서 제공하는 기능을 다룬다. SPA에서는 단순히 나중에 사용자 상호작용을 추가하기 위해 자바스크립트를 도입하는 수준이 아니라 거의 모든 코드를 자바스크립트로 작성하는 만큼 자바스크립트 언어가 어떻게 동작하는지 제대로 이해하는 게 매우 중요하다. 2장에서는 자바스크립트 변수, 형식, 함수는 물론 실행 컨텍스트, 클로저, 객체 프로토타입 같은 고급 주제도 다룬다.

3장에서는 이 책에서 계속해서 사용하는 SPA 아키텍처를 소개한다. 또, 중심이 되는 사용자 인터페이스 모듈 역할을 하는 셸도 소개한다. 셸은 기능 모듈을 조율하고 브라우저 전역 이벤트나 URL과 쿠키 같은 데이터를 관리한다. 페이지 상태를 관리할 때는 이벤트 핸들러를 구현하고 앵커 인터페이스 패턴을 사용한다.

4장에서는 SPA에서 잘 정의돼 있고 스코프가 명확히 구분된 기능을 제공하는 기능 모듈을 자세히 다룬다. 또, 잘 정의된 기능 모듈을 서드파티 자바스크립트와 비교해 차이점을 알아본다. 이 과정에서 코드 품질과 모듈화를 돕기 위해 고립화를 추구한다.

5장에서는 단일 네임스페이스에 모든 비즈니스 로직을 모아놓는 모델 모듈을 개발하는 법을 자세히 알아본다. 모델은 클라이언트에게서 데이터 관리 및 서버와의 상호작용을 고립화한다. 이 장에서는 People API를 설계하고 개발한다. 모델은 가짜 데이터 모듈과 자바스크립트 콘솔을 사용해 테스트한다.

6장에서는 모델에 대한 작업을 마친다. 이 장에서는 Chat API를 설계 및 개발하고, 역시 가짜 데이터 모듈 및 자바스크립트 콘솔을 사용해 테스트한다. 또, 데이터 모듈을 도입하고, 웹 서버에서 '실제' 데이터를 가져와 사용하게끔 애플리케이션을 수정한다.

7장에서는 웹 서버로 Node.js를 도입한다. SPA에서는 대부분 코드가 클라이언트 측에 존재하는 만큼 백엔드는 애플리케이션의 요구 조건을 충족할 수 있는 성능을 보장하기만 하면 어떤 언어로 작성하더라도 상관없다. 백엔드를 자바스크립트로 작성하면 프로그래밍 환경을 일원화할 수 있고, 전체 개발 스택도 그만큼 단순해진다. Node.js를 사용해본 경험이 없다면 이 장의 내용이 기초 지식을 쌓는 데 큰 도움이 될 것이다. 또, 숙련된 Node.js 개발자라면 이 장을 통해 SPA에서 서버가 담당할 역할에 대한 혜안을 얻을 수 있다.

8장에서는 데이터베이스까지 애플리케이션 스택을 확장한다. 여기서는 클라이언트에서 데이터를 처리하는 형식과 같은 JSON 문서 형식으로 데이터를 저장하는 검증된 데이터베이스라는 점에서 몽고디비를 사용한다. 이 장에서는 SPA에서 데이터베이스의 역할을 살펴보기 전에 몽고디비를 처음 사용하는 독자를 위해 몽고디비에 대해 간단히 소개한다.

9장에서는 전통적인 MVC 웹 애플리케이션과는 다른 SPA의 세부 개념을 다룬다. 이 과정에서 검색 엔진을 위한 SPA 최적화, SPA 애널리틱스 적용, SPA 내 에러 로깅 같은 주제를 다룬다. 또, 전통적인 웹 애플리케이션의 관심 영역 중 SPA 개발에서 특히 중요한 부분(CDN을 통한 정적 콘텐츠의 빠른 제공, 스택의 각 레벨 캐싱)도 살펴본다.

부록 A에서는 우리가 사용하는 자바스크립트 코딩 표준을 자세히 살펴본다. 물론 독자들에게 이 표준이 적합할 수도 있고, 적합하지 않을 수도 있겠지만 이와 같은 표준을 활용하면 테스트하기 쉽고, 관리하기 쉬우며, 읽기 쉬운 자바스크립트 코드를 SPA에서 구조화하는 데 매우 큰 도움이 된다. 여기서는 코딩 표준이 중요한 이유를 살펴보고, 코드 조직화 및 문서화 기법, 변수 및 메서드 명명법, 네임스페이스 보호, 파일 조직화, JSLint를 활용한 자바스크립트 검증 기법을 다룬다. 또, 코딩하는 동안 언제든 참고할 수 있게 2페이지 분량의 레퍼런스도 제공한다.

부록 B에서는 SPA에서의 테스트를 다룬다. SPA 테스트는 별도 책에서 다룰 수 있을 만큼 방대한 주제이지만, 그만큼 중요하고 핵심적인 주제이므로 이 책에서도 다루고 넘어간다. 여기서는 테스트 모드를 설정하는 법, 테스트 프레임워크를 선택하는 법, 테스트 스위트를 작성하는 법, 테스트 설정을 위해 SPA 모듈을 수정하는 법을 다룬다.

-서문 중에서