모던 자바스크립트, 타입스크립트, 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 실제 환경에서 동작 확인하기