'자바스크립트'에 해당되는 글 2건
- 2024.04.16 :: [신간안내] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트
- 2021.10.13 :: [신간소개] 백견불여일타 Node.js로 서버 만들기 2
● 지은이: 홍준혁
● 페이지: 412
● 판형: 188 * 257
● 도수: 2도
● 정가: 30,000원
● 발행일: 2024년 4월 12일
● ISBN: 979-11-93229-28-6 93000
[오탈자 사이트] [자료실] [강의교안 신청하기]
[강컴] [교보] [반디] [알라딘] [예스24] [인터파크]
_도서 내용
만들면서 리액트를 빠르게 배울 수 있는 책입니다. ‘쇼핑몰 서비스’를 만들어볼 주제로 택한 이유는 쇼핑몰의 CRUD(상품 등록, 조회, 수정, 삭제) 기능 구현을 통해 다른 주제로 쉽게 확장할 수 있기 때문입니다. 순수 리액트로만 쇼핑몰을 개발하며 서버는 다른 기능 없이 데이터만 주고받을 수 있게끔 최소한의 기능만 제공하고 있습니다. 이 책으로 프론트엔드 개발을 재밌고 빠르게 배울 수 있기를 바랍니다.
_대상 독자
1. 리액트 기본은 떼었는데, 다음 단계의 실습을 원하는 독자
2. 회사에서 다음 프로젝트에 리액트를 써야 하는데, 빠르게 기술 습득을 해야 하는 독자
_목차
지은이의 말
기획자의 말
일러두기
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장 MUI UI 컴포넌트를 활용하여 쇼핑몰 개선하기
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 훅 살펴보기
에필로그
찾아보기
_주요 내용
만들어 보고!
수정하고!
응용하여 확장하기!
가장 빠른 코딩 학습 방법입니다.
당장 몇 주 후에 리액트 프로젝트를 시작해야 한다면, 클론 코딩을 해보는 게 가장 빠른 학습 방법입니다. 이 책은 클론 코딩의 주제로 쇼핑몰 서비스를 제시합니다. 쇼핑몰의 CRUD 기능이야말로 거의 모든 서비스에 응용할 수 있는 가장 보편적이기 때문입니다.
또한 리액트로만 클라이언트를 구현하기 때문에 웬만한 리액트 기능은 모두 학습해볼 수 있는 장점이 있습니다. 완성된 쇼핑몰을 먼저 실행해봄으로써 학습 동기 부여를 해주고, 이후에 단계별로 간단한 텍스트 표현부터 차근차근 만들어 가기 때문에 초보자도 쉽게 따라하며 배울 수 있습니다.
[프로젝트 개발 환경]
1. 운영체제: Mac OS, Windows10
2. 통합개발환경(IDE): VSCode
3. 사용 언어: 타입스크립트
4. 클라이언트 프레임워크: 리액트
5. 서버: 깃허브에서 API 서버 코드 기본 제공 (설정 방법은 책에서 자세히 설명합니다)
6. UI: MUI 컴포넌트
7. 패키지 매니저: Yarn
8. 버전 관리: 깃
9. Node 버전 : 18.17.0
[저자 에필로그 중에서]
이 책에서는 작은 쇼핑몰 서비스를 예로 들었지만 결국 여러분이 만들 거의 모든 서비스는 책에서 제시한 쇼핑몰의 CRUD 구조와 유사합니다. 거기에서 얼마나 고도화하였는지의 차이지 큰 틀은 바뀌지 않습니다. 하지만 클론 코딩은 여러분의 실력을 크게 늘려주지는 않습니다. 따라하며 쓴 코드를 이해하고 여러분만의 독자적인 프로젝트를 개발하여 여러분의 것으로 만들어 보는 데까지 꼭 나아가야 진짜 실력있는 개발자가 될 수 있다는 걸 명심하길 바랍니다.
[베타테스터겸 기획자 소감글 중에서]
변경사항을 저장하지 않고 실행하다가 왜 안 되지? 하며 하루를 꼬박 날려버린 적도 있었고, 리액트 앱을 껐다가 다시 실행해야 되는데, 책에 표시되지 않아 한참을 헤맨 후에 책 내용에 포함하게 되는 경우도 있었습니다. 이렇게 하다 보니 사소한 소스 오타는 금방 찾아낼 수 있게 된 것 같습니다. 그리고 오류가 났을 때 뒤로 갈수록 오류 메시지가 비슷한 경우가 많아 쉽게 해결해서 찾았던 것 같습니다. 사실, 기획자가 잘못한 경우가 훨씬 많았지만요.
개발 능력이 없은 기획자도 처음부터 끝까지 따라해보며 책을 학습했는데, 여러분은 저보다 충분히 더 잘 해낼 수 있을 겁니다.
예제 소스는 깃허브에서 별도로 제공됩니다.
https://github.com/Hong-JunHyeok/shopping_app_example
카페에서 저자와 소통하며 공부하세요
https://cafe.naver.com/codefirst
_저자 소개
안녕하세요 웹 프론트엔드 개발자 홍준혁입니다.
예전부터 코딩이라는 기술로 나만의 상상을 구현하는 것에 관심이 많았습니다. 그 때문인지 지금은 웹 프론트엔드 개발자로 일하고 있습니다.
현재는 웹에만 종속되는 것보다 다양한 플랫폼으로 구현하는 것(앱, 윈도우 등)에 관심이 있으며 주력으로 하고 있는 언어는 JavaScript입니다.
개발을 하면서 어려움이 있는 주변 사람들에게 알려주는 것을 즐기는 편이고 내가 알려준 것을 기반으로 좋은 프로젝트가 나왔을 때 성취감을 느낍니다.
이번 기회에 집필한 책에서도 그러한 효과가 있으면 저자로서 너무 행복할 것입니다. 책에서 다 담지 못한 정보들이 궁금한 경우나 필자와 얘기해보고 싶은 주제가 있다면 언제는 백견불여일타 독자 카페를 이용해주시기 바랍니다.
_상세 이미지
_끝
'신간소개' 카테고리의 다른 글
[신간소개] 생성형 AI를 활용한 게임 개발: ChatGPT, Tensor.Art, Udio (3) | 2024.12.03 |
---|---|
[신간안내] 시작하는 개발자들을 위한 기술 여행 가이드: 개발 지식을 높은 곳에서 한눈에 조망할 수 있는 책 (0) | 2023.11.06 |
[신간 안내] 자바의 신 VOL.2 주요 API 응용편, 3rd Edition (0) | 2023.10.13 |
[신간 안내] 자바의 신 VOL.1 기초 문법편, 3rd Edition (0) | 2023.10.13 |
[신간안내] 개발자로 첫 출근했어요: 사내 개발 도구, 기술, 문화 적응 가이드 (0) | 2023.09.27 |
● 저자: 박민경
● 페이지: 408
● 판형: 사륙배판형(188*257)
● 도수: 2도
● 정가: 27,000원
● 발행일: 2021년 10월 21일
● ISBN: 978-89-97924-90-5 93000
[강컴] [교보] [반디] [알라딘] [예스24] [인터파크]
[샘플원고]
_도서 내용
빠르게 실무형 Node.js 개발자가 될 수 있도록 도와주는 실습형 입문서다. 5줄로 만드는 Node.js 서버로 핵심 개념을 파악하고, 데이터베이스 연동, 실시간 통신 실습을 통해 실무형 개발 지식을 습득한 후, 페이스북 클론 코딩과 배포로 통합 실습을 해볼 수 있게 단계적으로 구성하였다. 페이스북 클론 프로젝트는 처음엔 따라해 보고, 그 다음엔 안 보고 만들어 보고, 그 다음엔 응용해서 좀더 확장된 여러 분의 버전을 만들어 보길 바란다.
_대상 독자
_Node.js를 기술 스택에 담고 싶어한다면
_당장 Node.js로 서버를 개발해야 한다면
_개발부터 배포까지 가능한 Node.js 토이 프로젝트를 찾고 있다면
_목차
목차
지은이의 글
일러두기
1장. Node.js 첫걸음
1.1 Node.js 첫걸음
웹 서버와 Node.js의 관계
Node.js가 동작하는 방식
1.2 실습을 위한 개발환경 구축
Node.js 설치
IDE(통합개발환경) 설치–비주얼 스튜디오 코드(Visual Studio Code, VS Code)
정리해봅시다
나의 이해도를 측정하자
2장. 자바스크립트 리마인드
2.1 자바스크립트 기본 문법
변수, 호이스팅, 클로저
객체와 배열
함수
프로토타입과 상속
2.2 자바스크립트의 비동기 처리
콜백 함수
Promise
async/await
비동기 상황에서의 예외 처리
정리해봅시다
나의 이해도를 측정하자
[함께해봐요 2-1] 변수 호이스팅 (sample01.js)
[함께해봐요 2-2] let을 사용한 변수 호이스팅 문제 해결 (sample02-1.js)
[함께해봐요 2-3] const를 사용한 변수 호이스팅 문제 해결 (sample02-2.js)
[함께해봐요 2-4] function-level-scope의 사용 ① (sample03.js)
[함께해봐요 2-5] function-level-scope의 사용 ② (sample04.js)
[함께해봐요 2-6] const의 특징 (sample05-1.js)
[함께해봐요 2-7] let의 특징 (sample05-1.js)
[함께해봐요 2-8] 클로저의 개념 (sample06.js)
[함께해봐요 2-9] 객체와 프로퍼티 (sample07.js)
[함께해봐요 2-10] 객체 배열 생성 (sample08.js)
[함께해봐요 2-11] 구조 분해 할당 (sample09.js)
[함께해봐요 2-12] 함수의 선언 (sample10.js)
[함께해봐요 2-13] 화살표 함수의 선언 (sample11.js)
[함께해봐요 2-14] this의 사용 (sample12.js)
[함께해봐요 2-15] bind 함수 사용 (sample12-2.js)
[함께해봐요 2-16] 프로토타입을 이용한 객체 생성 (sample13.js)
[함께해봐요 2-17] 프로토타입과 상속 (sample14.js)
[함께해봐요 2-18] Prototype Chaining (sample15.js)
[함께해봐요 2-19] 프로토타입을 클래스처럼 사용해보기 (sample16.js)
[함께해봐요 2-20] 콜백 함수의 비동기 처리 (sample17.js)
[함께해봐요 2-21] 콜백 함수의 동기 처리 (sample18.js)
[함께해봐요 2-22] 사용자 정의 함수의 동기 처리 (sample19.js)
[함께해봐요 2-23] API의 비동기적 처리 (sample20.js)
[함께해봐요 2-24] 일반 비동기 함수 (sample21-1.js)
[함께해봐요 2-25] 동기적 처리 ① (sample21-2.js)
[함께해봐요 2-26] 동기적 처리 ② (sample21-3.js)
[함께해봐요 2-27] Promise의 사용 (sample22.js)
[함께해봐요 2-28] Promise 객체와 async/await (sample23.js)
[함께해봐요 2-29] async/await의 사용 (sample24.js)
[함께해봐요 2-30] 사용자 정의 오류 (sample25.js)
[함께해봐요 2-31] 일반적인 예외 처리 (sample26.js)
[함께해봐요 2-32] .catch( )의 이용 (sample27.js)
[함께해봐요 2-33] .then( )의 이용 (sample27.js)
[함께해봐요 2-34] async/await의 예외 처리 ① (sample28-1.js)
[함께해봐요 2-35] async/await의 예외 처리 ② (sample28-2.js)
[함께해봐요 2-36] async/await의 예외 처리 ③ (sample28-3.js)
[함께해봐요 2-37] async/await의 예외 처리 ④ (sample28-4.js)
3장. 5줄로 만드는 서버
3.1 프로젝트의 시작
프로젝트 설정하기
NPM 명령어
3.2 Node.js의 모듈과 객체
모듈 시스템이란?
모듈의 종류
3.3 http 모듈로 서버 만들기
5줄로 서버를 만들어보자
요청 객체(req), 응답 객체(res)
3.4 express 모듈을 사용해 서버 만들기
express란?
express 설치와 사용
http 요청 메서드–GET, POST, PUT, PATCH, DELETE
3.5 express와 미들웨어
미들웨어란?
자주 사용하는 미들웨어
정리해봅시다
나의 이해도를 측정하자
[함께해봐요 3-1] A.js 소스 코드 (chapter03/sample/A.js)
[함께해봐요 3-2] B.js 소스 코드 (chapter03/sample/B.js)
[함께해봐요 3-3] 순환 참조 ① (chapter03/sample/A2.js)
[함께해봐요 3-4] 순환 참조 ② (chapter03/sample/B2.js)
[함께해봐요 3-5] 5줄로 만드는 서버 (chapter03/sample/simple_server.js)
[함께해봐요 3-6] 웹 페이지의 요청에 대한 응답 (chapter03/sample/simple_server2.js)
[함께해봐요 3-7] 문자열을 보내는 응답 코드 (chapter03/sample/simple_server3.js)
[함께해봐요 3-8] fs-test.html 작성 (chapter03/sample/fs_test.html)
[함께해봐요 3-9] 파일을 보내는 응답 코드 (chapter03/sample/fs_test.js)
[함께해봐요 3-10] request와 response 확인 (chapter03/sample/simple_sever3.js)
[함께해봐요 3-11] REST를 통한 페이지 생성 (chapter03/sample/simple_sever4.js)
[함께해봐요 3-12] express 사용법 ① (chapter03/express/express_study1.js)
[함께해봐요 3-13] express로 웹 페이지 만들기 (chapter03/express/index.html)
[함께해봐요 3-14] express 사용법 ② (chapter03/express/express_study2.js)
[함께해봐요 3-15] 미들웨어 사용법 ① (chapter03/express/express-study3.js)
[함께해봐요 3-16] 미들웨어 사용법 ② (chapter03/express/express_study4.js)
[함께해봐요 3-17] 오류 처리를 위한 미들웨어 함수 (chapter03/express/express_study5.js)
[함께해봐요 3-18] static 미들웨어 사용 ① (chapter03/express/express-study6.js)
[함께해봐요 3-19] static 미들웨어 사용 ② (chapter03/express/index2.html)
[함께해봐요 3-20] 미들웨어를 이용한 예제 ① (chapter03/express/express_study7.js)
[함께해봐요 3-21] 쿠키 전달 (chapter03/sample/cookie.js)
[함께해봐요 3-22] 세션을 통한 키 값 생성 (chapter03/sample/cookie-session.js)
[함께해봐요 3-23] 미들웨어 통합 테스트 (chapter03/express/express_study8.js)
4장. 통신을 구현해보자
4.1 API
API란?
Open API 활용 ①–request
Open API 활용 ②–axios
dotenv 사용하기
4.2 캐싱 구현하기
Redis란?
4.3 API 서버를 직접 만드는 방법
REST API
API 서버 만들기
API 서버 테스트 : CORS
4.4 웹 파싱
크롤링, 스크래핑, 파싱
정리해봅시다
나의 이해도를 측정하자
[함께해봐요 4-1] request 모듈로 네이버 API 사용해보기 (chapter04/sample/naver_request.js)
[함깨해봐요 4-2] axios 모듈로 에어코리아 API 사용해보기 (chapter04/sample/airkorea_axios.js)
[함께해봐요 4-3] 에어코리아 API 응답 결과 가져오기 (chapter04/sample/airkorea_axios2.js)
[함께해봐요 4-4] [함께해봐요 4-3]에 dotenv 모듈 적용 (chapter04/sample/airkorea_dotenv.js)
[함께해봐요 4-5] Redis 서버 테스트 ① (chapter04/sample/redis.js)
[함께해봐요 4-6] Redis 서버 테스트 ② (chapter04/sample/redis2.js)
[함께해봐요 4-7] [함께해봐요 4-3]에 캐시 적용하기 (chapter04/sample/redis3.js)
[함께해봐요 4-8] 내 API 서버 만들기 (chapter04/sample/colon_path.js)
[함께해봐요 4-9] 간단한 게시판 API 서버 만들기 (chapter04/sample/board_api.js)
[함께해봐요 4-10] uuid-apikey 모듈 사용 (chapter04/sample/uuid_apikey.js)
[함께해봐요 4-11] 게시판에 uuid-apikey 추가하기 (chapter04/sample/board_api2.js)
[함께해봐요 4-12] 게시판 API 서버 테스트 (chapter04/sample/board_api_test.js)
[함께해봐요 4-13] 게시판 API 서버 테스트 코드 작성 (chapter04/sample/board_api_test.html)
[함께해봐요 4-14] cors 모듈 설치 (chapter04/sample/board_api3.js)
[함께해봐요 4-15] 웹 페이지 크롤링 (chapter04/sample/crawling.js)
5장. Node.js와 데이터베이스
5.1 SQL과 NoSQL
SQL
NoSQL
5.2 SQL : MySQL
개발환경 설정
쿼리 기본 사용법
쿼리문 작성하기
ORM : Sequelize
5.3 NoSQL : MongoDB
MongoDB
정리해봅시다
나의 이해도를 측정하자
[함께해봐요 5-1] 데이터베이스 정보 저장 (chapter05/sequelize/config/config.json)
[함께해봐요 5-2] customer 객체를 ORM로 작성하기 (chapter05/sequelize/models/customer.js)
[함께해봐요 5-3] purchase 모델 생성 (chapter05/sequlieze/models/purchase.js)
[함께해봐요 5-4] index.js 수정 (chapter05/sequelize/models/index.js)
[함께해봐요 5-5] 테이블 관계 생성 (chapter05/sequelize/app.js )
[함께해봐요 5-6] 클라이언트 화면 생성 (chapter05/sequelize/customer.html)
[함께해봐요 5-7] 정보 입력창 서버 코드 (chapter05/sequelize/app2.js)
[함께해봐요 5-8] mongoose와 MongoDB 연결하기 (chapter05/mongoose/app.js)
6장. 실시간 통신을 구현해보자
6.1 웹 소켓
HTTP와 AJAX
웹 소켓
6.2 WS 모듈로 웹 소켓 구현하기
6.3 socket.io로 실시간 채팅 구현하기
6.4 실시간 채팅 구현하기
정리해봅시다
나의 이해도를 측정하자
[함께해봐요 6-1] ws 모듈을 이용한 WebSocket 구현 (chapter06/ws/socket.js)
[함께해봐요 6-2] 클라이언트 코드 작성 (chapter06/ws/index.html)
[함께해봐요 6-3] WebSocket 서버 코드 (chapter06/ws/app.js)
[함께해봐요 6-4] socket.io 모듈 불러오기 (chapter06/socket.io/app.js)
[함께해봐요 6-5] SocketIO 인스턴스 생성 (chapter06/socket.io/socket.js)
[함께해봐요 6-6] SocketIO 클라이언트 코드 (chapter06/socket.io/index.html)
[함께해봐요 6-7] SocketIO 클라이언트 코드에 polling 추가 (chapter06/socket.io/index.html)
[함께해봐요 6-8] 실시간 채팅창 구현하기 (chapter06/chat/app.js)
[함께해봐요 6-9] CSS 파일 생성 (chapter06/chat/index.css)
[함께해봐요 6-10] 실시간 채팅창 클라이언트 코드 ① (chapter06/chat/index.html)
[함께해봐요 6-11] 실시간 채팅창 클라이언트 코드 ② (chapter06/chat/index.html)
7장. 토이 프로젝트 : 페이스북 클론 코딩
7.1 passport
passport란?
passport 사용하기
7.2 템플릿 엔진
정적 파일과 동적 파일
템플릿 엔진
7.3 토이 프로젝트 : 페이스북 클론 코딩
정리해봅시다
나의 이해도를 측정하자
[함께해봐요 7-1] 회원가입 화면 코드 (chapter07/ex_passport/index.html)
[함께해봐요 7-2] passport를 이용한 회원가입 서버 코드 (chapter07/ex_passport/app.js 1~32행)
[함께해봐요 7-3] passport를 이용한 회원가입 서버 코드 수정 ① (chapter07/ex_passport/app.js 34~62행)
[함께해봐요 7-4] passport를 이용한 회원가입 서버 코드 수정 ② (chapter07/ex_passport/app.js 64~119행)
[함께해봐요 7-5] index.js 파일 생성 (chapter07/ejs/index.js)
[함께해봐요 7-6] index.ejs 파일 생성 (chapter07/ejs/views/index.ejs)
[함께해봐요 7-7] head.js 파일 작성 (Chapter07/ejs/views/partials/head.ejs)
[함께해봐요 7-8] header.ejs 파일 작성 (Chapter07/ejs/views/partials/header.ejs)
[함께해봐요 7-9] footer.ejs 파일 작성 (Chapter07/ejs/views/partials/footer.ejs)
[함께해봐요 7-10] 조각난 파일을 하나로 모으기 (Chapter07/ejs/views/index2.ejs)
[함께해봐요 7-11] 메뉴의 라우터를 index2.js에서 생성 (Chapter07/ejs/index2.js)
[함께해봐요 7-12] package.json 파일 수정 (facebook-clone/package.json 6~8행)
[함께해봐요 7-13] app.js 파일 수정 ① (facebook-clone/app.js 1~11행)
[함께해봐요 7-14] app.js 파일 수정 ② (facebook-clone/app.js 13~22행)
[함께해봐요 7-15] app.js 파일 수정 ③ (facebook-clone/app.js 24~32행)
[함께해봐요 7-16] .env 파일 생성 (facebook-clone/.env)
[함께해봐요 7-17] app.js 파일 수정 ④ (facebook-clone/app.js 34~44행)
[함께해봐요 7-18] app.js 파일 수정 ⑤ (facebook-clone/app.js 46~58행)
[함께해봐요 7-19] app.js 파일 수정 ⑥ (facebook-clone/app.js 60~67행)
[함께해봐요 7-20] app.js 파일 수정 ⑦ (facebook-clone/app.js 69~75행)
[함께해봐요 7-21] app.js 파일 수정 ⑧ (facebook-clone/app.js 77~110행)
[함께해봐요 7-22] User.js 파일 작성 (facebook-clone/models/User.js)
[함께해봐요 7-23] Post.js 파일 작성 (facebook-clone/models/Post.js)
[함께해봐요 7-24] Comment.js 파일 작성 (facebook-clone/models/Comment.js)
[함께해봐요 7-25] User.js 파일 수정 ① (facebook-clone/routes/user.js 1~22행)
[함께해봐요 7-26] User.js 파일 수정 ② (facebook-clone/routes/users.js 24~29행)
[함께해봐요 7-27] .env 파일 작성 (facebook-clone/.env)
[함께해봐요 7-28] User.js 파일 수정 ③ (fackebook-clone/routes/users.js 31~38행)
[함께해봐요 7-29] User.js 파일 수정 ④ (facebook-clone/routes/users.js 40~83행)
[함께해봐요 7-30] User.js 파일 수정 ⑤ (facebook-clone/routes/users.js 85~119행)
[함께해봐요 7-31] User.js 파일 수정 ⑥ (facebook-clone/routes/users.js 121~278행)
[함께해봐요 7-32] User.js 파일 수정 ⑦ (facebook-clone/routes/users.js 280~298행)
[함께해봐요 7-33] post.js 파일 작성 (facebook-clone/routes/posts.js)
8장. 서버를 배포해보자
8.1 기본 준비
cross-env 설정하기
morgan, winston 설정하기
express-session 수정하기
보안 관련 모듈 추가하기
깃, 깃허브 사용하기
더 나아가기 : pm2와 메모리 DB
8.2 클라우드 서비스
8.3 클라우드 호스팅 서비스 : Heroku
8.4 도커 사용하기
도커란?
도커 기본 사용법
8.5 클라우드 인프라 서비스 : AWS EC2
AWS 계정 생성
EC2 인스턴스 생성
도커와 깃허브를 이용해서 EC2에 배포하기
정리해봅시다
나의 이해도를 측정하자
[함께해봐요 8-1] package.json 파일 수정 ① (facebook-clone/package.json)
[함께해봐요 8-2] winston.js 파일 수정 (facebook-clone/config/winston.js)
[함께해봐요 8-3] app.js 파일 수정 ① (facebook-clone/app.js)
[함께해봐요 8-4] app.js 파일 수정 ② (facebook-clone/app.js)
[함께해봐요 8-5] app.js 파일 수정 ③ (facebook-clone/app.js)
[함께해봐요 8-6] post.js 파일 수정 (facebook-clone/routs/posts.js)
[함께해봐요 8-7] users.js 파일 수정 (facebook-clone/routes/users.js)
[함께해봐요 8-8] login.ejs 파일 수정 (facebook-clone/views/users/login.ejs)
[함께해봐요 8-9] .env 파일 수정 (facebook-clone/.env)
[함께해봐요 8-10] app.js 파일 수정 ④ (facebook-clone/app.js)
[함께해봐요 8-11] package.json 파일 수정 ② (facebook-clone/package.json)
참고 링크
전체 소스코드 및 연습문제 풀이 해답 저장소
찾아보기
_주요 내용
빠르게 실무형 Node.js 개발자가 될 수 있도록 도와주는 실습형 입문서
_5줄 서버
_캐싱
_API 서버
_데이터베이스 연동
_실시간 통신
_페이스북 클론 코딩까지
“기초를 다질 수 있도록”
이 책에서 다루는 Node.js라는 기술은 자바스크립트를 알아야 사용할 수 있는 환경입니다. 하지만 자바스크립트에 익숙하지 않아도 프로그래밍이 어떤 것인지 기본 개념만 있으면 따라할 수 있도록 구성하였습니다.
“개발은 만들어보는 것”
서버 로직을 만든다는 것은 화면 개발처럼 시각적으로 눈에 보이는 결과가 나오는 것이 아니므로 어쩌면 ‘서버’라는 개념이 뜬구름 잡는 소리처럼 느껴질 수 있습니다. 그러므로 예제를 통해 개념과 원리를 서서히 습득하고 이해할 수 있도록 하였습니다.
“연습문제를 직접 풀어보지 않으면 아무리 좋은 입문서라도 백약이 무효입니다.”
직접 해보고 반복해서 학습해보는 것만이 낯설음을 익숙함으로 바꿀 수 있는 유일한 길입니다. 힌트까지 제공되니 반드시 혼자만의 힘으로 풀어보고 저자의 모범답안과 비교해보세요.
“토이 프로젝트로 빠르게 실무형 개발에 적응하자”
6장까지는 웹 서비스에 필요한 내용을 조각조각 나누어 살펴보았다면, 7장과 8장에서는 토이 프로젝트를 통해 내가 가진 조각들로 하나의 덩어리를 만들어 볼 수 있습니다. ‘클론 코딩’을 통해 서비스에 대한 전체적인 흐름을 익히고 배포까지 완벽하게 하나의 프로젝트 사이클을 경험해 봅니다. 많이 따라해보고 익숙해져서 내 것으로 만들어 보세요.
_저자 소개
지은이
박민경
건국대 소프트웨어공학과를 졸업하였으며, 과거 파이썬 케라스 및 Node.js 스택을 다루며 챗봇 프로젝트에 참여했고 현재 여행 산업에서 Tech를 적용하기 위한 테크투어 스타트업에서 개발자로 근무 중이다. 전공과정 및 크고 작은 프로젝트를 통해 습득한 Computer Science 지식을 이해하기 쉽게 전달하기 위해 개발 블로그를 운영 중이며, 개발자만을 위한 개발 문화가 아닌 다양한 사람들과 함께하는 개발 문화를 만들어가는 데 관심이 많다
.
_상세 이미지
_끝
'신간소개' 카테고리의 다른 글
[신간소개] 암호화폐 자동매매 시스템 만들기 with 파이썬: 대량의 시뮬레이션과 최적화 전략까지 (4) | 2022.02.21 |
---|---|
[신간소개] 보통의 취준생을 위한 코딩 테스트 with 파이썬: 백준 플래티넘 5 & 코드포스 파란색 랭크 달성하기 (0) | 2022.02.10 |
[신간안내] 백견불여일타(이젠 프로젝트다!) 스프링 부트 쇼핑몰 프로젝트 with JPA (6) | 2021.08.26 |
[신간안내] 사람과 프로그래머#11 나는 주니어 개발자다 (0) | 2021.08.26 |
[신간안내] 백견불여일타 (이젠 프로젝트다!) 파이썬 생활밀착형 프로젝트: 웹크롤링, 카카오톡 메시지 보내기, 업무자동화까지11가지 파이썬 프로젝트 (0) | 2021.06.03 |