TypeScript, Angular를 사용한 웹 애플리케이션 개발부터 NativeScript를 활용한 네이티브 앱 변환과 Azure 클라우드에서 서비스 생성까지 그대로 따라하며 개발하기

이 책은 TypeScript 개발을 가장 실용적으로 시작하는 방법을 알려준다. 두 개의 흥미로운 프로젝트를 처음부터 개발하며 TypeScript의 기초를 다지고 함수, 제네릭, 프로미스, 콜백과 같은 기능을 배우게 된다. 객체지향 방식으로 프로그래밍을 하고 효율적으로 메모리를 관리하는 방법에 대해서 배운다. 또한 제작한 애플리케이션을 배포하기 전에 테스트하는 방법에 대해서도 설명한다. Angular를 사용해 단일 페이지 애플리케이션(SPA)을 만들고, 이렇게 만든 웹 애플리케이션을 NativeScript를 사용해 네이티브 앱으로 변환한다. 마지막으로 애플리케이션을 실제 서비스하기 위해 Azure 클라우드 플랫폼에 배포하는 방법을 다룬다. 이러한 과정은 사전지식 없이도 이해할 수 있도록 기초부터 자세히 설명한다. 이 책을 읽고 나면 두 개의 기본적인 기능이 모두 포함된 프로젝트를 얻을 수 있을 뿐 아니라, 다음 단계로 나아갈 수 있는 다양한 기본 기술을 연마하게 된다.

？ Visual Studio Code에서 첫 번째 프로젝트 설계하기
？ TypeScript의 데이터 타입 이해하기
？ TypeScript를 사용해 객체지향 방식으로 웹 애플리케이션 만들기
？ TypeScript의 고급 기능을 사용해 Trello 일정관리 애플리케이션 만들기
？ Jasmine과 Karma 테스팅 도구를 사용해 단위 테스트하기
？ Azure 클라우드에 리소스를 할당하고 웹 애플리케이션 배포

1장 “TypeScript 시작하기”
TypeScript와 그 기능에 대해서 설명한다. 기본적인 TypeScript 기능에 대한 이해를 돕기 위해 간단한 TODO 애플리케이션을 만들어 본다.

2장 “첫 번째 애플리케이션 ？ Sports News Combinator”
TypScript와 Angular의 기본 개념에 대해 소개한다. TypeScript의 타입에 대해 알아보고 Angular 애플리케이션을 설정하는 방법과 함께 컴포넌트의 개념에 대해 알아본다.

3장 “Sport News Combinator ？ 기능 추가”
인터페이스, 클래스, 객체지향 프로그래밍과 같은 TypeScript의 중요 개념을 다룬다. Angular의 데이터 바인딩, 지시자, 템플릿에 대해서도 알아본다.

4장 “Sports News Combinator ？ 최종 버전”
최종 기능을 추가하고 데코레이터, 의존성 주입, 라우팅, 그리고 RxJS observable을 사용한 HTTP 호출을 다룬다.

5장 “두 번째 애플리케이션 ？ Trello”
두 번째 애플리케이션으로 이 애플리케이션을 통해 TypeScript의 제네릭, 네임스페이스, 모듈에 대해 살펴본다. 또한 Angular의 컴포넌트 간 통신이나 생명주기 후킹과 같은 고급 기능에 대해서도 살펴본다.

6장 “Trello ？ 기능 추가”
TypeScript와 Angular의 기능에 대해 깊이 있게 설명한다. 반복자와 콜백, promise, observable을 사용한 비동기 프로그래밍에 대해 다룬다. Angular의 파이프와 의존성 주입에 대해 살펴본다.

7장 “Trello 애플리케이션 테스트”
Angular에서 제공하는 테스트 기능을 소개한다. 서비스, 파이프, 컴포넌트의 단위 테스트를 살펴본다.

8장 “Angular CLI를 이용한 Trello”
Angular CLI와 세부 기능들을 소개한다. 새로운 애플리케이션, 컴포넌트, 서비스, 파이프, 클래스와 인터페이스를 만드는 방법을 배운다. 그 다음 Angular 기반의 웹 애플리케이션을 빌드하고 서버를 띄우고 유지보수 하는 것에 초점을 두고 살펴본다.

9장 “NativeScript를 사용한 Trello 모바일”
웹 애플리케이션을 네이티브 모바일 애플리케이션으로 변환하도록 한다. NativeScript 프레임워크를 살펴보고 어떻게 우리의 웹 애플리케이션을 안드로이드나 iOS 애플리케이션을 만들 수 있는지 살펴본다.

10장 “Trello 예제를 마이크로소프트 Azure 클라우드에 배포하기”
클라우드 배포 플랫폼에 대해 설명한다. PaaS(Platform as a Service) 배포 환경인 Azure에 대해 알아보고, FTP와 GitHub를 사용해 배포한다. 또한 Azure가 어떻게 지속적으로 앱을 배포하도록 도와주는지 살펴본다.

Chapter 1>>> TypeScript 시작하기
JavaScript의 현재
JavaScript의 좋지 않은 부분
기능
타입 유추(Type Inference)
배열
동등 비교(Equality comparision)
Null or undefined
TypeScript 구조대
TypeScript의 장점
TypeScript와 JavaScript 비교
JavaScript의 대안
TypeScript 기능
주요 기능
데이터 타입
제어 흐름 분석(Control flow analysis)
캡슐화
상속
인터페이스
쉐이프(Shape)
데코레이터
TypeScript 문법과 키워드
설치와 설정
TypeScript 설치
TypeScript 에디터
Visual Studio
VS Code
TypeScript 컴파일러
TypeScript TODO 목록 애플리케이션
todo.ts
TypeScript의 클래스
TypeScript의 함수
TypeScript 코드 디버깅
놀이터(Playground)
요약

Chapter 2>>> 첫 번째 애플리케이션 . Sport News Combinator
Sports News Combinator . SNC
코드 다운로드
SNC의 기능
타입 시스템(Type System)
변수
var 키워드
let과 const 키워드
TypeScript의 타입
타입 어노테이션
원시 타입
배열
튜플형(Tuple)
Any
Void
Null과 undefined
유니온 타입(Union types)
타입 추론(Type Inference)
타입 체크
TypeScript의 클래스
TypeScript의 객체지향 프로그래밍
클래스의 이해
접근 제어자(access modifier)
클래스에서 변환된 JavaScript
SNC . 개요
Angular . superhero 프레임워크
SPA
Angular . 개념
Angular . 아키텍쳐
SNC . 아키텍쳐
SNC . 코드 설정
Angular CLI 셋업
애플리케이션 셋업
SNC . 폴더 구조
모델 만들기
첫 번째 컴포넌트 . NewsComponent
템플릿
컴포넌트 클래스
컴포넌트 메타데이터
Import
newsComponent
newsComponent 비즈니스 로직
newsComponent template 로직
SNC - 코드 실행
요약

Chapter 3>>> Sports News Combinator - 기능 추가
함수
함수의 타입
선택적(Optional)/기본(default) 파라미터
나머지(Rest) 파라미터
함수 오버로딩
타입스크립트의 클래스
클래스 정의
생성자
프로퍼티와 메서드
상속
추상(Abstract) 클래스
인터페이스
인터페이스 정의
덕 타이핑(duck typing)
인터페이스 확장
인터페이스 구현
SNC에 기능 추가
모델 재구성
코어 컴포넌트
템플릿과 삽입식(interpolation)
Angular의 지시자 로드 절차
요약

Chapter 4>>> Sports News Combinator
데코레이터
데코레이터 디자인 패턴
TypeScript 데코레이터
SNC 데코레이터
SNC 추가 기능
SNC에 서비스 추가
SNC에서 HTTP 호출 구현
SNC 라우팅
최종 프로덕트
요약

Chapter 5>>> 두 번째 애플리케이션 . 트렐로
트렐로 예제 애플리케이션 소개
애플리케이션 개요
기술 개요
TypeScript 네임스페이스와 모듈
유니버설 네임스페이스
TypeScript 네임스페이스
TypeScript 모듈
TypeScript 제네릭
정의
함수
클래스
제네릭 제약
트렐로 예제 애플리케이션
애플리케이션 아키텍쳐
코드 설정
트렐로 홈페이지
모델
홈페이지 컴포넌트
홈페이지 . 데이터 초기화
홈페이지 . 템플릿
홈페이지 . 새로운 보드 추가
애플리케이션 실행
트렐로 - 보드 컴포넌트
라우팅
보드 컴포넌트 . 데이터 추출
보드 컴포넌트 . 자식 컴포넌트에 데이터 전달하기
요약

Chapter 6>>> 트렐로에 기능 추가하기
반복자(iterator)
JavaScript 반복자
TypeScript 반복자
TypeScript for...of와 for...in 루프
TypeScript를 이용한 비동기 프로그래밍
콜백 함수
프로미스(Promise)
Async-await
예제 트렐로 애플리케이션에 기능 추가
예제 트렐로에서 프로미스 사용하기
프로미스 구현
홈페이지 컴포넌트에서 호출하기
기능 구현
구현 . 새로운 작업 추가
구현 . 새로운 하위 작업 추가하기
보드, 작업, 하위 작업의 제목 변경하기
Angular의 데이터 포맷팅
내장 파이프
사용자정의 파이프
Angular 의존성 주입 이해하기
의존성 관리
요약

Chapter 7>>> 트렐로 애플리케이션 테스트
기본 개념
테스트의 어려움
테스트 기반 개발
단위 테스트 vs 종단간 테스트(end-to-end test)
테스트 구조
테스트 도구
자스민(Jasmine)
카르마(Karma)
자스민과 카르마 설치 및 설정
테스트 프로젝트의 폴더와 파일 구조
파이프용 테스트 작성하기
새로운 파일 생성
테스트 케이스 작성
테스트 케이스 실행
서비스 클래스를 위한 테스트 케이스 작성
새로운 파일 생성
테스트 케이스 작성
독립된 컴포넌트의 테스트 케이스 작성
새로운 파일 작성
테스트 케이스 작성
테스트 케이스 구현
통합 컴포넌트를 위한 테스트 케이스 작성
통합 테스트 설정
테스트 케이스 구현
다른 컴포넌트를 위한 테스트 케이스
요약

Chapter 8>>> 트렐로 . Angular CLI 사용하기
Angular CLI 소개
Angular CLI 설정
Angular CLI help 명령어
Angular CLI로 애플리케이션 만들기
파일 개요
ng new . 플래그와 커스터마이징
앱 커스터마이징
Angular CLI 파일
애플리케이션용 파일 만들기
컴포넌트 만들기
서비스 생성
파이프 생성
모듈 생성
TypeScript 파일 생성
Angular 앱 빌드
빌드 프로세스
dev 모드로 애플리케이션 빌드
상용 모드에서 애플리케이션 빌드
Angular 앱 구동
ng serve 옵션
Angular 애플리케이션 린팅
린팅 규칙
린팅 옵션
트렐로 애플리케이션 린팅
Angular CLI를 사용한 코드 커버리지
트렐로 애플리케이션 코드 커버리지
요약

Chapter 9>>> 트렐로 모바일 . NativeScript 사용하기
NativeScript란?
NativeScript 디자인
NativeScript vs 웹 애플리케이션
NativeScript 환경 설정
NativeScript CLI
모바일 플랫폼 의존성 설치
NativeScript를 사용한 예제 트렐로 애플리케이션 개발
애플리케이션 골격 생성
NativeScript 애플리케이션 기본 폴더 구조
홈페이지 컴포넌트 개발
기존 컨텐츠 제거
트렐로 보드 모델
트렐로 서비스 구현
홈페이지 컴포넌트 구현
홈페이지 컴포넌트 연결
지금까지의 애플리케이션 검토
run 명령어 실행
애플리케이션 디버깅
보드 컴포넌트 개발
보드 컴포넌트 템플릿
보드 컴포넌트 라우팅 변경
코드 실행
NativeScript UI 엘리먼트
요약

Chapter 10>>> 마이크로소프트 Azure를 사용해서 예제 트렐로를
클라우드에 배포하기
배포 플랫폼으로서의 Azure 클라우드
클라우드 플랫폼의 장점
마이크로소프트 Azure 배포 옵션
FTP를 사용한 예제 트렐로 웹앱 서비스 배포
웹앱 서비스 관리
트렐로 예제 애플리케이션 배포
웹앱 서비스 GitHub를 사용한 예제 트렐로 배포
GitHub 통합
애플리케이션 실행
지속적인 배포와 모니터링
요약

Appendix A>>> 부록
1. 비주얼 스튜디오 코드에서 TypeScript 디버깅하기
2. TypeScript 2.8 소개
3. TypeScript 2.9 소개

찾아보기