만들면서 리액트를 빠르게 배울 수 있는 책이다. ‘쇼핑몰 서비스’를 만들어볼 주제로 택한 이유는 쇼핑몰의 CRUD(상품 등록, 조회, 수정, 삭제) 기능 구현을 통해 다른 주제로 쉽게 확장할 수 있기 때문이다. 순수 리액트로만 쇼핑몰을 개발하며 서버는 다른 기능 없이 데이터만 주고받을 수 있게끔 최소한의 기능만 제공하고 있다. 이 책으로 프론트엔드 개발을 재밌고 빠르게 배울 수 있를 바란다.

웹 프론트엔드 개발자. 예전부터 코딩이라는 기술로 나만의 상상을 구현하는 것에 관심이 많았다. 그 때문인지 지금은 웹 프론트엔드 개발자로 일하고 있다. 현재는 웹에만 종속되는 것보다 다양한 플랫폼으로 구현하는 것(앱, 윈도우 등)에 관심이 있으며 주력으로 하고 있는 언어는 JavaScript이다.

지은이의 말
기획자의 말
일러두기

1장 쇼핑몰 서비스 완성본 미리보기
1.1 VSCode 설치하기
1.2 패키지 매니저 이해하기
1.3.1 패키지를 초기화하고 종속성 추가하기
1.3 Yarn 사용하기
1.3.2 패키지 업데이트하기
1.4.1 깃 설치
1.4 깃 이해하고 사용하기
1.4.2 깃 명령어
1.5 깃허브로 쇼핑몰 앱 접속하기
1.6 완성본 프로젝트 살펴보기
1.7 완성된 쇼핑몰 앱 둘러보기

2장 프로젝트 준비하기
2.1 간단한 리액트 프로젝트 만들기
2.2 모듈 분리해서 보기
2.3 Create-React-App 프로젝트 설정하기
2.4 API 서버 설정하기
2.5 클라이언트 사이드 렌더링
2.6 API 서버 테스트하기

[함께 해봐요 2-1] 기본적인 HTML 페이지 만들기
[함께 해봐요 2-2] React와 ReactDOM을 CDN으로 불러오는 HTML 파일
[함께 해봐요 2-3] 리액트 코드 작성하기
[함께 해봐요 2-4] 바벨로 변경한 전체 HTML 파일
[함께 해봐요 2-5] 루트 디렉터리에 App.js 파일 만들기
[함께 해봐요 2-6] App.js를 불러오는 index.html
[함께 해봐요 2-7] A.js와 B.js를 불러오는 index.html
[함께 해봐요 2-8] 모듈을 분리하기 위한 App.js 만들기
[함께 해봐요 2-9] 기본으로 제공되는 App.tsx 수정하기
[함께 해봐요 2-10] App 컴포넌트를 사용하기 위한 index.tsx 수정하기
[함께 해봐요 2-11] index.html 수정하기

3장 리액트는 어떻게 동작하는가
3.1 웹 서비스의 전반적인 흐름
3.2 컴포넌트를 알아보자(with JSX)
3.3 Props: 컴포넌트 간 데이터 전달을 위한 객체
3.4 리액트 앱의 렌더링 방식(with State)
3.5 훅 개념과 활용법

[함께 해봐요 3-1] 데이터 흐름을 파악하기 위한 리액트 App 컴포넌트
[함께 해봐요 3-2] 가상 DOM을 사용하는 이유를 알아보기 위해 App 컴포넌트 수정하기

4장 쇼핑몰 기본 구조 만들어보기
4.1 요구사항 살펴보기
4.2 상품 목록 렌더링하기
4.3 상품 추가하기
4.4 상품 목록 삭제하기
4.5 상품 목록 수정하기
4.6 React-Router-Dom 설정하기
4.7 상품 상세 페이지 나누기
4.8 Context API 설정하기
4.9 동기와 비동기 이해하기
4.10 API 서버에서 상품 목록 가져오기
4.11 상품 상세 데이터 가져오기
4.12 상품 수정과 삭제 요청하기

[함께 해봐요 4-1] interface 키워드로 ProdutType을 만들고 products 변수 선언하기
[함께 해봐요 4-2] products 변수의 초깃값으로 가짜 데이터 입력하기
[함께 해봐요 4-3] products 상태를 화면에 표시하기(오류 버전)
[함께 해봐요 4-4] products 상태를 화면에 표시하기(오류 수정 버전)
[함께 해봐요 4-5] products 상태를 화면에 표시하기(map 메서드 사용하기)
[함께 해봐요 4-6] products 상태를 화면에 표시하기(경고 문구 해결하기)
[함께 해봐요 4-7] 상품 목록을 렌더링하는 최종 App.js 코드
[함께 해봐요 4-8] 상품 추가하기를 위한 form 작성하기
[함께 해봐요 4-9] ‘상품 추가하기’를 위한 form 작성하기(수정 버전)
[함께 해봐요 4-10] 상태변경함수(useState)를 활용하여 데이터를 다시 선언하기
[함께 해봐요 4-11] 상품 데이터를 변경시키고 활용하기(onChange 속성)
[함께 해봐요 4-12] 상품 데이터를 변경시키고 활용하기(onChange 이벤트 핸들러 사용하기)
[함께 해봐요 4-13] 상품 데이터를 products state에 추가하기(타입 오류 버전)
[함께 해봐요 4-14] 상품 데이터를 products state에 추가하기(두 번째 상품 데이터 추가부터 오류 발생 버전)
[함께 해봐요 4-15] 상품 데이터를 products state에 추가하기(useRef 함수를 활용한 오류 수정 버전)
[함께 해봐요 4-16] 상품 추가하기 최종 소스
[함께 해봐요 4-17] 상품 렌더링 로직 수정하기(product를 분해하여 단일 속성값으로 접근할 수 있게 수정)
[함께 해봐요 4-18] [삭제하기] 버튼의 onClick 함수 작성하기
[함께 해봐요 4-19] [수정하기] 버튼 렌더링하기
[함께 해봐요 4-20] 컴포넌트를 분리하여 내부 상태를 선언 가능한 형태로 작성하기(ProductItem 컴포넌트 만들기)
[함께 해봐요 4-21] 컴포넌트를 분리한 후 기존 로직이 동작하지 않는 문제 수정하기(onDelete 함수로 행동 위임하기)
[함께 해봐요 4-22] isEditMode가 true일 때 조건부 Form 렌더링으로 수정하기
[함께 해봐요 4-23] 상품 수정 form에서 작성한 상품 정보를 객체로 전달하는 방식으로 수정하기
[함께 해봐요 4-24] 상품 정보 수정이 완료되도록 App 컴포넌트의 handleUpdate 함수 수정하기
[함께 해봐요 4-25] 상품 목록 수정하기 최종 코드
[함께 해봐요 4-26] index.tsx에서 BrowserRouter 컴포넌트로 App 컴포넌트 감싸주기
[함께 해봐요 4-27] HomePage.tsx를 만들고 App.tsx에서 소스 복사하기
[함께 해봐요 4-28] index.ts를 만들고 HomPage 컴포넌트 내보내기
[함께 해봐요 4-29] App.tsx 컴포넌트 수정하기
[함께 해봐요 4-30] 상품 상세 페이지 만들기(ProductPage.tsx)
[함께 해봐요 4-31] index.ts를 통해 내보내기
[함께 해봐요 4-32] App.tsx에 상세 페이지 추가하기
[함께 해봐요 4-33] path 속성을 알아보기 위해 상세 페이지 수정하기
[함께 해봐요 4-34] 데이터를 담을 수 있는 공간으로 Context 만들기(ProductContext.tsx)
[함께 해봐요 4-35] 하위 컴포넌트에 데이터 전송을 위한 Provider 정의하기
[함께 해봐요 4-36] 데이터 사용을 위해 Consumer를 선언하고, useContext 함수로 접근하기
[함께 해봐요 4-37] Context를 적용한 최종 코드
[함께 해봐요 4-38] 작성한 Context 사용하기(ProductPage.tsx 수정)
[함께 해봐요 4-39] 작성한 Context 사용해보기 2(index.tsx 수정)
[함께 해봐요 4-40] URL 매개변수 id 값을 받아 상품 정보를 보여주는 로직(ProductPage.tsx 수정)
[함께 해봐요 4-41] URL 매개변수 id 값을 받아 상품 정보를 보여주는 로직(undefined 시에 UX를 고려한 문자열 추가)
[함께 해봐요 4-42] 메인 페이지에서 상품 상세 페이지로 이동하기
[함께 해봐요 4-43] 상품을 새로 추가하고 해당 상품으로 이동할 때 아무런 결과 값이 나타나지 않는 현상 해결하기(타입 오류 발생)
[함께 해봐요 4-44] 상품을 새로 추가하고 해당 상품으로 이동할 때 아무런 결과 값이 나타나지 않는 현상 해결하기(타입 오류 수정)
[함께 해봐요 4-45] 메인 페이지의 product을 Context로 구현하기 1(HomePage.tsx 수정하기)
[함께 해봐요 4-46] 메인 페이지의 product을 Context로 구현하기 2(ProductPage.tsx 수정하기)
[함께 해봐요 4-47] fetch 함수로 상품 목록 데이터 가져오기(HomePage.tsx)
[함께 해봐요 4-48] 프록시 서버 설정하기(client/package.json 수정하기)
[함께 해봐요 4-49] 동기화 작업을 위한 fetch 함수 수정하기
[함께 해봐요 4-50] 필요 없게 된 기존의 Context 제거하기 1(index.ts에서 ProductProvider 제거하기)
[함께 해봐요 4-51] 필요 없게 된 기존의 컨텍스트 제거하기 2(Homepage.tsx에서 product 설정 코드 변경하기)
[함께 해봐요 4-52] 상품 상세 데이터 가져오기(ProductPage.tsx 수정하기)
[함께 해봐요 4-53] 상품 추가하기(Homepage.tsx의 handleCreate 함수 수정하기)
[함께 해봐요 4-54] 상품 삭제하기(Homepage.tsx의 handleDelete 함수 수정하기)
[함께 해봐요 4-55] 상품 수정하기(Homepage.tsx의 handleUpdate 함수 수정하기)

5장 쇼핑몰 설계를 어떻게 하면 좋을까(feat. 좋은 아키텍처란)
5.1 리액트 컴포넌트, 꼭 나눠야 할까
5.2 데이터를 기반으로 컴포넌트 분리하기
5.3 역할 중심으로 컴포넌트 분리하기
5.4 전체 구조는 어떻게 짤까
5.5 지금까지의 구조를 수정하자

[함께 살펴봐요 5-1] Cart에서 데이터를 분리하기 전의 코드(단순 예시 코드)
[함께 살펴봐요 5-2] 데이터 기반으로 컴포넌트 분리하기(단순 예시 코드)
[함께 살펴봐요 5-3] 역할 중심으로 컴포넌트 분리하기 1(단순 예시 코드)
[함께 살펴봐요 5-4] 역할 중심으로 컴포넌트 분리하기 2(단순 예시 코드)
[함께 살펴봐요 5-5] Cart 컴포넌트 구현(단순 예시 코드)
[함께 살펴봐요 5-6] CartList 컴포넌트 구현(단순 예시 코드)
[함께 살펴봐요 5-7] CarItem 컴포넌트 구현(단순 예시 코드)
[함께 살펴봐요 5-8] CartIncreaseButton 컴포넌트 구현(단순 예시 코드)
[함께 살펴봐요 5-9] CartDecreaseButton 컴포넌트 구현(단순 예시 코드)
[함께 살펴봐요 5-10] CartDeleteButton 컴포넌트 구현(단순 예시 코드)
[함께 살펴봐요 5-11] 분리하기 전 HomePage 코드

[함께 해봐요 5-1] HomePage에서 ProductList를 분리해서 구현하기
[함께 해봐요 5-2] 타입을 한 번에 모아서 관리하는 폴더를 만들고 불러오기(types 폴더와 index.ts)
[함께 해봐요 5-3] 타입 별칭들도 모듈처럼 지정하기(ProductItem이 정의되어 있지 않은 상태)
[함께 해봐요 5-4] ProductItem 컴포넌트 분리하기
[함께 해봐요 5-5] index.ts를 통해 내보내기
[함께 해봐요 5-6] ProductList 컴포넌트에서 ProductItem 불러오기
[함께 해봐요 5-7] 분리된 컴포넌트 기반으로 HomePage 수정하기
[함께 해봐요 5-8] ProductCreateForm 작성하기
[함께 해봐요 5-9] ProductCreateForm 내보내기
[함께 해봐요 5-10] ProductCreatePage 작성하기
[함께 해봐요 5-11] index.ts를 통해 내보내기
[함께 해봐요 5-12] Page 컴포넌트를 Route에 추가하기(App.tsx 수정)

6장 MUIUI 컴포넌트를 활용하여 쇼핑몰 개선하기
6.1 MUI 도입하기
6.2 CSS 정규화
6.3 MUI 그리드
6.4 레이아웃 구현하기
6.5 로딩 기능 추가하기
6.6 상품 생성 컴포넌트를 MUI로 마이그레이션하기
6.7 API를 이용한 섬네일 업로드 구현하기
6.8 섬네일이 나오지 않는 문제를 수정하기
6.9 상품 목록을 MUI로 마이그레이션하기
6.10 상품 아이템을 MUI로 마이그레이션하기
6.11 상품 상세보기 페이지를 MUI로 마이그레이션하기
6.12 구매 페이지 구현하기
6.13 상품 구매 모달 구현하기
6.14 상품 생성 모달 구현하기
6.15 장바구니 페이지 구현하기
6.16 404 페이지 구현하기

[함께 해봐요 6-1] MUI 테스트 예제 준비
[함께 해봐요 6-2] MUI 테스트: 스타일이 입혀진 버튼
[함께 해봐요 6-3] 옵션을 활용하여 다양한 버튼의 모양으로 렌더링 해보기
[함께 해봐요 6-4] MUI를 전역 공간에서 실행하기
[함께 해봐요 6-5] 그리드 컴포넌트 활용 예제
[함께 해봐요 6-6] 웹의 기초적인 구조를 그리드로 만들어보는 예제
[함께 해봐요 6-7] 테스트용으로 변경했던 앱 컴포넌트를 원래대로 되돌리기
[함께 해봐요 6-8] 레이아웃 작성하기(Layout.tsx)
[함께 해봐요 6-9] Layout 컴포넌트 내보내기(index.ts)
[함께 해봐요 6-10] Layout 컴포넌트를 App 컴퍼넌트 상단에 모두 묶기
[함께 해봐요 6-11] 각 버튼에 이벤트 핸들러를 연결하여 페이지를 이동하는 로직 추가하기
[함께 해봐요 6-12] HomePage에서 임시로 해당 컴포넌트 불러오기
[함께 해봐요 6-13] HomePage 컴포넌트 원상복구
[함께 해봐요 6-14] 로딩이 true, false에 따라 달라지는 렌더링 구현하기
[함께 해봐요 6-15] CreateIcon을 불러와서 Layout에 [추가하기] 버튼 바꾸기
[함께 해봐요 6-16] 쇼핑몰다운 UI로 수정하기(ProductCreateForm.tsx)
[함께 해봐요 6-17] 섬네일 업로더 컴포넌트 구현하기 1(ThumbnailUploader.tsx)
[함께 해봐요 6-18] 섬네일 업로더 컴포넌트 구현하기 2(ThumbnailUploader.tsx)
[함께 해봐요 6-19] ThumbnailUploader 컴포넌트 내보내기
[함께 해봐요 6-20] ProductCreateForm 수정하기
[함께 해봐요 6-21] ThumbnailUploader 컴포넌트에서 input에 hidden 속성 부여하기
[함께 해봐요 6-22] 섬네일 업로더 컴포넌트 구현하기 3(ThumbnailUploader.tsx)
[함께 해봐요 6-23] 파일 선택 후 섬네일을 화면에서 임시로 렌더링하는 로직(ThumbnailUploader.tsx)
[함께 해봐요 6-24] 2단계 섬네일 요청 구현하기(ProductCreateForm.tsx)
[함께 해봐요 6-25] thumbnail 속성 추가에 따른 ProductType 업데이트
[함께 해봐요 6-26] thumbnail 속성 추가에 따른 ProductItem 업데이트
[함께 해봐요 6-27] 상품 목록 디자인 1: Grid 컴포넌트로 ProductItem 묶어주기(ProductList.tsx)
[함께 해봐요 6-28] 상품 목록 디자인 2: Grid 컴포넌트로 ProductItem 묶어주기(ProductItem.tsx)
[함께 해봐요 6-29] 상품 아이템에 스타일 지정하기(ProductItem.tsx)
[함께 해봐요 6-30] 오류 제거를 위한 ProductList 컴포넌트 수정하기
[함께 해봐요 6-31] App.tsx에서 상품 상세 페이지 주소 수정하기
[함께 해봐요 6-32] ProductPage UI 수정하기
[함께 해봐요 6-33] 구매 페이지 구현하기(PurchasePage.tsx)
[함께 해봐요 6-34] PurchasePage 컴포넌트 내보내기
[함께 해봐요 6-35] PurchasePage를 Router와 연결하기
[함께 해봐요 6-36] form 코드를 별도 컴포넌트로 분리하기(PurchaseForm.tsx)
[함께 해봐요 6-37] PurchaseForm 컴포넌트 내보내기
[함께 해봐요 6-38] PurchasePage 수정하기
[함께 해봐요 6-39] createProductId와 isModalOpen 상태를 함께 구현한 코드
[함께 해봐요 6-40] handlePushProductPage에 대한 구현 코드
[함께 해봐요 6-41] 장바구니 페이지 만들기(CartPage.tsx)
[함께 해봐요 6-42] 장바구니 페이지 내보내기
[함께 해봐요 6-43] 장바구니 페이지 꾸미기
[함께 해봐요 6-44] 장바구니 페이지를 Router에 연결하기
[함께 해봐요 6-45] [장바구니 담기] 버튼을 클릭하면 쿠키에 상품값을 추가하는 로직 작성하기
[함께 해봐요 6-46] MUI를 이용하여 장바구니 페이지 스타일 꾸미기(CartPage.tsx)
[함께 해봐요 6-47] 장바구니 아이템 컴포넌트 코드를 작성하고 장바구니 페이지 완성하기
[함께 해봐요 6-48] CartItem 컴포넌트 내보내기
[함께 해봐요 6-49] 장바구니 페이지(CartPage)의 최종 코드
[함께 해봐요 6-50] 404 페이지 만들기(NotFoundPage.tsx)
[함께 해봐요 6-51] 404 페이지 만들기 컴포넌트 내보내기
[함께 해봐요 6-52] 404 페이지를 와일드카드에 연결하기(App.tsx)
[함께 살펴봐요 6-1] 기존에 구현한 ProductPage
[함께 살펴봐요 6-2] 〈Route〉 컴포넌트 동작 예시

7장 코드 리뷰: 개선점 찾기와 더 나은 서비스 만들기
7.1 장바구니 관련 쿠키 정보를 쉽게 관리하기 위한 훅 만들기
7.2 ID 기반으로 변경해서 쿠키 용량 문제 해결하기
7.3 장바구니가 중복되는 현상 막기
7.4 HTTP 요청 부분을 Axios로 변경하기
7.5 useAsync 함수 만들기
7.6 concurrently를 사용하여 클라이언트와 서버를 동시에 실행하기

[함께 해봐요 7-1] 쿠키를 재활용하는 훅 만들기(useCart.ts)
[함께 해봐요 7-2] 만든 훅 내보내기
[함께 해봐요 7-3] 훅을 활용하기 위해 상품 페이지 수정하기(ProductPage.tsx)
[함께 해봐요 7-4] 훅을 활용하기 위해 장바구니 페이지 수정하기(CartPage.ts)
[생각 해봐요 7-1] useCart 훅에서 ID 기반 상품 로직으로 저장 방식을 수정하기
[함께 해봐요 7-5] productIds 변숫값 지정하기
[함께 해봐요 7-6] 장바구니 정보를 가져오기 위한 코드 작성하기
[함께 해봐요 7-7] useCart 훅을 다른 코드에 반영하기(ProductPage.tsx)
[함께 해봐요 7-8] useCart 훅을 다른 코드에 반영하기(CartPage.tsx)
[함께 해봐요 7-9] 장바구니에서 중복되는 현상 막기 코드(useCart 수정 코드)
[함께 해봐요 7-10] useCart를 사용하는 컴포넌트 수정하기(CartPage.tsx)
[함께 해봐요 7-11] API를 한곳에 묶어서 관리하기
[함께 해봐요 7-12] API를 한곳에 묶어서 관리하기(Axios를 활용한 버전)
[함께 해봐요 7-13] API를 한 곳에 묶어서 관리하기(Axios를 활용한 버전) - ProductPage 수정하기
[함께 해봐요 7-14] API를 한 곳에 묶어서 관리하기 (Axios를 활용한 버전) - PurchasePage 수정하기
[함께 해봐요 7-15] API를 한 곳에 묶어서 관리하기(Axios를 활용한 버전) - ProductList 수정하기
[함께 해봐요 7-16] API를 한 곳에 묶어서 관리하기(Axios를 활용한 버전) - ProductCreateForm 수정하기
[함께 해봐요 7-17] API를 한 곳에 묶어서 관리하기(Axios를 활용한 버전) - useCart 함수 수정하기
[함께 해봐요 7-18] useAsync 훅 만들기
[함께 해봐요 7-19] 기존의 레거시 코드를 useAsync로 적용하기(ProductList.tsx 수정)
[함께 해봐요 7-20] 상품 데이터를 가져오는 부분에 useAsync 도입할 때 수정/삭제 시 문제 해결하기
[함께 해봐요 7-21] 상품 페이지에 useAsync 적용하기
[함께 해봐요 7-22] 섬네일 업로드를 위해 useAsync 수정하기
[함께 해봐요 7-23] ProductCreateForm 수정하기
[함께 해봐요 7-24] PurchasePage 수정하기

[함께 살펴봐요 7-1] 장바구니에서 중복되는 현상 막기 코드(useCart의 기존 코드)
[함께 살펴봐요 7-2] 확장성을 위한 action 객체 사용
[함께 살펴봐요 7-3] useAsync 훅 살펴보기

에필로그
찾아보기