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

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

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

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

권세진
사용자가선호할만한서비스를기획하는것을좋아하는프론트엔드개발자이다.새로운기술을빠르게접해보며검증하는것을즐긴다.우아한테크코스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.4ExhaustivenessChecking으로정확한타입분기유지하기

5장타입활용하기
5.1조건부타입
5.2템플릿리터럴타입활용하기
5.3커스텀유틸리티타입활용하기
5.4불변객체타입으로활용하기
5.5Record원시타입키개선하기

6장타입스크립트컴파일
6.1자바스크립트의런타임과타입스크립트의컴파일
6.2타입스크립트컴파일러의동작
6.3타입스크립트컴파일러의구조

7장비동기호출
7.1API요청
7.2API상태관리하기
7.3API에러핸들링
7.4API모킹

8장JSX에서TSX로
8.1리액트컴포넌트의타입
8.2타입스크립트로리액트컴포넌트만들기
8.3정리

9장훅
9.1리액트훅
9.2커스텀훅

10장상태관리
10.1상태관리
10.2상태관리라이브러리

11장CSS-in-JS
11.1CSS-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장타입스크립트와객체지향:타입스크립트와리액트환경에서객체지향을어떻게활용하고더나은방향으로발전시킬수있는지알아본다.