서평 - Angular Essentials ES6, TypeScript 핵심 + SPA 개발의 베스트 프랙티스

읽은 기간: 2018.08.25 ~ 2018.09.08 카테고리: 개발

서평

Angular를 이용해서 개발한지 2년 정도 넘어가고 있다. 사실 개발 할수록 매번 새롭게 알게되는 부분들이 많았다. 처음 시작은 잘 정리된 Angular Tutorial 문서만 보게 되면 필요한 기능을 뚝딱 만들수 있다보니 정작 중요한 개념들을 정확히 이해하지 않고 넘어가는 경우도 많았다. Angular Framework가 갖고 있는 특징이다. 초기 러닝커브가 TypeScript와 RxJS 때문에 크지만 그 이후 부터는 무척 빠르게 뚝딱 구현이 가능하다보니 알아서 해주는 부분을 깊이 있게 안들여다 보게 된다. 이 책은 정말 Angular를 속속히 알려준다. 저자가 정말 꼼꼼하게 설명해준다는 것을 느꼈다. 공식 한글 문서가 없는 상태에서 이렇게 친절하게 Angular를 편하게 이해시켜주는 책이 있어서 큰 도움을 받았다. 어설프게 이해하고 쓰고 있던 지식들을 잘 정리할수 있었고 Angular6 이후 변화된 부분도 이 책은 잘 반영해주고 있다.

물론 Angular의 테스트라던지 다양한 플랫폼에서의 Angular 활용법은 아쉽게도 빠져있다.

하지만 Angular를 이용한 개발자라면 꼭 알아 두어야 할 내용들은 잘 정리해주었다. Angular를 공부하고 싶거나 이미 Angular를 이용해서 개발하고 있는 개발자라면 이 책을 꼭 추천한다.

3.1. let, const와 블록 레벨 스코프 3.1.1. let 3.1.2. const 3.2. 템플릿 리터럴 3.3. 화살표 함수 3.3.1. 화살표 함수의 선언 3.3.2. 화살표 함수의 호출 3.3.3. this 3.3.4. 화살표 함수를 사용하면 안 되는 경우 3.4. 파라미터 기본값 3.5. Rest 파라미터 3.5.1. 기본 문법 3.5.2. arguments와 rest 파라미터 3.6. Spread 연산자 3.6.1. 함수의 인자로 사용하는 경우 3.6.2. 배열에서 사용하는 경우 3.6.3. 객체에서 사용하는 경우 3.7. 객체 리터럴 프로퍼티 기능 확장 3.7.1. 프로퍼티 축약 표현 3.7.2. 프로퍼티 이름 조합 3.7.3. 메소드 축약 표현 3.7.4. proto 프로퍼티에 의한 상속 3.8. 디스트럭처링 3.8.1. 배열 디스트럭처링 3.8.2. 객체 디스트럭처링 3.9. 클래스 3.9.1. 클래스 정의 3.9.2. 인스턴스의 생성 3.9.3. constructor 3.9.4. 클래스 프로퍼티 3.9.5. 호이스팅 3.9.6. getter, setter 3.9.7. 정적 메소드 3.9.8. 클래스 상속 3.10. 프로미스 3.10.1. 콜백 패턴의 단점 3.10.2. 프로미스의 생성 3.10.3. 프로미스의 사용 3.10.4. 프로미스의 에러 처리 3.10.5. 프로미스 체이닝 3.11. 이터레이션 프로토콜과 for-of 루프 3.11.1. 이터레이션 프로토콜 3.11.2. for-of 루프 3.11.3. 커스텀 이터러블 3.12. Symbol 3.12.1. Symbol 생성 3.12.2. Symbol 사용 3.12.3. Symbol 객체 3.13. 제너레이터 3.13.1. 제너레이터 함수 생성 3.13.2. 제너레이터 함수 호출 3.13.3. 이터러블의 구현 3.14. 모듈 3.14.1. 모듈이란? 3.14.2. export 3.14.3. import 3.15. Babel과 Webpack을 이용한 ES6 개발환경 구축 3.15.1. Babel CLI 설치 3.15.2. .babelrc 설정 파일 작성 3.15.3. 트랜스파일링 3.15.4. ES6 개발환경 구축

4장 TypeScript

4.1. TypeScript 개요 4.2. TypeScript의 장점 4.3. TypeScript 개발환경 구축 4.3.1. TypeScript 컴파일러 설치 4.3.2. TypeScript 컴파일러 사용법 4.4. 정적 타이핑 4.4.1. 타입 선언 4.4.2. 정적 타이핑 4.4.3. 타입 추론 4.5. 클래스 4.5.1. 클래스 정의 4.5.2. 접근 제한자 4.5.3. 생성자 파라미터에 접근 제한자 선언 4.5.4. readonly 키워드 4.5.5. static 키워드 4.5.6. 추상 클래스 4.6. 인터페이스 4.6.1. 변수와 인터페이스 4.6.2. 함수와 인터페이스 4.6.3. 클래스와 인터페이스 4.6.4. 덕 타이핑 4.6.5. 선택적 프로퍼티 4.7. 제네릭

5장 Angular CLI

5.1. Angular CLI란? 5.2. Angular CLI 설치 5.3. 프로젝트 생성 5.4. 프로젝트 실행 5.5. 프로젝트 구성요소 생성 5.5.1. 컴포넌트 생성 5.5.2. 디렉티브 생성 5.5.3. 모듈 생성 5.5.4. 서비스 생성 5.5.5. 클래스 생성 5.6. 프로젝트 빌드 5.6.1. 트랜스파일링과 의존 모듈 번들링 5.6.2. 프로덕션 빌드와 배포 5.6.3. AoT 컴파일 5.7. 기본 옵션 변경

6장 Angular의 파일 구조와 처리 흐름

6.1. Angular 애플리케이션의 파일 구조 6.1.1. src 폴더 6.1.2. 기타 설정 파일 6.2. Angular 애플리케이션의 처리 흐름 6.3. Angular의 구성요소

7장 컴포넌트

7.1. 소개 7.1.1. 웹 컴포넌트 7.1.2. 컴포넌트 트리 7.2. 컴포넌트 기본 구조 7.2.1. 컴포넌트의 코드 구조 7.2.2. 컴포넌트의 기본 동작 구조 7.3. 컴포넌트 작성 실습 7.3.1. 네이밍 컨벤션 7.3.2. 컴포넌트 클래스 7.3.3. @Component 데코레이터 7.3.4. Angular 라이브러리 모듈 임포트 7.3.5. 메타데이터 7.3.6. 컴포넌트 클래스와 템플릿의 연동 7.3.7. 컴포넌트의 호출 7.3.8. 모듈에 컴포넌트 등록 7.4. 템플릿과 템플릿 문법 7.4.1. 템플릿이란? 7.4.2. 템플릿 문법 7.5. 데이터 바인딩 7.5.1. 데이터 바인딩이란? 7.5.2. 변화 감지 7.5.3. 데이터 바인딩 7.6. 빌트인 디렉티브 7.6.1. 빌트인 디렉티브란? 7.6.2. 빌트인 어트리뷰트 디렉티브 7.6.3. 빌트인 구조 디렉티브 7.7. 템플릿 참조 변수 7.8. 세이프 내비게이션 연산자 7.9. 컴포넌트 간의 상태 공유 7.9.1. 컴포넌트의 계층적 트리 구조 7.9.2. 부모 컴포넌트에서 자식 컴포넌트로 상태 전달 7.9.3. 자식 컴포넌트에서 부모 컴포넌트로 상태 전달 7.9.4. Stateful 컴포넌트와 Stateless 컴포넌트 7.9.5. 원거리 컴포넌트 간의 상태 공유 7.10. 부모 컴포넌트에서 자식 요소로의 접근 7.10.1. @ViewChild와 @ViewChildren 7.10.2. @ContentChild와 @ContentChildren 7.11. 컴포넌트와 스타일 7.11.1. 컴포넌트 스타일 7.11.2. 뷰 캡슐화 7.11.3. Shadow DOM 스타일 셀렉터 7.11.4. 글로벌 스타일 7.11.5. Angular CLI로 Sass 적용 프로젝트 생성

8장 디렉티브

8.1. 디렉티브란? 8.2. 디렉티브의 종류 8.3. 사용자 정의 어트리뷰트 디렉티브 8.3.1. 사용자 정의 어트리뷰트 디렉티브의 생성 8.3.2. 이벤트 처리 8.3.3. @Input 데이터 바인딩 8.4. 사용자 정의 구조 디렉티브 8.4.1. 사용자 정의 구조 디렉티브의 생성 8.4.2. ng-template 디렉티브 8.4.3. TemplateRef와 ViewContainerRef 8.4.4. ng-container 디렉티브

9장 파이프

9.1. 파이프란? 9.2. 빌트인 파이프 9.3. 체이닝 파이프 9.4. 커스텀 파이프 9.5. 파이프와 변화 감지 9.6. 순수 파이프와 비순수 파이프

10장 생명주기와 훅 메소드

10.1. 생명주기 10.2. 생명주기 훅 메소드 10.3. 생명주기 훅 메소드 실습 10.3.1. 컴포넌트 생명주기 훅 메소드 10.3.2. ngOnChanges와 ngDoCheck 10.3.3. 디렉티브 생명주기 훅 메소드

11장 서비스

11.1. 서비스란? 11.2. 의존성 주입 11.3. 인젝터와 인젝터 트리 11.3.1. 인젝터 11.3.2. 인젝터 트리 11.4. 프로바이더 11.4.1. 클래스 프로바이더 11.4.2. 값 프로바이더 11.4.3. 팩토리 프로바이더 11.5. 인젝션 토큰 11.6. 선택적 의존성 주입 11.7. 서비스 중재자 패턴

12장 리액티브 프로그래밍과 RxJS 개요

12.1. 리액티브 프로그래밍이란? 12.2. 리액티브 프로그래밍의 특징 12.3. RxJS 임포트 12.4. 옵저버블과 옵저버 12.5. Cold observable과 Hot observable 12.6. 유니캐스트와 멀티캐스트 12.7. 오퍼레이터 12.8. 옵저버블 이벤트 스트림 예제

13장 HTTP 통신

13.1. HttpClient 13.2. HttpClientModule 13.3. HTTP 요청 13.3.1. REST API Mock 서버 구축 13.3.2. GET 13.3.3. POST 13.3.4. PUT 13.3.5. PATCH 13.3.6. DELETE 13.4. HTTP 요청 중복 방지 13.5. 인터셉터

14장 폼과 유효성 검증 모듈

14.1. 폼이란? 14.1.1. HTML 표준 폼 14.1.2. Angular 폼 14.2. 템플릿 기반 폼 14.2.1. 템플릿 기반 폼이란? 14.2.2. 템플릿 기반 폼의 중심 디렉티브 14.2.3. NgModel과 양방향 바인딩 14.2.4. 템플릿 기반 폼 유효성 검증 14.2.5. 템플릿 기반 폼 유효성 검증 실습 14.3. 리액티브 폼 14.3.1. 리액티브 폼이란? 14.3.2. 리액티브 폼의 중심 클래스와 디렉티브 14.3.3. 리액티브 폼 유효성 검증 14.3.4. 사용자 정의 검증기 14.3.5. 리액티브 폼 유효성 검증 실습 14.3.6. FormBuilder

15장 모듈

15.1. 모듈이란? 15.2. @NgModule 데코레이터 15.3. 라이브러리 모듈 15.4. 루트 모듈 15.5. 모듈의 분리 15.5.1. 기능 모듈 15.5.2. 공유 모듈 15.5.3. 핵심 모듈

16장 라우팅과 내비게이션

16.1. 단일 페이지 애플리케이션 16.2. 라우팅 16.3. Angular 라우터 개요와 위치 정책 16.3.1. 개요 16.3.2. 위치 정책 16.4. 라우터 구성요소 16.4.1. 라우트 구성 16.4.2. 라우트 등록 16.4.3. 뷰의 렌더링 위치 지정과 내비게이션 작성 16.5. navigate 메소드 16.6. 라우터 상태 16.6.1. 라우트 파라미터 전달 16.6.2. 라우트 파라미터 취득 16.6.3. 라우트 정적 데이터 16.7. 자식 라우트 16.8. 모듈의 분리와 모듈별 라우터 구성 16.9. 라우트 가드 16.9.1. CanActivate 16.9.2. CanActivateChild 16.9.3. CanLoad 16.9.4. Resolve 16.9.5. CanDeactivate

서평

목차

1장 Angular의 소개와 특징

2장 Node.js와 npm

3장 ECMAScript 6