<br/>1장. 타입스크립트-도구와 프레임워크 옵션<br/><br/>__타입스크립트 소개<br/>____ECMA 스크립트 표준<br/>____타입스크립트의 장점<br/>________컴파일<br/>________강타입<br/>________자바스크립트와 타입스크립트의 정의<br/>________캡슐화<br/>________퍼블릿, 프라이빗 접근자<br/>__TypeScript IDEs<br/>____노드 기반 컴파일<br/>________tsconfig<br/>____비주얼 스튜디오<br/>________비주얼 스튜디오 프로젝트 만들기<br/>________기본 프로젝트 설정<br/>________비주얼 스튜디오 디버깅<br/>____웹스톰<br/>________웹스톰 프로젝트 생성<br/>________기본 파일<br/>________간단한 HTML 애플리케이션 만들기<br/>________크롬에서 웹 페이지 실행<br/>________크롬에서 디버깅<br/>____비주얼 스튜디오 코드<br/>________비주얼 스튜디오 코드 설치<br/>________비주얼 스튜디오 코드 둘러보기<br/>____그 외의 편집기<br/>________그런트<br/>__요약<br/><br/><br/>2장. 타입, 변수, 함수 기<br/><br/>__기본 타입<br/>____자바스크립트 타이핑<br/>____타입스크립트 타이핑<br/>____타입 구문<br/>____타입 추론<br/>____덕 타이핑<br/>____템플릿 문자열<br/>____배열<br/>____for<br/>____any 타입<br/>____명시적 형 변환<br/>____열거형<br/>____상수 열거형(Const enums)<br/>____상수값<br/>____let 키워드<br/>__함수<br/>____함수 반환 타입<br/>____익명 함수<br/>____선택적 인자(Optional Parameters)<br/>____기본 인자(Default parameters)<br/>____나머지 인자(Rest parameters)<br/>____함수 콜백<br/>____함수 시그니처<br/>____함수 오버로드<br/>__고급 타입<br/>____공용체(Union)<br/>____타입가드<br/>____타입 별명<br/>____Null과 undefined<br/>____객체 나머지, 전개(Object rest and spread)<br/>__요약<br/><br/><br/>3장. 인터페이스, 클래스, 상속<br/><br/>__인터페이스<br/>____선택적 속성<br/>____인터페이스 컴파일<br/>__클래스<br/>____클래스 속성<br/>____인터페이스 구현<br/>____클래스 생성자<br/>____클래스 함수<br/>____인터페이스 함수 정의<br/>____클래스 수정자<br/>____생성자 접근 제어자<br/>____읽기 전용 속성<br/>____클래스 속성 접근자<br/>____정적 함수<br/>____정적 속성<br/>____네임스페이스<br/>__상속<br/>____인터페이스 상속<br/>____클래스 상속<br/>____super 키워드<br/>____함수 오버로딩<br/>____protected 클래스 멤버<br/>____추상 클래스<br/>____자바스크립트 클로저<br/>__인터페이스, 클래스, 상속 - 팩토리 패턴<br/>____비즈니스 요구사항<br/>____팩토리 패턴이 하는 일<br/>________IPerson 인터페이스<br/>________특별 클래스<br/>________팩토리 클래스<br/>________팩토리 클래스 사용<br/>__요약<br/>__데커레이터<br/><br/><br/>4장. 데커레이터, 제네릭, 비동기 기능<br/><br/>____데커레이터<br/>____데커레이터 구문<br/>____다중 데커레이터<br/>____데커레이터 팩토리<br/>____클래스 데커레이터 인자<br/>____속성 데커레이터<br/>____정적 속성 데커레이터<br/>____메서드 데커레이터<br/>____메서드 데커레이터 사용<br/>____인자 데커레이터<br/>____데커레이터 메타데이터<br/>____데커레이터 메타 데이터 사용<br/>__제네릭<br/>____제네릭 구문<br/>____제네릭 클래스 인스턴스화<br/>____T 타입 사용<br/>____T 타입 제한<br/>____제네릭 인터페이스<br/>____제네릭으로 새 객체 만들기<br/>__비동기 언어 기능<br/>____프라미스<br/>____프라미스 구문<br/>____프라미스 사용<br/>____콜백 대 프라미스<br/>____프라미스에서 값 반환<br/>____async와 await<br/>____await 오류<br/>____프라미스 대 await 구문<br/>____await 메시지<br/>__요약<br/><br/><br/>5장. 선언 파일 사용 및 작성<br/><br/>__전역 변수<br/>__HTML에서 자바스크립트 사용<br/>____구조화된 데이터<br/>__선언 파일 작성<br/>____모듈 키워드<br/>____인터페이스<br/>____공용체 타입<br/>____모듈 병합<br/>__선언 구문 참조<br/>____함수 오버라이드<br/>________자바스크립트 구문<br/>________선언 파일 구문<br/>____중첩 네임스페이스<br/>________자바스크립트 구문<br/>________선언 파일 구문<br/>____클래스<br/>________자바스크립트 구문<br/>________선언 파일 구문<br/>____클래스 네임스페이스<br/>________자바스크립트 구문<br/>________선언 파일 구문<br/>____클래스 생성자 오버로드<br/>________자바스크립트 구문<br/>________선언 파일 구문<br/>____클래스 속성<br/>________자바스크립트 구문<br/>________선언 파일 구문<br/>____클래스 함수<br/>________자바스크립트 구문<br/>________선언 파일 구문<br/>____정적 속성, 함수<br/>________자바스크립트 구문<br/>________선언 파일 구문<br/>____전역 함수<br/>________자바스크립트 구문<br/>________선언 파일 구문<br/>____함수 시그니처<br/>________자바스크립트 구문<br/>________선언 파일 구문<br/>____선택적 속성<br/>________자바스크립트 구문<br/>________선언 파일 구문<br/>____함수와 모듈 병합<br/>________자바스크립트 구문<br/>________선언 파일 구문<br/>__요약<br/><br/><br/>6장. 외부 라이브러리<br/><br/>__선언 파일 다운로드<br/>__NuGet 사용<br/>____확장 프로그램 관리자 사용<br/>____선언 파일 설치<br/>____콘솔에서 패키지 매니저 사용<br/>________패키지 설치<br/>________패키지명 검색<br/>________특정 버전 설치<br/>__typings 사용<br/>____패키지 검색<br/>____typings 초기화<br/>____선언 파일 설치<br/>____특정 버전 설치<br/>____선언 파일 재설치<br/>__Bower 사용<br/>__npm과 @types 사용<br/>__외부 라이브러리 사용<br/>____자바스크립트 프레임워크 선정<br/>__백본<br/>____백본 상속 사용<br/>____인터페이스 사용<br/>____제네릭 구문 사용<br/>____ECMAScript 5 사용<br/>____백본 타입스크립트 호환성<br/>__앵귤러<br/>____앵귤러 클래스와 $scope<br/>____앵귤러 타입스크립트 호환성<br/>__상속 - 앵귤러 vs 백본<br/>__ExtJS<br/>____ExtJS 클래스 생성<br/>____형 변환 사용<br/>____ExtJS 특화 타입스크립트 컴파일러<br/>__요약<br/><br/><br/>7장. 타입스크립트 호환 프레임워크<br/><br/>__MVC란?<br/>____모델<br/>____뷰<br/>____컨트롤러<br/>____MVC 요약<br/>____MVC 사용의 장점<br/>____예제 애플리케이션 윤곽?<br/>__백본<br/>____렌더링 성능<br/>____백본 설정<br/>____백본 모델<br/>____백본 ItemView<br/>____백본 CollectionView<br/>____백본 애플리케이션<br/>__오렐리아 사용<br/>____오렐리아 설정<br/>____개발 고려사항<br/>____오렐리아 성능<br/>____오렐리아 모델<br/>____오렐리아 뷰<br/>____오렐리아 부트스트랩<br/>____오렐리아 이벤트<br/>__앵귤러 2<br/>____앵귤러 2 설정<br/>____앵귤러 2 모델<br/>____앵귤러 2 뷰<br/>____앵귤러 2 성능<br/>____앵귤러 2 이벤트<br/>__리액트<br/>____리액트 설정<br/>____리액트 뷰<br/>____리액트 부트스트랩<br/>____리액트 이벤트<br/>__요약<br/><br/><br/>8장. 테스트 주도 개발<br/><br/>__테스트 주도 개발<br/>__단위 테스트, 통합 테스트, 인수 테스트<br/>____단위 테스트<br/>____통합 테스트<br/>____인수 테스트<br/>__단위 테스트 프레임워크<br/>__자스민<br/>____간단한 자스민 테스트<br/>____자스민 스펙러너<br/>____Matchers<br/>____테스트 startup과 teardown<br/>____데이터 주도 테스트<br/>____스파이 사용<br/>____콜백에 스파이 사용<br/>____가짜로 스파이를 사용하기<br/>____비동기 테스트<br/>____done() 사용<br/>____자스민 픽스처<br/>____DOM 이벤트<br/>__자스민 러너<br/>____테스템<br/>____카르마<br/>____Protractor<br/>________셀레늄 사용<br/>__지속적 통합<br/>____CI 사용의 장점<br/>____빌드 서버 선택<br/>________팀 파운데이션 서버<br/>________젠킨스<br/>________팀시티<br/>____통합 테스트 결과서<br/>__요약<br/><br/><br/>9장. 타입스크립트 호환 프레임워크 테스트<br/><br/>__예제 애플리케이션 테스트<br/>__테스트 가능하도록 예제 수정<br/>__백본 테스트<br/>____복합 모델<br/>____뷰 업데이트<br/>____DOM 이벤트 업데이트<br/>____모델 테스트<br/>____복합 모델 테스트<br/>____렌더링 테스트<br/>____DOM 이벤트 테스트<br/>____백본 테스트 요약<br/>__오렐리아 테스트<br/>____오렐리아 컴포넌트<br/>____오렐리아 컴포넌트 뷰-모델<br/>____오렐리아 컴포넌트 뷰<br/>____컴포넌트 렌더링<br/>____오렐리아 이름 규칙<br/>____오렐리아 테스트 설정<br/>____오렐리아 단위 테스트<br/>____렌더링 테스트<br/>____오렐리아 종단간 테스트<br/>____오렐리아 테스트 요약<br/>__앵귤러 2 테스트<br/>____애플리케이션 업데이트<br/>____앵귤러 2 테스트 설정<br/>____앵귤러 2 모델 테스트<br/>____앵귤러 2 렌더링 테스트<br/>____앵귤러 2 DOM 테스트<br/>____앵귤러 2 테스트 요약<br/>__리액트 테스트<br/>____다중 진입점<br/>____리액트 수정<br/>____리액트 컴포넌트 단위 테스트<br/>____리액트 모델과 뷰 테스트<br/>____리액트 DOM 이벤트 테스트<br/>__요약<br/><br/><br/>10장. 모듈화<br/><br/>__모듈 기초<br/>____모듈 익스포트<br/>____모듈 임포트<br/>____모듈 이름 변경<br/>____기본 익스포트<br/>____변수 익스포트<br/>__AMD 모듈 로딩<br/>____AMD 컴파일<br/>____AMD 모듈 설정<br/>____Require 설정<br/>____AMD 브라우저 설정<br/>____AMD 모듈 의존성<br/>____Require 부트스트랩 <br/>____Require 설정 오류 수정<br/>________잘못된 의존성<br/>________404 오류<br/>__SystemJs 모듈 로딩<br/>____SystemJs 설치<br/>____SystemJs 브라우저 설정<br/>____SystemJs 모듈 의존성<br/>____자스민 부트스트랩<br/>__노드와 익스프레스 사용<br/>____익스프레스 설정<br/>____익스프레스에서 모듈사용<br/>____익스프레스 라우팅<br/>____익스프레스 템플릿<br/>____Handlebars 사용<br/>____익스프레스 POST 이벤트<br/>____HTTP 요청 리다이렉트<br/>____노드와 익스프레스 요약<br/>__요약<br/><br/><br/>11장. 객체지향 프로그래밍<br/><br/>__객체지향 원칙<br/>____인터페이스 프로그래밍<br/>____SOLID 원칙<br/>________단일 책임 원칙<br/>________개방 폐쇄 원칙<br/>________리스코프 치환 원칙<br/>________인터페이스 분리 원칙<br/>________의존 관계 역전 원칙<br/>__사용자 인터페이스 디자인<br/>____콘셉트 디자인<br/>____앵귤러 2 설정<br/>____부트스트랩 사용<br/>____사이드 패널 생성<br/>____오버레이 생성<br/>____전환효과 조정<br/>__상태 패턴<br/>____상태 인터페이스<br/>____구체적인 상태<br/>__중재자 패턴<br/>__모듈화 코드<br/>____navbar 컴포넌트<br/>____sidenav 컴포넌트<br/>____RightScreen 컴포넌트<br/>____자식 컴포넌트<br/>____중재자 인터페이스 구현<br/>____중재자 클래스<br/>____중재자 사용<br/>____DOM 이벤트 대응<br/>__요약<br/><br/><br/>12장. 의존성 주입<br/><br/>__메일 보내기<br/>____nodemailer 사용<br/>____환경 설정<br/>____로컬 SMTP 서버 사용<br/>____객체 의존성<br/>____서비스 로케이션<br/>____서비스 로케이션 안티패턴<br/>____의존성 주입<br/>__의존성 주입기 만들기<br/>____인터페이스 채택<br/>____열거형 채택<br/>____클래스 채택<br/>____생성자 주입<br/>__데커레이터 주입<br/>____클래스 정의 사용<br/>____생성자 인자 파싱<br/>____인자 타입 찾기<br/>____속성 주입<br/>____의존성 주입 사용<br/>____재귀 주입<br/>__요약<br/><br/><br/>13장. 애플리케이션 제작<br/><br/>__UI 경험<br/>____브라켓 사용<br/>____Emmet 사용<br/>____로그인 패널 만들기<br/>__오렐리아 웹 사이트<br/>____노드와 오렐리아 호환<br/>____오렐리아 애플리케이션 서비스<br/>____오렐리아 노드 페이지<br/>____오렐리아 컴포넌트<br/>____JSON 처리<br/>____오렐리아 폼<br/>____데이터 전송<br/>____오렐리아 메시지<br/>__앵귤러 2 웹 사이트<br/>____앵귤러 설정<br/>____앵귤러 2 페이지 서빙<br/>____앵귤러 2 컴포넌트<br/>____JSON 처리<br/>____데이터 전송<br/>__익스프레스 리액트 웹 사이트<br/>____익스프레스와 리액트<br/>____리액트 애플리케이션 서비스<br/>____다중 package<br/>____리액트 컴포넌트<br/>____REST 사용<br/>____로그인 패널 컴포넌트<br/>____리액트 데이터 바인딩<br/>____JSON 데이터<br/>__요약<br/><br/><br/>14장. 손에 흙 묻히기<br/><br/>__Board Sales 애플리케이션<br/>__앵귤러 2 기반 애플리케이션<br/>____단위 테스트<br/>____상태 중재자 테스트<br/>____로그인 화면 상태<br/>____패널 통합<br/>____JSON 데이터 구조<br/>____BoardList 컴포넌트<br/>____HTTP 요청 테스트<br/>________앵귤러의 가상 Http 모듈<br/>________가상 Http 모듈 사용<br/>____보드 목록 렌더링<br/>____UI 이벤트 테스트<br/>____보드 상세 보기<br/>____필터 적용<br/>____로그인 패널<br/>____애플리케이션 구조<br/>__요약<br/><br/>

이 책에서 다루는 내용

* 타입스크립트의 핵심과 고급 언어 기능에 대한 이해
* 선언 파일로 기존 자바스크립트 라이브러리와 외부 프레임워크 통합
* 제이쿼리, 백본, 앵귤러, 오렐리아, 리액트, 노드, 익스프레스 같은 유명 자바스크립트 프레임워크
* 자스민, 프로트랙터, 셀레늄으로 만드는 애플리케이션 대규모 테스트 스위트
* 모듈, AMD 로더, Requre, SystemJs로 애플리케이션 코드 구성
* 의존성 주입을 비롯한 고급 객체지향 디자인 원칙
* 오렐리아, 앵귤러, 리액트, 백본의 다양한 MVC 구현 이해와 비교
* CSS 애니메이션을 포함해 사용자 경험을 향상한 완전한 단일 페이지 애플리케이션 제작


이 책의 대상 독자

타입스크립트를 배우고 싶은 자바스크립트 개발자나 기술을 향상하고 싶은 타입스크립트 경력자를 위한 책이다. 타입스크립트 언어와 컴파일러를 최대한 활용해 언어 구조, 테스트 주도 개발, 객체지향 기법을 기초부터 고급까지 배운다. 이 책은 자바스크립트 애플리케이션에 강타입, 객체지향, 디자인 모범 사례를 어떻게 도입하는지 보여준다.


이 책의 구성

1장, ‘타입스크립트 - 도구와 프레임워크 옵션’에서는 타입스크립트 개발 시작에 앞선 준비 과정을 다룬다. 타입스크립트 언어와 컴파일러를 사용할 때의 장점과 몇몇 유명한 IDE로 완전한 개발 환경을 설정하는 방법을 살펴본다.
2장, ‘타입, 변수, 함수 기법’에서는 기본 타입과 타입 어노테이션에서 시작해 변수, 함수, 고급 언어 기능으로 논의를 옮겨가며 타입스크립트 언어를 소개한다.
3장, ‘인터페이스, 클래스, 상속’에서는 2장에서 작업한 내용을 바탕으로 객체지향 개념과 인터페이스 기능, 클래스, 상속을 소개한다. 팩토리 디자인 패턴을 통해 개념을 보여준다.
4장, ‘데커레이터, 제네릭, 비동기 기능’에서는 데커레이터, 제네릭과 같은 고급 기능을 살펴보고 비동기 프로그래밍 개념을 살펴본다. 타입스크립트가 프라미스와 async, await 구조로 비동기 기능을 지원하는 방법을 살펴본다.
5장, ‘선언 파일 작성과 사용’에서는 단계별로 기존 자바스크립트 코드에서 선언 파일을 만드는 과정을 살펴보고 선언 파일을 작성할 때 흔히 쓰는 구문의 목록을 나열해본다. 목록의 구문은 선언 파일 구문에 대해 바로 훑어볼 수 있는 참조 가이드가 되도록 구성했다.
6장, ‘외부 라이브러리’에서는 개발 환경에서 DefinitelyTyped 저장소를 통해 선언 파일을 사용하는 방법을 살펴본다. 이어서 유명 자바스크립트 프레임워크인 백본, 앵귤러 1, ExtJs에 호환되는 타입스크립트 코드 작성 방법을 살펴본다.
7장, ‘타입스크립트 호환 프레임워크’에서는 타입스크립트와 전체 병합 가능한 유명 프레임워크를 살펴본다. MVC 개념을 살펴본 후 백본, 오렐리아, 앵귤러 2, 리액트에서 이 디자인 패턴을 어떻게 구현했는지 비교해본다.
8장, ‘테스트 주도 개발’에서는 테스트 주도 개발이 무엇인지 살펴보고 다양한 단위 테스트를 만드는 과정을 통해 안내한다. 자스민 라이브러리를 사용해 데이터 주도 테스트와 비동기 로직 테스트 방법을 보여준다. 테스트 러너, 테스트 보고 지속 통합 빌드 서버에 대해 살펴본다.
9장, ‘타입스크립트 호환 프레임워크 테스트’에서는 타입스크립트 호환 프레임워크별로 예제 애플리케이션을 만들어 단위 테스트, 통합 테스트, 인수 테스트 과정을 살펴본다. 테스트 가능성의 개념 및 애플리케이션 설계와 구현의 미묘한 변화가 애플리케이션 테스트 범위를 더 넓게 제공할 수 있음을 살펴본다.
10장, ‘모듈화’에서는 모듈이 무엇인지, 어떻게 사용하는지와 타입스크립트가 지원하는 모듈 생성 방식인 CommonJs와 AMD를 살펴본다. 이어서 Require와 SystemJs를 포함한 모듈 로더에서 모듈을 사용하는 방법을 보여준다. 노드에서 모듈 사용법을 자세히 살펴보고 예제 익스프레스 애플리케이션을 만들면서 마무리한다.
11장, ‘객체지향 프로그래밍’에서는 객체지향 프로그래밍 개념에 대해 살펴보고 객체지향 원칙에 맞게 애플리케이션 컴포넌트를 정리하는 방법을 보여준다. 복잡한 UI 상호작용을 상태 패턴과 중재자 패턴으로 구현하는 객체지향 모범 사례도 자세히 살펴본다.
12장, ‘의존성 주입’에서는 서비스 로케이션과 의존성 주입 개념 그리고 어떻게 일반적인 애플리케이션 설계 문제를 해결하는지 살펴본다. 데커레이터로 간단한 의존성 주입 프레임워크를 구현하는 방법을 보여준다.
13장, ‘애플리케이션 만들기’에서는 노드와 익스프레스에서 생성한 HTML, REST 목적지 작성 및 사용, 데이터 연동을 포함한 웹 애플리케이션 개발의 핵심 부품을 만든다. 오렐리아, 앵귤러 2, 리액트에 익스프레스 서버, REST 목적지, 데이터 연동을 통합하는 방법을 보여준다.
14장, ‘손에 흙 묻히기’에서는 책 전체를 통해 익힌 개념과 만들었던 컴포넌트를 조합해 앵귤러 2와 익스프레스 단일 페이지 애플리케이션을 만든다. 애플리케이션에는 테스트 주도개발, 상태 패턴과 중재자 패턴, 익스프레스 REST 목적지, 객체지향 원칙, 모듈화, CSS 애니메이션 개념이 포함된다.


지은이의 말

타입스크립트 언어, 컴파일러, 오픈소스 개발 도구는 자바스크립트 개발을 엔터프라이즈 레벨로 끌어 올렸다. 타입스크립트는 오늘날의 ES5, ES6, ES7 자바스크립트 기능을 비롯해 클래스, 인터페이스, 제네릭, 모듈 등을 사용할 수 있다. 간단한 타입 구문으로 객체지향 기법과 업계 표준 디자인 원칙으로 견고한 대형 애플리케이션을 만들 수 있다.
실용적인 실제 예제로 가득한 이 책은 자바스크립트 개발 영역에 강타입의 장점, 객체지향 프로그래밍, 디자인 원칙을 가져오는 방법을 안내해준다. 언어 핵심 기능부터 제네릭이나 비동기 프로그래밍 같은 고급 주제를 통해 타입스크립트로 자바스크립트를 개발할 때 얻을 수 있는 장점을 극대화하는 방법을 배우게 된다. 테스트 주도 개발에 집중하고 유명하고 인기있는 자바스크립트 프레임워크를 다루면서, 타입스크립트 지식을 빠르게 전문가 수준으로 만들 수 있다. 책의 끝에서는 앵귤러, 오렐리아, 리액트, 백본, 노드 또는 다른 어떤 자바스크립트 프레임워크라도 자신있게 타입스크립트 애플리케이션을 만들 수 있게 된다.

옮긴이의 말

자바스크립트 생태계는 나날이 발전하고 있고, 자바스크립트가 담당하던 영역은 브라우저를 벗어나 백엔드를 비롯해 다양한 환경을 담당하고 있다.
큰 규모의 자바스크립트 프로젝트도 많아져서 이제는 자바스크립트 개발만 담당하는 별도의 팀도 흔히 볼 수 있다. 언어의 인기만큼이나 만드는 제품의 크기도 커지고 복잡도도 올라가고 있다.
대부분의 스크립트 언어가 가진 장점은 쉽고 빠르게 개발할 수 있다는 점이고, 단점은 쉽게 만들 수 있는 만큼 실수하기도 쉽다는 점이다. 컴파일 타임이나 타입 검사가 없어 빠르게 개발할 수 있지만, 런타임에서 오류를 만나거나 예상치 못한 곳에서 오류가 발생하는 일이 잦다. 게다가 프로젝트 규모가 커지고 프로젝트를 진행하는 개발자가 많아질수록 실수의 여지가 많아지고 관리하기도 어려워진다.
타입스크립트는 마이크로소프트에서 대규모 자바스크립트 개발을 위해 만든 언어로 자바스크립트를 만들어내는 컴파일러다. 자바스크립트를 생성하기 때문에 기존 자바스크립트 라이브러리나 프레임워크를 사용하면서도 강타입을 이용해 객체지향 언어처럼 개발할 수 있다.
새로운 언어나 도구를 도입하려면 지식의 전파가 필요하다. 새로운 프로젝트가 아닌 기존 프로젝트에 변화를 주려면 타입스크립트를 처음 접하는 것으로 시작해서 상당한 학습 비용이 들어가게 된다. 아무쪼록 이 책이 타입스크립트를 도입하는 데 도움이 됐으면 한다.