이책에서다루는내용
React18및노드19의기능과친숙해진다.
타입스크립트의기본/고급기능들에관해살펴본다.
다양한패턴과기법들을적용해컴포넌트사이에통신을수행한다.
단일저장소아키텍처에관해살펴본다.
서버사이드렌더링을사용해애플리케이션을빠르게로드한다.
종합적인테스트셋을작성해강건하고유지보수할수있는코드를생성한다.
React컴포넌트를스타일링하고최적화함으로써고성능의애플리케이션을빌드한다.
이책의대상독자
React를더욱잘이해하고이를실세계의애플리케이션개발에적용하고자하는웹개발자를위해썼다.React및자바스크립트에대한중간수준의경험을가졌다고가정한다.
이책의구성
1장,‘React처음사용하기’에서는React를이해하기위한여정을시작한다.여기에서는선언적코드(declarativecode)를작성하고컴포넌트와React의엘리먼트(element)를구분해본다.로직과React의템플릿을조합한이유에관해논의한다.다소논란의여지가있을수있지만궁극적으로는이익이되는결정이다.매우빠르게진화하는자바스크립트의세계에서압도되는느낌을받을수있는가능성을알고있으므로작고관리가능한단계를택함으로써피로를피한다.새로운create-vite도구를소개하고React를사용해직접코딩할수있는경험을준비하면서1장을마무리한다.
2장,‘타입스크립트소개’에서는타입스크립트의기본을배운다.간단한타입과인터페이스생성하기,열거형과이름공간및템플릿리터럴사용하기를포함한다.그리고첫번째타입스크립트구성파일(tsconfig.json)을설정하고이를두부분(공통부분과특정부분-단일저장소(MonoRepo)를사용해작업할때특히편리하다)으로나누는방법에관해살펴본다
3장,‘코드정리하기’에서는JSX파일을작성하는방법과그기능을알아본다.아울러Prettier와ESLint를사용해서코드를깔끔하게유지하고실수를방지하는방법에관해알아본다.또한함수형프로그래밍에관해학습한다.함수형프로그래밍을사용하면코드를쉽게관리하고테스트할수있다.
4장,‘인기있는합성패턴살펴보기’에서는props를사용해재사용할수있는컴포넌트들이함께더잘동작하도록만드는방법을익힌다.props를사용하면컴포넌트들을분리하고잘정의된상태로유지할수있다.컴포넌트를조직화하는두가지일반적인방법인컨테이너패턴(containerpattern)과프레젠테이셔널패턴(presentationalpattern)에관해살펴본다.이러한방법을사용해컴포넌트분리의규칙과형태를유지한다.또한고차컴포넌트(HOC,HigerOrderComponent)를사용해서컴포넌트사이의의존성을너무높이지않으면서컨텍스트를다루는방법,FunctionasChildren패턴을사용해실시간으로컴포넌트를생성하는방법을배운다.
5장,‘브라우저를위한코드작성하기’에서는웹브라우저에서React를사용해폼을생성하고,이벤트를처리하고,SVG를움직이는방법을관찰한다.DOM노드에쉽게접근할수있는useRef훅에관해학습한다.React는간단하고직관적인접근방식을제공해복잡한웹앱을좀더쉽게관리하게해준다.또한React에서는필요한경우DOM노드에직접접근할수있으므로React를다른라이브러리와간단하게사용할수있다.
6장,‘컴포넌트를아름답게보이게만들기’에서는React에서의스타일링에관해살펴본다.메타(Meta)에서의경험을예로,큰프로젝트에서CSS를작성하는작업의문제점에관해살펴본다.이후React컴포넌트에스타일을직접작성하는방법을알아본다.이를활용하면코드를깨끗하고읽기쉽게유지할수있다.동시에이방법의제한점에관해살펴보고그와동시에CSS모듈이라부르는다른스타일링방법에관해살펴본다.이방법을사용하면CSS를별도의파일에작성하면서도개별컴포넌트에대한스타일적용범위를유지할수있다.마지막으로React스타일링에관한인기있는라이브러리인styled-components에관해살펴본다.6장을마치면React앱을멋지게보이도록만들수있는많은도구를갖게될것이다.
7장,‘피해야할안티패턴’에서는웹앱의속도를낮추고엉망으로만들수있는네가지컴포넌트사용방법에관해논의한다.각방법마다예시를통해무엇이잘못될수있으며어떻게수정할수있는지살펴본다.상태를설정하기위해속성을사용하는것이해당상태와해당속성사이에문제를일으키는이유를학습한다.또한잘못된key속성을사용함으로써React가컴포넌트를업데이트하는방법을망칠수있음에관해살펴본다.마지막으로DOM엘리먼트에비표준속성을퍼뜨리는것이나쁜아이디어인이유를살펴본다.이문제를이해함으로써React를좀더효과적으로활용하면서도공통적인실수들을피할수있다.
8장,‘React훅’에서는새로운React훅에관해학습하며즐거운시간을보낼것이다.React훅이동작하는방법,데이터를가져오는방법,클래스컴포넌트를훅으로변환하는방법에관해학습한다.또한effects,memo,useMemo,useCallback의차이점에관해서도익힌다.마지막으로useReducer훅이작동하는방법과react-redux와의차이점에관해서도알아본다.이모든것으로인해우리가만드는React컴포넌트는더빠르고나아질것이다.
9장,‘React라우터’에서는React라우터에관해학습한다.React라우터를React와함께사용해싱글페이지애플리케이션안에서페이지간이동을관리할수있다.React자체적으로는이를수행하지않기때문에React라우터를사용한다.React라우터를사용해앱이어떻게다른URL에대해응답하고탐색을관리하는지살펴본다.9장을마치고나면React라우터가작동하는방법과프로젝트에서의사용방법에관해알게될것이다.또한react-router,react-router-dom,react-router-native패키지들의차이점과React라우터설정방법,〈Routes〉컴포넌트추가방법,라우트에매개변수를추가하는방법에관한차이점도배울것이다.
10장,‘React18의새로운기능들’에서는새롭게개선된React18에관해살펴본다.React18은멋진대화형앱을더욱쉽게구축할수있도록다양한기능을제공한다.자동상태업데이트그룹화,동시렌더링,데이터취득을위한대기,더나은오류처리및새로운컴포넌트유형을사용해매력적이고빠른앱을만들수있다.React를사용한다면React18로업그레이드를고려하는것이좋다.또한웹프로젝트를더욱개선할수있는노드18과19의주요한새로운기능에관해서도살펴본다.
11장,‘데이터관리하기’에서는ReactContextAPI에관해배우고ReactSuspense와SWR을함께사용하는방법을살펴본다.ContextAPI의기본개념을학습하며,여기에는컨텍스트생성및사용방법과useContext훅을사용해이를더욱간편하게만드는방법이포함된다.또한ReactSuspense에관해살펴보고,더부드러운사용자경험을위해로딩상태를잘처리하는데어떻게도움이되는지확인한다.더불어ReactSuspense와함께사용해서데이터를더쉽게가져오고캐시하는데도움이되는SWR에관해서도학습한다.마지막으로새로운리덕스툴킷(ReduxToolkit)의사용방법을익힌다.이들을활용하면더욱빠르고사용자친화적인React앱을구축할수있다.
12장,‘서버사이드렌더링’에서는React를사용한서버사이드렌더링(SSR,Server-SideRendering)에관해살펴보면서여정을마무리한다.이제여러분은SSR을사용해앱을만드는방법과이것이검색엔진최적화(SEO,SearchEngineOptimization),소셜공유및성능향상과같은목적을위해유용한이유에관해알게될것이다.서버에서데이터를로드하고HTML템플릿에서넣음으로써클라이언트사이드앱이브라우저에서시작되는시점에이미준비되도록하는방법을배운다.마지막으로Next.js와같은도구를사용해어떻게SSR설정을더쉽게하고,추가코드양을줄이며,어려운부분을감출수있는지알게될것이다.
13장,‘실제프로젝트를통해GraphQL이해하기’에서는GraphQL에관해학습한다.GraphQL은일반적인RESTAPI와달리정확히필요한내용만요청할수있는멋진도구로,API및데이터를효율적으로다룰수있게도와준다.GraphQL을사용해서실제프로젝트를위한간단한로그인및사용자등록시스템을만들것이다.PostgreSQL설치,.env파일을사용한환경변수설정,Apollo서버설정,GraphQL쿼리와뮤테이션생성,리졸버resolver조작,Sequelize모델생성,JWT사용,GraphQLPlayground사용및인증방법에관해학습한다.13장을마치면자신의프로젝트에서GraphQL을사용하는방법을알게될것이다.
14장,‘단일저장소아키텍처’에서는단일저장소(MonoRepo),Mono-Repository에관해설명한다.일반적으로앱을구축할때하나의앱,하나의깃저장소및하나의빌드결과물을갖는다.하지만많은조직은단일저장소를사용해서모든앱,컴포넌트및라이브러리를쉽게개발한다.이것이바로단일저장소이며작은여러바구니가아니라큰하나의바구니에모든코드를모아두는것처럼생각할수있다.이를활용하면모든것을더쉽게업데이트할수있으며시간을절약할수있다.단일저장소를사용해새버전을매번출시하지않고도코드리팩터링을더쉽게만들고,팀워크를개선하며,패키지종속성을업데이트하는데도움이되는방법에관해서논의할것이다.
15장,‘애플리케이션성능개선하기’에서는여러분의앱을좀더부드럽고빠르게동작시켜더나은사용자경험을만드는기법을탐색한다.React가앱화면을업데이트하는방법과키를사용해서효율성을개선하는데도움을얻는방법에관해자세히살펴본다.앱성능을향상시키기위해잘구조화된작업중심컴포넌트의중요성을발견하게될것이다.또한불변성(immutability)의개념과불변성이React.memo및shallowCompare가효과적으로작동하는데얼마나중요한지알아볼것이다.마지막으로애플리케이션을더욱빠르게만드는다양한도구와라이브러리를소개한다.15장에서는앱의속도와성능을향상시키기위한가치있는지식을제공하는것을목적으로한다.
16장,‘테스팅과디버깅’에서는테스팅에관해배운다.테스트가중요한이유,React컴포넌트가제대로작동하는지확인하는데사용하는다양한도구와기술을탐험한다.React테스팅라이브러리(ReactTestingLibrary)와Jest같은라이브러리를사용해테스트를작성하고실행하는방법에관해학습하고,고차컴포넌트나다양한필드가있는템플릿과같은애플리케이션의복잡한부분의테스트방법에관해서도살펴본다.또ReactDevTools,리덕스DevTools같은도구를사용해더나은앱을개발하는데도움을받는방법도익힐것이다.16장을마치면효과적인테스트를통해앱을원활하게유지하는방법을견고하게이해하게될것이다.
17장,‘프로덕션으로배포하기’에서는여러분이구축한React앱을세상에공개한다!이를위해DigitalOcean이라는클라우드서비스를사용할것이다.Node.js와nginx를사용해서버에서앱을실행하는방법을학습하고,이를위해DigitalOcean의Ubuntu서버를활용할것이다.DigitalOceanDroplet의설정및구성,도메인에대한연결방법을안내할것이다.또한변경사항의양에관계없이항상사용자에게준비된상태로앱을유지할수있도록
