다양한 예제 프로젝트로 타입스크립트 객체지향 프로그래밍을 비롯해 부트스트랩, 리액트, Vue, 앵귤러와 같이 인기 있는 UI 프레임워크 사용법을 알아본다. 또한 그래프QL, MEAN 스택을 통한 서버 개발, 도커를 통한 서버 배포, Socket.IO를 통한 웹소켓, 파이어베이스와 같은 매니지드 클라우드 서비스 사용과 TensorFlow.js를 비롯한 다양한 최신 기술을 살펴본다.

[목 차]

1장. 타입스크립트 고급 기능
__필요 기술
__tsconfig로 미래에 대비하는 타입스크립트 빌드
__타입스크립트 고급 기능 소개
____공용체에 서로 다른 타입 사용하기
____교차 타입으로 타입 조합
____타입 별칭으로 타입 선언 단순화
____객체 전개 구문으로 비구조화 할당
____나머지 속성으로 객체 구조 분해
____나머지 연산자로 여러 개의 파라미터를 변수에 복사
____데코레이터로 AOP 구현
____믹스인을 통한 타입 합성
____차별 타입과 제네릭으로 동일한 코드 사용
____맵을 이용한 값 연결
____프로미스와 async/await으로 비동기 코드 만들기
____부트스트랩으로 UI 만들기
__요약
__질문

2장. 타입스크립트로 마크다운 에디터 만들기
__기술적 요구 사항
__프로젝트 개요
__간단한 HTML 프로젝트로 시작
__간단한 마크다운 파서 작성
____부트스트랩 UI 만들기
____마크다운 태그를 HTML 태그에 매핑
____마크다운 문서로 변환된 마크다운 표현하기
____방문자 패턴으로 마크다운 문서를 업데이트
____방문자 패턴이란
____방문자 패턴 적용
____책임 연쇄 패턴으로 적용할 태그 결정
____하나로 모으기
__요약
__질문
__더보기

3장. 리액트 부트스트랩으로 개인 주소록 만들기
__기술적 요구 사항
__프로젝트 개요
__컴포넌트 시작
__타입스크립트를 지원하는 리액트 부트스트랩 프로젝트 만들기
__가상 레이아웃 만들기
____애플리케이션 만들기
____tslint로 코드 포매팅
____부트스트랩 추가
__리액트에서 tsx 컴포넌트 사용
____리액트가 가상 DOM에 대응하는 방법
____리액트 App 컴포넌트
__상세 정보 표시 인터페이스
____값 바인딩으로 업데이트 단순화
__사용자 입력 검증과 검증자 사용법
____주소 검증
____이름 검증
____전화번호 검증
__검증 작업을 리액트 컴포넌트에 연결
__IndexedDB 데이터베이스를 생성해 데이터 전송
____state에 액티브 레코드 추가
____데이터베이스에서 상세 주소 가져오기
__개선
__요약
__질문
__더 읽을거리

4장. MEAN 스택으로 사진 갤러리 만들기
__기술적 요구 사항
__MEAN 스택
__프로젝트 개요
__시작하기
__MEAN 스택으로 앵귤러 사진 갤러리 만들기
____앵귤러 이해하기
____애플리케이션 만들기
____앵귤러 머티리얼로 UI 만들기
____머티리얼로 내비게이션 추가
____첫 번째 컴포넌트 만들기 - 파일 업로드 컴포넌트
____익스프레스 도입
____라우팅 지원
____이미지 표시
____보이는 다이얼로그 감싸기
__요약
__질문
__더 읽을거리

5장. 그래프QL과 아폴로로 만드는 앵귤러 할 일 관리 애플리케이션
__기술적 요구 사항
__그래프QL과 REST 사이의 관계
__프로젝트 개요
__시작하기
__그래프QL과 앵귤러로 할 일 관리 애플리케이션 만들기
____애플리케이션 만들기
____그래프QL 스키마 생성
____그래프QL 스키마 리졸버 만들기
____아폴로 서버 사용
____그래프QL 앵귤러 클라이언트
____페이지 컴포넌트에 내용 추가
__요약
__질문
__더 읽을거리

6장. Socket.IO를 사용한 채팅방 만들기
__기술적 요구 사항
__Socket.IO를 사용한 클라이언트/서버 간 장기 접속 커뮤니케이션
__프로젝트 개요
__Socket.IO와 앵귤러 시작
__Socket.IO, 앵귤러, Auth0를 사용한 채팅방 애플리케이션 만들기
____애플리케이션 만들기
____서버에 Socket.IO 지원 추가
____채팅방 클라이언트 만들기
____Auth0을 사용한 인증과 인가
____보안 라우팅 사용
____클라이언트에 채팅 기능 추가
____GeneralchatComponent로 애플리케이션 종료
__요약
__질문
__더 읽을거리

7장. 파이어베이스를 사용한 클라우드 기반 앵귤러 지도
__기술적 요구 사항
__모던 애플리케이션과 클라우드 서비스로의 이동
__프로젝트 개요
__앵귤러에서 Bing 지도로 시작하기
____Bing 지도 가입
____파이어베이스 가입
__앵귤러와 파이어베이스로 Bing 지도 애플리케이션 만들기
____지도 컴포넌트 추가
____관심 지점
____맵에 핀 표시
____지도 검색으로 관심 사항 탐색
____화면에 Bing 맵 추가
____지도 이벤트와 핀 설정
____데이터베이스 보안
__요약
__질문

8장. 리액트와 마이크로서비스로 CRM 만들기
__기술적 요구 사항
__도커와 컨테이너 이해하기
____도커 용어
____마이크로서비스
____스웨거로 REST API 설계
__도커로 마이크로서비스 애플리케이션 만들기
____도커로 마이크로서비스 서비스 애플리케이션 만들기 시작
____서버 측 라우팅 지원 추가
____도커로 서비스 실행
____리액트 사용자 인터페이스 만들기
____내비게이션 추가
__요약
__질문
__더 읽을거리

9장. Vue.js와 TensorFlow.js로 만드는 이미지 인식
__기술적 요구 사항
__머신러닝이란 무엇이며 텐서플로는 어떻게 어울리는가?
____머신러닝이란 무엇인가?
____텐서플로란 무엇이며 머신러닝과 어떤 관계인가?
__프로젝트 개요
__Vue에서 텐서플로 시작하기
____Vue 기반 애플리케이션 만들기
____Vue 템플릿으로 홈페이지 만들기
____이미지 분류를 지원하도록 HelloWorld 컴포넌트 수정
____Vue 애플리케이션 진입점
____자세 감지 기능 추가
__요약
__질문
__더 읽을거리

10장. ASP.NET Core로 음악 라이브러리 만들기
__기술적 요구 사항
__ASP.NET Core MVC 도입
__프로젝트 개요
__ASP.NET Core, C#, 타입스크립트로 음악 라이브러리 만들기
____비주얼 스튜디오로 ASP.NET Core 애플리케이션 생성
____애플리케이션 구조 이해
____Discogs 모델 생성
____컨트롤러 연결
____Index 뷰 추가
____애플리케이션에 타입스크립트 추가
____ASP.NET에서 타입스크립트 기능 호출
__요약
__질문
__더 읽을거리

연습 문제


[본 문]

이 책에서는 타입스크립트(TypeScript)를 다루지만 타입스크립트만 살펴보지는 않으며, 타입스크립트를 기본 예제 이상으로 사용할 수 있는 방법을 소개한다. 또한 타입스크립트 세계에 첫 발을 내디뎠을 때 마주치는 것보다 더 어려운 주제를 다룬다.
다시 말해, 타입스크립트를 소개하고 이전에 사용하던 방식보다 더욱 발전된 고급 기술과 함께 사용하는 재미있고 멋진 방법을 알아보는 책이라고도 할 수 있다.
사실 이 책은 앵귤러(Angular), 리액트(React), Vue, ASP.NET Core 프로그래밍에 관한 내용을 다루지 않는다. 이들 각각은 별도의 책으로 다룰 만큼 큰 주제다. 실제로 각 장의 끝에서는 이 기술들을 더 깊이 배우는 데 도움이 될 만한 자료를 제시하는 데 최선을 다했다. 대신 앵귤러나 리액트는 각 장별로 새로운 기능이 다섯 가지 이상 들어가지 않도록 제한했다. 부트스트랩Bootstrap처럼 기술별 구현체를 가진 기술을 사용할 때는 리액트의 경우 reactstrap과 같은 가장 적합한 라이브러리를 사용했다. 이런 라이브러리들은 사용자 인터페이스(UI) 프레임워크와 동작하도록 설계됐기 때문이다.
이 책을 저술하고자 조사를 할 때부터 "지금 인기 있는 것은 무엇인가? 사람들이 사용하는 새롭고 놀라운 것은 무엇인가?"라는 질문을 계속 해왔다. 이 책은 그래프QL(GraphQL), 마이크로서비스, 머신러닝 등과 같은 기술을 소개하는 데 초점을 맞췄다.
다시 말하지만, 이 책은 관련된 기술에 대해 모든 것을 가르쳐주지 않는다. 기술을 소개하고 타입스크립트의 위력을 활용해 개발할 때 더 편리한 방법을 보여준다.
내용을 훑어보면서 객체지향 프로그래밍(OOP, Object-Oriented Programming)에 상당히 집중했다는 점도 알 수 있으며, 상당히 많은 클래스를 만들게 된다. OOP에 집중하는 많은 이유가 있지만, 가장 큰 이유는 초반에 작성하는 코드를 후반에 재사용하기 때문이다. 또한 필요하다면 여러분의 코드에 그대로 추가할 수 있는 코드를 작성하고 싶었다. 이는 타입스크립트에서 클래스 기반 개발로 훨씬 간단하게 할 수 있고 더 발전된 고급 기술을 사용하더라도 코드를 간단하게 만드는 데 적용할 수 있는 기술을 이야기할 기회를 제공한다. 따라서 하나의 책임을 갖는(단일 책임 원칙 패턴) 클래스 같은 원칙과 잘 알려진 소프트웨어 엔지니어링 패턴을 복잡한 문제에 적용해 해결을 쉽게 만드는 패턴 기반 개발을 다룬다.
타입스크립트와 더불어 대부분의 장에서는 UI에 부트스트랩을 적용하는 방법을 살펴본다. 머티리얼(Material)과 앵귤러는 밀접하게 연결돼 있으므로, 만약 상업용 앵귤러 애플리케이션을 개발한다면 머티리얼을 사용할 가능성이 있다. 따라서 몇몇 장에서는 앵귤러와 인터페이스 레이아웃에 부트스트랩 대신 앵귤러 머티리얼을 사용하는 방법을 살펴본다.
( '지은이의 말' 중에서)

백문(百聞)이 불여일타(不如一打).
어떤 기술을 배울 때, 동작하는 예제를 직접 만들어보는 노력은 학습의 지름길이 된다. 이 책은 다양한 예제 프로젝트를 통해 타입스크립트 객체지향 프로그래밍을 비롯해 부트스트랩, 리액트, Vue, 앵귤러와 같은 인기 있는 UI 프레임워크의 사용법과 그래프QL, MEAN 스택을 이용한 서버 개발, 도커를 통한 서버 배포, Socket.IO를 사용한 웹소켓, 파이어베이스와 같은 매니지드 클라우드 서비스의 사용법, TensorFlow.js 등의 다양한 기술을 살펴본다.
이제 웹 서비스를 만드는 일은 단순히 웹 페이지에만 해당되는 이야기가 아니며, 사용자와 상호작용하는 UI를 비롯해 데이터나 API를 제공하는 백엔드 기술을 포함하는 넓은 분야의 개발을 지칭하는 개념으로 자리매김했다.
꾸준히 등장하는 새로운 기술의 동향을 파악하고 기술 도입을 검토해보는 노력은 언제나 필요하며, 대상 분야도 점점 넓어지고 있다. 웹 서비스를 만든다면 인프라를 비롯한 클라우드 서비스 관련 지식도 필요하고 컨테이너를 통한 배포 방법도 살펴봐야 한다. 경우에 따라 그래프QL이나 머신러닝 같은 기술을 사용해야 할 수도 있다. 이 책이 다양한 기술을 살펴보고 적재적소에 사용하는 데 도움이 되길 바란다.
( '옮긴이의 말' 중에서)

★ 이 책에서 다루는 내용 ★

■ 타입스크립트로 일반적인 패턴을 사용해 코드를 작성하는 방법
■ 타입스크립트로 유명 프레임워크와 라이브러리를 사용하는 방법
■ 서버와 클라이언트에서 타입스크립트를 함께 사용할 때의 장점
■ 그래프QL과 텐서플로 같은 패러다임을 적용하는 방법
■ 유명 클라우드 기반 인증 서비스를 사용하는 방법
■ 타입스크립트와 C#을 결합해 ASP.NET Core 애플리케이션을 작성하는 방법

★ 이 책의 대상 독자 ★

기본적인 타입스크립트에 익숙한 사람을 대상으로 한다. 타입스크립트 컴파일러(tsc)로 설정 파일을 빌드하고 코드를 컴파일하는 방법과 타입스크립트의 타입 안정성, 함수, 클래스 등과 같은 기본 사항을 알고 있다면, 이 책에서 새로운 지식을 얻을 수 있을 것이다.
타입스크립트에 대한 고급 지식을 갖췄다면, 이전에 흥미를 느꼈지만 사용하지 않았던 기술의 다양한 면을 볼 수 있을 것이다.

★ 이 책의 구성 ★

1장, '타입스크립트 고급 기능'에서는 공용체(union) 타입, 교차(intersection) 타입, 사용자 선언 타입, 데코레이터(decorator)를 사용한 관점지향 프로그래밍(AOP, Aspect-Oriented Programming)과 같이 이전까지 만나보지 못했던 타입스크립트의 기능을 소개한다. 1장을 통해 프로 코더로서 매일 사용하는 다양한 타입스크립트 기술에 익숙해질 수 있다.
2장, '타입스크립트로 마크다운 에디터 만들기'에서는 간단한 마크다운 에디터로 실제 프로젝트를 처음 작성해본다. 웹 페이지의 텍스트 블록에 연결하는 간단한 파서를 만들고 사용자가 마크다운 태그를 입력하면 파서를 사용해 태그를 식별하고 미리보기 영역에 반영한다. 코드를 작성하면서 디자인 패턴을 사용해 타입스크립트로 견고한 솔루션을 만드는 방법을 살펴본다.
3장, '리액트 부트스트랩으로 개인 주소록 만들기'에서는 유명한 리액트 라이브러리로 개인 주소록 관리 프로그램을 만든다. 애플리케이션을 작성하면서 리액트가 특별한 TSX 파일로 타입스크립트와 HTML 파일을 한데 섞어 사용자 컴포넌트를 만드는 방법을 살펴본다. 또한 state와 바인딩을 사용해 사용자가 값을 바꾸면 리액트가 데이터 모델을 업데이트하는 방법도 살펴본다. 브라우저 자체의 IndexedDB를 데이터베이스로 사용해 정보의 입력, 저장, 조회가 가능한 UI를 만들고 컴포넌트가 입력값이 올바른지 확인하는 검증 절차를 적용하는 방법을 살펴보는 것이다.
4장, 'MEAN 스택으로 사진 갤러리 만들기'에서는 사진 갤러리를 만들면서 처음으로 MEAN 스택(MEAN stack)을 다룬다. MEAN 스택은 클라이언트와 서버 양쪽에서 실행하는 애플리케이션을 만드는 데 협력하는 몇몇 기술을 설명하는 용어다. MEAN 스택으로 사진 갤러리 애플리케이션을 작성하고 UI로는 앵귤러, 사용자가 업로드한 사진을 저장하는 데는 몽고DB(MongoDB)를 사용한다. 애플리케이션을 만들 때는 앵귤러의 힘을 빌려 서비스와 컴포넌트를 만든다. 동시에 앵귤러 머티리얼을 사용해 매력적인 UI를 만드는 방법도 살펴본다.
5장, '그래프QL과 아폴로로 만드는 앵귤러 할 일 관리 애플리케이션'에서는 클라이언트와 서버 간 통신에 꼭 REST를 사용하지 않아도 된다는 아이디어를 소개한다. 많은 관심을 얻고 있는 그래프QL을 사용해 그래프QL 서버와 클라이언트를 통해 여러 지점에서 데이터를 소비하고 갱신하는 애플리케이션을 만든다. 5장에서 만드는 앵귤러 애플리케이션은 사용자의 할 일 관리 목록(list of to-do items)을 관리하고 템플릿(template)을 사용해 읽기 전용-편집 상태를 교체하는 것 같은 앵귤러 기능을 보여준다. 더불어 앵귤러가 제공하는 탁월한 사용자 입력 검증 기능도 살펴본다.
6장, 'Socket.IO를 사용한 채팅방 만들기'에서는 REST 통신에 의존하지 않는 방법을 더 깊이 살펴본다. 앵귤러 애플리케이션에서 클라이언트/서버 간의 장기간 접속을 유지하는 방법을 다룬다. 클라이언트와 서버 간 접속이 영구적으로 열려 있는 것처럼 보이므로 메시지를 서로 주고받을 수 있다. Socket.IO를 사용해 채팅방 애플리케이션을 작성한다. 외부 인증 제공 서비스로 애플리케이션 보안을 강화해 암호를 일반 텍스트로 저장하는 것 같은 부끄러운 인증 실패를 피할 수 있다.
7장, '파이어베이스를 사용한 클라우드 기반 앵귤러 지도'에서는 두 가지 클라우드 기반 서비스를 사용해 마지막 앵귤러 애플리케이션을 작성한다. 하나는 Bing 지도로, 지도 서비스에 서드파티로 가입하는 방법을 살펴보고 애플리케이션에 클라우드 기반 지도를 통합한다. 이 서비스의 규모에 의한 비용 효과도 살펴본다. 지도를 표시하고 사용자는 관심 지역을 저장할 수 있다. 데이터는 구글의 파이어베이스(Firebase) 클라우드 플랫폼에 별도로 저장한다.
8장, '리액트와 마이크로서비스로 CRM 만들기'에서는 리액트와 MEAN 스택 경험을 기반으로 리액트 기반 스택으로 작업하는 방법을 소개한다. MEAN을 처음 만났을 때 단일 애플리케이션의 엔드포인트에 대해 이야기하고자 REST를 사용했다. 8장의 애플리케이션에서는 여러 개의 마이크로서비스로 단순화한 리액트 기반 CRM 시스템을 만드는 방법을 이야기한다. 마이크로서비스가 무엇인지, 언제 사용하는지를 살펴보고 추가로 스웨거(Swagger)로 REST API를 설계하고 문서화하는 방법을 살펴본다. 8장의 가장 중요한 부분은 도커(Docker)를 소개하고 컨테이너 내부에서 서비스를 실행하는 방법을 보여주는 것이다. 현재 컨테이너는 애플리케이션 배포를 단순화하는 방법으로 애플리케이션을 개발할 때 개발자들 사이에서 가장 선호하는 주제이면서 사용하기에도 어렵지 않다.
9장, 'Vue.js와 TensorFlow.js로 만드는 이미지 인식'에서는 웹 브라우저에서 TensorFlow.js를 사용해 머신러닝을 사용하는 방법을 소개한다. Vue.js 프레임워크와 사전 훈련된 모델을 사용해 이미지를 식별하는 애플리케이션을 작성한다. 스포츠 분야에서 코칭할 때 활용할 수 있도록 웹 카메라로 어떤 자세를 취하는지 감지하고 자세를 추적하도록 확장할 수 있는 자세 감지 애플리케이션을 만드는 방법을 살펴본다.
10장, 'ASP.NET Core로 음악 라이브러리 만들기에서는 UI를 만드는 데 타입스크립트를 주력 언어로 사용해 다수의 애플리케이션을 작성한다. ASP.NET Core를 써서 아티스트 이름을 입력해 Discogs 음악 API를 통해 곡에 대한 상세 정보를 검색하는 음악 라이브러리 애플리케이션을 작성한다. C#과 타입스크립트를 조합해 Discog에 쿼리(query)를 실행하고 UI를 만든다.

피터 오한론
30년 가까운 경력을 쌓은 전문 개발자다. 현재는 종류와 크기를 가리지 않는 데스크톱 및 웹 애플리케이션을 개발하고 있다. C, C++, 베이직, 파스칼, 자바스크립트를 이용한 개발 경험이 있으며, 지난 18년간은 C# WPF, 자바스크립트, 타입스크립트에 집중하고 있다. 수년간 인텔 이노베이터(Intel Innovator) 프로그램의 회원이면서 인텔 얼티메이트 코더 2(Intel Ultimate Coder 2) 콘테스트에 참가한 코드 프로젝트(Code Project)의 MVP였다. 증강/혼합 현실, 컴퓨터 영상, 인공지능, 동작 인식 같은 기술에 적극적으로 참여하게 만드는 새로운 기술과 언어를 받아들 이는 것을 항상 열망한다.
옮긴이 김유성
자동화 기술과 실수를 줄이는 방법에 관심이 많다. 꾸준히 무언가를 만드는 사람이 되길 원하며, 현재 사이냅소프트에서 웹오피스와 문서 뷰어 등과 같은 다양한 웹 애플리케이션을 개발하고 있다. 역서로는 에이콘출판사에서 출간한 『Selenium 웹드라이버 테스트 자동화』(2014), 『Selenium WebDriver 길들이기』(2016), 『타입스크립트 마스터 2/e』(2018)가 있다.