이 책을 쓰겠다고 생각했을 때 우리는 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 모듈을 수정하는 법을 다룬다.

웹사이트에 링크된 페이지만 잔뜩 모아놓았다면 이 웹사이트는 시대에 뒤처진 것이다. 이제 단일 페이지 웹 애플리케이션(SPA, Single Page Application)으로 눈을 돌릴 때다. UI 렌더링과 비즈니스 로직을 브라우저에게 맡기고 데이터를 동기화할 때만 서버와 통신함으로써 단일 페이지 웹 애플리케이션은 네이티브 애플리케이션과 거의 같은 부드러운 사용자 경험을 전달한다. 하지만 SPA는 개발, 관리, 테스트하는 게 어렵다.<br/><br/>단일 페이지 웹 애플리케이션에서는 특정 프레임워크에 얽매이지 않고 프론트엔드부터 백엔드까지 자바스크립트만을 사용해 SPA를 손쉽게 설계, 테스트, 유지보수, 확장하는 법을 보여준다. 이 과정에서 독자들은 고급 HTML5, CSS, 자바스크립트 기술을 익힐 수 있음은 물론 웹 서버 및 데이터베이스 언어로 자바스크립트를 활용하는 법도 배울 수 있다.<br/><br/>★ 이 책에서 다루는 내용 ★<br/><br/>◎ 풀스택 SPA의 설계, 개발, 테스트<br/>◎ 제이쿼리, TaffyDB, Node.js, 몽고디비 같은 최고 수준의 툴 활용법<br/>◎ 웹 소켓 및 Socket.IO를 활용한 실시간 웹<br/>◎ 태블릿과 스마트폰을 위한 터치 컨트롤<br/>◎ 자주 하기 쉬운 SPA 설계 실수