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

■ 타입스크립트로 일반적인 패턴을 사용해 코드를 작성하는 방법
■ 타입스크립트로 유명 프레임워크와 라이브러리를 사용하는 방법
■ 서버와 클라이언트에서 타입스크립트를 함께 사용할 때의 장점
■ 그래프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를 만든다.

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

피터 오한론(Peter O’Hanlon)

30년 가까운 경력을 쌓은 전문 개발자다. 현재는 종류와 크기를 가리지 않는 데스크톱 및 웹 애플리케이션을 개발하고 있다. C, C++, 베이직, 파스칼, 자바스크립트를 이용한 개발 경험이 있으며, 지난 18년간은 C# WPF, 자바스크립트, 타입스크립트에 집중하고 있다. 수년간 인텔 이노베이터(Intel Innovator) 프로그램의 회원이면서 인텔 얼티메이트 코더 2(Intel Ultimate Coder 2) 콘테스트에 참가한 코드 프로젝트(Code Project)의 MVP였다. 증강/혼합 현실, 컴퓨터 영상, 인공지능, 동작 인식 같은 기술에 적극적으로 참여하게 만드는 새로운 기술과 언어를 받아들이는 것을 항상 열망한다.

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

김유성

자동화 기술과 실수를 줄이는 방법에 관심이 많다. 꾸준히 무언가를 만드는 사람이 되길 원하며, 현재 사이냅소프트에서 웹오피스와 문서 뷰어 등과 같은 다양한 웹 애플리케이션을 개발하고 있다. 역서로는 에이콘출판사에서 출간한 『Selenium 웹드라이버 테스트 자동화』(2014), 『Selenium WebDriver 길들이기』(2016), 『타입스크립트 마스터 2/e』(2018)가 있다.