모던 리액트 Deep Dive - 위키북스 프로그래밍 & 프랙티스 시리즈 35

김용찬

저자:김용찬
동국대학교무역학과와한국과학기술원기술경영전문대학원석사과정을졸업하고삼성SDS,카카오,트리플(현인터파크)에서각각풀스택및프런트엔드개발자로근무했다.현재네이버파이낸셜유저플랫폼에서프런트엔드개발자로근무하고있다.그리고프런트엔드기술블로그(yceffort.kr)도함께운영하고있다.

들어가며
__왜리액트인가?
__리액트의역사
__2010년대프런트엔드개발환경을향한페이스북의도전
__BoltJS의등장과한계
__페이스북팀의대안으로떠오른리액트
__리액트에대한회의적인의견과비판
__드디어빛을보는리액트
__리액트의현재와미래

01장:리액트개발을위해꼭알아야할자바스크립트
1.1자바스크립트의동등비교
__1.1.1자바스크립트의데이터타입
__1.1.2값을저장하는방식의차이
__1.1.3자바스크립트의또다른비교공식,Object.is
__1.1.4리액트에서의동등비교
__1.1.5정리
1.2함수
__1.2.1함수란무엇인가?
__1.2.2함수를정의하는4가지방법
__1.2.3다양한함수살펴보기
__1.2.4함수를만들때주의해야할사항
__1.2.5정리
1.3클래스
__1.3.1클래스란무엇인가?
__1.3.2클래스와함수의관계
__1.3.3정리
1.4클로저
__1.4.1클로저의정의
__1.4.2변수의유효범위,스코프
__1.4.3클로저의활용
__1.4.4주의할점
__1.4.5정리
1.5이벤트루프와비동기통신의이해
__1.5.1싱글스레드자바스크립트
__1.5.2이벤트루프란?
__1.5.3태스크큐와마이크로태스크큐
__1.5.4정리
1.6리액트에서자주사용하는자바스크립트문법
__1.6.1구조분해할당
__1.6.2전개구문
__1.6.3객체초기자
__1.6.4Array프로토타입의메서드:map,filter,reduce,forEach
__1.6.5삼항조건연산자
__1.6.6정리
1.7선택이아닌필수,타입스크립트
__1.7.1타입스크립트란?
__1.7.2리액트코드를효과적으로작성하기위한타입스크립트활용법
__1.7.3타입스크립트전환가이드
__1.7.4정리

02장:리액트핵심요소깊게살펴보기
2.1JSX란?
__2.1.1JSX의정의
__2.1.2JSX예제
__2.1.3JSX는어떻게자바스크립트에서변환될까?
__2.1.4정리
2.2가상DOM과리액트파이버
__2.2.1DOM과브라우저렌더링과정
__2.2.2가상DOM의탄생배경
__2.2.3가상DOM을위한아키텍처,리액트파이버
__2.2.4파이버와가상DOM
__2.2.5정리
2.3클래스형컴포넌트와함수형컴포넌트
__2.3.1클래스형컴포넌트
__2.3.2함수형컴포넌트
__2.3.3함수형컴포넌트vs.클래스형컴포넌트
__2.3.4정리
2.4렌더링은어떻게일어나는가?
__2.4.1리액트의렌더링이란?
__2.4.2리액트의렌더링이일어나는이유
__2.4.3리액트의렌더링프로세스
__2.4.4렌더와커밋
__2.4.5일반적인렌더링시나리오살펴보기
__2.4.6정리
2.5컴포넌트와함수의무거운연산을기억해두는메모이제이션
__2.5.1주장1:섣부른최적화는독이다,꼭필요한곳에만메모이제이션을추가하자
__2.5.2주장2:렌더링과정의비용은비싸다,모조리메모이제이션해버리자
__2.5.3결론및정리

03장:리액트훅깊게살펴보기
3.1리액트의모든훅파헤치기
__3.1.1useState
__3.1.2useEffect
__3.1.3useMemo
__3.1.4useCallback
__3.1.5useRef
__3.1.6useContext
__3.1.7useReducer
__3.1.8useImperativeHandle
__3.1.9useLayoutEffect
__3.1.10useDebugValue
__3.1.11훅의규칙
__3.1.12정리
3.2사용자정의훅과고차컴포넌트중무엇을써야할까?
__3.2.1사용자정의훅
__3.2.2고차컴포넌트
__3.2.3사용자정의훅과고차컴포넌트중무엇을써야할까?
__3.2.4정리

04장:서버사이드렌더링
4.1서버사이드렌더링이란?
__4.1.1싱글페이지애플리케이션의세상
__4.1.2서버사이드렌더링이란?
__4.1.3SPA와SSR을모두알아야하는이유
__4.1.4정리
4.2서버사이드렌더링을위한리액트API살펴보기
__4.2.1renderToString
__4.2.2renderToStaticMarkup
__4.2.3renderToNodeStream
__4.2.4renderToStaticNodeStream
__4.2.5hydrate
__4.2.6서버사이드렌더링예제프로젝트
__4.2.7정리
4.3Next.js톺아보기
__4.3.1Next.js란?
__4.3.2Next.js시작하기
__4.3.3DataFetching
__4.3.4스타일적용하기
__4.3.5_app.tsx응용하기
__4.3.6next.config.js살펴보기
__4.3.7정리

05장:리액트와상태관리라이브러리
5.1상태관리는왜필요한가?
__5.1.1리액트상태관리의역사
__5.1.2정리
5.2리액트훅으로시작하는상태관리
__5.2.1가장기본적인방법:useState와useReducer
__5.2.2지역상태의한계를벗어나보자:useState의상태를바깥으로분리하기
__5.2.3useState와Context를동시에사용해보기
__5.2.4상태관리라이브러리Recoil,Jotai,Zustand살펴보기
__5.2.5정리

06장:리액트개발도구로디버깅하기
6.1리액트개발도구란?
6.2리액트개발도구설치
6.3리액트개발도구활용하기
__6.3.1컴포넌트
__6.3.2프로파일러
6.4정리

07장:크롬개발자도구를활용한애플리케이션분석
7.1크롬개발자도구란?
7.2요소탭
__7.2.1요소화면
__7.2.2요소정보
7.3소스탭
7.4네트워크탭
7.5메모리탭
__7.5.1자바스크립트인스턴스VM선택
__7.5.2힙스냅샷
__7.5.3타임라인할당계측
__7.5.4할당샘플링
7.6Next.js환경디버깅하기
__7.6.1Next.js프로젝트를디버그모드로실행하기
__7.6.2Next.js서버에트래픽유입시키기
__7.6.3Next.js의메모리누수지점확인하기
7.7정리

08장:좋은리액트코드작성을위한환경구축하기
8.1ESLint를활용한정적코드분석
__8.1.1ESLint살펴보기
__8.1.2eslint-plugin과eslint-config
__8.1.3나만의ESLint규칙만들기
__8.1.4주의할점
__8.1.5정리
8.2리액트팀이권장하는리액트테스트라이브러리
__8.2.1ReactTestingLibrary란?
__8.2.2자바스크립트테스트의기초
__8.2.3리액트컴포넌트테스트코드작성하기
__8.2.4사용자정의훅테스트하기
__8.2.5테스트를작성하기에앞서고려해야할점
__8.2.6그밖에해볼만한여러가지테스트
__8.2.7정리

09장:모던리액트개발도구로개발및배포환경구축하기
9.1Next.js로리액트개발환경구축하기
__9.1.1create-next-app없이하나씩구축하기
__9.1.2tsconfig.json작성하기
__9.1.3next.config.js작성하기
__9.1.4ESLint와Prettier설정하기
__9.1.5스타일설정하기
__9.1.6애플리케이션코드작성
__9.1.7정리
9.2깃허브100%활용하기
__9.2.1깃허브액션으로CI환경구축하기
__9.2.2직접작성하지않고유용한액션과깃허브앱가져다쓰기
__9.2.3깃허브Dependabot으로보안취약점해결하기
__9.2.4정리
9.3리액트애플리케이션배포하기
__9.3.1Netlify
__9.3.2Vercel
__9.3.3DigitalOcean
__9.3.4정리
9.4리액트애플리케이션도커라이즈하기
__9.4.1리액트앱을도커라이즈하는방법
__9.4.2도커로만든이미지배포하기
__9.4.3정리

10장:리액트17과18의변경사항살펴보기
10.1리액트17버전살펴보기
__10.1.1리액트의점진적인업그레이드
__10.1.2이벤트위임방식의변경
__10.1.3importReactfrom‘reac’가더이상필요없다:새로운JSXtransform
__10.1.4그밖의주요변경사항
__10.1.5정리
10.2리액트18버전살펴보기
__10.2.1새로추가된훅살펴보기
__10.2.2react-dom/client
__10.2.3react-dom/server
__10.2.4자동배치(AutomaticBatching)
__10.2.5더욱엄격해진엄격모드
__10.2.6Suspense기능강화
__10.2.7인터넷익스플로러지원중단에따른추가폴리필필요
__10.2.8그밖에알아두면좋은변경사항
__10.2.9정리

11장:Next.js13과리액트18
11.1app디렉터리의등장
__11.1.1라우팅
11.2리액트서버컴포넌트
__11.2.1기존리액트컴포넌트와서버사이드렌더링의한계
__11.2.2서버컴포넌트란?
__11.2.3서버사이드렌더링과서버컴포넌트의차이
__11.2.4서버컴포넌트는어떻게작동하는가?
11.3Next.js에서의리액트서버컴포넌트
__11.3.1새로운fetch도입과getServerSideProps,getStaticProps,getInitialProps의삭제
__11.3.2정적렌더링과동적렌더링
__11.3.3캐시와mutating,그리고revalidating
__11.3.4스트리밍을활용한점진적인페이지불러오기
11.4웹팩의대항마,터보팩의등장(beta)
11.5서버액션(alpha)
__11.5.1form의action
__11.5.2input의submit과image의formActio