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

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

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

★ 이 책에서 다루는 내용 ★

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

정진욱

경북대 자연어처리 연구실에서 박사과정을 밟고 있다. 개발을 사랑해서 개발자의 길을 걷고 있으며, GBS컨설팅의 개발팀장(경영 솔루션 개발)을 거쳐 현재는 봄랩스에서 헬스케어 솔루션을 개발하고 있다. 온라인에서는 해피그래머라는 필명으로 활동 중이다. 개발 경험을 나누고 함께 성장하기 위한 커뮤니티 활동에 관심이 많다. 사용자를 행복하게 만드는 인공지능 서비스를 개발하는 것이 꿈이다.

  • ▣ 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 파이프 테스트
  • 79쪽, 4번째 줄

    CS, 자바스크립트를 --> CSS, 자바스크립트를

  • 97쪽, 26번째 줄

    bootstrap: [ParentComponent] -> bootstrap: [AppComponent]

    • 보충 설명

      본래 의도된 코드를 작성하려면 bootstrap에는 애플리케이션 컴포넌트(AppComponent)를 등록합니다.

      따라서 애플리케이션 컴포넌트를 import { AppComponent } from './app.component';와 같이 임포트하고 declarations: [ AppComponent, ... ]와 같이 등록해줍니다.

      이러한 상태에서 테스트할 중첩 컴포넌트의 최상단 컴포넌트인 NestedParentComponent의 호출은 애플리케이션 라우팅 모듈(/component/src/app/app.routing.ts)을 통해 라우팅되게 합니다.

  • 112쪽, 8번째 줄

    @ContentChildren 장식자는 --> @ContentChild 장식자는

  • 152쪽, 3번째 줄

    마지막으로 routing은 --> 마지막으로 AppRoutingModule

  • 154쪽, 6.2.2 핵심 모듈에 대한 부연 설명

    전역이라는 말이 오해될 수 있는 표현이어서 부연 설명을 추가합니다. 핵심 모듈(core module)은 최상위 컴포넌트인 애플리케이션 컴포넌트뿐 아니라 애플리케이션 루트 모듈에 등록된(책에서 사용한 전역의 의미) 컴포넌트에서 모두 사용할 수 있습니다. 전역이라는 의미를 다음과 같이 바꿔서 이해하셔도 됩니다.

    • 전역 모듈 -> 애플리케이션 루트 모듈에 등록된 모듈
    • 전역 컴포넌트 -> 애플리케이션 루트 모듈에 등록된 컴포넌트
  • 155쪽, 예제 코드의 5번째 줄

    templateUrl: `
        <h1 highlight>{{title}}</h1>
        by <b>{{user}}</b>`,
    

    -->

    template: `
        <h1 highlight>{{title}}</h1>
        by <b>{{user}}</b>`
    
  • 155쪽, 예제 6.6의 경로

    /router/src/app/app-routing.module.ts --> /module/src/app/core/user.service.ts

  • 158쪽, 예제 6.8의 경로

    /router/src/app/app-routing.module.ts --> /module/src/app/app.module.ts

  • 163쪽, 상단 예제 코드

    getMember(age: number | string) {
      return this.getMembers()
        .then(members => members.find(member => member.age === +age));
    }
    

    -->

    getMember(name: string) {
      return this.getMembers()
        .then(members => members.find(member => member.name == name));
    }
    
  • 164쪽, 본문 3번째 줄

    getMebers() 메서드는 --> getMembers() 메서드는

  • 202쪽, 첫 번째 줄

    자식 라우트가 모두 호출되고 나서야 호출됩니다. --> canLoad 가드가 호출되고 나서 player 라우팅 모듈이 호출됩니다.

  • 216쪽, 5번째 줄

    여기서 provide는 의존성 주입 시 사용할 클래스입니다. 제공 클래스는

    -->

    여기서 provide에는 의존성 주입 시 제공할 클래스를 선언합니다. 제공할 클래스는

  • 221쪽, 본문 4번째 줄

    userValue에 --> useValue

  • 247쪽, 표 9-2의 2행 4열

    [calss.positive]="isPositive" --> [class.positive]="isPositive"

  • 281쪽, 첫 번째 줄

    컴포넌트와 지시지 간의 --> 컴포넌트와 지시자 간의

  • 319쪽, 본문 첫 번째 줄

    01부터 08번까지 --> 01부터 07번까지

예제코드 관련 GitHub 페이지

관련 글


엮인 글

엮인 글 주소: http://wikibook.co.kr/angular-2/trackback/