[Book] 앵귤러 첫걸음 책을 읽은 후기

앵귤러 프로젝트에 곧 투입될 예정이라 앵귤러 첫걸음 이라는 책을 대여해서 읽어봤다. 책을 읽기 전, 목차를 살펴보니 앵귤러 개념들을 상세하게 다루고 있는 것 같아서 선택했다.

이 책의 장점은 예제 중심으로 이루어져 있어서 실습을 통해 앵귤러의 문법과 기능을 익힐 수 있고, 실습 예제도 Github을 통해서 가져다 쓸 수 있다. 

기초 설명부터 실제 프로젝트인 상품 관리 애플리케이션을 실습으로 만들어볼 수 있고, 앵귤러 CLI를 활용한 개발 방법과 앵귤러 생태계의 서드파티 라이브러리 활용, 그리고 파이어베이스를 사용한 앵귤러 웹 애플리케이션 배포까지 다루고 있다.

다만 487페이지의 방대한 분량에다가 2017년에 발행된 책이다보니 동작하지 않는 소스도 많아서 구글링으로 해결하는데 꽤 많은 시간이 소요되어 가볍게 완독 하는 데에만 일주일이 넘게 걸렸다.

아쉬운 점은 후반부로 갈수록 내용에 소스 범벅에 산만한 느낌이 있다. 또한 예제 소스의 결과물에 대한 이미지의 양이 적어서 꽤 애를 먹었다. 옛날 소스라서 당장 동작이 안되는데 그림이 없으니 어떤 흐름인지 파악하기가 어려웠다. 예제에 대한 결과물을 그림으로 보여주면 좀 더 쉽게 이해가 될텐데, 그러면 페이지 양이 늘어나서 첨가를 안 하신 건가?라는 생각이 들었다.

그래도 구버전 앵귤러가 아닌, 신버전 앵귤러에 대해서 자세하게 설명하고 있는 몇 안되는 앵귤러 서적이라서, 나같이 앵귤러 프로젝트에 투입 예정인 개발자들은 가볍게 읽어봐도 좋을 것 같다. 두 번째로 읽었을 때는 어떤 느낌일지 다시 읽어보려고 한다.

앵귤러 첫걸음 목차

✅ PART I 기초 다지기
CHAPTER 1 앵귤러 준비하기
1.1 Node.js
1.2 NPM 다루기
__1.2.1 패키지 설치
__1.2.2 실습: welcome-msg-app
__1.2.3 패키지와 의존 관계
__1.2.4 로컬 환경과 전역 환경
__1.2.5 package.json
1.3 마치며

CHAPTER 2 앵귤러 시작하기
2.1 타입스크립트
__2.1.1 타입 언어
__2.1.2 상위 언어
__2.1.3 열린 언어
__2.1.4 에디터 설정
2.2 Hello, Angular
__2.2.1 ng new
__2.2.2 ng serve
__2.2.3 ng test
__2.2.4 타입 선언 정보
2.3 마치며

CHAPTER 3 앵귤러 아키텍처
3.1 뷰를 구성하는 요소
__3.1.1 컴포넌트와 템플릿
__3.1.2 컴포넌트 생명 주기
__3.1.3 컴포넌트 트리
__3.1.4 데이터 바인딩
__3.1.5 마치며
3.2 애플리케이션을 완벽하게 만드는 요소
__3.2.1 서비스와 의존성 주입
__3.2.2 상태 관리 및 공유
__3.2.3 지시자
__3.2.4 파이프
__3.2.5 모듈
3.3 머티리얼 패키지 적용
3.4 마치며

✅ PART II 기본기 향상하기
CHAPTER 4 뷰를 구성하는 기초
4.1 컴포넌트
__4.1.1 컴포넌트의 선언
__4.1.2 메타데이터
__4.1.3 부트스트래핑
__4.1.4 컴포넌트 트리
4.2 템플릿
__4.2.1 절차적 방식과 선언적 방식
__4.2.2 데이터 바인딩
__4.2.3 지시자
__4.2.4 파이프
4.3 마치며

CHAPTER 5 견고한 애플리케이션 만들기
5.1 서비스
__5.1.1 서비스의 생성과 사용
__5.1.2 실습: 마우스 위치 로거
__5.1.3 싱글턴으로서의 서비스
5.2 의존성 주입
__5.2.1 Injectable, Inject 데코레이터
__5.2.2 providers
__5.2.3 의존성 주입기 트리
__5.2.4 Host, Optional 데코레이터
5.3 테스트 코드 작성
__5.3.1 서비스 테스트
__5.3.2 컴포넌트 테스트
5.4 디버깅
5.5 마치며

CHAPTER 6 컴포넌트 고급
6.1 독립된 요소: 컴포넌트
__6.1.1 웹 컴포넌트
__6.1.2 컴포넌트와 스타일 정보
__6.1.3 컴포넌트의 독립성을 깨뜨리는 안티패턴
6.2 컴포넌트 간 상태 공유와 이벤트 전파
__6.2.1 부모-자식 컴포넌트 간의 통신
__6.2.2 실습: 컴포넌트 통신 V2
__6.2.3 다양한 상태 공유 시나리오
__6.2.4 싱글턴 서비스를 이용한 상태 공유
6.3 앵귤러 방식의 템플릿 요소 탐색
__6.3.1 ViewChild를 사용한 요소 탐색
__6.3.2 템플릿 참조 변수와 ElementRef
__6.3.3 Content Projection과 ContentChild를 사용한 요소 탐색
6.4 컴포넌트 생명 주기
__6.4.1 ngOnInit과 ngOnDestroy
__6.4.2 ngAfterContentInit과 ngAfterViewInit
__6.4.3 ngOnChanges
__6.4.4 ngDoCheck
__6.4.5 ngAfterContentChecked와 ngAfterViewChecked
__6.4.6 지시자의 생명 주기
6.5 마치며

CHAPTER 7 HTTP 통신과 RxJS
7.1 HttpModule과 Http 서비스 기초
__7.1.1 실습: 초간단 사용자 조회 애플리케이션
__7.1.2 angular-in-memory-web-api 활용
7.2 RxJS
__7.2.1 왜 RxJS인가?
__7.2.2 RxJS 원리
__7.2.3 RxJS 연산자 활용
__7.2.4 RxJS를 활용한 마우스 위치 로거 코드 개선
7.3 게이트웨이 기반 Http 서비스 활용
__7.3.1 ApiGateway 서비스
__7.3.2 실습: 사용자 관리 애플리케이션
__7.3.3 HTTP 통신 관련 중복 코드 제거
7.4 마치며

CHAPTER 8 폼 다루기
8.1 폼의 구성
__8.1.1 폼 모델
__8.1.2 AbstractControl과 폼의 값 상태
__8.1.3 폼 지시자
__8.1.4 실습: NgModel과 FormControl
8.2 템플릿 주도 폼
__8.2.1 ngModel과 양방향 바인딩
__8.2.2 실습: 템플릿 주도 폼
__8.2.3 폼 유효성 검증
__8.2.4 커스텀 Validator 지시자 작성
8.3 반응형 폼(모델 주도 폼)
__8.3.1 ReactiveFormsModule
__8.3.2 FormBuilder
__8.3.3 FormGroup, FormControlName
__8.3.4 실습: 반응형 폼
__8.3.5 실습: 동적 폼
8.4 마치며

CHAPTER 9 앵귤러 동작 원리
9.1 부트스트랩과 컴파일
__9.1.1 애플리케이션의 최초 진입점
__9.1.2 JIT 컴파일
__9.1.3 AOT 컴파일
__9.1.4 부트스트랩 과정 분석
9.2 Zone.js와 변화 감지
__9.2.1 앵귤러를 움직이게 만드는 세 가지 이벤트
__9.2.2 Zone.js를 활용한 비동기 코드 감지
__9.2.3 상태 변화를 일으키는 세 가지 이벤트
__9.2.4 변화 감지 트리와 변화 감지 전략
9.3 마치며


PART III 깊이 들어가기
✅ CHAPTER 10 프로젝트: 상품 관리 애플리케이션 구성
10.1 애플리케이션 설계
__10.1.1 기능 정의 및 도메인 모델
__10.1.2 컴포넌트 트리
10.2 프로젝트 구성
10.3 프로젝트 구현 1: 기본 레이아웃 구현
__10.3.1 주요 컴포넌트 생성
__10.3.2 컴포넌트 구현 코드
__10.3.3 라우터 없이 사이드바 기능 구현
10.4 마치며

CHAPTER 11 모듈과 라우터
11.1 모듈의 분리
__11.1.1 기능 모듈
__11.1.2 핵심 모듈
__11.1.3 모듈의 imports, exports
__11.1.4 프로젝트 구현 2: 도메인별 기본 구현
11.2 라우터 기본
__11.2.1 라우터 설정: Route
__11.2.2 Routes 등록
__11.2.3 RouterLink, RouterLinkActive
__11.2.5 프로젝트 구현 3: 라우터 설정
__11.2.6 라우터 사용의 장점
11.3 라우터 활용
__11.3.1 상태 관리
__11.3.2 Router
__11.3.3 ActivatedRoute
__11.3.4 가드의 설정
11.4 모듈별 라우터
__11.4.1 컴포넌트 경로
__11.4.2 라우팅 설정 분리하기
__11.4.3 프로젝트 구현 4: 라우터 설정 분리
11.5 마치며

CHAPTER 12 프로젝트: 파이어베이스 사용
12.1 파이어베이스 사용
__12.1.1 프로젝트 생성
__12.1.2 파이어베이스 CLI
__12.1.3 파이어베이스 연동
12.2 프로젝트 구현 5
__12.2.1 도메인 모델 클래스 구현
__12.2.2 사용자 세션 기능 구현
12.3 프로젝트 구현 6
__12.3.1 실시간 데이터베이스 사용
__12.3.2 NoCounterService 구현
__12.3.3 DataStoreService 구현
__12.3.4 파이어베이스 보안 규칙 설정
12.4 마치며

CHAPTER 13 프로젝트: 상품 관리 애플리케이션 구현 최종
13.1 프로젝트 구현 7
__13.1.1 카테고리 관리 뷰
__13.1.2 CategoryDetailComponent
__13.1.3 CategoryDetailResolverService
__13.1.4 CategoryItemComponent
__13.1.5 CategoryManagementComponent
__13.1.6 CategoryListResolverService
13.2 프로젝트 구현 8
__13.2.1 상품 관리 뷰
__13.2.2 ProductDetailComponent
__13.2.3 ProductDetailResolverService
__13.2.4 ProductListComponent
__13.2.5 ProductListResolverService
__13.2.6 CheckedProductSetService
__13.2.7 ButtonGroupComponent
__13.2.8 ProductBulkUpdaterService
__13.2.9 ProductManagementComponent
13.3 프로젝트 최종 구현
__13.3.1 MainDashboardComponent
__13.2.2 스피너
__13.3.3 상품 상태 파이프
__13.3.4 CanDeactivate 가드 설정
__13.3.5 세션 가드
13.4 마치며

부록.
자바스크립트의 진화: ES6(ECMAScript 6)
1. ES6 표준의 의미
2. 모듈 시스템
3. 모듈 번들러
4. 실습: area-calculator