AngularJS는 최근 자바스크립트 MVW 프레임워크로 떠오르고 있다. 이 책은 AngularJS 지시자를 활용해서 프론트엔드를 개발하는 방법을 다룬다. AngularJS의 기반이 되는 데이터 기반 개발 방법과 모듈화에 대한 설명을 시작으로 AngularJS 지시자의 필요성과 구조를 파헤치고, 단위 테스트와 통합 테스트를 다룬 후 이 모든 것을 활용해 Angular와 오픈된 jQuery Masonry 플러그인을 연동하는 방법까지 알아본다. AngularJS 지시자의 기본 개념이 쉽게 전달될 수 있도록 짧고 간단한 예제를 통해 설명하고, 마지막에는 예제로 이 모든 것을 정리하며 책을 마친다.

■ 상호 연결된 싱글 페이지 애플리케이션 생성

■ 서드파티 위젯 구축

■ 기존 콘텐츠를 지시자에 통합

■ jQuery 플러그인과 AngularJS 통합

■ 메시지를 통한 다른 모듈과의 통신

■ AngularJS 단위 테스트

■ AngularJS 시나리오 실행기에서 브라우저 기능 테스트의 설정과 실행

이 책은 AngularJS와 자바스크립트 MVC 프레임워크를 기반으로 하며, 싱글 페이지 웹 애플리케이션 개발에 대한 이해를 높이려는 중급 자바스크립트 개발자를 대상으로 한다. 기본적인 자바스크립트 패턴과 문법을 이해하고, JSON 포맷 데이터를 구분할 수 있어야 한다. 하지만 MVC나 Angular.JS에 관한 지식은 필요하지 않다.

1장. ‘2013년 웹 애플리케이션 설계’에서는 싱글 페이지 웹 애플리케이션과 현재 가장 많이 사용되는 개발 사례를 간략히 소개한다.

2장. ‘지시자의 필요성’에서는 Angular.JS 지시자의 가치와 지시자가 1장에서 살펴본 대다수 개발 사례를 어떻게 충족시킬 수 있었는지 살펴본다.

3장. ‘지시자 분해’에서는 지시자의 설정 옵션을 하나씩 살펴보고, 여러 가지 예제를 통해 그 사용 방법을 살펴본다.

4장. ‘컴파일과 링크’에서는 Angular.JS를 분석하고 일련의 지시자들과 동적인 요소로 정적인 HTML을 변환시키는 두 가지 프로세스를 심층적으로 들여다본다.

5장. ‘명확한 스코프’에서는 AngularJS가 지시자에게 서로 다르거나 고립된 스코프를 제공하는 것에 대해서 알아본다.

6장. ‘컨트롤러: 보다 좋은 공유’에서는 부모 지시자와 자식 지시자가 콘트롤러를 이용해 조화롭게 데이터를 공유하는 방법을 설명한다.

7장. ‘트랜스클루션’에서는 적절한 스코프에 의해서 보존되는 지시자 내부에 있는 HTML에 관해 전반적으로 살펴본다.

8장. ‘Karma: AngularJS에서 테스트하기’에서는 Karma 테스트 런너를 소개하고 Angular 애플리케이션 테스팅의 모범 사례를 제공한다.

9장. ‘단위 테스트에 좀 더 깊이 들어가기’에서는 단위 테스트와 Angular의 기능 검증에 대해 좀 더 자세히 살펴본다.

10장. ‘처음부터 끝까지 다 해보자’에서는 커스텀 Angular.JS 지시자의 생성 과정을 처음부터 끝까지 해본다.

구글의 주력 개발 언어인 AngularJS는 가장 인기 있는 자바스크립트 MVC 프레임워크로 빠르게 자리잡고 있으며, 개발 패러다임의 변화와 웹 프론트엔드에 데이터 기반 모듈화를 가져오고 있다. 지시자는 AngularJS에 핵심 구축 요소를 제공하고 재사용 가능한 모델을 생성함으로써 HTML과 자바스크립트가 만나는 곳에 새로운 생명을 불어 넣는다.
이 책은 AngularJS의 핵심 기능 중 일부를 자세히 학습하고, 데이터의 실시간 변화에 대응하는 완전한 동적 웹을 생성하는 데 필요한 모든 지식을 제공한다. 설계에 좋은 몇 가지 모범 사례뿐만 아니라 지시자의 구축 방법을 처음부터 끝까지 살펴본다. 이 책의 마지막 부분에서는 최고의 사용자 경험을 제공하기 위해 모두 함께 매끄럽게 동작하는 여러 개의 모듈로 구성된 웹 애플리케이션을 생성한다.

알렉스 밴스톤(Alex Vanston)

자칭 괴짜이자 야외 활동광이다. 고등학교 시절부터 어떻게 코드를 작성해야 할지 스스로 공부하기 시작했고, 지금까지도 새로운 언어와 문제를 해결하는 더 좋은 방법을 배우는 데 사로잡혀있다. 지난 7년 동안 전 세계 고객과 기업의 웹 사이트 및 애플리케이션을 전문적으로 구축했다. 현재는 콜로라도 덴버에 살고 있으며, 하이킹을 사랑하고 픽업 스포츠와 수상 스키를 즐긴다. 캘리포니아 샌프란시스코에 있는 신생 벤처 기업인 ZipKick, Inc에서 프론트엔드 개발을 이끌었다. 웹 개발과 기술에 대해 다루는 블로그(http://www.mrvdot.com)를 운영 중이다.

자바스크립트를 이용해서 프론트엔드를 개발할 때, 라이브러리나 프레임워크 없이 개발하는 것은 불가능한 시대가 됐을 만큼 프론트엔드는 이제 많은 기능을 처리한다. 프론트엔드가 간단하던 시절에는 DOM 스크립트만으로도 개발이 가능했지만, 점차 복잡해지면서 여러 가지 라이브러리가 등장하게 되었다. 대표적인 라이브러리로는 jQuery를 들 수 있다. jQuery에 구현돼 있는 간단한 인터페이스를 활용하면 DOM 조작 시 자주 사용하거나 복잡한 구현을 손쉽게 할 수 있고, 인터넷 상에서 공유되는 수많은 jQuery 플러그인을 통해 다양한 UI나 UX도 쉽게 사용할 수 있다.
그러나 라이브러리를 이용한 구현은 개발자마다 다른 구조의 코드를 작성하기 때문에 DOM 조작과 데이터 핸들링이 섞여 있는 스파게티 코드가 되기 쉽다. 따라서 복잡하고 규모가 큰 프론트엔드 개발과 유지보수를 위해서는 좀 더 구조화된 프레임워크가 필요하다.
AngularJS와 같은 자바스크립트 MVW 프레임워크는 서비스, 지시자, 필터 같은 모듈을 제공한다. 이런 내용을 모두 담으면 매우 두꺼운 책이 되기 때문에 입문자가 다가서기 어렵다. 그렇다고 너무 간략히 설명하면 필요한 지식을 전달할 수가 없다는 고민을 하게 되는데, 저자는 AngularJS 개발 시 많이 사용하며 꼭 알아야 할 핵심 내용인 지시자 부분을 쉽게 설명함으로써 이런 고민을 해결하려고 노력했다. 이 책을 본 후에 좀 더 복잡한 기능이 필요할 때 서비스와 필터 모듈을 추가로 사용하면 더 강력한 프론트엔드 개발 스킬을 습득하게 될 것이다.

안혜환

티맥스소프트(TmaxSoft) 분당 서현 연구소에서 4년간 기업용 비지니스 프레임워크인 Proframe 개발자로 근무했으며, 현재는 네이버에서 웹서비스 개발자로 8년째 근무하고 있다.