최신 Angular 프레임워크를 프로젝트에 도입하고 싶다면!
최신 Angular 프레임워크를 체계적으로 학습하고 싶다면!

Angular는 Google이 주관하는 웹 애플리케이션 프레임워크다. 개발자들에게 큰 인기를 끌었던 이전 버전의 AngularJS는 이제 새로운 구조와 철학을 도입해서 완전히 새로운 프레임워크가 되어 돌아왔다. 새로운 버전의 Angular에서 제공하는 훌륭한 기능과 웹 컴포넌트 기반 철학을 깊이 있게 알아보고, 데이터를 뷰에 표시하는 방법, 사용자가 입력한 폼 데이터 처리, 서버와 통신, 테스트와 배포까지 애플리케이션의 모든 개발 단계를 다룬다. 더불어 현업에 바로 적용할 수 있도록 다양한 예제와 함께 설명하며, 중대형 규모의 애플리케이션 개발에 적합한 TypeScript와 ES6에 대해서도 알아본다. 이 책을 마지막까지 읽고 나면, 실무에 바로 도입할 수준이 될 것이다.

[목 차]

Chapter01 Angular 소개
1.1 JavaScript 프레임워크와 라이브러리
1.1.1 종합 프레임워크
1.1.2 경량 프레임워크
1.1.3 라이브러리
1.1.4 Node.js는 무엇인가?
1.2 AngularJS 살펴보기
1.3 Angular 살펴보기
1.3.1 단순해진 코드
1.3.2 성능 향상
1.4 Angular 개발자가 사용하는 툴
1.5 Angular 기능 구현 방식
1.6 온라인 경매 애플리케이션 예제
1.7 정리

Chapter 02 Angular 시작하기
2.1 첫 번째 Angular 애플리케이션
2.1.1 TypeScript로 작성하는 Hellow World
2.1.2 ES5로 작성하는 Hello World
2.1.3 ES6로 작성하는 Hello World
2.1.4 애플리케이션 실행하기
2.2 Angular 애플리케이션의 구성 요소
2.2.1 모듈(Module)
2.2.2 컴포넌트(Component)
2.2.3 디렉티브(Directive)
2.2.4 데이터 바인딩 기초
2.3 SystemJS 모듈 로더
2.3.1 모듈 로더
2.3.2 모듈 로더 vs. 〈-script〉 태그
2.3.3 SystemJS 시작하기
2.4 패키지 매니저 선택하기
2.4.1 npm과 jspm 비교
2.4.2 npm vs. yarn
2.4.3 yarn으로 Angular 프로젝트 시작하기
2.5 실습 : 온라인 경매 애플리케이션
2.5.1 프로젝트 설정
2.5.2 첫 페이지 구성하기
2.5.3 온라인 경매 애플리케이션 실행하기
2.6 정리

Chapter 03 라우터로 내비게이션 구현하기
3.1 라우터
3.1.1 위치 정책(Location strategy)
3.1.2 라우터 구성 요소
3.1.3 navigate( ) 함수 사용하기
3.2 라우터로 데이터 전달하기
3.2.1 ActivatedRoute에서 라우팅 인자 추출하기
3.2.2 라우터로 정적 데이터 전달하기
3.3 자식 라우팅
3.4 라우팅 가드(Route Guards)
3.5 라우팅 영역 여러 개 만들기
3.6 모듈 단위로 앱 나누기
3.7 모듈 지연 로딩
3.8 실습 : 내비게이션 추가하기
3.8.1 ProductDetailComponent 만들기
3.8.2 HomeComponent 만들기
3.8.3 ApplicationComponent 정리하기
3.8.4 ProductComponent에 RouterLink 추가하기
3.8.5 루트 모듈에 라우팅 추가하기
3.8.6 애플리케이션 실행하기
3.9 정리

Chapter 04 의존성 주입
4.1 의존성 주입과 제어권 역전
4.1.1 의존성 주입 패턴
4.1.2 제어권 역전 패턴
4.1.3 의존성 주입의 장점
4.2 인젝터와 프로바이더
4.2.1 프로바이더 등록하기
4.3 의존성 주입 예제
4.3.1 상품 서비스 주입하기
4.3.2 HTTP 서비스 주입하기
4.4 프로바이더 변경하기
4.4.1 프로바이더에 useFactory와 useValue 사용하기
4.4.2 불투명 토큰(OpaqueToken) 사용하기
4.5 인젝터의 계층 구조
4.5.1 viewProviders
4.6 실습 : 의존성 주입 패턴 확인하기
4.6.1 라우터 인자를 상품의 ID로 수정하기
4.6.2 ProductDetailComponent 수정하기
4.7 정리

Chapter 05 바인딩, 옵저버블, 파이프
5.1 데이터 바인딩
5.1.1 이벤트 바인딩
5.1.2 프로퍼티 바인딩, 어트리뷰트 바인딩
5.1.3 템플릿 바인딩
5.1.4 양방향 데이터 바인딩
5.2 반응형 프로그래밍과 옵저버블
5.2.1 옵저버와 옵저버블이 무엇인가?
5.2.2 옵저버블 이벤트 스트림
5.2.3 옵저버블 취소하기
5.3 파이프
5.3.1 커스텀 파이프
5.4 실습 : 상품 필터링
5.4.1 프로젝트에 FormModule 추가하기
5.4.2 커스텀 파이프 정의하기
5.4.3 SearchComponent 수정하기
5.4.4 HomeComponent 수정하기
5.4.5 AppModule 수정하기
5.4.6 경매 애플리케이션 실행하기
5.5 정리

Chapter 06 컴포넌트 통신
6.1 컴포넌트끼리 통신하기
6.1.1 입력 프로퍼티와 출력 프로퍼티
6.1.2 중개자 패턴
6.1.3 프로젝션
6.2 컴포넌트 생명주기
6.2.1 ngOnChanges( ) 함수 사용하기
6.3 변화 감지기 동작 원리
6.4 자식 컴포넌트의 API 직접 실행하기
6.5 실습 : 별점 기능 추가하기
6.5.1 StarsComponent 클래스 코드 수정하기
6.5.2 StarsComponent 템플릿 수정하기
6.5.3 ProductDetailComponent 템플릿 수정하기
6.5.4 ProductDetailComponent 클래스 코드 수정하기
6.5.5 AppModule 수정하기
6.6 정리

Chapter 07 폼 처리하기
7.1 HTML 폼
7.1.1 HTML 표준 폼
7.1.2 Angular 폼
7.2 템플릿 기반 폼
7.2.1 템플릿 기반 폼에 사용하는 디렉티브
7.2.2 HTML 폼에 적용하기
7.3 반응형 폼
7.3.1 폼 모델
7.3.2 폼 디렉티브
7.3.3 예제 폼 리팩토링
7.3.4 FormBuilder 사용하기
7.4 폼 유효성 검사
7.4.1 반응형 폼 유효성 검사
7.5 실습 : 검색 폼에 유효성 검사 추가하기
7.5.1 SearchComponent에 카테고리 목록 추가하기
7.5.2 폼 모델 만들기
7.5.3 템플릿 수정하기
7.5.4 onSearch( ) 함수 구현하기
7.5.5 애플리케이션 실행하기
7.6 정리

Chapter08 서버와 데이터 주고받기
8.1 Http 객체
8.2 Node.js와 TypeScript로 웹 서버 만들기
8.2.1 간단한 웹 서버 만들기
8.2.2 JSON 데이터 제공하기
8.2.3 TypeScript로 실시간 변환하고 로드하기
8.2.4 상품 정보를 제공하는 RESTful API 추가하기
8.3 Angular와 Node.js 연동하기
8.3.1 정적 리소스(Static resources) 제공하기
8.3.2 클라이언트 환경 설정
8.3.3 HTTP GET 요청하기
8.3.4 AsyncPipe
8.3.5 서비스에 HTTP 주입하기
8.4 웹소켓 사용하기
8.4.1 Node.js 서버에서 데이터 푸시하기
8.4.2 웹소켓을 옵저버블로 만들기
8.5 실습 : 상품 검색과 입찰 알림 구현하기
8.5.1 HTTP 서버 구현하기
8.5.2 상품 검색 기능 구현하기
8.5.3 웹소켓으로 입찰 알림 보내기
8.6 정리

Chapter09 유닛 테스트
9.1 Jasmine 프레임워크
9.1.1 무엇을 테스트할 것인가
9.1.2 Jasmine 설치하기
9.2 Angular 테스트 라이브러리
9.2.1 서비스 테스트
9.2.2 라우터 테스트
9.2.3 컴포넌트 테스트
9.3 날씨 애플리케이션 테스트
9.3.1 프로젝트 설정
9.3.2 라우터 테스트
9.3.3 서비스 테스트
9.3.4 컴포넌트 테스트
9.4 Karma 테스트 러너 실행하기
9.5 실습 : 유닛 테스트 적용하기
9.5.1 ApplicationComponent 테스트 코드
9.5.2 ProductService 테스트 코드
9.5.3 StarsComponent 테스트 코드
9.5.4 테스트 실행
9.6 정리

Chapter10 번들링, 배포
10.1 Webpack 살펴보기
10.1.1 Webpack 시작하기
10.1.2 Webpack 로더
10.1.3 Webpack 플러그인
10.2 Webpack 기본 설정
10.2.1 yarn build
10.2.2 yarn start
10.3 개발용 설정과 운영용 설정 분리하기
10.3.1 package.json 설정
10.3.2 환경변수 설정
10.3.3 Webpack 설정
10.3.4 Angular 애플리케이션에 Node.js 환경 변수 전달하기
10.3.5 실행하기
10.4 Angular CLI
10.4.1 Angular CLI로 프로젝트 생성하기
10.4.2 Angular CLI 커맨드
10.5 실습 1 : Webpack 적용하기
10.5.1 서버 수정하기
10.5.2 클라이언트 수정하기
10.5.3 Karma 테스트 설정하기
10.5.4 운영용으로 빌드하고 배포하기
10.6 실습 2 : Angular CLI로 리팩토링하기
10.6.1 프로젝트 생성하기
10.6.2 컴포넌트 생성하기
10.6.3 라우터 연결하기
10.6.4 서비스 생성하기
10.6.5 서드 파티 라이브러리 사용하기
10.6.6 테스트 스펙 수정하기
10.6.7 빌드, 배포하기
10.7 정리


appendix A ECMAScript 6
A.1 예제 코드 실행하기
A.2 템플릿 리터럴
A.3 옵션 인자와 인자 기본값
A.4 변수 스코프
A.5 화살표 함수 표현식과 this
A.6 forEach( ), for-in, for-of
A.7 클래스와 상속
A.8 프로미스로 비동기 작업 처리하기
A.9 모듈

appendix B TypeScript
B.1 Angular 애플리케이션은 왜 TypeScript로 작성할까?
B.2 트랜스파일러의 역할
B.3 TypeScript 시작하기
B.3.1 TypeScript 설치하고 실행하기
B.4 JavaScript의 상위 집합
B.5 타입 지정
B.5.1 함수
B.5.2 인자 기본값
B.5.3 옵션 인자
B.5.4 화살표 함수 표현식
B.6 클래스
B.6.1 접근 제한자
B.6.2 메소드
B.6.3 상속
B.7 제네릭(Generics)
B.8 인터페이스(Interfaces)
B.8.1 커스텀 타입으로 사용하기
B.8.2 추상 클래스로 사용하기
B.8.3 실행할 수 있는 인터페이스
B.9 클래스 메타데이터 추가하기, 어노테이션
B.10 타입 정의 파일
B.11 TypeScript & Angular 개발 단계 훑어보기

Angular 프레임워크의 기본 원리와 고급 사용법까지 깊이 있게 다루며, 실무 프로젝트에 활용할 수 있는 다양한 예제와 함께 설명한다.

1장에서는 개발자들이 많이 사용하는 JavaScript 프레임워크와 라이브러리에 대해 알아보고, Angular 프레임워크의 구조를 전반적으로 살펴본다. 이 책에서 실습 과제로 진행할 온라인 경매 애플리케이션도 소개한다.
2장에서는 간단한 Angular 애플리케이션을 만들어보고, 이어서 Angular 애플리케이션을 구성하는 요소에 대해 알아본다. 애플리케이션을 브라우저에서 실행하기 위해 사용하는 SystemJS 모듈 로더에 대해서도 알아본다. 이 장의 실습에서는 온라인 경매 애플리케이션의 첫 버전을 만들어본다.
3장에서는 Angular의 라우터에 대해 알아본다. 싱글 페이지 애플리케이션은 각 화면을 라우터로 전환하는데, Angular 프레임워크에서는 이 라우터를 어떻게 설정할 수 있는지 알아본다. 라우터를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법도 알아본다. 이 장의 실습에서는 온라인 경매 애플리케이션에 라우터를 적용한다.
4장에서는 의존성 주입 패턴을 알아보고 Angular프레임워크에서 이 패턴을 어떻게 사용할 수 있는지 알아본다. 이 장의 실습에서는 온라인 경매 애플리케이션에 사용된 의존성 주입 패턴을 자세하게 알아본다.
5장에서는 데이터를 바인딩하는 여러가지 방식을 알아보고, 옵저버블을 사용하는 반응형 프로그래밍에 대해서도 알아본다. 이 장의 실습에서는 온라인 경매 애플리케이션에 옵저버블 스트림을 적용한다.
6장에서는 컴포넌트끼리 데이터를 주고 받는 방법을 알아본다. 컴포넌트의 입력 프로퍼티와 출력 프로퍼티에 대해 알아보고, 중개자 디자인 패턴에 대해 알아보며, 컴포넌트의 생명주기에 대해서도 알아본다. 이 장의 실습에서는 온라인 경매 애플리케이션에 별점 기능을 추가한다.
7장에서는 Angular애플리케이션에서 폼을 다루는 방법을 알아본다. 템플릿 기반 폼과 반응형 폼 API에 대한 내용을 소개하고 나면, 폼 유효성 검사에 대해서도 다룬다. 이 장의 실습에서는 검색 컴포넌트의 기능에 이 내용을 적용한다.
8장에서는 Angular 애플리케이션에서 서버에 데이터 요청을 보내는 방법을 알아본다. HTTP 프로토콜과 WebSocket 프로토콜을 사용하며, 이 때 서버는 Node.js와 Express 프레임워크를 사용해서 간단하게 만들어본다. 이 장의 실습에서는 온라인 경매 애플리케이션 서버를 만들고 Angular 애플리케이션이 이 서버와 통신할 수 있도록 수정한다.
9장에서는 유닛 테스트를 다룬다. Jasmine 프레임워크와 Angular 테스트 라이브러리를 알아보고, Angular 애플리케이션의 각 구성요소를 어떻게 테스트할 수 있는지 알아본다. 이 장의 실습에서는 온라인 경매 애플리케이션에 유닛 테스트를 적용한다.
10장에서는 자동화 툴에 대해 다룬다. Webpack을 사용해서 애플리케이션을 번들링하고 최적화하는 방법에 대해 알아보며, Angular CLI를 사용하는 방법도 알아본다. 이 장의 실습은 두 개다. 먼저, 온라인 경매 애플리케이션에 Webpack을 적용해서 운영용으로 빌드하는 방법을 알아본다. 그리고 이 애플리케이션을 Angular CLI로 다시 한 번 만들어보면서 Angular CLI를 활용하는 방법을 알아본다.
부록 A는 ECMAScript 2015(ES6)를 다룬다.
부록 B는 TypeScript 문법을 다룬다.

※ 이 책은 Angluar 4.1.0 버전 기준으로 설명합니다.
※ 이 책의 예제 소스는 역자(한장현)의 깃허브(https://github.com/han41858/Angular-development-witht-TypeScript)와 http://www.rubypaper.co.kr 자료실에서 내려받을 수 있으며, 역자의 깃허브 이슈 페이지를 통해 독자와 소통합니다. 펼처보기

야코프 페인
Farata Systems와 SuranceBay의 공동창립자다. Farata Systems는 IT 컨설팅 회사이며, Yakov는 이 회사의 교육 팀에서 Angular와 Java를 교육하고 있다. 그리고 SuranceBay는 미국의 보험 회사의 업무 흐름을 자동화하는 SaaS 솔루션을 만드는 회사이며, Yakov는 이 회사에서 여러 프로젝트를 관리하고 있기도 하다.
Oracle에서 인정하는 Java Campion 자격을 갖고 있다. 개발에 관련된 책을 여러 권 집필했으며, yakovfain.com블로그도 활발하게 운영하고 있다.

안톤 모이세예프
SuranceBay에서 10년간 근무하고 있는 개발자이며, Java와 .NET을 주로 사용해왔고, 현재는 기업용 애플리케이션을 개발하고 있다. 인터넷 애플리케이션이 동작하는 다양한 플랫폼에 대한 지식을 갖고 있으며, 백엔드와 프런트엔드를 통합하는 웹 기술에 관심을 갖고 있다. AngularJS와 Angular 교육을 진행하고 있으며, antonmoiseev.com블로그에 글을 올리기도 한다.
옮긴이 한장현
삼성 SDS에서 5년간 근무하며 스마트TV 솔루션과 리테일 서버 솔루션을 개발했다. 2016년 4월 회사를 그만둔 뒤에는 DB부터 백엔드, 프런트엔드와 UX를 아우르는 풀스택을 공부하고 있다. 웹 기술 트렌드를 다루는 han41858.tistory.com 블로그를 운영하고 있으며, GitHub 페이지(https://github.com/han41858)에서 개인 프로젝트를 진행하고 있다. 그리고 개발자 커뮤니티인 GDG Korea에서 WebTech 운영진으로 활동하고 있다.