단일 페이지 웹 애플리케이션(프론트엔드부터 백엔드까지 자바스크립트로 완성하는)(위키북스 오픈소스 & 웹 시리즈 61)

이 책은 자바스크립트만을 사용해 애플리케이션의 전체 스택을 개발하고자 하는 개발자를 위한 지침서다. 이 책에서는 클라이언트(제이쿼리)-서버(Node.js)-데이터베이스(몽고디비)에 이르기까지 애플리케이션의 전체 스택을 자바스크립트로 개발하는 모범 방법론을 제시한다.



저자들은 다년간 단일 페이지 애플리케이션을 개발하면서 가다듬은 노하우를 바탕으로 특정 프레임워크에 의존하지 않고 확장성, 테스트 가능성, 모듈화를 지향하는 모범 자바스크립트 코드를 작성하는 법을 처음부터 끝까지 자세히 소개했다. 그 덕분에 독자는 자연스럽게 저자들의 검증된 코드와 기법을 익힐 수 있음은 물론, 저자가 제시하는 방법론에 따라 가장 쉽고 간편하게 최신 단일 페이지 애플리케이션을 개발하는 법을 터득할 수 있다.



이 책을 통해 그동안 몰랐던 자바스크립트의 새로운 가능성에 대한 혜안을 얻을 수 있을뿐더러 자바스크립트 의존도가 높아짐에 따라 언어적 느슨함 때문에 생기는 다양한 문제를 가장 효과적으로 해결하는 모범 기법도 익힐 수 있다. 요컨대, 이 책을 따라 자바스크립트로 SPA를 개발한다면 적어도 실패하는 일은 없을 것이다!



웹사이트에 링크된 페이지만 잔뜩 모아놓았다면 이 웹사이트는 시대에 뒤처진 것이다. 이제 단일 페이지 웹 애플리케이션(SPA, Single Page Application)으로 눈을 돌릴 때다. UI 렌더링과 비즈니스 로직을 브라우저에게 맡기고 데이터를 동기화할 때만 서버와 통신함으로써 단일 페이지 웹 애플리케이션은 네이티브 애플리케이션과 거의 같은 부드러운 사용자 경험을 전달한다. 하지만 SPA는 개발, 관리, 테스트하는 게 어렵다.



단일 페이지 웹 애플리케이션에서는 특정 프레임워크에 얽매이지 않고 프론트엔드부터 백엔드까지 자바스크립트만을 사용해 SPA를 손쉽게 설계, 테스트, 유지보수, 확장하는 법을 보여준다. 이 과정에서 독자들은 고급 HTML5, CSS, 자바스크립트 기술을 익힐 수 있음은 물론 웹 서버 및 데이터베이스 언어로 자바스크립트를 활용하는 법도 배울 수 있다.



★ 이 책에서 다루는 내용 ★



◎ 풀스택 SPA의 설계, 개발, 테스트

◎ 제이쿼리, TaffyDB, Node.js, 몽고디비 같은 최고 수준의 툴 활용법

◎ 웹 소켓 및 Socket.IO를 활용한 실시간 웹

◎ 태블릿과 스마트폰을 위한 터치 컨트롤

◎ 자주 하기 쉬운 SPA 설계 실수



★ 로드맵 ★



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 모듈을 수정하는 법을 다룬다

[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 정리

마이클 미코스키 저자 마이클 미코스키(Michael Mikowski)는 수상 이력에 빛나는 산업 디자이너이자 SPA 아키텍트로서, 13년의 경력을 갖춘 풀 스택 웹 개발자 및 아키텍트다. 2007년 AMD의 'Where to Buy' 사이트를 개발할 당시 호스팅 제약 때문에 다른 솔루션을 사용할 수 없게 되면서 상용 단일 페이지 웹 애플리케이션(SPA)을 처음으로 개발하게 됐다. 이후 마이클은 SPA의 무한한 가능성에 매료되어 많은 솔루션을 설계하고 개발하는 작업을 했다. 여러 오픈소스 프로젝트에 공헌했으며 다양한 제이쿼리 플러그인을 배포하기도 했다. 여러 컨퍼런스 및 대학, 기업에서 발표한 바 있으며, 최근에는 UI 아키텍트, 컨설턴트, UX 엔지니어링 책임자로 근무하고 있다.