장바구니 담기 close

장바구니에 상품을 담았습니다.

Vue.js 코딩 공작소 컴포넌트, Vuex, Vue-CLI, Vue-Router까지 웹 애플리케이션 제작 흐름 그대로 배우자!

  • 에릭한쳇
  • |
  • 길벗
  • |
  • 2019-09-20 출간
  • |
  • 344페이지
  • |
  • 183 X 235 X 14 mm
  • |
  • ISBN 9791160509229
판매가

24,000원

즉시할인가

21,600

카드할인

648원(즉시할인 3%)

적립금

1,200원 적립(5%적립)

배송비

무료배송

(제주/도서산간 배송 추가비용:3,000원)

추가혜택

네이버페이 무조건 1%적립+ 추가 1%적립

수량
+ -
총주문금액
21,600

※ 스프링제본 상품은 반품/교환/환불이 불가능하므로 신중하게 선택하여 주시기 바랍니다.

출판사서평




빠르게 학습하고 손쉽게 개발하라!

왜 Vue.js인가?
Vue.js는 웹 애플리케이션에서 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 프레임워크다. 다른 단일형 프레임워크와 달리 점진적으로 채택할 수 있게 설계되어 웹 애플리케이션의 일부분에만 적용하다가 점차 확장할 수 있으며, 처음부터 Vue.js로 구현할 수도 있다. 또한, 문법이 간단해 HTML, CSS, 자바스크립트를 경험한 적이 있다면 비교적 손쉽게 익힐 수 있다.

Vue.js 핵심 개념부터 웹 스토어 애플리케이션 구축까지
인스턴스, 상호 작용, 폼, 입력, 반복문, 리스트, 컴포넌트 같은 기초 지식부터 트랜지션, 애니메이션, Vuex까지 애완용품을 판매하는 웹 스토어 애플리케이션을 구축하며 학습한다. 이 과정에서 Vue.js가 무엇을 하는지, 왜 그렇게 하는지에 대한 기초 개념과 웹 애플리케이션 개발 흐름에 대해 확실히 이해할 수 있다.

바로 써먹을 수 있는 실용적인 코드로 학습하자
책 전체에 걸쳐 제품 목록, 체크아웃, 관리 인터페이스를 갖춘 웹 스토어 애플리케이션을 구축한다. 반응형 UI 모델을 시작으로 Vue.js의 고유 기능을 추가하면서 프로젝트를 확장해 나가며, Vue-CLI를 사용해 복잡한 애플리케이션을 단순화한다. 또한, Vuex와 테스트까지 설명해 웹 애플리케이션 서비스를 준비하는 데 필요한 모든 과정을 경험할 수 있다. 이 뿐만 아니라 자신만의 프로젝트를 진행할 때 웹 스토어 예제를 기초로 사용할 수도 있다.


목차


1부 Vue.js와 친해지기

1장 Vue.js 소개
1.1 거인의 어깨 위에서
__1.1.1 모델-뷰-컨트롤러 패턴
__1.1.2 모델-뷰-뷰모델 패턴
__1.1.3 반응형 애플리케이션이란?
__1.1.4 자바스크립트 계산기
__1.1.5 Vue 계산기
__1.1.6 자바스크립트와 Vue 비교
__1.1.7 Vue는 어떻게 MVVM과 반응성을 사용할까?
1.2 왜 Vue.js를 사용할까?
1.3 미래에 대한 생각
1.4 요약

2장 Vue 인스턴스
2.1 첫 애플리케이션
__2.1.1 Vue 인스턴스 루트
__2.1.2 애플리케이션이 잘 작동하는지 확인
__2.1.3 뷰 안에서 무언가 보여 주기
__2.1.4 Vue에서 속성 살펴보기
2.2 Vue 생명 주기
__2.2.1 생명 주기 훅 추가
__2.2.2 생명 주기 코드 탐구
__2.2.3 생명 주기 코드를 유지할까?
2.3 상품 표시
__2.3.1 상품 데이터 정의
__2.3.2 상품 화면 마크업
2.4 출력 필터 적용
__2.4.1 필터 함수 작성
__2.4.2 마크업에 필터를 추가하고 여러 값 테스트
2.5 연습 문제
2.6 요약

2부 뷰와 뷰-모델

3장 상호 작용성 추가
3.1 장바구니 데이터는 배열 추가로 시작
3.2 DOM 이벤트에 바인딩
__3.2.1 이벤트 바인딩 기초
__3.2.2 [장바구니 담기] 버튼에 이벤트 연결
3.3 [장바구니 담기] 버튼을 추가하고 개수 세기
__3.3.1 계산된 속성은 언제 사용할까?
__3.3.2 계산된 속성으로 업데이트 이벤트 살펴보기
__3.3.3 장바구니에 담긴 상품 개수 표시 및 테스트
3.4 버튼에 사용자 편의 추가
__3.4.1 재고 주시
__3.4.2 계산된 속성과 재고 작업
__3.4.3 v-show 지시자 기초
__3.4.4 v-if와 v-else를 사용해서 버튼 비활성화
__3.4.5 토글 기능이 있는 <장바구니 담기> 버튼 추가
__3.4.6 v-if를 사용해서 체크아웃 페이지 표시
3.4.7 v-show와 v-if/v-else 비교
3.5 연습 문제
3.6 요약

4장 폼과 입력
4.1 v-model 바인딩 사용
4.2 값 바인딩 살펴보기
__4.2.1 체크 박스에 값 바인딩
__4.2.2 값 바인딩과 라디오 버튼 작업
__4.2.3 v-for 지시자 알아보기
4.3 수식어 살펴보기
__4.3.1 .number 수식어 사용
__4.3.2 입력 값 다듬기
__4.3.3 .lazy v-model 수식어
4.4 연습 문제
4.5 요약

5장 조건부, 반복, 리스트
5.1 사용 가능한 목록 메시지 표시
__5.1.1 체크 박스에 값 바인딩
__5.1.2 v-else와 v-else-if를 사용해서 메시지 더 추가
5.2 상품 반복
__5.2.1 v-for 범위를 이용한 별점 추가
__5.2.2 별점에 HTML 클래스 바인딩
__5.2.3 상품 셋팅
__5.2.4 products.json에서 상품 정보 가져오기
__5.2.5 v-for 지시자로 앱 리팩토링
5.3 레코드 정렬
5.4 연습 문제
5.5 요약

6장 컴포넌트 사용
6.1 컴포넌트란?
__6.1.1 컴포넌트 생성
__6.1.2 전역 등록
6.1.3 지역 등록
6.2 컴포넌트의 관계
6.3 속성을 사용해서 데이터 전달
__6.3.1 리터럴 속성
__6.3.2 동적 속성
__6.3.3 속성 검증
6.4 템플릿 컴포넌트 정의
__6.4.1 인라인 템플릿 문자열 사용
__6.4.2 text/x-template 스크립트 요소
__6.4.3 단일 파일 컴포넌트
6.5 커스텀 이벤트
__6.5.1 이벤트 수신
__6.5.2 .sync를 사용해서 자식 속성 변경
6.6 연습 문제
6.7 요약

7장 고급 컴포넌트와 라우팅
7.1 슬롯 사용
7.2 지정 슬롯 살펴보기
7.3 범위 슬롯
7.4 동적 컴포넌트 앱 생성
7.5 비동기 컴포넌트 설정
7.6 Vue-CLI를 사용하여 애완용품샵 앱 변환
__7.6.1 Vue- CLI로 새로운 애플리케이션 생성
__7.6.2 라우트 설정
__7.6.3 애플리케이션에 CSS, Bootstrap, Axios 추가
__7.6.4 컴포넌트 설정
__7.6.5 Form 컴포넌트 생성
__7.6.6 Main 컴포넌트 추가
7.7 라우팅
__7.7.1 매개변수가 있는 상품 경로 추가
__7.7.2 태그와 함께 라우터 링크 설정
__7.7.3 스타일을 적용한 라우터 링크 설정
__7.7.4 수정 경로 추가
__7.7.5 리다이렉션과 와일드카드 사용
7.8 연습 문제
7.9 요약

8장 트랜지션 및 애니메이션
8.1 트랜지션 기본
8.2 애니메이션 기본
8.3 자바스크립트 훅
8.4 트랜지션 컴포넌트
8.5 애완용품샵 애플리케이션 업데이트
__8.5.1 애완용품샵 애플리케이션에 트랜지션 추가
__8.5.2 애완용품샵 애플리케이션에 애니메이션 추가
8.6 연습 문제
8.7 요약

9장 Vue 확장
9.1 믹스인과 함께 기능 재사용
__9.1.1 전역 믹스인
9.2 예제와 함께 커스텀 지시자 배우기
__9.2.1 수정자, 값, 인수를 포함한 전역 커스텀 지시자
9.3 렌더 함수와 JSX
__9.3.1 렌더 함수 예제
__9.3.2 JSX 예제
9.4 연습 문제
9.5 요약

3부 데이터 모델링, API 사용과 테스트

10장 Vuex
10.1 Vuex, 뭐가 좋을까?
10.2 Vuex 상태와 뮤테이션
10.3 게터와 액션
10.4 애완용품샵 앱과 함께 Vue-CLI에 Vuex 추가
__10.4.1 Vue- CLI에서 Vuex 설치
10.5 Vuex 헬퍼
10.6 모듈 살펴보기
10.7 연습 문제
10.8 요약

11장 서버와의 통신
11.1 서버 사이드 렌더링
11.2 Nuxt.js 소개
__11.2.1 음악 검색 앱 생성
__11.2.2 프로젝트 생성과 의존성 설치
__11.2.3 빌딩 블록 및 컴포넌트 생성
__11.2.4 기본 레이아웃 업데이트
__11.2.5 Vuex를 사용해서 저장소 추가
__11.2.6 미들웨어 사용
__11.2.7 Nuxt.js를 사용해서 경로 생성
11.3 파이어베이스와 VuexFire로 서버와 통신
__11.3.1 파이어베이스 설정
__11.3.2 파이어베이스로 애완용품샵 앱 설정
__11.3.3 인증 상태로 Vuex 업데이트
__11.3.4 인증으로 헤더 컴포넌트 업데이트
__11.3.5 파이어베이스 실시간 데이터베이스로 Main.vue 업데이트
11.4 연습 문제
11.5 요약

12장 테스트
12.1 테스트 케이스 생성
12.2 지속 통합·전달·배포
__12.2.1 지속 통합
__12.2.2 지속 전달
__12.2.3 지속 배포
12.3 테스트 종류
12.4 환경 설정
12.5 vue-test-utils로 첫 테스트 케이스 생성
12.6 테스트 컴포넌트
__12.6.1 테스트 속성
__12.6.2 텍스트 테스트
__12.6.3 CSS 클래스 테스트
__12.6.4 모의 Vuex 테스트
12.7 크롬 디버거 설정
12.8 연습 문제
12.9 요약

부록 A 환경 설정
A.1 크롬 개발자 도구
A.2 크롬 vue-devtools
A.3 각 장의 컴패니언 코드 얻기
A.4 Node.js와 npm 설치
__A.4.1 원 클릭 인스톨러를 사용해서 Node.js 설치
__A.4.2 NVM을 사용해서 Node.js 설치
__A.4.3 리눅스 패키지 관리 시스템을 사용해서 Node.js 설치
__A.4.4 MacPorts 혹은 Homebrew를 사용해서 Node.js 설치
__A.4.5 Node.js가 제대로 설치되었는지 확인
A.5 Vue-CLI 설치

부록 B 연습 문제 해답

도서소개


 

교환 및 환불안내

도서교환 및 환불
  • 상품불량 및 오배송등의 이유로 반품하실 경우, 반품배송비는 무료입니다.
  • 고객님의 변심에 의한 반품,환불,교환시 택배비는 본인 부담입니다.
  • 상담원과의 상담없이 교환 및 반품으로 반송된 물품은 책임지지 않습니다.
  • 반품신청시 반송된 상품의 수령후 환불처리됩니다.(카드사 사정에 따라 카드취소는 시일이 3~5일이 소요될 수 있습니다.)
  • 주문하신 상품의 반품,교환은 상품수령일로 부터 7일이내에 신청하실 수 있습니다.
  • 상품이 훼손된 경우 반품 및 교환,환불이 불가능합니다.
  • 반품/교환시 고객님 귀책사유로 인해 수거가 지연될 경우에는 반품이 제한될 수 있습니다.
  • 스프링제본 상품은 교환 및 환불이 불가능 합니다.
  • 군부대(사서함) 및 해외배송은 불가능합니다.
  • 오후 3시 이후 상담원과 통화되지 않은 취소건에 대해서는 고객 반품비용이 발생할 수 있습니다.
반품안내
  • 마이페이지 > 나의상담 > 1 : 1 문의하기 게시판 또는 고객센터 1800-7327
교환/반품주소
  • 경기도 파주시 문발로 211 1층 / (주)북채널 / 전화 : 1800-7327
  • 택배안내 : CJ대한통운(1588-1255)
  • 고객님 변심으로 인한 교환 또는 반품시 왕복 배송비 5,000원을 부담하셔야 하며, 제품 불량 또는 오 배송시에는 전액을 당사에서부담 합니다.