[목 차]
▣ 01장: 소개
1.1 리액트와 자바스크립트
__1-1-1 자바스크립트의 역사
__1-1-2 jQuery에서 차세대 라이브러리로
__1-1-3 주요 자바스크립트 프레임워크
__1-1-4 리액트의 특징
1.2 리액트 앱을 개발/실행하기 위한 기본 환경
__1-2-1 Create React App이란?
__1-2-2 Node.js 설치하기
__1-2-3 비주얼 스튜디오 코드(VSCode) 설치
1.3 모던 자바스크립트의 기본
__1-3-1 변수 선언
__1-3-2 주요 리터럴 표현
__1-3-3 구조 분해 할당
__1-3-4 매개변수 기본값, 가변 인자 함수
__1-3-5 옵셔널 체이닝 연산자(?.)
__1-3-6 모듈
▣ 02장: 리액트의 기본
2.1 처음 시작하는 리액트
__2-1-1 리액트 앱 만들기
__2-1-2 부록: Npm Scripts
2.2 샘플 앱 확인하기
__2-2-1 메인 페이지 준비 - index.html
__2-2-2 앱 실행을 위한 진입점 - index.js
__2-2-3 보충: Strict 모드
__2-2-4 페이지를 구성하는 UI 구성 요소 - App.js
__2-2-5 보충: 앱 리렌더링
__2-2-6 함수 컴포넌트와 클래스 컴포넌트
2.3 JSX의 기본
__2-3-1 JSX의 규칙
__2-3-2 JSX에 자바스크립트 표현식 삽입하기 - {...} 구문
__2-3-3 {...} 구문으로 속성 값 설정하기
__2-3-4 스타일시트 설정하기 - style 속성
__2-3-5 JSX 식의 실체 이해하기
▣ 03장: 컴포넌트 개발 (기본)
3.1 컴포넌트를 뒷받침하는 기본 개념 - Props와 State
__3-1-1 Props/State란?
__3-1-2 Props의 기본
__3-1-3 이벤트 처리의 기본
__3-1-4 State의 기본
__3-1-5 React Developer Tools 소개
3.2 조건 분기 및 반복 처리
__3-2-1 배열 나열하기 - 반복 처리
__3-2-2 식의 진위 여부에 따라 표시 전환 - 조건부 분기
__3-2-3 보충: 스타일 선택적으로 적용하기
3.3 Props/State에 대한 이해도 높이기
__3-3-1 컴포넌트의 하위 콘텐츠를 템플릿에 반영하기
__3-3-2 여러 children 넘겨주기
__3-3-3 children에 대한 매개변수 전달하기
__3-3-4 프로퍼티 타입 검증(PropTypes)
__3-3-5 State 값 업데이트를 위한 두 가지 구문
__3-3-6 자식 컴포넌트에서 부모 컴포넌트로의 정보 전달
3.4 고급 이벤트 처리
__3-4-1 리액트에서 사용할 수 있는 이벤트
__3-4-2 이벤트 객체
__3-4-3 이벤트 전파 방지
__3-4-4 이벤트 핸들러 옵션 설정하기
▣ 04장: 컴포넌트 개발 (폼)
4.1 폼 조작의 기본
__4-1-1 폼 관리의 기본
__4-1-2 주의: change 이벤트 발생 타이밍
__4-1-3 비제어 컴포넌트를 통한 폼 관리
__4-1-4 입력 요소에 따른 폼 구현 예시
4.2 State의 구조화된 데이터 업데이트
__4-2-1 스프레드 구문의 의미
__4-2-2 Immer 라이브러리를 통한 개선
__4-2-3 배열 업데이트
4.3 검증 기능 구현 - React Hook Form
__4-3-1 React Hook Form의 기본
__4-3-2 자체 검증 규칙 구현하기
__4-3-3 폼의 상태에 따라 표시 제어하기
__4-3-4 검증 라이브러리와 연동하기
__4-3-5 Yup에서 자체 검증 규칙 구현하기
__4-3-6 Yup으로 입력값 변환하기
__4-3-7 Yup의 오류 메시지를 한국어로 번역하기
▣ 05장: 컴포넌트 개발 (응용)
5.1 임베디드 컴포넌트
__5-1-1 컴포넌트 렌더링 대기 감지 - Suspense 컴포넌트 (1)
__5-1-2 비동기 처리 종료 기다리기 - Suspense 컴포넌트 (2)
__5-1-3 컴포넌트 렌더링 시간 측정하기 - Profiler 컴포넌트
5.2 컴포넌트 개발에서의 스타일 정의
__5-2-1 JSX 식에 스타일시트 삽입하기 - Styled JSX
__5-2-2 표준 태그를 확장하여 스타일 태그 정의하기 - Styled Components
__5-2-3 다양한 표기법을 지원하는 CSS-in-JS 라이브러리 - Emotion
5.3 컴포넌트에 대한 기타 주제
__5-3-1 컴포넌트 하위의 콘텐츠를 임의의 영역에 렌더링하기 - 포털
__5-3-2 컴포넌트에서 발생한 오류 처리하기 - Error Boundary
▣ 06장: 리액트 라이브러리 활용하기
6.1 전형적인 UI 구현하기 - MUI
__6-1-1 MUI의 주요 컴포넌트
__6-1-2 MUI의 기본
__6-1-3 드로워 메뉴 구현하기
__6-1-4 페이지 내 배치를 조정하는 레이아웃 기능 활용하기 - 그리드
__6-1-5 MUI 스타일 사용자 정의하기 - 테마
__6-1-6 라이트/다크 모드에 따라 테마 전환하기
__6-1-7 React Hook Form + MUI 연동하기
6.2 컴포넌트의 외형/동작을 카탈로그로 표시하기 - Storybook
__6-2-1 Storybook 설치
__6-2-2 스토리 확인
__6-2-3 [Controls] 탭의 제어
__6-2-4 [Actions] 탭의 제어
__6-2-5 [Interactions] 탭의 제어
__6-2-6 스토리 표시 사용자 지정하기
__6-2-7 Storybook에 문서 추가하기
6.3 외부 서비스에서 데이터 가져오기 - React Query
__6-3-1 React Query를 사용하지 않는 예시
__6-3-2 React Query를 이용한 예제
__6-3-3 Suspense/Error Boundary와의 연동
▣ 07장: 훅 활용
7.1 컴포넌트 렌더링/파기 시 처리 수행하기 - 부작용 훅
__7-1-1 useEffect 함수의 기초
__7-1-2 인수 deps의 의미
__7-1-3 예시: 부작용 훅을 이용한 타이머 준비
__7-1-4 렌더링 시 동기적으로 처리 수행하기
7.2 다양한 값에 대한 참조 준비하기 - useRef 함수
__7-2-1 함수 컴포넌트에서 ‘인스턴스 변수’ 정의하기
__7-2-2 Ref를 컴포넌트 하위 요소로 전달(포워드)하기
__7-2-3 함수 컴포넌트 하위 메서드 참조하기
__7-2-4 콜백 함수를 ref 속성에 전달하기 - 콜백 Ref
7.3 상태와 처리를 한꺼번에 관리하기 - useReducer 함수
__7-3-1 useState 훅의 문제점
__7-3-2 useReducer 관련 키워드
__7-3-3 useReducer 훅의 기초
__7-3-4 Reducer를 여러 Action 타입에 대응하기
__7-3-5 State 초깃값 생성 시 주의 사항
7.4 여러 계층의 컴포넌트에서 값 전달하기 - useContext 함수
__7-4-1 컨텍스트의 기본
__7-4-2 예: 컨텍스트를 이용한 테마 전환 구현하기
7.5 상태 관리 라이브러리 - Recoil
__7-5-1 Recoil이란?
__7-5-2 Recoil의 기본
__7-5-3 Todo 목록을 Recoil 앱에 대응하기
__7-5-4 Todo 목록 개선하기
7.6 함수 또는 그 결과를 메모하기 - memo/useMemo/useCallback 함수
__7-6-1 메모화를 위한 샘플
__7-6-2 함수 결과 메모하기 - useMemo 함수
__7-6-3 컴포넌트 리렌더링 억제하기 - memo 함수
__7-6-4 함수 정의 자체를 캐싱하기 - useCallback 함수
7.7 우선순위가 낮은 State 업데이트 구분하기 - useTransition 함수
__7-7-1 여러 State에 따라 페이지를 제어하는 예시
__7-7-2 useTransition 함수를 이용한 렌더링의 우선순위 지정
__7-7-3 트랜지션 상태에 따라 처리 할당하기
__7-7-4 특정 값의 ‘지연 버전’ 생성하기 - useDeferredValue 함수
7.8 훅 자체 제작
__7-8-1 커스텀 훅 정의
__7-8-2 커스텀 훅 사용
▣ 08장: 라우팅
8.1 리액트 라우터의 기본
__8-1-1 라우팅 테이블 정의
__8-1-2 보충: 라우터 동작 옵션
__8-1-3 루트 정의를 태그 형식으로 표현하기
8.2 라우터 지원 링크 설치
__8-2-1 링크 설치의 기본
__8-2-2 내비게이션 메뉴에 특화된 〈NavLink〉 요소
__8-2-3 〈Link〉 요소에서 사용할 수 있는 주요 속성
__8-2-4 보충: 프로그램 내 페이지 이동
8.3 라우터를 통해 정보를 전달하는 방식
__8-3-1 경로의 일부를 매개변수로 전달하기 – 루트 매개변수
__8-3-2 루트 매개변수의 다양한 표현
__8-3-3 쿼리 정보 가져오기
__8-3-4 개별 링크에서 임의의 정보 전달하기 - state 속성
__8-3-5 상위 루트에서 하위 루트로 값 전달하기 - Outlet Context
__8-3-6 루트별 정보 가져오기 - handle 속성
8.4 Route 컴포넌트 속성
__8-4-1 루트 랜더링 시 예외 포착하기 - errorElement 속성
__8-4-2 컴포넌트에서 사용할 데이터 준비하기 - loader 속성
__8-4-3 루트에서 발생한 액션 처리하기 - action 속성
__8-4-4 컴포넌트 지연 로드하기 - lazy 속성
8.5 라우팅과 관련된 기타 기법
__8-5-1 현재 페이지의 링크 해제하기
__8-5-2 스크롤 위치 복원하기 - 〈ScrollRestoration〉 요소
▣ 09장: 테스트
9.1 단위 테스트
__9-1-1 Jest의 기본
__9-1-2 컴포넌트 테스트
__9-1-3 이벤트가 포함된 테스트
__9-1-4 자식 컴포넌트 모의화
__9-1-5 타이머를 이용한 테스트
__9-1-6 비동기 통신을 수반하는 테스트
__9-1-7 비동기 통신을 모의해보기 - msw
__9-1-8 컨텍스트를 동반한 테스트
9.2 E2E 테스트
__9-2-1 E2E 테스트 준비
__9-2-2 E2E 테스트 작성
▣ 10장: 타입스크립트 활용
10.1 타입스크립트의 기본
__10-1-1 타입 어노테이션의 기본
__10-1-2 타입스크립트의 데이터 유형
__10-1-3 타입스크립트 고유의 특수한 타입
__10-1-4 여러 개의 타입을 결합한 ‘복합 타입’
10.2 리액트 앱에 타입스크립트 도입하기
__10-2-1 타입스크립트 템플릿 활성화
__10-2-2 Props의 유형 정의
__10-2-3 State/Context/Reducer의 타입 정보
__10-2-4 fetch 데이터에 대한 타입 정의
__10-2-5 보충: 함수 컴포넌트의 타입 정의
▣ 11장: Next.js 활용하기
11.1 Next.js의 기본
__11-1-1 Next.js란?
__11-1-2 Next.js 앱 만들기
11.2 App Router의 기본 이해하기
__11-2-1 두 종류의 라우터
__11-2-2 App Router란?
__11-2-3 프로젝트 기본 샘플 확인
__11-2-4 App Router의 루트 매개변수
11.3 애플리케이션 ‘Reading Recorder’ 만들기
__11-3-1 앱의 구조 개관하기
__11-3-2 이용하는 서비스/라이브러리
__11-3-3 Prisma 준비
11.4 앱의 구현 읽어보기
__11-4-1 루트 레이아웃(공통 메뉴)
__11-4-2 도서 정보 표시
__11-4-3 리뷰 정보 목록 표시
__11-4-4 Google 도서를 통한 도서 검색
__11-4-5 리뷰 등록 양식
11.5 Vercel에 배포
__11-5-1 GitHub 저장소 준비
__11-5-2 Vercel 측의 준비
__11-5-3 PostgreSQL 데이터베이스 준비하기
__11-5-4 실제 환경에서 동작 확인하기
