모던 자바스크립트, 타입스크립트, Next.js로 만드는 본격적인 앱 개발을 위한 종합 안내서!

이 책은 리액트를 처음 배우는 사람들을 위한 입문서로, 자바스크립트 기본 지식을 가진 독자를 대상으로 한다. 도입편, 기본편, 응용편의 3부로 구성되어 있으며, 리액트의 기초부터 심화 내용까지 단계별로 학습할 수 있다.

도입편에서는 자바스크립트 개요와 프론트엔드 개발 역사, 리액트의 특징을 다루고, 기본편에서는 폼 개발, 스타일 정의, 내장 컴포넌트, 훅 등 리액트의 핵심 개념을 깊이 있게 학습한다. 특히 현대적 리액트 개발에 필수적인 훅에 대해 중점적으로 다룬다.

응용편에서는 라우팅, 테스트, 타입스크립트를 이용한 리액트 개발 방법을 배우고, 마지막으로 Next.js를 사용한 실제 앱 개발을 통해 이전에 학습한 내용을 종합적으로 적용해볼 수 있다. 이를 통해 독자들은 리액트의 기본 개념부터 실제 앱 개발까지 전반적인 과정을 경험할 수 있다.

▣ 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 실제 환경에서 동작 확인하기