Angular 2 컴포넌트 마스터 [컴포넌트 기반 사용자 인터페이스 제작]
- 원서명Mastering Angular 2 Components (ISBN 9781785884641)
- 지은이기온 쿤츠(Gion Kunz)
- 옮긴이이승준
- ISBN : 9788960779440
- 30,000원
- 2016년 12월 30일 펴냄 (절판)
- 페이퍼백 | 440쪽 | 188*235mm
- 시리즈 : acorn+PACKT
판매처
- 현재 이 도서는 구매할 수 없습니다.
책 소개
소스 파일은 아래 깃허브 페이지에서 내려 받으실 수 있습니다.
(https://github.com/AcornPublishing/angular2-component)
요약
앵귤러JS에서 새로운 모습으로 발전한 앵귤러 2의 컴포넌트 전반을 다룬다. 완전히 탈바꿈한 앵귤러 2 덕분에 마치 앵귤러가 처음 나온 것처럼 이전 버전에 대한 지식 없이도 이 책을 탐독할 수 있다. ‘앵귤러 2는 컴포넌트다’라는 말에 어울리게 각 장마다 컴포넌트를 만들고 하나의 애플리케이션으로 조립해가는 과정을 따라가며 앵귤러 2 컴포넌트를 흥미롭게 익힐 수 있다. 마지막에는 플러그인 제작과 테스트까지 깔끔하게 다룬다.
이 책에서 다루는 내용
■ 컴포넌트 기반의 UI 아키텍처 개념 이해
■ 앵귤러 2 핵심 개념 습득
■ 앵귤러 2(주로 ES6)로 작업하는 데 사용되는 기술 지식
■ 앵귤러 2 컴포넌트를 사용한 기본 작업과 고급 작업 수행
■ 앵귤러 2 컴포넌트 내에서의 의존성 주입 사용
■ 테스팅 프레임워크에 의한 앵귤러 2 컴포넌트 테스트
■ 앵귤러 2를 사용한 애플리케이션 체계화
■ 앵귤러 2를 사용한, 하나부터 열까지의 전체 애플리케이션 제작
이 책의 대상 독자
자바스크립트, HTML, CSS 등의 기본 프론트엔드 웹 기술을 잘 알고 있는 앵귤러 개발자를 위한 책이다. 앵귤러 2의 새로운 컴포넌트 기반 아키텍처에 관해 알게 되고, 최신이며 깔끔한 사용자 인터페이스를 제작하기 위한 앵귤러 2 사용법을 배울 것이다.
이 책의 구성
1장, ‘컴포넌트 기반의 사용자 인터페이스’에서는 UI 개발 역사를 알아보고 컴포넌트 기반의 사용자 인터페이스에 대해 간단히 소개한다. 앵귤러 2에서 이 개념을 다루는 방식을 알아본다.
2장, ‘제자리, 준비, 땅!’에서는 앵귤러 2 컴포넌트 기반의 애플리케이션 제작으로의 여행을 시작할 것이다. 컴포넌트와 함께 애플리케이션을 구성하는 기본 요소를 다룬다.
3장, ‘컴포넌트 구성’에서는 기본 조각으로 사용자 인터페이스를 구축하기 시작할 것이다. 그 다음으로 애플리케이션 레이아웃을 컴포넌트로 조직하고 QueryList를 사용해 컴포넌트를 결합하며, 재사용 가능한 탭 컴포넌트를 만들어 애플리케이션 인터페이스를 구축해 봄으로써 컴포넌트를 사용해 애플리케이션을 계속 조립해 나간다.
4장, ‘댓글 달아주세요!’에서는 컴포넌트를 사용해 댓글 시스템 제작 방법을 배울 것이다. 댓글을 나열하고 새 댓글도 만드는 컴포넌트 제작을 배우게 된다.
5장, ‘컴포넌트 기반 라우팅’에서는 컴포넌트가 라우팅에 어떻게 반응하는지를 설명해 독자가 작업 관리 애플리케이션에 있는 기존의 컴포넌트에 간단한 라우팅을 추가할 수 있게 해준다. 로그인 프로세스에서도 작업하여 라우터 사용 컴포넌트를 막기 위한 이해도 가능할 것이다.
6장, ‘활동 정보’에서는 프로젝트와 작업 레벨에서의 활동 흐름을 표현할 컴포넌트 생성을 다룬다.
7장, ‘사용자 경험을 위한 컴포넌트’에서는 작업 관리 애플리케이션의 전체 사용자 경험에 큰 효과를 주는 작고도 재사용 가능한 컴포넌트를 생성해본다. 여기에는 텍스트 필드 안에서의 편집, 무한 스크롤, 팝업 통보, 드래그앤드롭 지원이 포함된다.
8장, ‘시간 관리’에서는 프로젝트와 작업에 대한 시간을 평가하는 데 도움을 주는 것은 물론이고 사용자가 작업에 들인 시간을 기록하는 시간 추적 컴포넌트 생성에 집중한다.
9장, ‘우주선 대시보드’에서는 서드파티 라이브러리인 Chartist를 사용해 작업 관리 애플리케이션의 데이터를 표현하는 컴포넌트 생성에 집중한다.
10장, ‘플러그인 제작’에서는 단순하지만 강력한 패턴을 사용해 플러그 가능 컴포넌트 제작 방법에 관해 배울 것이다. 앵귤러 2 컴포넌트에 대한 DIY 플러그인 아키텍처를 통해 확장 가능한 작업 관리 시스템을 만든다.
11장, ‘테스트’에서는 앵귤러 2 컴포넌트 테스트에 대한 기본 방법을 다룬다. 테스트를 위해 컴포넌트의 특정 부분을 목킹/오버라이딩하기 위한 옵션을 알게 될 것이다.
부록, ‘작업 관리자 애플리케이션 소스 코드’에서는 이 책에 나오는 소스 코드를 다운로드하고 설치하기 위한 모든 정보가 들어있다. 코드 사용과 에러 대처에 대한 지시 사항도 있다.
본문에 쓰인 컬러 이미지는 여기에서 내려 받으세요.
목차
목차
- 1장. 컴포넌트 기반의 사용자 인터페이스
- 유기체 고려
- 컴포넌트: 사용자 인터페이스의 내부
- 캡슐화
- 결합성
- 본질에 따라 고안된 컴포넌트
- 나의 UI 프레임워크 위시리스트
- 새 표준을 위한 시간
- 템플릿 요소
- 셰도우 DOM
- 앵귤러의 컴포넌트 아키텍처
- 모든 것은 컴포넌트다
- 첫 번째 컴포넌트 작성
- 미래의 자바스크립트
- 나는 자바스크립트로 말하고 있어. 번역해줘!
- 클래스
- 모듈
- 템플릿 문자열
- ECMAScript냐 아니면 타입스크립트냐?
- 데코레이터
- 미래의 자바스크립트
- 도구
- Node.js와 NPM
- SystemJS와 JSPM
- JSPM
- JSPM으로 시작
- 정리
- 2장. 제자리, 준비, 땅!
- 작업 관리
- 비전
- 시작
- 부트스트래핑
- 애플리케이션 실행
- 요약
- 작업 리스트 생성
- 요약
- 캡슐화의 적절한 레벨
- 요약
- 입력은 출력을 만들어 낸다
- 요약
- 사용자 정의 UI 요소
- 요약
- 작업 필터링
- 정리
- 작업 관리
- 3장. 컴포넌트 구성
- 데이터: 가짜에서 진짜로
- 관측 가능 데이터 구조를 사용한 반응 프로그래밍
- 불변성
- 순수 컴포넌트
- 작업 리스트의 순수화
- 요약
- 콘텐트 투영를 사용한 컴포지션
- 탭 인터페이스 컴포넌트 제작
- 요약
- 투영된 콘텐트와 생성된 콘텐트의 혼합
- 정리
- 4장. 댓글 달아주세요!
- 모두를 아우르는 하나의 편집기
- 편집기 컴포넌트 제작
- 요약
- 댓글 시스템 제작
- comment 컴포넌트 제작
- comments 컴포넌트 제작
- 요약
- 정리
- 모두를 아우르는 하나의 편집기
- 5장. 컴포넌트 기반 라우팅
- 앵귤러 라우터 소개
- 라우팅에 의한 컴포지션
- 라우터 대 템플릿 컴포지션
- 라우트 트리의 이해
- 라우트로의 복귀
- 라우트 가능 탭
- 내비게이션 리팩토링
- 정리
- 6장. 활동 정보
- 활동 기록을 위한 서비스 제작
- 활동 기록
- SVG 강력함의 활용
- SVG의 스타일화
- SVG 컴포넌트 제작
- 대화형 활동 슬라이더 컴포넌트 제작
- 시간의 투영
- 활동 표시기 표현
- 생기 불어넣기
- 요약
- 활동 타임라인 제작
- 정리
- 활동 기록을 위한 서비스 제작
- 7장. 사용자 경험을 위한 컴포넌트
- 태그 관리
- 태그 데이터 엔티티
- 태그 생성
- 태그 서비스 생성
- 태그 표현
- 태스크 서비스의 통합
- 태그 서비스의 완료
- 태그 입력 지원
- 태그 입력 관리자 제작
- 태그 선택 컴포넌트 제작
- 편집기 컴포넌트 내부로의 태그 입력 통합
- 태그 시스템의 완성
- 드래그앤드롭
- draggable 디렉티브 구현
- 드롭 대상 디렉티브의 구현
- 작업 리스트 컴포넌트로의 드래그앤드롭 통합
- 드래그앤드롭에 대한 요약
- 무한한 공간 저 너머로!
- 별표 구문과 템플릿
- 무한 스크롤 디렉티브 작성
- 템플릿 디렉티브 내에서의 변경사항 검출
- 임베디드 뷰의 추가와 제거
- 무한 스크롤 디렉티브 마무리
- 정리
- 태그 관리
- 8장. 시간 관리
- 작업 세부사항
- 작업에 대한 태그 가능
- 노력 관리
- 시간 듀레이션 입력
- 노력 관리 컴포넌트
- 비주얼 노력 타임라인
- 노력 관리에 대한 요점
- 중요 시점의 지정
- 자동완성 컴포넌트의 제작
- 정리
- 9장. 우주선 대시보드
- Chartist 소개
- 프로젝트 대시보드
- 프로젝트 대시보드 컴포넌트 제작
- 프로젝트 요약 컴포넌트
- 첫 번째 차트 제작
- 미완료 작업 표시
- 미완료 작업 차트 제작
- 차트 범례 제작
- 차트의 대화형 기능
- 정리
- 10장. 플러그인 제작
- 플러그인 아키텍처
- 플러그 가능한 UI 컴포넌트
- 플러그인 API 구현
- 플러그인 컴포넌트의 인스턴스화
- 플러그인 아키텍처의 마무리
- 애자일 플러그인 제작
- Agile 작업 정보 컴포넌트
- Agile 작업 세부사항 컴포넌트
- 첫 번째 플러그인에 대한 요약
- 플러그인 관리
- 런타임 시의 새 플러그 로딩
- 정리
- 11장. 테스트
- 재스민 소개
- 첫 번째 테스트 작성
- 컴포넌트 출력에 대한 감시
- 테스트 컴포넌트에 대한 유틸리티
- 테스트에서의 주입
- 테스트 컴포넌트 빌더
- 동작 중인 컴포넌트 테스트
- 컴포넌트 상호작용 테스트
- 플러그인 시스템 테스트
- 정리
- 다운로드
- 부록. 작업 관리 애플리케이션 소스코드
- 준비물
- 사용법
- 문제 해결
- 데이터 리셋을 위한 IndexDB 제거
도서 오류 신고
정오표
정오표
2017. 1. 9 수정사항
이 책은 RC1을 기반으로 작성되었습니다. RC1 버전 이후로 정식 버전에 이르기까지 여러 자잘한 내용이 변경되었기 때문에 p.64의 jspm install 부분이 달라졌을 것으로 추측합니다. 원저자 쪽에서도 이 부분에 대해서는 개정해 놓지 않아 다음과 같이 책의 내용을 진행하기 위한 방도를 제시합니다.
1) p.63에서 angular-2-components라는 새 폴더를 만드는 것까지만 진행합니다.
2) 다운로드한 소스 코드에서 Chapter 2\angular-2-components-chapter-2 폴더에 있는 jspm_packages 폴더와 config.js 파일을 새로 만든 angular-2-components 폴더로 복사합니다. 즉 p.63과 p.64 페이지에 걸쳐 jspm install한 과정을 생략하고 대신에 이미 설치한 것을 가져오는 겁니다.
3) p.65부터 책의 내용을 따라 진행합니다.
3) p.66의 밑에서 4번째 줄 수정
@angular/core
=>
angular2/angular2
4) p.69의 밑에서 6번째 줄 수정
@angular/platform-browser-dynamic
=>
angular2/angular2
5) p.70까지 진행해서 live-server를 실행하면 Hello World!가 나타날 것입니다. 이후로는 거의 문제가 없겠지만, 만약 문제가 생길 시(아마 3번, 4번과 같은 애너테이션 부분일 겁니다)에는 해당 장의 소스 코드를 살펴보면 해결하는 데 도움이 될 겁니다.
2017. 1. 6 수정사항
[p. 71 : 5행]
만들 두 번째
->
두 번째로 만들