AngularJS로 하는 웹 애플리케이션 개발
- 원서명Mastering Web Application Development with AngularJS (ISBN 9781782161820)
- 지은이파웰 코즐로프스키, 피터 베이컨 다윈
- 옮긴이현수명
- ISBN : 9788960775732
- 35,000원
- 2014년 06월 30일 펴냄 (절판)
- 페이퍼백 | 468쪽 | 188*235mm
- 시리즈 : acorn+PACKT, 웹 프로페셔널
판매처
- 현재 이 도서는 구매할 수 없습니다.
책 소개
요약
요즘 가장 떠오르는 프론트엔드 측 개발 프레임워크를 꼽자면 단연코 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 웹 애플리케이션의 패키징과 배포: 실제 운영 환경에 배포하기 위해 애플리케이션을 준비하는 과정을 살펴본다. 애플리케이션을 어떻게 최적화하는지 알아보고 특히 시작 페이지의 최적화 방법에 집중해본다.
목차
목차
- 1장 AngularJS 철학
- AngularJS와의 첫 만남
- 프레임워크에 익숙해지기
- 프로젝트에서 자신만의 길 찾기
- 커뮤니티
- 온라인 학습 자료
- 라이브러리와 확장성
- 도구
- Batarang
- Plunker와 jSFiddle
- IDE 확장 기능과 플러그인
- AngularJS 집중 강좌
- Hello World: AngularJS 예제
- 양방향 데이터 바인딩
- AngularJS의 MVC 패턴
- 전체 살펴보기
- 스코프 심화
- 뷰
- 모듈과 의존성 주입
- AngularJS의 모듈
- 객체들과의 연동
- 서비스 등록
- 모듈 생명주기
- 다른 모듈에 의존하는 모듈
- Hello World: AngularJS 예제
- 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 통합
- 프라미스와 $q 서비스 사용
- $http와 프라미스 API
- RESTful 엔드포인트와 통신
- $resource 서비스
- 생성자 기반 메소드와 인스턴스 기반 메소드
- $resource가 생성하는 비동기 메소드
- $resource 서비스의 한계
- $http로 만든 사용자 정의 REST 어댑터
- $resource 서비스
- $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 필드 유효 여부 추적
- ngModelController
- AngularJS 폼 검증
- ngFormController
- name 속성으로 폼을 스코프에 추가
- 사용자 정보 폼에 동적인 동작 추가
- 유효 검사 오류 보여주기
- 저장 버튼 비활성화
- 브라우저 자체 검증 기능 비활성화
- ngFormController
- 다른 폼과 중첩된 폼
- 재사용 가능한 컴포넌트로서의 서브 폼 사용
- 서브 폼 반복 사용
- 반복되는 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 속성 사용
- $compile 서비스로 트랜스클루전 함수 작성
- 디렉티브 컨트롤러 이해
- 디렉티브 컨트롤러에 특별한 의존 관계 주입
- 컨트롤러 기반의 페이지 번호 디렉티브 작성
- 디렉티브 컨트롤러와 링크 함수의 차이점
- 의존성 주입
- 컴파일 과정
- 다른 컨트롤러에 접근
- 트랜스클루전 함수에 접근
- accordion 디렉티브 작성
- accordion에서 디렉티브 컨트롤러 사용
- accordion 디렉티브 구현
- accordion-group 디렉티브 구현
- 컴파일 단계의 제어권 가져오기
- field 디렉티브 작성
- 디렉티브에서 terminal 프로퍼티 사용
- $interpolate 서비스 사용
- 유효성 검증 메시지 바인딩
- 템플릿을 동적으로 로딩
- field 템플릿 설정
- field 디렉티브 작성
- 정리
- 10장 전 세계를 대상으로 하는 AngularJS 웹 애플리케이션 작성
- 특정 로케일 기호와 설정 사용
- 특정 로케일 모듈 설정
- 사용 가능한 로케일 설정
- 특정 로케일 설정과 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
- 많은 수의 바인딩
- CPU 사용률 최적화
- 정리
- 12장 AngularJS 웹 애플리케이션의 패키징과 배포
- 네트워크 관련 성능 개선
- 정적 리소스 최소화
- AngularJS가 의존성을 인지하는 방법
- 최소화에도 안전한 자바스크립트 코드 작성
- 배열 형태 DI 애노테이션의 단점
- 템플릿 미리 로딩
- <script> 디렉티브로 템플릿 미리 로딩
- $templateCache 서비스에 추가
- 여러 가지 미리 로딩 기법 적용
- 정적 리소스 최소화
- 시작 페이지 최적화
- 처리가 덜 된 템플릿은 보여주지 않기
- ng-cloak으로 DOM의 일정 부분 숨기기
- ng-bind로 개별 표현식 숨기기
- AngularJS와 애플케이션 스크립트
- 스크립트 참조
- AngularJS와 비동기 모듈 정의
- 처리가 덜 된 템플릿은 보여주지 않기
- 지원 브라우저
- 인터넷 익스플로러 지원
- 정리
도서 오류 신고
정오표
정오표
[2014. 07. 07]
p.46 두번째 코드 {{name}}! → {{ getName() }}!