메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

우아한 타입스크립트 with 리액트

배달의민족 개발 사례로 살펴보는 우아한형제들의 타입스크립트와 리액트 활용법

한빛미디어

집필서

판매중

  • 저자 : 우아한형제들 웹프론트개발그룹
  • 번역 : 김민태(우아한형제들 기술이사)[감수]
  • 출간 : 2023-10-31
  • 페이지 : 380 쪽
  • ISBN : 9791169211567
  • 물류코드 :11156
  • 초급 초중급 중급 중고급 고급
4.6점 (32명)
좋아요 : 12

주니어 프론트엔드 개발자를 위한 타입스크립트+리액트 온보딩 가이드

 

우아한형제들은 자바스크립트와 자체 개발 웹 프레임워크인 WoowahanJS를 사용했었다. 그러나 서비스가 대규모 웹 애플리케이션으로 성장하면서 기존 기술의 한계를 느끼고 타입스크립트와 리액트를 프론트엔드 표준 기술로 도입했다. 타입스크립트는 자바스크립트와 100% 호환되는 확장 언어로, 정적 타입을 지원하여 안정성과 유지보수성을 높여준다. 또한 객체 지향 프로그래밍을 지원하여 복잡한 애플리케이션을 개발하는 데 적합하다. 리액트는 UI를 개발하기 위한 라이브러리로 컴포넌트 기반의 개발 방식을 지원하여 코드의 재사용성과 유지보수성을 높여준다. 이 책은 우아한형제들의 실제 코드를 기반으로 타입스크립트의 기본 개념 및 특성과 리액트 환경에서의 타입스크립트 활용법을 알려준다. 또한 배달의민족 개발 사례와 우아한형제들 구성원의 인터뷰를 통해 실무에 바로 적용할 수 있는 다양한 기술 활용 팁을 소개한다.

 

수정_상세페이지_우아한 타입스크립트 with 리액트(700).jpg

우아한형제들 웹프론트개발그룹 저자

우아한형제들 웹프론트개발그룹

우아한형제들의 프론트엔드 개발자가 속한 그룹이다. 그 외 서버개발그룹, 모바일앱개발그룹이 있다. 우아한형제들의 개발자들은 지속적으로 좋은 제도와 문화를 만들어가며 성장하기 위해 노력하고 있다.

권기석 

사용자 경험과 가장 관련 있는 브라우저에 관심이 생겨 프론트엔드 개발을 시작했다. 현재 마트 관련 커머스 서비스와 사용자 중심 모바일 디자인 시스템 개발 등에 참여하며 서비스 발전에 기여하고 있다.

 

권세진 

사용자가 선호할 만한 서비스를 기획하는 것을 좋아하는 프론트엔드 개발자이다. 새로운 기술을 빠르게 접해보며 검증하는 것을 즐긴다. 우아한테크코스 3기 웹 프론트엔드 과정을 거쳐 현재

우아한형제들의 만다오 제품을 개발하고 있다.

 

고우혁 

커피와 아쿠아리움을 사랑하는 개발자. 백엔드 개발자로 입문하여 여행 관련 스타트업을 다니다 프론트엔드에 흥미가 생겨 현재는 우아한형제들에서 프론트엔드 개발자로 일하고 있다.

 

김정혁 

우아한형제들에서 리액트 네이티브를 활용하여 배민커넥트앱을 개발하고 있다.

 

박선희 

‘머리색이 특이한 그분(?)’으로 알려져 있다. 무엇이든 손으로 직접 만드는 걸 좋아해서 개발자가 됐다. 사용자 경험에 관심이 많고, 소프트웨어가 세상을 더 재밌게 만든다고 믿는다. 우아한형제들에서 배달의민족 주문과 관련된 서비스를 개발하고 있다.

 

서그림 

우아한형제들 배민선물하기팀에서 첫 커리어를 쌓고 있는 프론트엔드 개발자이다. 내가 작성한 코드 한 줄 한 줄에는 사용자가 소중한 사람에게 선물하는 기쁨을 느낄 수 있는 시간이 담겨 있지 않을까? 오, 방금 멘트 좋았다.

 

송지은 

파워 드러머이지만 의외로 낭만을 추구하는 개발자. 멋쟁이사자처럼, 스타트업, 우아한테크코스를 거쳐 우아한형제들에서 배민셀프서비스 프론트엔드를 개발하고 있다. 프로덕트 UX에 관심이 많으며 개발보다 코드 리뷰를 좋아한다는 소문이 있다.

 

송하영 

현재 우아한형제들에서 주문, 결제, 쿠폰 프론트엔드를 개발하고 있다. 몰입해서 개발하는 것을 좋아한다. 항상 즐겁게 코딩하는 것을 목표로 삼고 있다.

 

심문성 

커피를 유별나게 좋아하는 프론트엔드 개발자. 연합 동아리 활동에 참여하여 사이드 프로젝트를 개발하는 것을 즐긴다. 현재는 우아한형제들에서 다양한 백오피스를 개발하고 있다.

 

이정민

다양한 경험을 추구하는 개발자. 5개의 IT 동아리와 5번의 인턴을 거쳐 현재는 우아한형제들에서 프론트엔드 개발을 하고 있다. 웹프론트개발그룹 직속팀에서 1년간 디자인 시스템 관련 툴을 만들다가 현재는 운영도구개발팀에서 생산성을 높이기 위한 다양한 서비스를 만들고 있다.

 

이수연 

해 질 무렵 집 앞 공원에 나가 산책하는 것을 좋아한다. 현재는 가게 운영에 필요한 서비스, 콘텐츠, 상품을 회원에게 알리는 배민외식업광장 서비스를 개발하고 있다.

 

이예지 

고민과 해결을 즐기는 개발자. 우아한형제들에서 만다오와 고객탐색기를 개발하고 있다. 효율적이고 적극적인 커뮤니케이션을 위해 항상 고민한다. 악기나 사진, 운동 등 다양한 분야에 관심이 많은 취미 부자이다.

 

이강열 

침대와 유튜브 그리고 약간의 독서를 좋아하는 방구석 개발자. 개발을 잘하는 멋쟁이 개발자가 되고 싶지만 역시 호락호락하지 않은 것 같다. 현재는 우아한형제들의 배민상회프론트개발팀에서 서비스를 개발하고 있다.

 

조은현 

모두가 함께 사용할 수 있는 서비스를 지향하는 개발자이다. 동료를 챙기는 것을 좋아해서 여러 문화를 만들어가고 있다. 현재는 우아한형제들 배민커머스웹프론트개발팀에서 모바일 웹뷰 파트를 맡고 있다.

 

최현준 

일상생활에서 재밌고 편하게 사용할 수 있는 소프트웨어를 만들기 좋아하는 프론트엔드 개발자. 오늘도 불편을 해소하기 위해 무언가 뚝딱 만들고 있다. 우아한형제들에서 인프라 관련 플랫폼 백오피스를 만들고 있다.

 

황윤서 

기술 탐구를 좋아하고 좋은 소프트웨어를 개발하기 위해 다양한 시도와 경험을 쌓아가고 있는 개발자. 디자인 시스템 툴을 1년간 개발하다가 현재는 운영도구개발팀에서 사업 부문 관련 도구들을 개발하고 있다.

김민태(우아한형제들 기술이사)[감수] 역자

김민태(우아한형제들 기술이사)[감수]

 

1장 들어가며

1.1 웹 개발의 역사

1.2 웹자바스크립트의 한계

 

2장 타입

2.1 타입이란

2.2 타입스크립트의 타입 시스템

2.3 원시 타입

2.4 객체 타입

 

3장 고급 타입

3.1 타입스크립트만의 독자적 타입 시스템

3.2 타입 조합

3.3 제네릭 사용법

 

4장 타입 확장하기·좁히기

4.1 타입 확장하기

4.2 타입 좁히기 - 타입 가드

4.3 타입 좁히기 - 식별할 수 있는 유니온

4.4 Exhaustiveness Checking으로 정확한 타입 분기 유지하기

 

5장 타입 활용하기

5.1 조건부 타입

5.2 템플릿 리터럴 타입 활용하기

5.3 커스텀 유틸리티 타입 활용하기

5.4 불변 객체 타입으로 활용하기

5.5 Record 원시 타입 키 개선하기

 

6장 타입스크립트 컴파일

6.1 자바스크립트의 런타임과 타입스크립트의 컴파일

6.2 타입스크립트 컴파일러의 동작

6.3 타입스크립트 컴파일러의 구조

 

7장 비동기 호출

7.1 API 요청

7.2 API 상태 관리하기

7.3 API 에러 핸들링

7.4 API 모킹

 

8장 JSX에서 TSX로

8.1 리액트 컴포넌트의 타입

8.2 타입스크립트로 리액트 컴포넌트 만들기

8.3 정리

 

9장 훅

9.1 리액트 훅

9.2 커스텀 훅

 

10장 상태 관리

10.1 상태 관리

10.2 상태 관리 라이브러리

 

11장 CSS-in-JS

11.1 CSS-in-JS란

11.2 유틸리티 함수를 활용하여 styled-components의 중복 타입 선언 피하기

 

12장 타입스크립트 프로젝트 관리

12.1 앰비언트 타입 활용하기

12.2 스크립트와 설정 파일 활용하기

12.3 타입스크립트 마이그레이션

12.4 모노레포

 

13장 타입스크립트와 객체 지향

13.1 타입스크립트의 객체 지향

13.2 우아한형제들의 활용 방식

13.3 캡슐화와 추상화

13.4 정리

★ 우아한형제들의 프론트엔드 개발자는 어떤 기술 스택을 쓸까?

우아한형제들은 자바스크립트와 자체 개발 웹 프레임워크인 WoowahanJS를 웹 프론트엔드 공식 기술 스택으로 사용했었다. 하지만 서비스가 대규모 웹 애플리케이션으로 성장하면서 기존 기술로는 빠르게 변하는 비즈니스 요구를 충족하기 힘들었다. 인터페이스를 파악하기 쉽지 않은 자바스크립트의 한계 등의 이유로 여러 기능을 변경하고 유지보수하는 데 어려움을 겪자 우아한형제들은 리액트 기반의 타입스크립트를 웹 프론트엔드 표준 기술 스택으로 도입하게 된다. 

 

★ 왜 타입스크립트일까?

타입스크립트는 자바스크립트와 100% 호환되는 확장 언어로 정적 타입을 지원하여 안정성을 보장해준다. 또한 객체 지향 프로그래밍 환경을 제공하기 때문에 복잡한 애플리케이션을 개발할 때 많은 도움이 된다. 이처럼 다양한 장점 때문에 타입스크립트+리액트를 도입하여 성능과 안정성을 높일 수 있을 뿐 아니라 유지보수도 용이해진다. 

 

★ 우아한형제들의 핸즈온 타입스크립트+리액트 가이드

이 책은 우아한형제들의 배달의민족 개발 사례를 기반으로 타입스크립트와 리액트 사용법을 소개한다. 타입스크립트의 기초 문법과 특성을 익히고 리액트에서의 타입스크립트 활용법을 살펴보면서 어떻게 두 기술을 실무에 적용할 수 있는지를 배울 수 있다. 

 

★ 타입스크립트를 왜 배워야 할까?

타입스크립트를 배워야 하는 이유는 다양하다.

오류 예방: 컴파일 단계에서 타입을 검사하기 때문에 실행 단계에서 발생할 수 있는 오류를 사전에 발견하고 수정할 수 있다.

코드 가독성과 유지보수성 향상: 타입을 명시적으로 지정함으로써 코드의 의미를 명확하게 표현할 수 있고 코드의 재사용성과 유지보수성을 높일 수 있다.

협업 효율성 향상: 타입을 통해 코드의 의도를 명확하게 전달할 수 있기 때문에 협업 효율성을 높일 수 있다.

자바스크립트와 호환: 타입스크립트는 자바스크립트와 100% 호환되기 때문에 자바스크립트가 사용되는 어떤 곳이든 타입스크립트를 사용할 수 있다.

 

이러한 특징으로 인해 많은 개발 조직이 타입스크립트를 사용하고 있다. 개발자로서 더 나은 역량을 갖추기 위한 스킬 중 하나로 여겨지기 때문에 프론트엔드 개발자라면 익혀두는 게 좋다.

 

★ 이 책의 대상 독자

타입스크립트나 자바스크립트를 접해본 적이 있지만 타입스크립트를 기초부터 깊이 있게 배우고 싶은 프론트엔드 주니어 개발자를 대상으로 한다. 이 책은 타입스크립트의 기본 개념과 특징을 알려주고, 우아한형제들의 사용 예시를 기반으로 실무에서 타입스크립트와 리액트를 어떻게 활용하는지를 설명한다.

 

★ 이 책을 읽기 전에 알아야 할 지식

HTML, CSS, 자바스크립트 기초를 배운 경험이 있다면 수월하게 이 책을 읽을 수 있다. 또한 리액트에서의 타입스크립트 활용법을 다루고 있기 때문에 리액트 기본 지식도 알고 있어야 한다.

 

★ 이 책의 구성

1장 들어가며

자바스크립트의 역사와 한계를 간단히 알아보면서 타입스크립트가 등장하게 된 배경을 살펴본다.

 

2장 타입

정적 타이핑을 하기 위해 타입스크립트가 제공하는 타입과 관련된 내용을 살펴본다. 타입이란 무엇이며 다른 언어에서 타입은 어떻게 동작하는지를 살펴보고, 타입스크립트의 타입을 어떻게 쓸 수 있는지 알아본다.

 

3장 고급 타입

자바스크립트 자료형에 없는 타입스크립트만의 타입 시스템을 소개한다. 그리고 타입의 개념을 응용하여 좀 더 심화한 타입 검사를 수행하는 데 필요한 지식을 살펴본다.

 

4장 타입 확장하기·좁히기

타입 확장과 타입 좁히기의 개념을 살펴보며 더욱 확장성 있고 명시적인 코드 작성법에 대해 알아본다.

 

5장 타입 활용하기

우아한형제들의 타입스크립트 활용 사례를 소개한다. 우아한형제들의 실무 코드 예시를 살펴보면서 정확한 타이핑을 하지 못해 발생하는 문제를 타입스크립트의 다양한 기법과 유틸리티 타입을 활용해 해결해본다.

 

6장 타입스크립트 컴파일

타입스크립트가 실행되는 전반적인 흐름을 살펴보고, 타입스크립트 컴파일러의 주요 역할과 구조에 대해 알아본다. 그리고 실제로 어떻게 컴파일하는지 확인해본다.

 

7장 비동기 호출

API를 요청하고 응답받는 행위는 모두 비동기로 이루어진다. 이 장에서는 타입스크립트에서 비동기 요청을 어떻게 처리하고 관리하는지를 다룬다.

 

8장 JSX에서 TSX로

리액트에서 사용하는 JSX 문법을 타입스크립트에 어떻게 적용하는지 소개한다.

 

9장 훅

리액트에서 제공하는 몇 가지 훅을 사용하여 상태 또는 사이드 이펙트를 다루는 방법을 소개한다. 또한 상태 로직을 재사용할 수 있게 해주고, 컴포넌트의 복잡성을 낮춰주는 커스텀 훅에 대해 알아본다.

 

10장 상태 관리

리액트 애플리케이션에서 가장 중요한 역할을 하는 상태에 대해 알아본다. 기본적인 상태의 개념을 익히고 어떻게 효율적으로 상태를 관리할 수 있는지를 살펴본다.

 

11장 CSS-in-JS

CSS-in-JS는 자바스크립트에서 CSS를 작성하는 방식이다. CSS-in-JS를 적용하면 CSS 스타일을 문서 레벨이 아니라 컴포넌트 레벨로 추상화해주기 때문에 관리가 용이해진다. 11장에서는 CSS-in-JS의 개념과 사용법에 관해 알아본다.

 

12장 타입스크립트 프로젝트 관리

타입스크립트 프로젝트에서 유용하게 활용할 수 있는 개념과 팁을 소개한다.

 

13장 타입스크립트와 객체 지향

타입스크립트와 리액트 환경에서 객체 지향을 어떻게 활용하고 더 나은 방향으로 발전시킬 수 있는지 알아본다.

이 책은 앞에서 타입스크립트를 다루고 뒷부분은 리액트를 활용한 여러 기법이나 패턴에 관해 설명한다. 

 

앞쪽 타입은 신입이 보기에 조금 어려운 타입 좁히기까지 잘 다루고 있다. extends와 infer를 통한 타입 추론이 익숙하지 않다면 읽어보기를 추천하고 싶다. 

물론 타입스크립트나 리액트를 깊이 있게 공부하려고 이 책을 선택한다면 조금 부족할 수 있다고 생각한다(애초에 주니어 온보딩 책이다). 

 

온보딩 책인 만큼 API, 리렌더링, 훅스, State 등을 다양한 예제와 패턴을 통해 소개하는데 내용이 좋으므로 사수가 없는 환경에서 개발하는 분들이라면 읽기를 추천하고 싶다.

 

우아한형제들은 자바스크립트와 자체 개발 웹 프레임워크인 WoowahanJS를 사용했습니다. 그러나 서비스가 대규모 웹 애플리케이션으로 성장하면서 기존 기술의 한계를 느끼고 타입스크립트와 리액트를 프런트엔드 표준 기술로 도입하였습니다.

타입스크립트(TypeScript)와 리액트(React)는 각각 프로그래밍 언어와 라이브러리(또는 프레임워크)입니다.

먼저 타입스크립트는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어입니다. JavaScript의 상위 집합으로, 정적 타입을 지원하여 개발자가 변수의 타입을 명시적으로 선언할 수 있습니다. 컴파일 시간에 타입 검사를 수행하므로 런타임 오류를 줄일 수 있고, 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.

타입스크립트의 정적 타입은 코드 작성 시 컴파일러에 의해 타입이 검사되고 오류가 발생할 수 있는 부분을 사전에 찾아내는 특징을 나타냅니다. 여기서 "정적 타입"은 코드가 실행되기 전에 타입에 대한 검사가 수행되며, 이로써 런타임에서 발생할 수 있는 일부 오류를 사전에 방지할 수 있습니다. 정적 타입은 개발자에게 코드 작성 중에 발생할 수 있는 오류를 사전에 확인할 수 있는 강력한 도구를 제공하여 코드의 안정성과 유지 보수성을 향상시킵니다.

리액트(React)는 Facebook에서 개발한 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다.

컴포넌트 기반 아키텍처를 기반으로 하며, UI를 작은 독립적인 조각으로 분할하여 구축할 수 있습니다. 가상 DOM(Virtual DOM)을 사용하여 효율적인 UI 업데이트를 가능케 하고, 단일 페이지 애플리케이션(SPA)을 쉽게 개발할 수 있습니다.

타입스크립트와 리액트는 독립적으로 사용될 수 있지만, 많은 개발자들이 이 두 기술을 함께 사용하는 것이 일반적입니다.

리액트 프로젝트에서 타입스크립트를 도입하면, 정적 타입 검사와 타입 힌트 등을 활용하여 개발 프로세스를 개선할 수 있습니다. 특히 대규모 애플리케이션에서는 타입스크립트의 강력한 타입 시스템이 유지 보수성을 향상시키고 버그를 사전에 방지하는 데 도움이 됩니다. 타입스크립트는 정적 타입 언어로서 개발자에게 타입 안정성을 제공하며, 리액트는 사용자 인터페이스를 만들기 위한 라이브러리로서 UI 개발을 간편하게 만들어줍니다. 함께 사용하면 생산성을 향상시키고 유지 보수성을 강화할 수 있습니다.


"우아한 타입스크립트 with 리액트" 도서는 우아한형제들의 프런트엔드 개발 기술을 망라한 도서입니다. 그들의 개발 경험과 기술을 한 권의 도서에 모두 녹일 수는 없었겠지만 풍부한 예제를 통해 어떤 방식으로 타입스크립트와 리액트를 활용하고 있는지 볼 수 있습니다.

먼저 이 책의 내용을 챕터별로 확인해 볼게요.

1장 들어가며

1.1 웹 개발의 역사와 1.2 자바스크립트의 한계를 통해 시작되는 이 책은 웹 개발의 변천사와 현대 웹 개발에서 자바스크립트의 한계를 다루면서 독자를 타입스크립트의 세계로 안내합니다.

2장 타입

2.1에서는 타입의 개념과 2.2에서는 타입스크립트의 강력한 타입 시스템을 다룹니다. 2.3과 2.4에서는 원시 타입과 객체 타입에 대한 깊은 이해를 제공하여 독자가 타입을 효과적으로 활용할 수 있도록 합니다.

3장 고급 타입

3.1에서는 타입스크립트만의 독특한 타입 시스템에 대해 탐구하며, 3.2와 3.3에서는 타입 조합과 제네릭 사용법을 소개하여 고급 타입 활용법을 다룹니다.

4장 타입 확장하기·좁히기

4장에서는 타입 확장과 타입 좁히기에 대한 전략을 다룹니다. 4.4에서는 Exhaustiveness Checking을 사용하여 정확한 타입 분기 유지에 중점을 둡니다.

5장 타입 활용하기

5장에서는 조건부 타입, 템플릿 리터럴 타입, 커스텀 유틸리티 타입 등을 활용하여 불변 객체 타입까지 폭넓게 다룹니다.

6장 타입스크립트 컴파일

6장에서는 자바스크립트의 런타임과 타입스크립트의 컴파일에 대한 이해를 제공하고, 6.3에서는 타입스크립트 컴파일러의 구조를 살펴봅니다.

7장 비동기 호출

비동기 호출에 대한 핵심인 API 요청, 상태 관리, 에러 핸들링, 모킹을 다루어 웹 애플리케이션에서 비동기적인 요청을 효과적으로 다루는 방법을 제시합니다.

8장 JSX에서 TSX로

8장에서는 JSX에서 TSX로의 전환을 다루면서 리액트 컴포넌트의 타입, 타입스크립트로 리액트 컴포넌트를 만드는 방법을 안내합니다.

9장 훅

9장에서는 리액트 훅과 커스텀 훅을 다루어 리액트 애플리케이션에서 상태와 생명주기를 효과적으로 관리하는 방법을 설명합니다.

10장 상태 관리

10장에서는 상태 관리의 필요성을 논하고, 다양한 상태 관리 라이브러리를 비교하여 각각의 특징을 설명합니다.

11장 CSS-in-JS

11장에서는 CSS-in-JS의 개념을 소개하고, styled-components를 활용하여 중복 타입 선언을 효과적으로 피하는 방법을 다룹니다.

12장 타입스크립트 프로젝트 관리

12장에서는 앰비언트 타입, 스크립트와 설정 파일 활용, 타입스크립트 마이그레이션, 모노레포 구성 등을 통해 큰 규모의 프로젝트에서 타입스크립트를 어떻게 효과적으로 관리할 수 있는지 설명합니다.

13장 타입스크립트와 객체 지향

마지막 13장에서는 타입스크립트의 객체 지향 프로그래밍 방식을 소개하고, 우아한형제들의 활용 방식, 캡슐화와 추상화에 대한 내용을 정리합니다.

이 책은 초보자부터 중급자, 고급 사용자까지 모두에게 유용한 실용적인 내용을 다루며, 실무에 바로 적용할 수 있는 풍부한 예제와 실습을 통해 타입스크립트의 핵심 개념과 활용법을 익힐 수 있습니다. 타입스크립트에 대한 전반적인 이해를 쌓고자 하는 개발자에게 강력히 추천하는 한 권입니다.

우아한 타입스크립트 with 리액트
 
우아한 타입스크립트 with 리액트
 
 

"우아한 타입스크립트 with 리액트" 도서는 초보자부터 중급자, 고급 사용자까지 모두에게 유용한 실용적인 내용을 다루며, 실무에 바로 적용할 수 있는 풍부한 예제와 실습을 통해 타입스크립트의 핵심 개념과 활용법을 익힐 수 있습니다. 타입스크립트에 대한 전반적인 이해를 쌓고자 하는 개발자에게 강력히 추천하는 한 권입니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

 


 

 

 

 

이번달에 접하게 된 책은 '우아한 타입스크립트 with 리액트' 라는 제목의 책입니다.

우아한 형제들에서 근무하고 계시는 프론트엔드 개발자분들께서 함께 집필한 책이기 때문에 관심이 많이 갔는데요.

책 표지에서도 '배달의민족 개발 사례로 살펴보는 우아한형제들의 타입스크립트와 리액트 활용법'이라고 설명하고 있습니다.

일반적으로라면 우아한 형제들에서 일하는 개발자분과 커피챗을 통해 나눌만한 얘기들을 책에서 확인할 수 있어서 재밌었습니다.

 

이 책은 웹 개발의 역사부터 시작해서 어떠한 문제를 해결하기 위해 타입스크립트가 탄생하게 되었는지에 대한 이야기로 시작하고 있습니다. 타입스크립트의 기본적인 문법을 살펴보고, 그 이후에 심화 타입을 살펴보면서 우아한 형제들에서는 어떻게 적용했는지, 그리고 리액트라는 라이브러리에서는 타입스크립트를 어떻게 적용해서 사용하고 있는지 코드 조각과 함께 설명하고 있습니다. 마지막에서는 타입스크립트에서의 객체지향에 대한 이야기를 꺼내고 있는데요. 리액트에서 객체지향을 어떻게 적용하고 있는지 살펴볼 수 있어서 고민해보기 좋은 주제였던 것 같습니다.

 

 

 

책을 다 읽어보고 느낀 점은 확실히 일반적인 개발 서적에서 예제를 들면서 개념을 설명하는 것 보다 우아한 타입스크립트에서는 실제 우아한형제들의 실용적인 예시로 타입스크립트와 리액트를 설명하고 있기 때문에 더 재미있고 효과적으로 책을 읽을 수 있다는 장점이 있는 것 같습니다. 다만 책 자체가 주니어 프론트엔드 개발자를 타겟팅하고 있다 보니 심화 내용을 그렇게 많이 다루지는 않는다는 점을 말씀드리면 될 것 같습니다.

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

1.jpg

 

 

현시대는 컴퓨터 프로그램이나 핸드폰 어플로 업무 및 일상생활을 하고있습니다. 그러면서 프로그램 개발이 우리에게 밀접하게 다가와서 학교에서나 취미로 프로그램 개발을 하는 사람들도 많습니다. 타입 스크립트란 자바 스크립트기반의 슈퍼셋 언어로 정적 타이핑을 제공하여 자바 스크립트를 사용했을 때 빈번하게 발생하는 타입 에러를 줄여주고 런타임 에러를 사전에 방지할 수 있어 안정성을 향상시켜 줍니다.

 

제가 이 책을 선택한 이유는 타입 스크립트의 기본 개념과 특징을 알려주고, 우아한 형제들의 사용 예시를 기반으로 실무에서 타입스크립트와 리액트를 어떻게 활용하는지 설명하여 주기 때문입니다.

 

이 책의 특성은 주니어 개발자들이 2년동안 타입스크립트에 대해 끊임없이 고민하고 탐구하며 책을 집필했기 때문에 좀더 공감하면서 실무적인 예시를 통해 유용한 인사이트를 얻을 수 있기 때문입니다.


구성

Chapter 1: 들어가며

Chapter 2: 타입

Chapter 3: 고급 타입

Chapter 4: 타입 확장하기/좁히기

Chapter 5: 타입 활용하기

Chapter 6: 타입 스크립트 컴파일

Chapter 7: 비동기 호출

Chapter 8: JSX에서 TSX

Chapter 9: 훅

Chapter 10: 상태 관리

Chapter 11: CSS-in-JS

Chapter 12: 타입 스크립트 프로젝트 관리

Chapter 13: 타입 스크립트와 객체 지향

파트별로 나누어 봤을때 책에서 나온 대로 1~2장은 타입 스크립트의 등장 배경과 제공하는 타입에 대해, 3~7장은 타입 스크립트 코드 작성법 및 활용방법에 대해, 8~10장은 타입 스크립트를 리액트에 적용시키는 방법에 대해, 11장은 자바 스크립트에서 CSS를 작성하는 방법에 대해, 12~13장은 타입 스크립트 프로젝트에서 유용하게 활용할 수 있는 개념과 팁과 객체 지향에 대해 설명하고 있습니다.


개인적인 생각으로 학습은 프론트엔드 개발자로 취업 및 이직을 희망하시는 분들께서는 우선 HTML, CSS, 자바스크립트, 리액트에 대해 학습하신 다음에 1장부터 시작하시면 좋을 것 같고 어느정도 경험이 있으신 분들(프로트엔드 개발자 2년차~)부터는 2장까지는 쭉 훓으시면서 타입스크립트의 타입에 대해 파악한다는 방식으로 보시고 3장부터 학습하시는 것이 좋을것 같습니다.​

 

개인적으로 약간의 단점이 어쩌면 욕심일수도 있는게 좀더 많은 실습 예제 및 비즈니스 케이스가 담겨있으면 더 좋았지 않았을까라는 아쉬움이 있습니다.


저의 리뷰를 읽어주셔서 감사합니다. 다음에는 좀더 유용하고 좋은 책으로 더 나은 리뷰를 통해 여러분께 책을 소개시켜드릴 수 있도록 더 노력하겠습니다.


감사합니다.


"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

다른 회사의 개발 문화와 개발 기술에 관심이 있는 와중에 우아한 형제들 웹프론트개발그룹의 "우아한 타입스크립트 with 리액트" 책을 읽어 보게 되었습니다. 

 

 

이미 주변에서는 리액트를 이용하여 프로젝트에 적용하고 있고 리액트와 타입스크립트를 활용한다는 것은 다른 책과 소스 리뷰를 통해 알고 있었습니다. "우아한 타입스크립트 with 리액트" 책은 배달의 민족 개발 사례를 타입스크립트와 리액트를 활용하여 어떻게 활용하는지 확인할 수 있는 책이라고 생각합니다. 

 

 

우선 "우아한 타입스크립트 with 리액트"는 타입스크립트를 중심적으로 공부할 수 있는 책이라고 생각합니다. 자바스크립트와 타입스크립트의 비교로 시작하여 각 타입스크립트의 문법적인 내용 및 기술에 대한것을 확인 및 공부할 수 있었습니다.

타입스크립트는 자바스크립트의 확장 언어로 자바스크립트를 알고 있다면 타입스크립트의 기술적 장점을 확인할 수 있습니다.

그리고 책의 후반부에는 리액트를 활용한 타입스크립트 활용 법 , 상태관리 , 프로젝트 관리 등등을 공부할 수 있게 구성되어 있어서 리액트와 타입스크립트를 활용해서 어떻게 프론트 기술에서 활용하는지 확인할 수 있습니다.

 

 

"우아한 타입스크립트 with 리액트" 책을 통해서 타입스크립트 , 리액트를 배우면서 우아한 형제 들에서 활용하는 문법 등을 각 팀의 팀원들의 활용 방식에 대한 의견 및 내용을 설명하는 것은 "우아한 타입스크립트 with 리액트" 책의 큰 장점이라고 생각합니다. 나와 맞는 환경이나 개발에 대한 사용법을 각 팀의 의견을 보면서 어떤 부분에 대해서 활용해야 할지 생각해 볼수 있을 것 같았습니다.

 

 

타입스크립트 , 타입스크립트&리액트 를 공부한다면 "우아한 타입스크립트 with 리액트" 책을 읽어 보면 좋을 것 같습니다.

우아한 기술에서 실제 사용하는 개발 방식을 공부해보는 것은 좋은 기회라고 생각합니다.

 

마지막으로 자바스크립트와 타입스크립트에 대한 혼란으로 책만 으로는 잘이해가 가지않았는데 직접 코딩을 해야지 관련 내용을 이해할 수 있습니다. 직접 코딩을 하면서 프론트 기술을 공부하는데 좋은 내용이라고 생각합니다.

프론트 엔지니어에게 읽어보기를 추천합니다.

 

 

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

 

React와 jQuery는 웹 개발에서 다른 접근 방식을 채택하는 두 가지 주요 라이브러리입니다.

jQuery는 DOM 조작을 간편하게 처리하며, 실제 DOM에 직접 작용하여 웹 페이지를 업데이트하는 방식으로 작동합니다.

 

이러한 방식은 간단한 웹 페이지에는 적합하지만, 복잡한 상태 관리와 컴포넌트 기반 웹 애플리케이션 개발에는 한계가 있을 수 있습니다.

한편, React는 가상 DOM(Virtual DOM)을 사용하여 선언적인 방식으로 웹 애플리케이션을 작성합니다.

 

React는 상태와 UI를 동기화하며, 컴포넌트 기반 아키텍처를 채택하여 애플리케이션을 모듈화하고 관리하기 쉽게 만들며

이로 인해 복잡한 애플리케이션 개발이 더 쉬워지고, 상태 관리 및 재사용성을 향상시킬 수 있습니다.

그러나 초기에 React를 접하면 이러한 새로운 개념과 접근 방식 때문에 어려움을 겪을 수 있습니다.

 

한빛미디어의 '우아한 타입스크립트 with 리액트'는 TypeScript와 React를 함께 다루는 책으로,

TypeScript를 사용하여 React 애플리케이션을 개발하는 방법을 상세하게 설명합니다.

 

프런트엔드 개발자를 준비하면서 웹개발을 할 때에 자바스크립트도 물론 필요하지만 비슷한 다른언어는 필수 적으로 배워야 한다고 생각한다. 실제로 일을 할 때 어떤 언어로 개발을 할지 잘 모르기 때문에 자바스크립트를 더불어 같이 배워야하는 언어라고 생각한다. 이 책은 HTML, CSS, 어느정도의 Java Script를 배운 사람이라면 어렵지 않고 웹개발을 배우고 싶은 사람이라면 공부해도 좋은 책이라고 생각이 든다. 꼭 초보자가 아니어도 다시한번 초심으로 돌아가 공부하고 싶은 사람이라도 배우면 좋은 책이라고 생각한다.

111.jpeg

 

 

타입스크립트의 장점이 뭘까? 

코드의 타입을 명시함으로써 가독성을 향상시키고, 컴파일 시 타입 검사를 하며 기존에 런타임에서 발생할 수 있는 오류를 사전에 방지할 수 있다. 

또한 코드의 타입을 공유함으로써 협엽의 효율성 또한 높일 수 있어서 이제는 웹 개발자라면 필수로 익혀야 할 기술이다. 

 

이런 기술을 가장 많이 쓰는건 누구일까?

프론트엔드 개발자와 Node.js를 쓰는 백엔드 개발자가 아닐까 싶다. 

그래서인지 이 책은 리액트를 활용하여 타입스크립트를 어떻게 쓰는지 다루는 책이다.

 

책을 읽어보면 아래와 같은 장점이 있다. 

  1. 현업에서 실무 경험이 풍부한 저자들, 즉 배달의 민족 개발자들이 실제 사용하는 타입스크립트와 리액트 코드를 바탕으로 작성되어 있다.
  2. 타입스크립트를 처음 접하는 사람들도 읽을 수 있게 되어 있고, SPA의 라이브러리인 리액트로 실습을 한다. 
  3. 실습 코드가 다양하기 때문에 하나씩 따라하며 이해해 나갈 수 있다.

 

실무진들이 써서 아무래도 코드의 설명이 자세하고, 중간중간 나와있는 노하우들이 많이 녹여져 있습니다. 

특히, 중간에 우형 이야기라고 해서 우아한이야기에의 Q&A형식으로 나와있는 답변은 간적접으로 현업에서 왜 이렇게 쓰는지 

알 수 있어 좋았습니다.