최신 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 개발 단계 훑어보기
저자 소개
저자 : 야코프페인,안톤모이세예프
야코프 페인 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블로그에 글을 올리기도 한다.