리액트는 컴포넌트라 불리는 조각들을 사용해 사용자 인터페이스를 자유롭게 만들 수 있는 라이브러리이다. 이 책을 읽고 나면 리액트 최신 버전인 리액트 18을 사용해 보다 나은 사용자 인터페이스를 만드는 다양한 사고 방식과 기법을 익힐 수 있을 것이다.

1장. 리액트 처음 사용하기
기술 요구 사항
선언적 프로그래밍과 명령적 프로그래밍의 차이
리액트 엘리먼트가 동작하는 방법
모든 것 버리기
자바스크립트 피로감 이해하기
리액트에 관한 오해
피로감 없이 리액트 시작하기
자바스크립트 생태계가 주는 이점
Create-리액트-App은 이제 그만, Vite 만나기!
정리
2장. 타입스크립트 소개
기술 요구 사항
타입스크립트의 기능
자바스크립트 코드를 타입스크립트로 변환하기
타입
인터페이스
인터페이스와 타입 확장하기
인터페이스와 타입 구현하기
인터페이스 병합하기
열거형
이름 공간
템플릿 리터럴
타입스크립트 구성 파일
정리
3장. 코드 정리하기
기술 요구 사항
JSX 사용하기
바벨
첫 번째 엘리먼트 만들기
DOM 엘리먼트와 리액트 컴포넌트
Props
자녀
HTML과의 차이점
전개 속성
템플릿 리터럴
일반적인 (공통) 패턴
코드 스타일링하기
EditorConfig
Prettier
ESLint
함수형 프로그래밍
1급 함수
순수성
불변성
커링
합성
정리
4장. 인기 있는 합성 패턴 살펴보기
기술 요구 사항
컴포넌트 간 통신하기
children prop 사용하기
컨테이너 패턴 및 프레젠테이셔널 패턴
고차 컴포넌트 이해하기
FunctionAsChild 이해하기
정리
5장. 브라우저를 위한 코드 작성하기
기술 요구 사항
폼 이해 및 구현하기
통제되지 않은 컴포넌트
통제된 컴포넌트
이벤트 다루기
refs 살펴보기
forwardRef 이해하기
애니메이션 구현하기
SVG 살펴보기
정리
6장. 컴포넌트를 아름답게 보이게 만들기
기술 요구 사항
자바스크립트에서의 CSS
인라인 스타일 이해하기와 구현하기
CSS 모듈 사용하기
Webpack 5
프로젝트 설정하기
로컬 범위 CSS
아토믹 CSS 모듈
styled-components 구현하기
정리
7장. 피해야 할 안티 패턴
기술 요구 사항
속성을 이용해 상태 초기화하기
인덱스를 key로 사용하기
DOM 엘리먼트에 속성 전파하기
정리
8장. 리액트 훅
기술 요구 사항
리액트 훅 소개
기존의 틀을 깨는 변화는 없다
State 훅 사용하기
훅 규칙
규칙 1: 톱 레벨에서만 훅을 호출한다
규칙 2: 리액트 함수에서만 훅을 호출한다
클래스 컴포넌트를 리액트 훅으로 마이그레이션하기
리액트 이펙트 이해하기
useEffect 이해하기
조건부로 이펙트 실행하기
useCallback, useMemo, memo 이해하기
useReducer 훅 이해하기
정리
9장. 리액트 라우터
기술 요구 사항
리액트 라우터 설치 및 구성하기
섹션 생성하기
라우트에 매개변수 추가하기
리액트 라우터 v6.4
리액트 라우터 로더
정리
10장. 리액트 18의 새로운 기능들
동시 모드
자동 배치
트랜지션
서버에서의 Suspense
신규 API
createRoot
hydrateRoot
renderToPipeableStream
신규 훅
useId
useTransition
useDeferredValue
useInsertionEffect
엄격한 모드
Node.js의 최신 기능들
실험적인 Fetch API
실험적인 test runner 모듈
실험적인 node watch
Node 18은 이제 장기 지원 버전이다(LTS)
정리
11장. 데이터 관리하기
기술 요구 사항
리액트 Context API 소개
첫 번째 컴포넌트 생성하기
프로바이더로 컴포넌트 감싸기
useContext를 사용해 컨텍스트 소비하기
SWR을 사용한 리액트 대기 도입하기
SWR 도입하기
Pokedex 만들기
리덕스 툴킷: 리덕스에 대한 현대적인 접근 방식
핵심 기능
시작하기
스토어 생성하기
슬라이스 생성하기
리듀서 조합하기
컴포넌트를 스토어와 연결하기
스토어를 리액트 애플리케이션과 통합하기
정리
12장. 서버 사이드 렌더링
기술 요구 사항
유니버설 애플리케이션 이해하기
SSR을 구현해야 하는 이유
SEO 구현하기
공통 코드 베이스
더 나은 성능
SSR의 복잡성 과소평가하지 말기
기본적인 SSR 예제 만들기
웹팩을 사용해 프로젝트 처음부터 구성하기
애플리케이션 생성하기
데이터 가져오기 구현하기
Next.js를 사용해 리액트 애플리케이션 생성하기
정리
13장. 실제 프로젝트를 통해 GraphQL 이해하기
기술 요구 사항
PostgreSQL, Apollo 서버, GraphQL, Sequelize,
JSON 웹 토큰을 사용해 백엔드 로그인 시스템 구축하기
Postgres 설치하기
PostgreSQL 데이터베이스 관리를 위한 최고의 도구들
백엔드 프로젝트 생성하기
.env 파일 구성하기
기본 config 파일 생성하기
Apollo 서버 구성하기
GraphQL 유형, 쿼리, 뮤테이션 정의하기
스칼라 타입
쿼리
뮤테이션
타입 정의 병합하기
리졸버 생성하기
getUsers 쿼리 생성하기
getUser 쿼리 생성하기
뮤테이션 생성하기
리졸버 병합하기
Sequelize ORM 사용하기
Sequelize에서 사용자 모델 생성하기
Sequelize를 PostgreSQL 데이터베이스에 연결하기
인증 함수
JWT 함수 생성하기
인증 함수 생성하기
타입과 인터페이스 정의하기
처음으로 프로젝트 실행하기
GraphQL 쿼리와 뮤테이션 테스팅하기
모델 검증 테스트하기와 사용자 질의하기
로그인 수행하기
Apollo 클라이언트를 사용해 프런트엔드 로그인 시스템 구현하기
웹팩 5 구성하기
타입스크립트 구성하기
Express 서버 구성하기
프런트엔드 구성 생성하기
사용자 미들웨어 생성하기
JWT 함수 생성하기
GraphQL 쿼리와 뮤테이션 생성하기
로그인 및 연결된 사용자를 처리하기 위한 사용자 컨텍스트 생성하기
Apollo 클라이언트 구성하기
애플리케이션 라우트 생성하기
페이지 생성하기
로그인 컴포넌트 생성하기
dashboard 컴포넌트 생성하기
로그인 시스템 테스트하기
정리
14장. 단일 저장소 아키텍처
기술 요구 사항
단일 저장소의 장점과 단일 저장소가 해결하는 문제들
NPM Workspaces를 사용해 단일 저장소 생성하기
단일 저장소에서 타입스크립트 구현하기
웹팩을 사용해 패키지를 컴파일하기 위한 devtools 패키지 생성하기
다양한 색상의 로그 생성하기
웹팩 공통 구성
웹팩 개발 구성
웹팩 프로덕션 구성
utils 패키지 생성하기
API 패키지 생성하기
사용자 공유 모델 생성하기
사용자 공유 GraphQL 타입 및 리졸버
커스텀 서비스 생성하기
서비스 구성 빌드하기
커스텀 모델 생성하기
모델 시드 생성하기
커스텀 GraphQL 타입과 리졸버 생성하기
모델 동기화하기와 Apollo 서버 시작하기
CRM 서비스 테스트하기
프런트엔드 패키지 생성하기
Sites 시스템 생성하기
페이지 스위처 생성하기
Login 시스템 생성하기
Sites 구성 생성하기
모든 것을 합치기
데모 시간
정리
15장. 애플리케이션 성능 개선하기
기술 요구 사항
조정이 동작하는 방법
키 사용하기
최적화 기법
도구와 라이브러리
불변성
바벨 플러그인
정리
16장. 테스팅과 디버깅
기술 요구 사항
테스팅의 이점 이해하기
Jest를 사용한 고통 없는 자바스크립트 테스팅
이벤트 테스트하기
Vitest 도입하기
Vitest 설치 및 구성하기
globals 활성화하기
인소스 테스팅
리액트 DevTools 사용하기
리덕스 DevTools 사용하기
정리
17장. 프로덕션으로 배포하기
기술 요구 사항
첫 번째 DigitalOcean Droplet 생성하기
DigitalOcean에 가입하기
첫 번째 Droplet 생성하기
Node.js 설치하기
깃, 깃허브 구성하기
Droplet 종료하기
nginx, PM2 및 도메인 구성하기
nginx 설치 및 구성하기
역프록시 서버 설정하기
Droplet에 도메인 추가하기
지속적인 통합을 위한 CircleCI 구현하기
CircleCI에 SSH 키 추가하기
CircleCI 구성하기
CircleCI에서 환경변수 생성하기
정리