책이 세상을 바꾼다

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 훅 살펴보기

에필로그

찾아보기

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)

참고 링크

전체 소스코드 및 연습문제 풀이 해답 저장소

찾아보기