본문 바로가기

추천 검색어

실시간 인기 검색어

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

배달의민족 개발 사례로 살펴보는 우아한형제들의 타입스크립트와 리액트 활용법
우아한형제들 저자(글) · 김민태 감수
한빛미디어 · 2023년 10월 31일
9.2
10점 중 9.2점
(25개의 리뷰)
도움돼요 (45%의 구매자)
  • 우아한 타입스크립트 with 리액트 대표 이미지
    우아한 타입스크립트 with 리액트 대표 이미지
  • 우아한 타입스크립트 with 리액트 부가 이미지1
    우아한 타입스크립트 with 리액트 부가 이미지1
  • 우아한 타입스크립트 with 리액트 부가 이미지2
    우아한 타입스크립트 with 리액트 부가 이미지2
  • A4
    사이즈 비교
    210x297
    우아한 타입스크립트 with 리액트 사이즈 비교 183x235
    단위 : mm
01 / 04
무료배송 소득공제
10% 28,800 32,000
적립/혜택
1,600P

기본적립

5% 적립 1,600P

추가적립

  • 5만원 이상 구매 시 추가 2,000P
  • 3만원 이상 구매 시, 등급별 2~4% 추가 최대 1,600P
  • 리뷰 작성 시, e교환권 추가 최대 300원
배송안내
무료배송
배송비 안내
국내도서/외국도서
도서 포함 15,000원 이상 구매 시 무료배송
도서+사은품 또는 도서+사은품+교보Only(교보굿즈)

15,000원 미만 시 2,500원 배송비 부과

교보Only(교보배송)
각각 구매하거나 함께 20,000원 이상 구매 시 무료배송

20,000원 미만 시 2,500원 배송비 부과

해외주문 서양도서/해외주문 일본도서(교보배송)
각각 구매하거나 함께 15,000원 이상 구매 시 무료배송

15,000원 미만 시 2,500원 배송비 부과

업체배송 상품(전집, GIFT, 음반/DVD 등)
해당 상품 상세페이지 "배송비" 참고 (업체 별/판매자 별 무료배송 기준 다름)
바로드림 오늘배송
업체에서 별도 배송하여 1Box당 배송비 2,500원 부과

1Box 기준 : 도서 10권

그 외 무료배송 기준
바로드림, eBook 상품을 주문한 경우, 플래티넘/골드/실버회원 무료배송쿠폰 이용하여 주문한 경우, 무료배송 등록 상품을 주문한 경우
당일배송 오늘(2/24,월) 도착
기본배송지 기준
배송일자 기준 안내
로그인 : 회원정보에 등록된 기본배송지
로그아웃 : '서울시 종로구 종로1' 주소 기준
로그인정확한 배송 안내를 받아보세요!

이달의 꽃과 함께 책을 받아보세요!

1권 구매 시 결제 단계에서 적용 가능합니다.

알림 신청하시면 원하시는 정보를
받아 보실 수 있습니다.

키워드 Pick

키워드 Pick 안내

관심 키워드를 주제로 다른 연관 도서를 다양하게 찾아 볼 수 있는 서비스로, 클릭 시 관심 키워드를 주제로 한 다양한 책으로 이동할 수 있습니다.
키워드는 최근 많이 찾는 순으로 정렬됩니다.

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

작가정보

저자(글) 우아한형제들

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

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

권세진
사용자가 선호할 만한 서비스를 기획하는 것을 좋아하는 프론트엔드 개발자이다. 새로운 기술을 빠르게 접해보며 검증하는 것을 즐긴다. 우아한테크코스 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장 타입스크립트와 객체 지향
타입스크립트와 리액트 환경에서 객체 지향을 어떻게 활용하고 더 나은 방향으로 발전시킬 수 있는지 알아본다.

기본정보

상품정보 테이블로 ISBN, 발행(출시)일자 , 쪽수, 크기, 총권수을(를) 나타낸 표입니다.
ISBN 9791169211567
발행(출시)일자 2023년 10월 31일
쪽수 380쪽
크기
183 * 235 * 21 mm / 840 g
총권수 1권

Klover

구매 후 리뷰 작성 시, e교환권 200원 적립

10점 중 10점
/추천해요
저는 타입스크립트 입문자입니다. 만약 이 책을 읽고자하시는 분이 타입스크립트 입문자면 다른 책을 사길 권합니다. 하지만 만약 타입스크립트를 조금이라도 써보셨던 분이라면 굉장히 도움 될 책이 될 것 같습니다

입문자면 다른 책으로 공부하세요!!!!!!
10점 중 10점
/도움돼요
타입스크립트 공부에 도움되는 책입니다
10점 중 10점
/도움돼요
도움이 많이 됩니다
10점 중 10점
/집중돼요
인사이트가 있는 책입니다. 잘 읽을게요
10점 중 7.5점
/도움돼요
관심있게 잘 보고있습니다.
10점 중 10점
/도움돼요
회사에 리액트를 표준으로 가져가고 시니아개발자 온보딩을 하려고 구매했다.
10점 중 10점
/도움돼요
공부시작합니다 새로운시야
10점 중 10점
/도움돼요
타입 스크립트 구문이 일부
어렵고 이해안되는 부분이 있긴한데
그래도 많은 도움이 되네요
리뷰 썸네일

문장수집 (3)

문장수집 안내
문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여주는 교보문고의 새로운 서비스입니다. 마음을 두드린 문장들을 기록하고 좋은 글귀들은 "좋아요“ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보 없이 삭제될 수 있습니다.
리워드 안내
구매 후 90일 이내에 문장수집 작성 시 e교환권 100원을 적립해드립니다.
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.
판매가 5,000원 미만 상품의 경우 리워드 지급 대상에서 제외됩니다. (2024년 9월 30일부터 적용)

구매 후 리뷰 작성 시, e교환권 100원 적립

템플릿 리터럴 타입
우아한 타입스크립트 with 리액트
제네릭은 다양한 곳에 사용할 수 있다
우아한 타입스크립트 with 리액트

교환/반품/품절 안내

  • 반품/교환방법

    마이룸 > 주문관리 > 주문/배송내역 > 주문조회 > 반품/교환 신청, [1:1 상담 > 반품/교환/환불] 또는 고객센터 (1544-1900)
    * 오픈마켓, 해외배송 주문, 기프트 주문시 [1:1 상담>반품/교환/환불] 또는 고객센터 (1544-1900)
  • 반품/교환가능 기간

    변심반품의 경우 수령 후 7일 이내,
    상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내
  • 반품/교환비용

    변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담
  • 반품/교환 불가 사유

    1) 소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우
    (단지 확인을 위한 포장 훼손은 제외)
    2) 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
    예) 화장품, 식품, 가전제품(악세서리 포함) 등
    3) 복제가 가능한 상품 등의 포장을 훼손한 경우
    예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집
    4) 소비자의 요청에 따라 개별적으로 주문 제작되는 상품의 경우 ((1)해외주문도서)
    5) 디지털 컨텐츠인 ebook, 오디오북 등을 1회이상 ‘다운로드’를 받았거나 '바로보기'로 열람한 경우
    6) 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우
    7) 전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에 해당되는 경우
    8) 세트상품 일부만 반품 불가 (필요시 세트상품 반품 후 낱권 재구매)
    9) 기타 반품 불가 품목 - 잡지, 테이프, 대학입시자료, 사진집, 방통대 교재, 교과서, 만화, 미디어전품목, 악보집, 정부간행물, 지도, 각종 수험서, 적성검사자료, 성경, 사전, 법령집, 지류, 필기구류, 시즌상품, 개봉한 상품 등
  • 상품 품절

    공급사(출판사) 재고 사정에 의해 품절/지연될 수 있으며, 품절 시 관련 사항에 대해서는 이메일과 문자로 안내드리겠습니다.
  • 소비자 피해보상 환불 지연에 따른 배상

    1) 상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은 소비자분쟁 해결 기준 (공정거래위원회 고시)에 준하여 처리됨
    2) 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의 소비자 보호에 관한 법률에 따라 처리함

상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)

기분 좋은 발견

이 분야의 베스트

이 분야의 신간

TOP