지은이의 말
기획자의 말
일러두기
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] 데이터
_도서 내용
만들면서 리액트를 빠르게 배울 수 있는 책입니다. ‘쇼핑몰 서비스’를 만들어볼 주제로 택한 이유는 쇼핑몰의 CRUD(상품 등록, 조회, 수정, 삭제 기능 구현을 통해 다른 주제로 쉽게 확장할 수 있기 때문입니다. 순수 리액트로만 쇼핑몰을 개발하며 서버는 다른 기능 없이 데이터만 주고받을 수 있게끔 최소한의 기능만 제공하고 있습니다. 이 책으로 프론트엔드 개발을 재밌고 빠르게 배울 수 있를 바랍니다.
_대상 독자
1. 리액트 기본은 떼었는데, 다음 단계의 실습을 원하는 독자
2. 회사에서 다음 프로젝트에 리액트를 써야 하는데, 빠르게 기술 습득을 해야 하는 독자
_주요 내용
만들어 보고!
수정하고!
응용하여 확장하기!
가장 빠른 코딩 학습 방법입니다.
당장 몇 주 후에 리액트 프로젝트를 시작해야 한다면, 클론 코딩을 해보는 게 가장 빠른 학습 방법입니다. 이 책은 클론 코딩의 주제로 쇼핑몰 서비스를 제시합니다. 쇼핑몰의 CRUD 기능이야말로 거의 모든 서비스에 응용할 수 있는 가장 보편적이기 때문입니다.
또한 리액트로만 클라이언트를 구현하기 때문에 웬만한 리액트 기능은 모두 학습해볼 수 있는 장점이 있습니다. 완성된 쇼핑몰을 먼저 실행해봄으로써 학습 동기 부여를 해주고, 이후에 단계별로 간단한 텍스트 표현부터 차근차근 만들어 가기 때문에 초보자도 쉽게 따라하며 배울 수 있습니다.
[프로젝트 개발 환경]
1. 운영체제: Mac OS, Windows10
2. 통합개발환경(IDE: VSCode
3. 사용 언어: 타입스크립트
4. 클라이언트 프레임워크: 리액트
5. 서버: 깃허브에서 API 서버 코드 기본 제공 (설정 방법은 책에서 자세히 설명합니다
6. UI: MUI 컴포넌트
7. 패키지 매니저: Yarn
8. 버전 관리: 깃
9. Node 버전 : 18.17.0
[저자 에필로그 중에서]
이 책에서는 작은 쇼핑몰 서비스를 예로 들었지만 결국 여러분이 만들 거의 모든 서비스는
