책이 세상을 바꾼다

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장 속성을 지정할 때

01 요소의 속성을 데이터로 지정하는 : v-bind

02 정리

정리해봅시다

실습해봅시다

컬럼_v-bind의 생략

컬럼_케밥 표기법, 카멜 표기법, 파스칼 표기법

[함께 해봐요] 이미지를 지정하는 예제 : bindtext1.html

[함께 해봐요] 링크를 지정하는 예제 : bindtest2.html

[함께 해봐요] align 지정 : bindtest3.html

[함께 해봐요] 인라인 스타일 지정 : bindtest4.html

[함께 해봐요] 클래스 지정 : bindtest5.html

4장 유저 입력을 연결할 때

01 입력 폼을 데이터와 연결하기 : v-model

02 정리

정리해봅시다

실습해봅시다

[함께 해봐요] 입력한 문자열을 표시하는 예제 : modeltest1.html

[함께 해봐요] 입력한 문장과 문자수를 표시하는 예제 : modeltest2.html

[함께 해봐요] 체크박스의 ON/OFF를 확인하는 예제 : modeltest3.html

[함께 해봐요] 복수의 체크박스의 ON을 배열로 만드는 예제 : modeltest4.html

[함께 해봐요] 동의에 체크하면 송신 버튼이 활성화되는 예제 : modeltest5.html

[함께 해봐요] 선택한 라디오 버튼을 표시하는 예제 : modeltest6.html

[함께 해봐요] 이미지 출력을 라디오 버튼으로 변경하는 예제 : modeltest7.html

[함께 해봐요] 문자열이 선택한 색으로 변하는 예제 : modeltest8.html

[함께 해봐요] 복수의 선택을 배열로 처리 : modeltest9.html

[함께 해봐요] 다 쓰고 나서 입력하는 예제 : modeltest10.html

[함께 해봐요] 입력 후 자동으로 수식으로 변경되는 예제 : modeltest11.html

[함께 해봐요] 입력을 자동으로 수식으로 변경하지 않는 예제 : modeltest11b.html

[함께 해봐요] 앞뒤의 공백을 자동으로 제거하는 (트림) 예제 : modeltest12.html

[함께 해봐요] 앞뒤의 공백을 자동으로 제거(트림) 하지 않는 예제 : modeltest12b.html

5장 유저 조작과 연동

01 이벤트와 연결하기 : v-on

02 정리

정리해봅시다

실습해봅시다

[함께 해봐요] 클릭하면 1이 증가하는 예제 : ontest1.html

[함께 해봐요] 클릭하면 두번째는 누를 수 없게 되는 “좋아~” 버튼 예제 : ontest2.html

[함께 해봐요] 클릭하면 지정된 값만큼 증가시키는 예제 : ontest3.html

[함께 해봐요] [Enter] 키를 누르면 얼럿을 표시하는 예제 : ontest4.html

[함께 해봐요] [Shift] + [Enter] 키를 누르면 얼럿을 표시하는 예제 : ontest5.html

6장 조건과 반복의 사용

01 조건에 따른 표시 : v-if

02 반복 표시 : v-for

03 정리

정리해봅시다

실습해봅시다

컬럼_v-show

[함께 해봐요] true일 때만 표시하는 예제 : iftest1.html

[함께 해봐요] true와 false를 ON/OFF로 표시하는 예제 : iftest2.html

[함께 해봐요] 클릭하면 “좋아~” 버튼을 삭제하는 예제 : iftest3.html

[함께 해봐요] 배열 데이터를 리스트로 표시하는 예제 : foretest1.html

[함께 해봐요] 오브젝트 배열 데이터를 리스트로 표시하는 예제 : fortest2.html

[함께 해봐요] 1×5 ~ 10×5를 반복 표시하는 예제 : fortest3.html

[함께 해봐요] 배열 데이터를 번호가 붙어 있는 리스트로 표시하는 예제 : fortest4.html

[함께 해봐요] 배열 데이터를 테이블로 표시하는 예제 : tabletest0.html

[함께 해봐요] 배열 데이터를 테이블로 표시하는 예제 2 : tabletest.html

[함께 해봐요] 버튼으로 리스트에 추가/삭제 예제 : fortest5.html

[함께 해봐요] 버튼을 클릭하면 소트하는 예제 : fortest6.html

[함께 해봐요] 짝수만 표시하는 예제 : fortest7.html

[함께 해봐요] 버튼을 클릭하면 짝수만 표시하는 예제 : fortest8.html

7장 Google Charts와 연동 - 자바스크립트 라이브러리와 연동하는 방법

01 구글 차트란?

02 Google Charts와 연동하기

03 정리

정리해봅시다

실습해봅시다

[함께 해봐요] Google Charts에서 원 그래프를 표시하는 예제 : GoogleCharts.html

[함께 해봐요] Google Charts의 원 그래프에 버튼으로 투표할 수 있는 예제 : GoogleChartsVue.html

8장 데이터의 변화 감지

01 데이터를 사용한 별도 계산 : 산출 프로퍼티

02 데이터의 변화를 감지 : 감지 프로퍼티

03 정리

정리해봅시다

실습해봅시다

[함께 해봐요] 금액을 입력하면 소비세가 포함된 금액을 계산하는 예제 : computedtest1.html

[함께 해봐요] 단가와 개수를 입력하면 세금포함 금액을 계산하는 예제 : computedtest2.html

[함께 해봐요] 문장을 입력하면 남은 글자수를 표시하는 예제 : computedtest3.html

[함께 해봐요] 문자를 입력하면 그 문자를 표함한 항목만 표시하는 예제 : computedtest4.html

[함께 해봐요] 적색, 녹색, 청색의 슬라이더를 움직이면 완성된 색을 표시하는 예제 : computedtest5.html

[함께 해봐요] 입력문자를 감지하여 금지문자가 입력되면 얼럿을 띄우는 예제 : watchtest1.html

[함께 해봐요] 남은 시간이 0초가 되면 얼럿을 띄우는 예제 : timerTest.html

[함께 해봐요] 남은 시간(초)을 감시하여 표시하고 0초가 되면 얼럿을 띄우는 예제 : watchTest2.html

[함께 해봐요] TweenMax 테스트 : tweenMaxTest.html

[함께 해봐요] 숫자가 빠르게 올라가는 애니메이션을 보여주며 값이 증가하는 input 태그 예제 : watchtest3.html

9장 Markdown 에디터 만들기

01 Markdown 에디터란?

02 Markdown 에디터 작성

03 정리

[함께 해봐요] Markdown 에디터 예제 : markdown.html

10장 애니메이션

01 표시/비표시 때의 애니메이션 효과 : transition

02 리스트의 트랜지션 : transition-group

03 리스트가 정렬되며 이동하는 트랜지션

04 정리

정리해봅시다

실습해봅시다

[함께 해봐요] 체크박스로 표시/비표시에 애니메이션 효과를 주는 예제 : transtest1.html

[함께 해봐요] 버튼을 누르면 리스트가 증감할 때 애니메이션 효과를 주는 예제 : transtest2.html

[함께 해봐요] 클릭하면 셔플하는 예제 : shuffleTest.html

[함께 해봐요] 리스트의 순서가 이동하면서 변하는 애니메이션 예제 : transtest3.html

11장 ToDo 리스트 만들기

01 ToDo 리스트란?

02 임시 데이터로 ToDo 리스트 표시하기

03 개선 : 추가 & 삭제 기능

04 정리

실습해봅시다

[함께 해봐요] 임시 데이터로 표시하는 ToDo 리스트 : todolist1.html

[함께 해봐요] ToDo 항목의 추가&삭제 기능을 추가한 ToDo 리스트 : todolist2.html

12장 컴포넌트로 정리하기

01 부품으로 정리한다 : 컴포넌트

02 컴포넌트의 data를 function으로 만들기

03 값 전달 : props

04 정리

정리해봅시다

실습해봅시다

컬럼_Vue.js의 라이프 사이클

[함께 해봐요] 컴포넌트를 만들어 표시하는 예제 : comptest1.html

[함께 해봐요] 각각 다른 카운팅을 하는 컴포넌트 예제 : comptest2.html

[함께 해봐요] 컴포넌트에 값을 전달하는 예제 : comptest3.html

[함께 해봐요] 배열에서 컴포넌트를 만들어 표시하는 예제 : comptest4.html

13장 json 데이터 다루기

01 JSON 파일을 읽어들이는 방법

02 JSON 데이터를 읽어들여 컴포넌트로 나열

03 개선 : 트랜지션 붙이기

04 정리

정리해봅시다

실습해봅시다

[함께 해봐요] JSON을 읽어 들이는 예제(JavaScript) : jsonLoad.html

[함께 해봐요] JSON을 읽어들이는 예제(Vue.js) : jsonLoadVue.html

[함께 해봐요] 배열 데이터를 컴포넌트로 나열하는 예제 : jsontest1.html

[함께 해봐요] JSON 데이터를 읽어들여 트랜지션 효과를 주는 예제 : jsontest2.html

14장 간단한 게시판 만들어보기

01 게시판 만들기

02 정리

[함께 해봐요] MyBoardList 컴포넌트 작성

[함께 해봐요] MyBoardRead와 MyBoardWrite 컴포넌트 작성

[함께 해봐요] 컴포넌트 관련 HTML 태그 작성

[함께 해봐요] Vue 인스턴스 작성: data 속성 선언과 컴포넌트 메소드 정의

[함께 해봐요] loadData 메소드 작성

[함께 해봐요] Json 파일 만들기

[함께 해봐요] lodaData 이벤트가 일어나면 호출되도록 HTML 태그 작성하기

[함께 해봐요] boardList와 boardWrite 메소드 작성

[함께 해봐요] boardRead 메소드 작성

[함께 해봐요] boardSave 메소드 작성

[함께 해봐요] boardDelete 메소드 작성

[함께 해봐요] saveBoardList 메소드 작성

[함께 해봐요] 전체 소스 practice.html

찾아보기