추가 적립 안내

Angular를 이용한 SPA 개발의 베스트 프랙티스

이 책은 구글의 오픈소스 자바스크립트 프레임워크인 Angular를 학습한다. 독자는 이 책을 통해 Angular의 철학과 기본 개념, 디자인 패턴을 이해하고 모던 웹의 새로운 패러다임 중 하나인 SPA(Single Page Application) 개발에 한 걸음 더 다가갈 수 있다.

책 초반에는 자바스크립트 이후 바로 Angular를 배우려는 학습자를 위해 ECMAScript 6와 TypeScript의 핵심만 골라 설명하였다. 독자는 이를 통해 프런트엔드 영역에서 사용하는 기술, 용어 등을 자연스럽게 학습할 수 있다.
이어서 Angular CLI(Command Line Interface)를 이용해 개발환경 구축, 빌드, 실행 과정을 살펴보고, Angular의 파일 구조와 처리 흐름 등을 알아본다. 그리고 Angular의 핵심 구성요소인 컴포넌트, 디렉티브, 서비스, 라우터, 모듈을 책 전체에 걸쳐 상세하게 소개한다.

Angular를 가장 깔끔하게 핵심만 쏙 뽑아서 설명하였다. 개념 하나하나를 정확하게 또박또박 설명하려는 저자의 정성이 느껴진다. 모든 예제를 직접 따라 해 보았는데 소스에 에러는 없었다. 설치 방법이나 환경 구성이 친절하게 잘 설명되어 있어서 어렵지 않게 따라 할 수 있었다.
이 책에서 얻은 가장 큰 혜택은 Angular의 기능뿐만 아니라 웹 프런트엔드 영역에서 사용하는 기술과 개념, 용어들을 알 수 있었다는 것이다.
그리고 예제마다 실습 URL이 있어서 파일 구성이나 소스코드, 실행 결과 등을 바로 확인할 수 있고 웹상에서 직접 코드를 수정해보면서 결과가 어떻게 달라지는지 학습할 수 있어서 매우 편리했다.

※ 이 책의 특징
- 2018년 7월 기준 최신 버전인 Angular 6를 기준으로 설명하였다.
- Angular 학습을 위한 선수 지식인 ES6, TypeScript, Node.js, npm부터 학습할 수 있도록 예제와 설명을 수록하였다.
- Angular의 기능 설명뿐만 아니라 철학, 기본 개념, 그리고 프레임워크로서 내포하고 있는 디자인 패턴까지 다루었다.
- 140여 개의 예제를 복잡한 환경 구축 없이 실행 가능하다. 각 예제마다 프로젝트 구성과 전체 소스, 실행 결과를 즉시 확인해볼 수 있도록 온라인 플레이그라운드를 제공한다.
- 새로운 전문 용어가 나올 때마다 각주로 공식 문서나 참고 URL을 안내하여 관련 내용을 좀 더 깊이 있게 학습할 수 있도록 하였다.

※ 예제 소스: https://stackblitz.com/@ungmo2
이 책은 각 예제마다 실행 환경과 프로젝트가 이미 구축된 URL을 제공하여 접속 즉시 실행 결과를 확인할 수 있으며 프로젝트 구성, 전체 소스코드를 확인 또는 내려받을 수 있다.

1장 Angular의 소개와 특징
1.1. Angular 소개
1.2. Angular와 AngularJS의 차이점
1.3. Angular의 장점
1.3.1. 개선된 개발 생산성
1.3.2. 성능의 향상
1.4. 브라우저 지원 범위

2장 Node.js와 npm
2.1. Node.js
2.1.1. Node.js 개요
2.1.2. Node.js 설치
2.1.3. Node.js REPL
2.1.4. Node.js 맛보기
2.2. npm
2.2.1. npm 개요
2.2.2. npm 설치
2.2.3. npm을 사용한 패키지 설치
2.2.4. 지역 설치와 전역 설치
2.2.5. package.json과 의존성 관리

3장 ECMAScript 6
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