'프론트엔드'에 해당되는 글 4건
- 2024.04.16 :: [신간안내] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트
- 2024.04.16 :: [오탈자 정보] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트 2
- 2024.04.16 :: [도서 자료] 백견불여일타(이젠 프로젝트다!)리액트 쇼핑몰 프로젝트
- 2020.05.11 :: [신간안내] 백견불여일타 Vue.js 입문 : 예제와 실습문제에 집중한 프론트엔드 입문서
● 지은이: 홍준혁
● 페이지: 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 |
'오탈자 정보' 카테고리의 다른 글
[오탈자 정보] 생성형 AI를 활용한 게임 개발: ChatGPT, Tensor.Art, Udio (0) | 2024.12.03 |
---|---|
[오탈자 정보] 시작하는 개발자들을 위한 기술 여행 가이드: 개발 지식을 높은 곳에서 한눈에 조망할 수 있는 책 (3) | 2023.11.06 |
[오탈자 정보] 자바의 신 VOL.2, 3rd Edition (4) | 2023.10.13 |
[오탈자 정보] 자바의 신 VOL.1, 3rd Edition (4) | 2023.10.13 |
[오탈자 정보] 개발자로 첫 출근했어요 (0) | 2023.09.27 |
예제소스 깃허브 링크입니다.
https://github.com/Hong-JunHyeok/shopping_app_example
-----------------------------------------------------------------------------------------------------------
강의자료가 필요하신 교수님이나 강사님은 연락주시면 보내드리겠습니다.
담당: 임성춘 편집장
이메일: chief@roadbook.co.kr
TEL: 02-874-7883(010-9490-7883)
이메일로 연락하실 때는, 아래 내용을 꼭 알려주세요.
대학명(학원명), 강의과정명, 수강인원수, 수강기간, 전화번호
[샘플 다운로드]
'자료실' 카테고리의 다른 글
[도서 자료] 생성형 AI를 활용한 게임 개발: ChatGPT, Tensor.Art, Udio (0) | 2024.12.03 |
---|---|
[도서 자료] 시작하는 개발자들을 위한 기술 여행 가이드 : 개발 지식을 높은 곳에서 한눈에 조망할 수 있는 책 (0) | 2023.11.06 |
[도서 자료] 자바의 신 VOL.2, 3rd Edition (0) | 2023.10.13 |
[도서 자료] 자바의 신 VOL.1, 3rd Edition (0) | 2023.10.13 |
[도서 자료] 개발자로 첫 출근했어요 (0) | 2023.09.27 |
● 저자: Yoshinao Mori
● 역자: 신대호
● 페이지: 324
● 판형: 사륙배판형(188*257)
● 도수: 2도
● 정가: 22,000원
● 발행일: 2020년 5월 18일
● ISBN: 978-89-97924-57-8 93000
[강컴] [교보] [반디] [알라딘] [예스24] [인터파크]
[샘플원고]
_도서 내용
이 책은 프론트엔드 자바스크립트 프레임워크 Vue.js를 빠르게 배우고 현업에 적용하고자 하는 개발자 혹은 프론트엔드 입문자를 위한 책이다. 80여 개의 예제와 각 장마다 실습문제를 제공하고 있으며 마지막 장에는 Json 기반 게시판 프로젝트를 진행해봄으로써 Vue.js로 웬만한 프론트엔드 프로그램을 디자인할 수 있는 역량을 가질 수 있을 것이다.
_대상 독자
자바스크립트 프레임워크 Vue를 빠르게 배우고 실무에 적용하고자 하는 개발자
프론트엔드 자바스크립트 프레임워크를 배우고자 하는 프론트엔드 입문자
_목차
지은이의 글
편집자이자 베타테스터의 글
일러두기
1장 Vue.js란?
01 Vue.js란?
02 Vue.js는 “데이터와 뷰를 연결해 주는 역할”
03 설치해 봅시다
04 한번 실행해 봅시다
05 정리
정리해봅시다
실습해봅시다
컬럼_다른 작성법
컬럼_CSS 예제
[함께 해봐요] 클릭한 횟수를 표시하는 버튼 : countup.html
2장 데이터 표시
01 Vue 인스턴스 만들기 : new Vue
02 데이터를 그대로 표시 : {{데이터}}
03 사용할 수 있는 데이터의 종류
04 정리
정리해봅시다
실습해봅시다
컬럼_싱글 쿼테이션과 더블 쿼테이션
[함께 해봐요] 데이터를 있는 그대로 표시하는 예제 : hello1.html
[함께 해봐요] 데이터를 v-text로 표시하는 예제 : hello2.html
[함께 해봐요] 데이터로 HTML을 표시하는 예제 : hello3.html
[함께 해봐요] 여러 가지 데이터 형을 표시하는 예제 : datatext1.html
[함께 해봐요] JavasScript를 이용하여 표시하는 예제 : datatest2.html
[함께 해봐요] 배열값을 표시하는 예제 : datatest3.html
[함께 해봐요] 오프젝트 데이터를 표시하는 예제 : datatest4.html
[함께 해봐요] JavaScript로 만든 데이터를 표시하는 예제 : datatest5.html
[함께 해봐요] 오브젝트의 내용을 확인하는 예제 : datatest6.html
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
찾아보기
_주요 내용
[핵심 컨셉]
1. 한 땀 한 땀 작성한 예제와 연습문제
2. 누구나 따라 하며 배울 수 있는 완벽한 실습
[주요 특징]
[함께 해봐요] 예제 80개 수록
힌트와 미션이 주어지는 파트별 실습문제 12개 수록
Json 기반 게시판 프로젝트 제공
연습문제와 강의자료 제공.
“이 책은 HTML과 CSS를 어느 정도 알고 있으며
자바스크립트는 초보 단계인 독자를 위한 책입니다.”
자바스크립트로 안 되는 것은 거의 없습니다. 다만, 개발자마다 코딩 스타일도 다르고 같은 역할을 하더라도 프로그램 구조도 달라, 개발 효율성이 많이 떨어지게 되죠. 그래서 프레임워크가 등장한 겁니다. React, Angular, Vue가 대표적입니다. 이 책에서 다루는 Vue는 좀더 가벼운 웹 페이지를 만드는 데 사용됩니다. 배우기도 쉽고 구조도 엄청 간단합니다. 프레임워크란 개발자들이 아키텍처와 같은 고민을 덜어준다거나 공통적으로 자주 사용하는 기능을 포함하여 개발을 쉽게 도와주는 도구입니다. 그래서 어느 정도는 프레임워크 사용법을 배워야 하는 것이죠. 프레임워크도 프로그래밍 언어 못지 않게 상당히 익숙해져야 하는 학습 비용이 존재하기 때문에 다양한 프레임워크 속에서 옥석을 가려 내게 필요한 것을 선택하고 빠르게 습득하는 능력을 키우는 것도 중요합니다.
“이제는 새로운 언어보다는 프레임워크의 시대입니다.”
프레임워크 하면 어려워할 독자들을 위해 이 책은 Vue라는 대표적인 자바스크립트 프레임워크를
쉽고 빠르게 배울 수 있도록 구성했습니다. 그리고 번역서에는 원서에는 없는 [실습해봅시다]를 넣어 독자가 응용 능력을 키울 수 있게 만들었고 마지막 챕터에 게시판 프로젝트를 추가하여 Vue의 개발 과정을 체험해볼 수 있게 구성하였습니다.
[이 책의 학습 방법]
개념은 스윽 한번 훑고 지나간다고 해도 [함께 해봐요] 예제는 책을 보고 한번, 그리고 책을 안보고 한번, 이렇게 두번은 반복해서 봐야 합니다. 그리고 각 장의 마지막에 제공되는 [실습해봅시다]는 가능하면 본문을 보지 않고 구현해보도록 하고 안 되면 인터넷 검색 등을 통해 다양한 방법을 찾아보고 직접 구현할 수 있을 때까지 시간을 투자해보기 바랍니다.
_편집자 코멘트
처음 학습할 때는 무척 혼란스러울 것입니다. new라는 키워드를 이용해 Vue 인스턴스를 만들어내고 그 안에 el:이나 methods: 등의 여러 옵션을 거쳐 하나의 프로그램이 완성되는데, 이해가 안 되더라도 예제가 나올 때마다 따라 하다 보면, “아~ 얘네들이 Vue의 뼈대가 되며, 규칙이구나.”라는것을 금방 깨닫게 될 것입니다. 굳이 MVVM 모델을 구현한 게 Vue라는 것을 설명하지 않더라도말입니다. Vue는 리액트나 다른 프레임워크에 비하면 그 구조가 간단하다는 것도 프론트엔드 입문자가 배우기에 적합하다는 의미이기도 합니다. Vue를 시작으로 좀더 복잡한 React와 같은 다른 프레임워크에 도전해볼 것을 추천합니다.
_저자 소개
지은이
Yoshinao Mori
컴퓨터가 이 세상에 등장한 시대부터 미니게임을 만들어 오길 30년. 현재는 IOS 어플리케이션과 웹 컨텐츠 제작, 집필 활동, 관서학원대학과 성안조형대학 비상근 강사, 프로그래밍 스쿨 코프리의 강사 등 프로그래밍에 관한 폭넓은 활동을 하고 있다. <<Python 1년생>>, <<Java 1년생>>(성안당 번역), <<Xcode로 시작하는 아이폰 프로그래밍>>(로드북 번역), <<인공지능 앱을 만들어 보자!>> <<재미있게 배우는 알고리즘과 프로그래밍 도감'(마이 나비 출판), <<과연! 프로그래밍>>(SB크리에이티브) 등을 집필하였다.
신대호
웹 개발자이다. 일본에서 웹 솔루션 관련 SI 업무를 다수 진행하였고 웹 스크립트 언어를 중점적으로 다루고 있다. 현재는 게임회사에 근무 중이며 게임 서비스에 필요한 웹 개발을 진행하고 있다. 웹 개발 영역에서 프론트 프레임워크의 중요성이 커져 React, Vue 등의 서비스 도입을 진행하였다.
_상세 이미지
_끝
'신간소개' 카테고리의 다른 글
[신간안내] 데이터 시각화 입문: Before & After 데이터 시각화 사례 72가지 수록 (0) | 2020.07.06 |
---|---|
[신간안내] 백견불여일타 딥러닝 입문 with 텐서플로우 2.x (2) | 2020.06.01 |
[신간안내] 개발자 오디세이아: 더 나은 개발자의 삶을 위해 (사람과 프로그래머 #9) (3) | 2020.03.11 |
[신간안내] 프로그래머, 수학의 시대 (사람과 프로그래머 #8) (0) | 2020.03.11 |
[신간안내] IT과학 이야기#5 컴퓨터는 어떻게 만들어졌나요? (0) | 2020.01.20 |