앵귤러 마스터 북

1장 첫 앵귤러 웹 애플리케이션 만들기 _ 1
1.1 단순한 레딧 클론 1
1.2 시작하기 4
1.2.1 Node.js와 npm 4
1.2.2 타입스크립트 4
1.2.3 브라우저 5
1.2.4 윈도우 사용자를 위한 특별 과정 5
1.3 앵귤러 CLI 5
1.3.1 예시 프로젝트 6
1.4 애플리케이션 코드 작성하기 10
1.4.1 애플리케이션 실행하기 10
1.5 컴포넌트에 데이터 추가하기 17
1.5.1 템플릿 렌더링하기 19
1.5.2 테스트하기 19
1.6 배열 다루기 20
1.7 UserItemComponent 사용하기 23
1.7.1 UserItemComponent 렌더링하기 23
1.7.2 입력 받기 24
1.7.3 입력값 전달하기 25
1.8 부트스트랩 속성 과정 27
1.8.1 declarations 28
1.8.2 imports 28
1.8.3 providers 28
1.8.4 bootstrap 29
1.9 애플리케이션 확장하기 29
1.9.1 CSS 추가하기 30
1.9.2 애플리케이션 컴포넌트 31
1.9.3 인터랙션 추가하기 32
1.9.4 ArticleComponent 추가하기 36
1.10 여러 행 렌더링하기 44
1.10.1 Article 클래스 만들기 44
1.10.2 여러 Article 저장하기 49
1.10.3 Input으로 ArticleComponent 설정하기 50
1.10.4 Articles 리스트 렌더링하기 52
1.11 새 Article 추가하기 54
1.12 마무리 손길 55
1.12.1 Article 도메인 표시하기 55
1.12.2 점수별로 재정렬하기 56
1.13 배포 57
1.13.1 앱을 제품으로 빌드하기 57
1.13.2 서버로 업로드하기 58
1.14 전체 코드 59
1.15 정리 59

2장 타입스크립트 _ 60
2.1 앵귤러 4, 타입스크립트로 만들어지다 60
2.2 타입스크립트로 무엇을 얻을 수 있나? 62
2.3 타입 62
2.3.1 REPL 경험하기 64
2.4 내장 타입 64
2.4.1 string 64
2.4.2 number 64
2.4.3 boolean 65
2.4.4 Array 65
2.4.5 열거형 65
2.4.6 any 66
2.4.7 void 66
2.5 클래스 66
2.5.1 프로퍼티 67
2.5.2 메서드 67
2.5.3 컨스트럭터 69
2.5.4 상속 71
2.6 유틸리티 72
2.6.1 살찐 화살표 함수 72
2.6.2 템플릿 문자열 74
2.7 정리 75

3장 앵귤러는 어떻게 동작하는가 _ 76
3.1 애플리케이션 77
3.1.1 내비게이션 컴포넌트 78
3.1.2 브레드크럼 컴포넌트 78
3.1.3 제품 리스트 컴포넌트 78
3.2 이 장의 사용법 80
3.3 제품 모델 81
3.4 컴포넌트 82
3.5 컴포넌트 데코레이터 84
3.5.1 컴포넌트 selector 84
3.5.2 컴포넌트 template 84
3.5.3 Product 추가하기 85
3.5.4 템플릿 바인딩으로 Product 보기 87
3.5.5 Product 더 많이 추가하기 87
3.5.6 Product 선택하기 89
3.5.7 를 사용하여 제품 리스트 출력하기 89
3.6 ProductsListComponent 컴포넌트 92
3.6.1 ProductsListComponent의 @Component 옵션 설정하기 93
3.6.2 컴포넌트 입력 94
3.6.3 컴포넌트 출력 95
3.6.4 커스텀 이벤트 배출하기 96
3.6.5 ProductsListComponent 컨트롤러 클래스 작성하기 98
3.6.6 ProductsListComponent 뷰 템플릿 작성하기 99
3.6.7 ProductsListComponent 컴포넌트 전체 코드 101
3.7 ProductRowComponent 컴포넌트 103
3.7.1 ProductRowComponent 설정 103
3.7.2 ProductRowComponent 템플릿 104
3.8 ProductImageComponent 컴포넌트 105
3.9 PriceDisplayComponent 컴포넌트 106
3.10 ProductDepartmentComponent 컴포넌트 106
3.11 NgModule과 앱 시동하기 108
3.11.1 앱 시동하기 109
3.12 완성된 프로젝트 110
3.13 앱 배포하기 111
3.14 덧붙여: 데이터 아키텍처 111

4장 내장 지시자 _ 113
4.1 소개 113
4.2 ngIf 114
4.3 ngSwitch 114
4.4 NgStyle 116
4.5 NgClass 118
4.6 NgFor 121
4.6.1 인덱스 얻기 125
4.7 NgNonBindable 126
4.8 결론 127

5장 앵귤러의 폼 _ 128
5.1 폼은 중요하다. 그리고 복잡하다 128
5.2 FormControl과 FormGroup 129
5.2.1 FormControl 129
5.2.2 FormGroup 130
5.3 첫 번째 폼 130
5.3.1 FormsModule 로드하기 131
5.3.2 단순 SKU 폼: @Component 데코레이터 133
5.3.3 단순 SKU 폼: template 133
5.3.4 단순 SKU 폼: 컴포넌트 정의 클래스 136
5.3.5 테스트하기 137
5.4 FormBuilder 사용하기 138
5.5 FormBuilder로 만드는 리액티브 폼 139
5.5.1 FormBuilder 사용하기 139
5.5.2 뷰에서 myForm 사용하기 140
5.5.3 테스트하기 141
5.6 검증 추가하기 143
5.6.1 명시적으로 sku FormControl을 인스턴스 변수로 설정하기 144
5.6.2 맞춤형 검증 149
5.7 변경 내용 주시하기 150
5.8 ngModel 152
5.9 정리 154

6장 의존성 주입 _ 155
6.1 주입 예: PriceService 156
6.2 의존성 주입 요소들 160
6.3 인젝터 다루기 161
6.4 NgModule과 의존성 다루기 164
6.4.1 providers는 키다 166
6.5 제공자 166
6.5.1 클래스 사용하기 166
6.5.2 팩토리 사용하기 170
6.6 앱의 의존성 주입 173
6.7 참고 리소스 174

7장 HTTP _ 175
7.1 소개 175
7.2 @angular/common/http 사용하기 176
7.2.1 @angular/http에서 가져오기 176
7.3 기본 요청 177
7.3.1 SimpleHttpComponent 컴포넌트 만들기 178
7.3.2 SimpleHttpComponent 템플릿 만들기 178
7.3.3 SimpleHttpComponent 컨트롤러 만들기 179
7.3.4 SimpleHttpComponent 전체 코드 181
7.4 YouTubeSearchComponent 작성하기 181
7.4.1 SearchResult 작성하기 183
7.4.2 YouTubeSearchService 작성하기 184
7.4.3 SearchBoxComponent 작성하기 189
7.4.4 SearchResultComponent 작성하기 196
7.4.5 YouTubeSearchComponent 작성하기 197
7.5 @angular/http API 201
7.5.1 POST 요청 수행하기 201
7.5.2 PUT / PATCH / DELETE / HEAD 201
7.6 맞춤형 HTTP 헤더 202
7.7 정리 202

8장 라우팅 _ 203
8.1 라우팅은 왜 필요할까? 203
8.2 클라이언트 사이드 라우팅의 동작 방식 204
8.2.1 시작: 앵커 태그 사용하기 205
8.2.2 진화: HTML5 클라이언트 사이드 라우팅 206
8.3 첫 라우트 작성하기 206
8.4 앵귤러 라우팅의 구성 요소들 207
8.4.1 imports 207
8.4.2 라우트 설치하기 209
8.4.3 RouterOutlet: 사용하기 209
8.4.4 RouterLink: [routerLink] 사용하기 211
8.5 모두 합치기 212
8.5.1 컴포넌트 만들기 213
8.5.2 애플리케이션 컴포넌트 215
8.5.3 라우트 설정하기 216
8.6 라우팅 전략 218
8.7 애플리케이션 실행하기 219
8.8 라우트 파라미터 220
8.8.1 ActivatedRoute 220
8.9 음악 검색 앱 221
8.9.1 첫 단계 223
8.9.2 SpotifyService 224
8.9.3 SearchComponent 225
8.9.4 검색 시도하기 232
8.9.5 음악 검색 마무리하기 235
8.10 라우터 훅 236
8.10.1 AuthService 236
8.10.2 LoginComponent 238
8.10.3 ProtectedComponent와 라우트 가드 239
8.11 라우트 중첩 244
8.11.1 라우트 설정하기 244
8.11.2 ProductsModule 245
8.12 정리 249

9장 앵귤러 4의 데이터 아키텍처 _ 250
9.1 데이터 아키텍처 개요 250
9.1.1 앵귤러 4의 데이터 아키텍처 252

10장 옵저버블 데이터 아키텍처 1부 ― 서비스 _ 253
10.1 옵저버블과 RxJS 253
10.1.1 노트: 필요한 RxJS 지식 253
10.1.2 반응형 프로그래밍과 RxJS 배우기 254
10.2 대화 앱 개요 255
10.2.1 컴포넌트 256
10.2.2 모델 257
10.2.3 서비스 258
10.2.4 정리 258
10.3 모델 구현하기 258
10.3.1 User 259
10.3.2 Thread 259
10.3.3 Message 260
10.4 UsersService 구현하기 261
10.4.1 currentUser의 스트림 262
10.4.2 새 사용자 설정하기 262
10.4.3 UserService.ts 264
10.5 MessagesService 264
10.5.1 newMessages 스트림 265
10.5.2 messages 스트림 266
10.5.3 Operation 스트림 패턴 266
10.5.4 스트림 공유하기 268
10.5.5 messages 스트림에 Message 추가하기 269
10.5.6 완성된 MessagesService 273
10.5.7 MessagesService 테스트하기 275
10.6 ThreadsService 277
10.6.1 현재 Thread 집합의 맵(threads에서) 277
10.6.2 최신 스레드가 맨 위에 보이는 시간별 Thread 리스트(orderedthreads에서) 281
10.6.3 현재 선택된 Thread(currentThread에서) 282
10.6.4 현재 선택된 Thread에 사용할 Message 리스트(currentThreadMessages에서) 283
10.6.5 완성된 ThreadsService 286
10.7 데이터 모델 정리 288

11장 옵저버블 데이터 아키텍처 2부 ― 뷰 컴포넌트 _ 289
11.1 뷰 빌드하기: 최상위 컴포넌트, ChatApp 289
11.2 ChatThreadsComponent 291
11.2.1 ChatThreadsComponent 템플릿 292
11.3 단일 ChatThreadComponent 293
11.3.1 ChatThreadComponent 컨트롤러와 ngOnInit 294
11.3.2 ChatThreadComponent 템플릿 295
11.4 ChatWindowComponent 295
11.4.1 ChatWindowComponent 클래스 프로퍼티 296
11.5 ChatMessageComponent 305
11.5.1 ChatMessageComponent 템플릿 306
11.6 ChatNavBarComponent 308
11.6.1 ChatNavBarComponent @Component 308
11.6.2 ChatNavBarComponent 템플릿 310
11.7 정리 310

12장 리덕스와 함께하는 타입스크립트 _ 312
12.1 리덕스 313
12.1.1 리덕스: 핵심 개념 314
12.2 코어 리덕스 개념 315
12.2.1 리듀서란 무엇일까? 315
12.2.2 Action과 Reducer 인터페이스 정의하기 315
12.2.3 첫 Reducer 만들기 316
12.2.4 첫 Reducer 실행하기 317
12.2.5 동작으로 카운터 조정하기 318
12.2.6 리듀서 switch 319
12.2.7 동작의 ‘인수’ 320
12.3 상태 저장하기 321
12.3.1 저장소 사용하기 323
12.3.2 subscribe로 알림 받기 323
12.3.3 리덕스 코어 327
12.4 메시지 앱 327
12.4.1 메시지 앱의 state 328
12.4.2 메시지 앱의 action 328
12.4.3 메시지 앱의 reducer 329
12.4.4 동작 테스트하기 332
12.4.5 동작 생성자 333
12.4.6 진짜 리덕스 사용하기 335
12.5 앵귤러에서 리덕스 사용하기 336
12.6 앱 기획하기 337
12.7 리덕스 설정하기 338
12.7.1 애플리케이션 상태 정의하기 338
12.7.2 리듀서 정의하기 338
12.7.3 동작 생성자 정의하기 339
12.7.4 저장소 만들기 340
12.8 저장소 제공하기 341
12.9 앱 시동하기 343
12.10 AppComponent 344
12.10.1 import 344
12.10.2 템플릿 345
12.10.3 constructor 346
12.10.4 모두 합치기 347
12.11 앞으로 갈 곳 348
12.12 참조 348

13장 중급자를 위한 앵귤러 리덕스 _ 350
13.1 이 장의 관점 351
13.2 대화 앱 조감도 351
13.1 이 장의 관점 351
13.2.1 컴포넌트 352
13.2.2 모델 352
13.2.3 리듀서 353
13.2.4 정리 353
13.3 모델 구현하기 353
13.3.1 User 354
13.3.2 Thread 354
13.3.3 Message 355
13.4 앱 상태 355
13.4.1 효율적인 코드 레이아웃 356
13.4.2 루트 리듀서 356
13.4.3 UsersState 357
13.4.4 ThreadsState 357
13.4.5 AppState 시각화하기 359
13.5 리듀서(그리고 동작 생성자) 빌드하기 360
13.5.1 현재 사용자 동작 생성자 설정하기 360
13.5.2 UsersReducer ― 현재 사용자 설정하기 361
13.5.3 스레드와 메시지 개요 362
13.5.4 새 스레드 동작 생성자 추가하기 362
13.5.5 새 스레드 리듀서 추가하기 363
13.5.6 동작 생성자에 새 메시지 추가하기 364
13.5.7 새 메시지 리듀서 추가하기 365
13.5.8 스레드 동작 생성자 선택하기 366
13.5.9 스레드 리듀서 선택하기 367
13.5.10 리듀서 정리 368
13.6 앵귤러 대화 앱 빌드하기 369
13.6.1 ChatApp 최상위 컴포넌트 370
13.6.2 ChatPage 컴포넌트 371
13.6.3 컨테이너 vs. 표현용 컴포넌트 372
13.7 ChatNavBarComponent 빌드하기 374
13.7.1 리덕스 셀렉터 375
13.7.2 Threads 셀렉터 376
13.7.3 읽지 않은 메시지 개수 셀렉터 378
13.8 ChatThreadsComponent 빌드하기 379
13.8.1 ChatThreadsComponent 컨트롤러 379
13.8.2 ChatThreadsComponent 템플릿 381
13.9 단일 ChatThreadComponent 381
13.9.1 ChatThreadComponent 템플릿 383
13.10 ChatWindowComponent 빌드하기 384
13.11 ChatMessageComponent 391
13.11.1 incoming 설정하기 391
13.11.2 ChatMessageComponent 템플릿 392
13.12 정리 393

14장 컴포넌트 고급 _ 395
14.1 스타일 396
14.1.1 뷰(스타일) 캡슐화 398
14.1.2 Shadow DOM 캡슐화 401
14.1.3 캡슐화 금지 403
14.2 팝업 만들기 ― 호스트 요소 참조하기와 수정하기 405
14.2.1 팝업의 구조 405
14.2.2 ElementRef 사용하기 407
14.2.3 host에 바인딩하기 408
14.2.4 exportAs를 사용하여 버튼 추가하기 410
14.3 콘텐트 프로젝션으로 메시지 창 만들기 412
14.3.1 호스트의 CSS 변경하기 413
14.3.2 ng-content 사용하기 413
14.4 이웃 지시자 조회하기 ― 탭 작성하기 415
14.4.1 ContentTabsetComponent 컴포넌트 417
14.4.2 ContentTabsetComponent 사용하기 419
14.5 라이프사이클 훅 421
14.5.1 OnInit과 OnDestroy 422
14.5.2 OnChanges 425
14.5.3 DoCheck 430
14.5.4 CommentsListComponent로 댓글 리스트 렌더링하기 435
14.5.5 AfterContentInit, AfterViewInit, AfterContentChecked, AfterViewChecked 441
14.6 템플릿 고급 446
14.6.1 ngIf 다시 작성하기 ― ngBookIf 447
14.6.2 ngFor 다시 작성하기 ― NgBookFor 449
14.7 변경 감지 454
14.7.1 변경 감지 커스터마이징하기 458
14.7.2 존 464
14.7.3 옵저버블과 OnPush 464
14.8 정리 468

15장 테스트하기 _ 469
15.1 테스트 주도? 469
15.2 엔드투엔드 vs. 유닛 테스트 470
15.3 테스트 도구 471
15.3.1 재스민 471
15.3.2 카마 472
15.4 유닛 테스트 작성하기 472
15.5 앵귤러 유닛 테스트용 프레임워크 472
15.6 테스트 설정하기 473
15.7 서비스와 HTTP 테스트하기 474
15.7.1 HTTP 고려 사항 475
15.7.2 스텁 476
15.7.3 목 476
15.7.4 getTrack 테스트하기 479
15.8 컴포넌트 라우팅 테스트하기 485
15.8.1 테스트용 라우터 만들기 486
15.8.2 의존성 모킹하기 489
15.8.3 스파이 489
15.9 테스트 코드 다시 살펴보기 492
15.9.1 fakeAsync와 advance 494
15.9.2 inject 495
15.9.3 ArtistComponent의 초기화 테스트하기 496
15.9.4 ArtistComponent 메서드 테스트하기 497
15.9.5 ArtistComponent DOM 템플릿 값 테스트하기 498
15.10 폼 테스트하기 500
15.10.1 ConsoleSpy 만들기 502
15.10.2 ConsoleSpy 설치하기 503
15.10.3 테스트 모듈 설정하기 504
15.10.4 폼 테스트하기 504
15.10.5 폼 테스트 리팩토링하기 507
15.11 HTTP 요청 테스트하기 510
15.11.1 POST 테스트하기 510
15.11.2 DELETE 테스트하기 513
15.11.3 HTTP 헤더 테스트하기 513
15.11.4 YouTubeSearchService 테스트하기 515
15.12 정리 521

16장 앵귤러JS 1.x 앱을 앵귤러 4로 변환하기 _ 522
16.1 배경지식 522
16.2 우리가 만들려는 것 523
16.3 앵귤러 4에 앵귤러JS 1 매핑하기 524
16.4 상호운영성의 요건 526
16.5 앵귤러JS 1 앱 527
16.5.1 ng1-app HTML 528
16.5.2 코드 살펴보기 529
16.5.3 ng1: PinsService 530
16.5.4 ng1: 라우트 설정하기 531
16.5.5 ng1: HomeController 532
16.5.6 ng1: / HomeController 템플릿 532
16.5.7 ng1: pin 지시자 533
16.5.8 ng1: pin 지시자 템플릿 533
16.5.9 ng1: AddController 535
16.5.10 ng1: AddController 템플릿 537
16.5.11 ng1: 정리 539
16.6 하이브리드 앱 만들기 539
16.6.1 하이브리드 프로젝트 구조 540
16.6.2 하이브리드 앱 부트스트랩하기 542
16.6.3 업그레이드해야 하는 것들 544
16.6.4 기타: 타입 지정용 파일 546
16.6.5 ng2 PinControlsComponent 작성하기 549
16.6.6 ng2 PinControlsComponent 사용하기 550
16.6.7 ng2 PinControlsComponent를 ng1으로 다운그레이드하기 552
16.6.8 ng2에서 핀 추가하기 554
16.6.9 ng1 PinsService와 $state를 ng2로 업그레이드하기 555
16.6.10 ng2 AddPinComponent 작성하기 556
16.6.11 AddPinComponent 사용하기 561
16.6.12 ng2 서비스를 ng1으로 나타내기 562
16.6.13 AnalyticsService 작성하기 562
16.6.14 ng2 AnalyticsService를 ng1으로 다운그레이드하기 563
16.6.15 ng1에서 AnalyticsService 사용하기 564
16.7 정리 565

17장 네이티브스크립트 ― 앵귤러 개발자를 위한 모바일 애플리케이션 _ 566
17.1 네이티브스크립트란 무엇일까? 566
17.1.1 네이티브스크립트의 차별성 567
17.1.2 네이티브스크립트에 필요한 시스템과 개발 요건은 무엇일까? 568
17.2 네이티브스크립트와 앵귤러로 첫 모바일 애플리케이션 만들기 570
17.2.1 크로스 플랫폼 개발을 위한 빌드 플랫폼 추가하기 571
17.2.2 안드로이드와 iOS용으로 빌드하기와 테스트하기 571
17.2.3 자바스크립트, 안드로이드, iOS 플러그인과 패키지 설치하기 572
17.3 웹과 네이티브스크립트 UI 및 UX의 다른 점 이해하기 573
17.3.1 네이티브스크립트 페이지 레이아웃 기획하기 573
17.3.2 페이지에 UI 컴포넌트 추가하기 574
17.3.3 CSS로 컴포넌트 스타일링하기 576
17.4 위치 기반 사진 애플리케이션 개발하기 577
17.4.1 네이티브스크립트 프로젝트 만들기 578
17.4.2 다중 페이지 마스터-디테일 인터페이스 만들기 579
17.4.3 사진과 데이터를 받기 위한 플리커 서비스 만들기 582
17.4.4 기기 위치와 거리를 계산하기 위한 서비스 만들기 587
17.4.5 네이티브스크립트 애플리케이션에 맵박스 포함하기 590
17.4.6 지오로케이션 애플리케이션의 첫 번째 페이지 구현하기 592
17.4.7 지오로케이션 애플리케이션의 두 번째 페이지 구현하기 596
17.5 테스트하기! 598
17.6 앵귤러 개발자를 위한 네이티브스크립트 598

업데이트 이력 601
찾아보기 615

앵귤러 애플리케이션은 컴포넌트의 트리 구조, 그 이상도 그 이하도 아니다. 이 트리 구조의 루트에서 최상위 컴포넌트는 애플리케이션 그 자체다. 브라우저가 앱을 시동(booting, 다시 말해 ‘부트스트래핑’)할 때 렌더링하는 것이 바로 애플리케이션이다. 컴포넌트의 장점 중 하나로 컴포넌트는 구성 가능(composable)하다는 점을 들 수 있다. 다시 말해, 작은 컴포넌트를 쌓아 올려 더 큰 컴포넌트를 만들 수 있다. 애플리케이션은 단순히 다른 컴포넌트들을 렌더링하는 컴포넌트인 셈이다. 컴포넌트는 구조적으로 부모/자식 트리 관계이므로 각 컴포넌트는 자신의 자식 컴포넌트를 재귀적으로 렌더링한다.

폼이야말로 웹 애플리케이션에서 가장 중요하고 핵심적인 요소가 아닐까 한다. 링크를 클릭한다든가 마우스를 움직이는 이벤트도 자주 받게 되지만, 사용자에게서 리치 데이터(rich data)를 입력받는 방식은 폼(form)이 대다수일 것이다. 겉으로는 폼이 직관적이라고 할 수 있다. input 태그로 만들어진 곳에 사용자가 어떤 내용을 채우고 제출을 클릭하는 과정이 전부이다. 어려울 것이 무엇이겠는가? 하지만 실제로 폼은 복잡하기 그지없다. 왜 그런지 몇 가지 이유를 들면 다음과 같다.