추가 적립 안내

[AngularJS로 하는 웹 애플리케이션 개발]은 강력한 프레임워크를 기반으로 단일 페이지 애플리케이션을 더 적은 코드로 쉽게 개발할 수 있는 AngularJS로 웹 애플리케이션을 개발하는 방법을 소개한 책이다. AngularJS 서비스와 디렉티브를 사용해서 완전하고 견고한 애플리케이션을 만드는 방법과 AngularJS(디렉티브, 서비스, 필터)를 확장하는 방법, 높은 품질의 AngularJS 개발 프로젝트를 만드는 방법 등을 안내한다.

★ 요약 ★
요즘 가장 떠오르는 프론트엔드 측 개발 프레임워크를 꼽자면 단연코 AngularJS다. 강력한 프레임워크를 기반으로 단일 페이지 애플리케이션을 더 적은 코드로 쉽게 개발할 수 있기 때문이다. 또한 프레임워크 자체에서 테스트를 무엇보다 중요하게 생각하기 때문에 테스트 코드를 함께 작성하여 더욱 견고한 애플리케이션을 만들 수 있다. 이 책은 AngularJS의 기본 지식에 대한 설명과 함께 AngularJS로 애플리케이션을 어떻게 만드는지 잘 설명한다. 그리고 실제 프로젝트에서 AngularJS를 사용하는 경우 맞닥뜨릴 수 있는 주요한 문제들에 대한 해결책도 제시해주고 있다. 단순히 AngularJS를 배우는 것을 넘어서 실제 현업에서 AngularJS를 잘 사용할 수 있는 좋은 가이드가 되어줄 것이다.

★ 이 책에서 다루는 내용 ★
■ AngularJS 서비스와 디렉티브를 사용해서 완전하고 견고한 애플리케이션을 만드는 방법
■ 마땅한 해결책이 없을 경우 AngularJS(디렉티브, 서비스, 필터)를 확장하는 방법
■ 높은 품질의 AngularJS 개발 프로젝트를 만드는 방법 (코드 구조, 빌드, 테스팅, 성능 개선)

★ 이 책의 대상 독자 ★
이 책은 AngularJS를 실제 프로젝트에 사용하기로 결정했거나 아니면 고려중인 개발자에게 매우 유용할 것이다. AngularJS에 대해서는 최소한 기본 예제 정도는 경험해봤어야 한다. 그리고 HTML, CSS, 자바스크립트에 대한 지식이 있다고 가정한다

★ 이 책의 구성 ★
1장. AngularJS 철학: AngularJS 프레임워크와 프로젝트를 소개한다. 그리고 프로젝트의 철학과 주요 개념, 기본 구성 요소를 알아본다.

2장. 빌드와 테스팅: 이 책에서 사용할 샘플 애플리케이션의 기초를 만들어 본다. 문제 도메인과 함께 테스팅과 빌드에 대한 우수 사례를 살펴본다.

3장. 백엔드 서버와의 통신: 원격 백앤드에서 데이터를 받아오는 방법과 받아온 데이터를 AngularJS로 UI에 효과적으로 보여주는 방법을 배워본다. 이 장에서는 프라미스 API에 대해서도 살펴본다.

4장. 데이터 포맷과 출력: 보여줄 데이터를 이미 백엔드에서 받아왔다고 가정하고 데이터를 UI에 어떻게 렌더링하는지 알아 본다. 또한 UI를 렌더링하기 위한 AngularJS 디렉티브와 데이터 포맷을 변경하기 위한 AngularJS 필터의 사용법도 살펴본다.

5장. 고급 폼 만들기: 다양한 종류의 input 필드와 폼으로 사용자에게 데이터를 조작할 수 있는 기능을 어떻게 제공하는지 알아본다. AngularJS가 지원하는 다양한 종류의 input을 살펴보고 폼 검증에 대해서도 알아본다.

6장. 내비게이션 구성: 각각의 화면을 잘 구성해서 쉽게 이동할 수 있는 애플리케이션을 만드는 방법을 살펴본다. 그리고 단일 페이지 웹 애플리케이션에서 URL의 역할을 알아보고 URL과 내비게이션을 관리하는 AngularJS 서비스를 익혀본다.

7장. 애플리케이션 보안: AngularJS로 만든 단일 페이지 웹 애플리케이션의 보안에 대해 자세히 알아본다. 그리고 사용자를 인증하고 권한을 부여하는 컨셉과 방법도 알아본다.

8장. 나만의 디렉티브 만들기: AngularJS의 가장 흥미로운 부분 중 하나인 디렉티브에 대해 알아본다. 샘플 디렉티브의 구조를 설명하고 테스트 코드를 작성하는 전략도 알아본다.

9장. 디렉티브 만들기 심화: 8장의 내용을 기초로 해서 디렉티브에 대한 조금 더 심도 깊은 내용을 알아본다. 실제 디렉티브 예제를 통해 복잡한 기법도 살펴본다.

10장. 전 세계를 대상으로 하는 AngularJS 웹 애플리케이션 만들기: AngularJS 애플리케이션의 국제화에 대한 내용을 살펴본다. 템플릿의 내용을 로케일 설정 값에 따라 번역하는 방법도 알아본다.

11장. 견고한 AngularJS 웹 애플리케이션 만들기: 웹 애플리케이션의 비기능적인 요소인 성능 요구사항에 집중해본다. 성능 특성을 이해하기 위해 AngularJS의 내부를 살펴보고 성능에 영향을 미치는 경우에 대해서도 자세히 알아본다.

12장. AngularJS 웹 애플리케이션의 패키징과 배포: 실제 운영 환경에 배포하기 위해 애플리케이션을 준비하는 과정을 살펴본다. 애플리케이션을 어떻게 최적화하는지 알아보고 특히 시작 페이지의 최적화 방법에 집중해본다.

★ 저자 서문 ★
AngularJS는 비교적 새로 등장한 자바스크립트 MVC 프레임워크이지만 시장의 판도를 바꿀 만한 대단한 물건이다. 템플릿을 그리는 새로운 방식과 양방향 데이터 바인딩을 지원해서 매우 강력하고 사용하기도 쉽다. 사람들은 다른 방법에 비해서 AngularJS를 사용했을 때 애플리케이션 코드의 양을 획기적으로 줄일 수 있었다는 이야기를 계속 들려주고 있다.

AngularJS는 뛰어난 기술의 집약체다. 테스트와 코드 품질을 강력하게 강조하기 때문에 전체 자바스크립트 에코 시스템에서 좋은 사례로 손꼽히고 있다. 높은 품질과 기술의 참신함을 고려해볼 때 많은 사람들이 이 프레임워크에 끌리는 모습을 보는 것은 그리 놀랍지 않다. AngularJS에 대한 매우 활발하고 적극적인 커뮤니티를 만들면서 말이다. 그리고 이로 인해 AngularJS는 점점 더 유명해지고 있다.

AngularJS가 점점 더 유명해지면서 사람들은 복잡한 프로젝트에도 AngularJS를 사용하기 시작했다. 하지만 얼마 지나지 않아 공식 문서나 웹상의 간단한 예제로는 해결할 수 없는 문제에 맞닥뜨리게 될 것이다. 다른 기술과 비교해서 AngularJS에는 커뮤니티에 아직 공유되지 못한, 경험으로부터 나오는 이디엄, 패턴, 우수 사례가 많이 존재하기 때문이다.

이 책을 집필한 이유는 AngularJS 애플리케이션을 정석대로 만드는 방법이 무엇인지 알려주고 싶어서다. 그래서 이 책은 프레임워크가 어떻게 동작하지를 다루기보다는 AngularJS를 사용해서 복잡한 웹 애플리케이션을 어떻게 만드는지에 집중한다. 그리고 AngularJS 커뮤니티에 실제로 올라온 질문과 그에 대한 실제 해결책도 제공한다.

★ 옮긴이의 말 ★
요즘 가장 떠오르는 프론트엔드 MVC 프레임워크를 꼽자면 단연코 AngularJS다. 강력한 프레임워크를 기반으로 단일 페이지 웹 애플리케이션을 쉽게 개발할 수 있기 때문이다. 의존성 주입 기능으로 재사용이 가능한 코드를 쉽게 작성할 수 있고 디렉티브를 사용해서 새로운 HTML 태그를 만들어 좀 더 선언적인 방식으로 템플릿을 구성할 수도 있다. 그리고 모델의 계층구조를 만들어서 중복되는 코드를 줄이고 더욱 깔끔한 코드를 작성할 수도 있다.

하지만 이보다 내 마음을 끌었던 것은 AngularJS 프레임워크 자체에서 테스트를 강조하는 모습이었다. 백엔드는 그나마 테스트 코드를 작성하기 쉬운 환경이지만 프론트엔드는 상대적으로 테스트 코드를 작성하기가 어려운 게 현실이다. 하지만 AngularJS는 다르다. 테스트 작성을 장려하고 테스트 코드를 작성하기 쉽도록 프레임워크가 도와주고 있다. Jasmine과 Karma를 기반으로 하는 단위 테스트부터 protractor를 기반으로 하는 통합테스트까지 광범위하게 테스트를 작성할 수 있는 환경을 제공한다. 이러한 환경에서 프론트엔드 프로젝트를 진행한다면 우리를 든든하게 지켜주는 테스트 코드와 함께 더없이 즐겁게 개발할 수 있을 것이다. AngularJS로 실제 웹 서비스를 개발하면서 이와 같은 내 생각은 더 확고해졌다.

하지만 AngularJS로 실제 웹 서비스를 개발하다 보니 이런 저런 문제들에 부딪히게 됐다. 문제를 해결하는 방법은 무엇인지, 어떻게 구현하는 게 가장 좋은 방법인지는 AngularJS 공식 페이지의 튜토리얼과 가이드로는 부족했다. 그럴 때마다 이 책의 도움을 많이 받았다. 이 책은 AngularJS의 기본적인 내용은 물론이고 실제 프로젝트에서 AngularJS를 사용할 때 부딪힐 수 있는 여러 문제들에 대한 해결책을 친절하게 설명해준다. 테스트 코드를 잘 작성하는 방법도 물론 알려준다. 그리고 프레임워크 내부의 심도 깊은 내용까지 다루고 있어서 현업에 AngularJS를 쓰고 있는 개발자들에게 많은 도움이 되리라 생각한다.

자, 이제 주저하지 말고 AngularJS라는 거인의 어깨 위에 올라가서 더 멀리 바라보고 더 빠르게 이동하자. 분명 새로운 세상이 보일 것이다.

1장 AngularJS 철학
AngularJS와의 첫 만남
__프레임워크에 익숙해지기
__프로젝트에서 자신만의 길 찾기
____커뮤니티
____온라인 학습 자료
__라이브러리와 확장성
__도구
____Batarang
____Plunker와 jSFiddle
____IDE 확장 기능과 플러그인
AngularJS 집중 강좌
__Hello World: AngularJS 예제
____양방향 데이터 바인딩
__AngularJS의 MVC 패턴
____전체 살펴보기
____스코프 심화
____뷰
__모듈과 의존성 주입
____AngularJS의 모듈
____객체들과의 연동
____서비스 등록
____모듈 생명주기
____다른 모듈에 의존하는 모듈
AngularJS와 나머지 세상
__제이쿼리와 AngularJS
____사과와 오렌지
__미래 살짝 엿보기
정리


2장 빌드와 테스팅
샘플 애플리케이션 소개
__문제 도메인에 익숙해지기
__기술 스택
__영구 저장소
____몽고랩
____서버 측 환경
____서드파티 자바스크립트 라이브러리
____부트스트랩 CSS
빌드 시스템
__빌드 시스템 원칙
____모두 자동화
____빠른 실패와 빠른 수습
____다른 절차라면 다른 명령으로
____빌드 스크립트도 코드다
__도구
____Grunt.js
____테스트 라이브러리와 도구
____Jasmine
____Karma 실행기
파일과 폴더 구조
__루트 폴더
__소스 폴더 내부
____AngularJS 관련 파일
____시작은 간단하게
____테스트 폴더 내용
__파일 명명 규칙
AngularJS 모듈과 파일
__하나의 모듈은 하나의 파일로
__모듈 내부
____제공자를 등록하는 여러 가지 문법
____설정과 실행 범위를 선언하는 문법
자동화된 테스트
__단위 테스트
____Jasmine 테스트 구조
____AngularJS 객체 테스트
____서비스 테스트
____컨트롤러 테스트
____목 객체와 비동기 코드 테스트
__종단 간 테스트
____일일 작업 흐름
____Karma 실행기 팁
____특정 테스트만 실행
____디버깅
정리


3장 백엔드 서버와의 통신
$http로 XHR과 JSONP 요청 생성
__데이터 모델과 MongoLab URL에 익숙해지기
__$http API 빠르게 살펴보기
____설정 객체 입문
____요청 데이터 변환
____HTTP 응답 처리
____응답 데이터 변환
__동일 출처 정책 제한 다루기
____JSONP로 동일 출처 정책 제한 극복
____JSONP의 한계
____CORS로 동일 출처 정책 제한 극복
____서버 측 프락시
$q 프라미스 API
__프라미스와 $q 서비스 사용
____$q 서비스 기본
____일급 자바스크립트 객체인 프라미스
____콜백 모음
____콜백 등록과 프라미스 생명주기
____비동기 동작 체인
____$q 심화
__AngularJS의 $q 통합
$http와 프라미스 API
RESTful 엔드포인트와 통신
__$resource 서비스
____생성자 기반 메소드와 인스턴스 기반 메소드
____$resource가 생성하는 비동기 메소드
____$resource 서비스의 한계
__$http로 만든 사용자 정의 REST 어댑터
$http 추가 기능 사용
__응답 가로채기
$http와 통신하는 테스트 코드
정리


4장 데이터 포맷과 출력
디렉티브에 대한 참조
표현식 평가 결과 출력
__인터폴레이션 디렉티브
__ngBind로 모델 값 렌더링
__AngularJS 표현식 안의 HTML
조건부 출력
__조건별로 특정 블록 추가
ngRepeat 디렉티브로 컬렉션 렌더링
__ngRepeat 디렉티브 익숙해지기
__특별한 변수
__객체의 프로퍼티 순회
__ngRepeat 패턴
____리스트와 세부 내용
____테이블, 요소, 클래스 수정
DOM 이벤트 핸들러
DOM 기반 템플릿의 효율적인 사용
__장황한 문법
__ngRepeat과 여러 DOM 요소
__실행 중에 변경할 수 없는 요소와 속성
__사용자 정의 HTML 요소와 오래된 버전의 IE
필터로 모델 다루기
__기본 제공 필터
____서식 변경 필터
____배열 변경 필터
__사용자 정의 필터 생성: 페이지 번호 매기기 예제
__자바스크립트 코드에서 필터 접근
__필터 주의 사항
____필터와 DOM 조작
____필터의 데이터 변형 비용
____불안정한 필터
정리


5장 고급 폼 작성
기본 폼과 AngularJS 폼 비교
__ngModel 디렉티브 소개
사용자 정보 폼 작성
input 디렉티브의 이해
__필요한 값 검증
__문자 기반 input 사용
__체크박스 input 사용
__라디오 input 사용
__select input 사용
____간단한 문자열 옵션
____ngOptions 디렉티브를 사용한 동적인 옵션
____select 디렉티브로 빈 옵션 처리
____select와 객체 동치 이해
____여러 개의 옵션 선택
__기존 HTML hidden input 필드
____서버가 생성한 값에 포함된 경우
____기존 HTML 폼 제출
ngModel 데이터 바인딩 심화 학습
__ngModelController
____모델과 뷰의 값 변형
____값 변경 여부 추적
____input 필드 유효 여부 추적
AngularJS 폼 검증
__ngFormController
____name 속성으로 폼을 스코프에 추가
__사용자 정보 폼에 동적인 동작 추가
____유효 검사 오류 보여주기
____저장 버튼 비활성화
__브라우저 자체 검증 기능 비활성화
다른 폼과 중첩된 폼
__재사용 가능한 컴포넌트로서의 서브 폼 사용
서브 폼 반복 사용
__반복되는 input 검증
기존 HTML 폼 제출
__서버로 바로 폼 제출
__제출 이벤트 다루기
____ngSubmit으로 폼 제출
____ngClick으로 폼 제출
사용자 정보 폼 초기화
정리


6장 내비게이션 구성
단일 페이지 웹 애플리케이션의 URL
__HTML5 이전 시대의 Hashbang URL
__HTML5와 history API
$location 서비스 사용
__$location 서비스 API와 URL 이해
__해시, 페이지 내비게이션, $anchorScroll
__HTML5 모드 설정
____클라이언트 측
____서버 측
__$location 서비스로 직접 내비게이션 작성
____페이지 경로 작성
____경로에 URL 연결
____경로마다 컨트롤러 정의
____직접 제작한 내비게이션의 단점
AngularJS 내장 경로 서비스 사용
__기본적인 경로 정의
____일치하는 경로의 내용 보여주기
__변경되는 경로 찾기
____기본 경로 설정
____경로의 매개변수 값 사용
__서로 다른 컨트롤러에서 파셜 재사용
__경로 변경 시 깜빡거림 현상 제거
__경로 변경 방지
$route 서비스의 한계
__한 화면의 한 영역에 대한 경로
____ng-include로 여러 UI 영역 다루기
__지원하지 않는 중첩 경로
경로 패턴, 팁, 트릭
__링크 다루기
____클릭 가능한 링크 작성
____HTML5와 Hashbang 모드에서도 동일하게 동작하는 링크
____외부 페이지 링크
__경로 정의 구조화
____경로 정의를 여러 개의 모듈로 분할
____경로 정의 시 중복 코드 제거
정리


7장 애플리케이션 보안
서버 측에서 인증과 허가 제공
__인증되지 않은 접근 처리
__서버 측 인증 API 제공
파셜 템플릿 보호
악의적인 공격 차단
__쿠키 스누핑(중간자 공격) 방지
__크로스사이트 스크립팅 공격 방지
____AngularJS 표현식으로 HTML 내용 보호
____안전하지 않은 HTML 바인딩 허용
____HTML 안전하게 만들기
__JSON 주입 취약점 방지
__크로스사이트 요청 위조 공격 방지
클라이언트 측 보안 추가
__security 서비스 작성
__로그인 폼 보여주기
__보안이 필요한 메뉴와 툴바 생성
____메뉴 항목 숨기기
____로그인 툴바 생성
클라이언트에서 인증과 허가 지원
__권한 실패 처리
__응답 가로채기
____HTTP 응답 인터셉터
__securityInterceptor 서비스 작성
__securityRetryQueue 서비스 작성
____security 서비스 통지
보안이 필요한 경로에 접근 방지
__경로 resolve 함수 사용
__authorization 서비스 작성
정리


8장 나만의 디렉티브 작성
AngularJS 디렉티브란
__내장 디렉티브
__HTML 마크업에서 디렉티브 사용
디렉티브 컴파일 생명주기
디렉티브에 대한 단위 테스트 작성
디렉티브 정의
디렉티브로 버튼 꾸미기
__버튼 디렉티브 만들기
AngularJS 위젯 디렉티브 이해
__페이지 번호 디렉티브 작성
__페이지 번호 디렉티브의 테스트 작성
__디렉티브에서 HTML 템플릿 사용
__부모 스코프에 독립적인 디렉티브
____@로 속성 인터폴레이트
____=로 속성 데이터 바인딩
____&로 속성에 콜백 표현식 추가
__위젯 구현
__디렉티브에 selectPage 콜백 추가
사용자 정의 검증 디렉티브 작성
__디렉티브 컨트롤러 요청
____선택적인 컨트롤러 작성
____부모 컨트롤러 검색
__ngModelController 연동
__사용자 정의 검증 디렉티브의 테스트 작성
__사용자 정의 검증 디렉티브 구현
비동기 모델 검증 기능 작성
__Users 서비스를 목으로 만들기
__비동기 검증 기능에 대한 테스트 작성
__비동기 검증 디렉티브 구현
jQueryUI를 랩핑한 datepicker 디렉티브
__라이브러리를 랩핑한 디렉티브 테스트 작성
__jQuery datepicker 디렉티브 구현
정리


9장 고급 디렉티브 작성
트랜스클루전(transclusion) 사용
__디렉티브에서 트랜스클루전 사용
__고립 스코프의 디렉티브로 내용 옮겨 넣기
__트랜스클루전을 사용해 경고 디렉티브 작성
____디렉티브 정의 시 사용하는 replace 프로퍼티 이해
____디렉티브 정의 시 사용하는 transclude 프로퍼티 이해
____ng-transclude로 옮겨 넣은 요소 추가
__트랜스클루전의 스코프 이해
트랜스클루전 함수 생성과 사용
__$compile 서비스로 트랜스클루전 함수 작성
____옮겨 넣을 때 기존 요소 복사
__디렉티브의 트랜스클루전 함수 사용
____transcludeFn으로 컴파일 함수에서 transclusion 함수 사용
____$transclude로 디렉티브 컨트롤러에서 transclusion 함수 사용
__트랜스클루전을 사용해서 if 디렉티브 작성
____디렉티브에서 priority 속성 사용
디렉티브 컨트롤러 이해
__디렉티브 컨트롤러에 특별한 의존 관계 주입
__컨트롤러 기반의 페이지 번호 디렉티브 작성
__디렉티브 컨트롤러와 링크 함수의 차이점
____의존성 주입
____컴파일 과정
____다른 컨트롤러에 접근
____트랜스클루전 함수에 접근
__accordion 디렉티브 작성
____accordion에서 디렉티브 컨트롤러 사용
____accordion 디렉티브 구현
____accordion-group 디렉티브 구현
컴파일 단계의 제어권 가져오기
__field 디렉티브 작성
____디렉티브에서 terminal 프로퍼티 사용
__$interpolate 서비스 사용
____유효성 검증 메시지 바인딩
__템플릿을 동적으로 로딩
__field 템플릿 설정
정리


10장 전 세계를 대상으로 하는 AngularJS 웹 애플리케이션 작성
특정 로케일 기호와 설정 사용
__특정 로케일 모듈 설정
__사용 가능한 로케일 설정
____특정 로케일 설정과 AngularJS 필터
번역
__AngularJS 템플릿에서 사용되는 문자열 번역
____필터 사용
____디렉티브 사용
__자바스크립트 코드의 문자열 번역
패턴, 팁, 요령
__주어진 로케일로 애플리케이션 초기화
____URL 일부분으로 로케일 정보 포함
__로케일 변경
__날짜, 숫자, 통화 형식 직접 정의
정리


11장 탄탄한 AngularJS 웹 애플리케이션 작성
AngularJS 내부 동작 이해
__문자열 기반의 템플릿 엔진이 아니다
____DOM 이벤트의 응답으로 모델 갱신
____모델 변경 사항을 DOM으로 전파
____DOM과 모델 동기화
____AngularJS 세상의 핵심 키 Scope.$apply
____종합해보기
성능 개선: 기대치 설정, 측정, 개선, 반복
AngularJS 애플리케이션 성능 개선
__CPU 사용률 최적화
____$digest 루프를 빠르게
____$digest 루프 빈도 줄이기
____각 $digest 루프의 수 제한
__메모리 소비 최적화
____가능하면 deep-watching 피하기
____watch의 대상이 되는 표현식의 크기 고려
__ng-repeat 디렉티브
____ng-repeat에서 컬렉션 watch
____많은 수의 바인딩
정리


12장 AngularJS 웹 애플리케이션의 패키징과 배포
네트워크 관련 성능 개선
__정적 리소스 최소화
____AngularJS가 의존성을 인지하는 방법
____최소화에도 안전한 자바스크립트 코드 작성
____배열 형태 DI 애노테이션의 단점
__템플릿 미리 로딩
____[script] 디렉티브로 템플릿 미리 로딩
____$templateCache 서비스에 추가
____여러 가지 미리 로딩 기법 적용
시작 페이지 최적화
__처리가 덜 된 템플릿은 보여주지 않기
____ng-cloak으로 DOM의 일정 부분 숨기기
____ng-bind로 개별 표현식 숨기기
__AngularJS와 애플케이션 스크립트
____스크립트 참조
____AngularJS와 비동기 모듈 정의
지원 브라우저
__인터넷 익스플로러 지원
정리