LUVIT 나의 첫 타입스크립트 프로젝트

타입스크립트 + 리액트 + NestJS + 몽고DB로 나만의 블로그 만들기

조용수 지음

제이펍 2025년 09월 10일 출간 국내도서 : 2025년 06월 12일 출간

작품소개

책소개

실습 프로젝트로 익히는 타입스크립트타입스크립트는 자바스크립트의 슈퍼셋 언어로, 웹 개발 및 대규모 프로젝트에서 널리 채택되고 있다. 이 책은 타입스크립트의 기본 개념부터 핵심 문법, 고급 기능까지 살펴보고, 나만의 블로그를 만드는 실습 프로젝트를 통해 깊이 있게 학습할 수 있도록 구성되었다. 프로젝트는 리액트 컴포넌트로 웹페이지를 구축하고, Tailwind CSS를 사용해 CSS를 적용하고, NestJS 서버를 구축하고, 몽고DB에 데이터를 저장하고, 마지막에는 리액트와 NestJS를 연결하여 웹 앱 개발의 전체 과정을 경험해볼 수 있도록 구성했다. 빠르게 타입스크립트를 시작하고 최신 프런트엔드 개발을 익혀보자.

목차

머리말 vii
베타리더 후기 ix
이 책을 읽는 법 x
학습 가이드 xii
로드맵 xiv

CHAPTER 1 처음 만나는 타입스크립트
1.1 타입스크립트의 개념 2
1.2 타입스크립트의 장점 6
1.3 타입스크립트의 활용 9
돌아보기/쪽지시험 10

CHAPTER 2 타입스크립트 환경 설정
2.1 타입스크립트 개발 환경 12
2.2 타입스크립트 프로젝트 만들기 20
2.3 타입스크립트 실행 24
돌아보기/쪽지시험 27

CHAPTER 3 타입스크립트 문법
3.1 타입스크립트 기초 문법 30
3.2 ESNext 문법 67
돌아보기/쪽지시험 96

CHAPTER 4 타입스크립트 스킬
4.1 타입 추론과 타입 주석 100
4.2 함수 타입 103
4.3 enum 타입 108
4.4 인터페이스 114
4.5 클래스와 데커레이터 122
4.6 제네릭 135
돌아보기/쪽지시험 141

CHAPTER 5 타입스크립트 예제
5.1 클래스와 인터페이스 144
5.2 추상 클래스와 인터페이스 150
5.3 타입 가드 154
5.4 최하위 타입 undefined 158
5.5 타입 단언과 타입 캐스팅 160
5.6 싱글턴 패턴 162
5.7 인터페이스의 활용 164
5.8 interface vs. type 168
5.9 함수를 클래스로 170
5.10 데커레이터 타입 검사 173
돌아보기/쪽지시험 176

CHAPTER 6 나만의 블로그 만들기
6.1 리액트 프로젝트 구성 178
6.2 UI 제작 185
6.3 NestJS 서버 구축 204
6.4 리액트 - NestJS 연결 230

마치며 248
찾아보기 250

책 속으로

타입스크립트는 최신 자바스크립트 문법들과 호환이 가능합니다. 이는 타입스크립트를 사용하는 개발자가 자바스크립트의 모든 최신 기능을 활용할 수 있음을 뜻합니다. 이로써 개발자는 더욱 간결하고 효율적인 코드를 작성할 수 있으며, 동시에 강력한 타입 시스템의 이점도 누릴 수 있습니다. 또한 트랜스파일 기능을 통해서 변환할 자바스크립트 버전을 지정할 수 있습니다. 이 기능은 특히 레거시 환경에서 유용합니다. 최신 문법을 사용하여 코드를 작성하고 이를 구버전의 자바스크립트로 쉽게 변환할 수 있어, 다양한 환경에서의 호환성을 확보할 수 있습니다. (7쪽)

클린 코드(clean code)란 읽기 쉬운 코드, 단순하고 직관적인 코드를 뜻합니다. 사실 작동만 하도록 코드를 짜도 문제가 될 것은 없습니다. 다만, 회사 또는 단체에서 코드를 개발할 때는 팀원들이 이해하기 쉽도록 코드를 짜는 것도 중요합니다. 지금은 와닿지 않을 수 있지만, 규모가 큰 프로젝트에 투입되면 코드를 몇 줄만 수정해도 영향을 미치는 코드들이 생겨나고, 그 코드들을 모두 찾아서 수정해야 합니다. 이때 가독성이 좋지 않다면 그만큼 코드를 읽는 데 오래 걸리고, 유지 보수 비용이 늘어나게 됩니다. (60쪽)

타입스크립트는 이벤트 처리에 특화된 언어입니다. 여기서 이벤트란 마우스 클릭, 키보드 누르기, 드래그 등을 의미하며, 이벤트가 발생했을 때 특정 작동을 수행하는 함수를 콜백 함수(callback function)라고 합니다. 다만 개발할 때 여러 콜백 함수를 겹쳐 쓰는 경우가 생겨나면서 매우 가독성이 떨어지는 코드들이 생겨나는데, 이를 ‘콜백 지옥’이라고 합니다. 이 문제를 해결하기 위해 ES6부터는 프로미스 문법을 도입했습니다. (80~81쪽)

동기(synchronous)란 요청을 보내고 응답을 받을 때까지 대기했다가, 응답을 받으면 다음 작업을 시작하는 처리 방식을 뜻합니다. 예를 들어 놀이공원에서 한 명씩 줄을 서서 놀이기구를 타는 것과 비슷합니다. / 반면, 비동기(asynchronous)란 응답을 보내고 다른 일을 하다가, 작업이 끝났다는 이벤트가 발생하면 응답을 처리하는 방식입니다. 놀이공원에서 놀이기구 대기를 걸어 놓고, 자유롭게 놀러 다니다가 자신의 차례가 되었을 때 타러 가는 것과 비슷합니다. (83쪽)

게터는 'get 〈필드이름〉'으로 세터는 'set 〈필드이름〉'으로 선언하며 필드의 값을 가져올 때는 자동으로 게터가 호출되고, 값을 변경하면 자동으로 세터가 호출되어 값이 변경됩니다. / 처음 프로그래밍을 할 때 ‘왜 귀찮게 private, getter, setter를 쓰지?’라는 생각을 했었는데요, 이는 여러 프로그래밍 지침서에도 빠지지 않는 내용으로 외부에서 임의로 값을 변경하는 것을 방지할 수 있고, 데이터의 무결성을 지킬 수 있기 때문입니다. (125쪽)

출판사 서평

웹 개발, 이제 타입스크립트로 시작하세요.타입스크립트로 안전하고 유지 보수하기 쉬운 코드를 작성하고, Node.js와 함께 실전 애플리케이션을 구현하고, 다른 사람에게 자신 있게 타입스크립트를 설명하고 싶다면 이 책을 추천합니다. HTML과 CSS를 한 땀 한 땀 손으로 작성하던 개발자라면 이 책으로 최신 프런트엔드 개발 흐름을 익힐 수 있을 것입니다. 현업에 있는 저자의 실무 팁이 가득한 이 책을 통해 타입스크립트에 입문해보세요.

이 책의 특별한 점1. 입문자를 위한 타입스크립트 문법 설명기초 문법부터 시작하여 각 개념을 단계적으로 배웁니다. 복잡한 개념은 재미있는 비유와 시각 자료로 설명해, 처음 배우는 분들도 막힘없이 따라 할 수 있습니다.
2. 실무 중심의 프로젝트 예제최신 프런트엔드 개발에서 자주 사용하는 리액트, Tailwind CSS, NestJS, 몽고DB 등을 사용해보며 블로그 프로젝트를 완성합니다. 누구나 타입스크립트 프로젝트를 완성할 수 있다는 자신감이 생길 것입니다.
3. 저자가 제공하는 무료 동영상 강의책만으로 부족하다고 느낄 초보자들을 위해 저자가 직접 제작한 동영상 강의를 무료로 제공합니다. QR 코드로 바로 접근할 수 있어, 타입스크립트를 처음 배우는 독자도 쉽고 빠르게 학습할 수 있습니다.

이 책은 누가 읽으면 좋을까요?타입스크립트를 처음 접하는 분타입스크립트로 프로젝트를 만들어보고 싶은 분최신 프런트엔드 트렌드를 익히고 싶은 분타입스크립트 문법을 다시 살펴보고 싶은 분
먼저 읽은 독자들의 한줄평타입스크립트와 최신 프런트엔드 기술을 익히기에 아주 좋은 출발점입니다. _양성모 님복잡한 개념을 단계적으로 설명하여 이해하기 쉬웠고, 책 속 예제들을 따라가다 보면 자연스럽게 타입스크립트에 익숙해질 수 있습니다. _이기하 님저자의 실무 경험담과 예시가 풍부해 읽는 재미와 학습 동기를 동시에 얻을 수 있었습니다. _이석곤 님꼭 알아야 할 핵심 개념과 실무 예제들을 포함하고 있어, 처음 배우는 분이나 현업에서 빠르게 문법을 참고하고 싶은 분들에게 추천합니다. _한상곤 님

작가정보

저자(글) 조용수

개발을 사랑하는 IT 엔지니어. Node.js 프리랜서로 커리어를 시작한 뒤, 지금은 Technical Architect의 매력에 빠져 엔지니어로서의 전문성을 넓혀가고 있다.