소장자료검색

책소개

타입스크립트와 함께하는 Angular 2 실전 입문서!

Angular 2는 구글이 만든 모바일과 데스크톱을 위한 차세대 프레임워크다. 컴포넌트를 이용해 화면 구성의 복잡도를 낮추고 AngularJS에 비해 가볍고 빠른 데다 타입스크립트를 기반으로 대규모 웹 애플리케이션의 제작이 가능하도록 진화했다.

Angular 2는 AngularJS가 해결해주지 못한 대규모 애플리케이션의 구조화 문제를 해결하고 미래형 자바스크립트인 타입스크립트를 주력 언어로 채택해 대규모 자바스크립트 개발을 지원한다. Angular 2는 AngularJS에 비해 가볍고 빠르며 모바일과 데스크톱 환경을 위한 웹 애플리케이션의 개발에 높은 생산성을 가져다 준다.

★ 이 책에서 다루는 내용 ★

◎ Angular 개발 환경구축
◎ Angular 개발을 위한 타입스크립트 기초
◎ Angular 구성요소(컴포넌트, 서비스, 지시자, 파이프)에 대한 상세 설명과 테스트 방법
◎ Angular 템플릿과 관련해 바인딩, 파이프, 폼 검증, 애니메이션에 대한 소개
◎ Angular 애플리케이션의 모듈 구성과 HTTP 활용 예제 소개

목차

▣ 01장: Angular 2 소개
1.1 Angular의 역사
__1.1.1 AngularJS 프로젝트
__1.1.2 Angular 2의 등장
__1.1.3 Angular 2의 특징
1.2 Angular 2 개요
__1.2.1 Angular 2의 아키텍처
__1.2.2 Angular 2의 구성요소
1.3 Angular 2의 지원
__1.3.1 브라우저 지원
__1.3.2 다양한 스크립트 언어 지원
__1.3.3 ECMA 스크립트의 최신 표준 지원
__1.3.4 Angular 2 생태계와 관련 라이브러리

▣ 02장: 개발 준비
2.1 개발 환경 준비
__2.1.1 Node.js 설치
__2.1.2 타입스크립트 설치
__2.1.3 타입스크립트 컴파일러
__2.1.4 Angular 프로젝트 구성
2.2 Angular CLI 프로젝트
__2.2.1 Angular CLI 소개
__2.2.2 Angular CLI 설치
__2.2.3 Angular CLI 프로젝트 만들기
__2.2.4 ng명령어 활용
2.3 Angular를 위한 개발도구
__2.3.1 비주얼 스튜디오 코드 소개
__2.3.2 비주얼 스튜디오 코드 설치
__2.3.3 비주얼 스튜디오 코드 사용법

▣ 03장: 타입스크립트
3.1 ECMA 스크립트 소개
__3.1.1 ECMA 스크립트의 역사
__3.1.2 ECMA 스크립트와 타입스크립트
__3.1.3 타입스크립트 소개
3.2 타입과 문자열
__3.2.1 let을 이용한 변수 선언
__3.2.2 배열 타입
__3.2.3 유니언 타입
__3.2.4 문자열 표현
__3.2.5 디스트럭처링 지원
3.3 메서드
__3.3.1 배열 메서드
__3.3.2 화살표 함수
__3.3.3 게터 함수와 세터 함수
3.4 객체지향 프로그래밍
__3.4.1 객체지향 프로그래밍 소개
__3.4.2 클래스 선언과 사용
__3.4.3 클래스 상속
__3.4.4 인터페이스
__3.4.5 추상 클래스

▣ 04장: 컴포넌트
4.1 컴포넌트 소개
__4.1.1 웹 컴포넌트
__4.1.2 블록 구조에서 컴포넌트로 전환
__4.1.3 Angular 컴포넌트
4.2 컴포넌트 구조
__4.2.1 임포트 영역
__4.2.2 컴포넌트 장식자 영역
__4.2.3 컴포넌트 클래스 영역
4.3 컴포넌트 기초 실습
__4.3.1 컴포넌트 추가
__4.3.2 컴포넌트를 모듈에 등록
__4.3.3 Hello 컴포넌트 만들기
4.4 컴포넌트 간 상호작용
__4.4.1 중첩 컴포넌트
__4.4.2 input 장식자를 이용한 값 받기
__4.4.3 inputs 속성을 이용한 값 받기
__4.4.4 EventEmitter를 이용한 값 전달
4.5 자식 엘리먼트의 호출과 탐색
__4.5.1 ViewChild를 이용한 엘리먼트 상태 얻기
__4.5.2 ViewChildren을 이용해 그룹 상태 얻기
__4.5.3 ContentChild를 이용해 상태 얻기
__4.5.4 ContentChildren을 이용해 그룹 값 얻기
4.6 컴포넌트 스타일
__4.6.1 컴포넌트 스타일
__4.6.2 쉐도우 DOM 스타일
__4.6.3 컴포넌트 스타일 실습

▣ 05장: 서비스
5.1 서비스 소개
__5.1.1 AngularJS의 서비스
__5.1.2 Angular 2에서 서비스의 역할
5.2 서비스 사용하기
__5.2.1 Hello 서비스
__5.2.2 객체지향 서비스
__5.2.3 목 객체 서비스
__5.2.4 프로미스 서비스
__5.2.5 서비스를 통한 데이터 교환

▣ 06장: 모듈
6.1 모듈 소개
__6.1.1 모듈이란?
__6.1.2 모듈성과 Angular 모듈
6.2 애플리케이션 루트 모듈
__6.2.1 애플리케이션 루트 모듈 선언
__6.2.2 핵심 모듈
6.3 특징 모듈
__6.3.1 하위 모듈의 필요성
__6.3.2 특징 모듈에 선언할 구성요소 추가
__6.3.3 특징 모듈 선언
__6.3.4 특징 모듈에 공유 모듈 설정
__6.3.5 게으른 모듈 로딩

▣ 07장: 라우터
7.1 라우터 소개
__7.1.1 라우터와 라우터 아웃렛
__7.1.2 라우터 지시자
__7.1.3 애플리케이션 라우터를 이용한 Hello 출력
__7.1.4 해시 기반 주소로 변경
7.2 특징 모듈 라우터
__7.2.1 애플리케이션 루트 모듈과 특징 모듈
__7.2.2 라우터 모듈의 forChild() 메서드
7.3 가드
__7.3.1 가드 소개
__7.3.2 기본 가드 추가
__7.3.3 서비스 기반 로그인 처리
__7.3.4 loadChildren 사용 시 canLoad 가드 적용

▣ 08장: 의존성 주입
8.1 의존성 주입 소개
__8.1.1 의존성 주입이란?
__8.1.2 의존성 주입의 필요성
__8.1.3 주입기 트리
8.2 제공자
__8.2.1 제공자를 통한 의존성 주입
__8.2.2 값 제공자
__8.2.3 팩토리 제공자
__8.2.4 클래스 제공자
__8.2.5 불투명 토큰을 이용한 제공자 설정
__8.2.6 선택적 장식자를 이용한 의존성 주입
8.3 제공자 없이 객체 주입
__8.3.1 팩토리 패턴을 이용한 객체 주입
__8.3.2 주입기를 이용한 객체 생성

▣ 09장: 템플릿
9.1 템플릿 소개
__9.1.1 템플릿 추가
__9.1.2 templateUrl속성을 이용한 외부 템플릿 추가
9.2 데이터 표시
__9.2.1 표현식
__9.2.2 명령식
__9.2.3 삽입식
__9.2.4 연산자
9.3 바인딩
__9.3.1 바인딩이란?
__9.3.2 바인딩의 종류
__9.3.3 단방향 바인딩
__9.3.4 양방향 바인딩
9.4 속성 지시자
__9.4.1 ngClass
__9.4.2 ngStyle
9.5 구조 지시자
__9.5.1 ngIf
__9.5.2 ngSwitch
__9.5.3 ngFor
9.6 템플릿 태그
__9.6.1 템플릿 태그의 축약 표현
__9.6.2 템플릿 입력변수
__9.6.3 템플릿 참조변수

▣ 10장: 지시자
10.1 선언형 프로그래밍과 지시자
__10.1.1 명령형 프로그래밍
__10.1.2 선언형 프로그래밍
__10.1.3 지시자의 장점
__10.1.4 지시자의 종류
10.2 커스텀 지시자
__10.2.1 커스텀 지시자 정의
__10.2.2 선택자와 @Input, @Attribute 장식자
__10.2.3 커스텀 지시자에 이벤트 추가
__10.2.4 ElementRef와 Renderer
10.3 커스텀 지시자 실습
__10.3.1 지시자에 값 넘기기
__10.3.2 지시자로부터 응답 받기
__10.3.3 커스텀 속성 지시자 실습
__10.3.4 커스텀 구조 지시자 실습
__10.3.5 하이라이트 지시자 실습

▣ 11장: 파이프
11.1 파이프 소개
__11.1.1 파이프의 역할
__11.1.2 AngularJS 필터와 Angular 2 파이프 비교
11.2 내장 파이프
__11.2.1 날짜 파이프
__11.2.2 대소문자 파이프
__11.2.3 통화 파이프
__11.2.4 퍼센트 파이프
__11.2.5 비동기 파이프
__11.2.6 JSON 파이프
__11.2.7 데시멀 파이프
__11.2.8 문자열 처리를 위한 파이프
__11.2.9 체이닝 파이프
11.3 커스텀 파이프
__11.3.1 커스텀 파이프 소개
__11.3.2 커스텀 교체 파이프
__11.3.3 커스텀 제한 파이프
__11.3.4 커스텀 필터 파이프
__11.3.5 커스텀 정렬 파이프
__11.3.6 커스텀 검색 파이프
__11.3.7 커스텀 숫자 파이프

▣ 12장: 폼
12.1 폼 소개와 Angular의 폼 검증 방식
__12.1.1 폼이란?
__12.1.2 Angular폼의 기능
__12.1.3 Angular의 폼 검증 방식
12.2 템플릿 주도 검증
__12.2.1 내장 검증기
__12.2.2 엘리먼트의 검증 상태
__12.2.3 폼 참조변수를 이용한 검증
12.3 모델 주도 검증
__12.3.1 폼 그룹 기반 검증
__12.3.2 커스텀 검증기
__12.3.3 폼의 검증 상태

▣ 13장: 애니메이션
13.1 애니메이션 소개
__13.1.1 CSS 3 기반 애니메이션
__13.1.2 Angular 애니메이션
13.2 애니메이션 기초
__13.2.1 트리거와 상태 정의
__13.2.2 트리거 메서드와 상태 변수 간 바인딩
__13.2.3 상태 전이
__13.2.4 애니메이션 단위
__13.2.5 슬라이드 메뉴 만들기
13.3 애니메이션 활용
__13.3.1 애니메이션의 타이밍 효과
__13.3.2 키 프레임 애니메이션
__13.3.3 그룹 애니메이션
__13.3.4 콜백 메서드

▣ 14장: 보안
14.1 Angular와 보안
__14.1.1 일반적인 웹 보안의 취약점
__14.1.2 Angular의 보안
14.2 새니티제이션
__14.2.1 삽입식을 이용한 HTML 출력
__14.2.2 innerHTML을 이용한 HTML 출력
__14.2.3 새니티제이션 소개
14.3 DOM 새니티제이션 서비스
__14.3.1 DOM 새니티제이션 서비스 소개
__14.3.2 URL을 신뢰하도록 처리
__14.3.3 HTML을 신뢰하도록 처리
__14.3.4 리소스 URL을 신뢰하도록 처리
__14.3.5 스타일을 신뢰하도록 처리

▣ 15장: HTTP
15.1 HTTP 소개
____15.1.1 HTTP 요청
____15.1.2 프로미스 소개
____15.1.3 RxJS 소개
15.2 프로미스와 RxJS
__15.2.1 Jsonp 요청을 프로미스로 처리
__15.2.2 Jsonp 요청을 RxJS로 처리
15.3 HTTP 요청과 응답 처리
__15.3.1 Http 모듈
__15.3.2 메모리 DB 준비
__15.3.3 프로미스 기반 인물 관리
__15.3.4 RxJS 기반 인물 관리

▣ 16장: 생명주기
16.1 생명주기
____16.1.1 생명주기와 훅 메서드
____16.1.2 생명주기 시퀀스
16.2 생명주기 실습
__16.2.1 컴포넌트의 생명주기
__16.2.2 지시자의 생명주기
__16.2.3 컴포넌트와 지시자 간의 생명주기

▣ 17장: 테스트
17.1 테스트 준비
__17.1.1 TDD에서 BDD로
__17.1.2 테스트 환경 준비
__17.1.3 재스민 테스팅 프레임워크
17.2 Angular 구성요소 테스트
__17.2.1 테스트 준비
__17.2.2 컴포넌트 테스트
__17.2.3 서비스 테스트
__17.2.4 지시자 테스트
__17.2.5 파이프 테스트