빠르게 배워서 바르게 적용하는 Vue.js 퀵 스타트
해외주문/바로드림/제휴사주문/업체배송건의 경우 1+1 증정상품이 발송되지 않습니다.
패키지
북카드
키워드 Pick
키워드 Pick 안내
관심 키워드를 주제로 다른 연관 도서를 다양하게 찾아 볼 수 있는 서비스로, 클릭 시 관심 키워드를 주제로 한 다양한 책으로 이동할 수 있습니다.
키워드는 최근 많이 찾는 순으로 정렬됩니다.
Vue 2.5 | Vue CLI 3.0 기반 설명
작가정보
저자 원형섭은 2001년까지 삼성종합기술원 HCILAB에서 일하다 2001년부터 현재까지 크레듀 멀티캠퍼스(구 삼성 멀티캠퍼스)에서 프로그래밍, 빅데이터, NOSQL 분야 전임 교수로 활동하고 있다. 또한 강의와 병행하여 ㈜오픈에스지에서 수석 컨설턴트로 재직 중이며 삼성중공업, 이랜드, 삼성디스플레이 등에서 프로젝트를 진행하였다.
React, Angular, Vue.js 등의 프론트엔드 프레임워크, 라이브러리와 Open API, MSA(Micro Service Architecture)에 관심이 많으며 DB에서 백엔드, 프론트엔드까지 섭렵하는 풀스택 개발자를 지향한다.
목차
- CHAPTER 01 시작하기
1.1 Vue.js란?
1.2 개발 환경 설정
__1.2.1 Node.js 설치
__1.2.2 Visual Studio Code 설치
__1.2.3 크롬 브라우저 및 Vue.js devtools 설치
__1.2.4 Vue-CLI 설치
1.3 첫 번째 Vue.js 애플리케이션
CHAPTER 02 Vue.js 기초
2.1 hellovuejs 예제 분석
2.2 기본 디렉티브
__2.2.1 v-text, v-html 디렉티브
__2.2.2 v-bind 디렉티브
__2.2.3 v-model 디렉티브
2.2.4 v-show, v-if, v-else, v-else-if 디렉티브
2.3 반복 렌더링 디렉티브
2.4 기타 디렉티브
2.5 계산형 속성
CHAPTER 03 Vue 인스턴스
3.1 el, data, computed 옵션
3.2 메서드
3.3 관찰 속성
3.4 v-cloak 디렉티브
3.5 Vue 인스턴스 라이프 사이클
CHAPTER 04 이벤트 처리
4.1 인라인 이벤트 처리
4.2 이벤트 핸들러 메서드
4.3 이벤트 객체
4.4 기본 이벤트
4.5 이벤트 전파와 버블링
4.6 이벤트 수식어
__4.6.1 once 수식어
__4.6.2 키코드 수식어
__4.6.3 마우스 버튼 수식어
CHAPTER 05 스타일
5.1 스타일 적용
5.2 인라인 스타일
5.3 CSS 클래스 바인딩
5.4 계산형 속성, 메서드를 이용한 스타일 적용
5.5 컴포넌트에서의 스타일 적용
5.6 TodoList 예제
CHAPTER 06 컴포넌트 기초
6.1 컴포넌트 조합
6.2 컴포넌트의 작성
6.3 DOM 템플릿 구문 작성 시 주의 사항
6.4 컴포넌트에서의 data 옵션
6.5 props와 event
__6.5.1 props를 이용한 정보 전달
__6.5.2 event를 이용한 정보 전달
__6.5.3 props와 event 예제
6.6 이벤트 버스 객체를 이용한 통신
6.7 TodoList 실전 예제
CHAPTER 07 ECMAScript 2015
7.1 ES2015를 사용하기 위한 프로젝트 설정
7.2 let과 const
7.3 기본 파라미터와 가변 파라미터
7.4 구조분해 할당(destructuring assignment)
7.5 화살표 함수(Arrow function)
7.6 새로운 객체 리터럴
7.7 템플릿 리터럴
7.8 컬렉션
7.9 클래스
7.10 모듈
7.11 Promise
7.12 전개 연산자
CHAPTER 08 Vue CLI 도구
8.1 Vue CLI 구성요소와 설치
8.2 프로젝트 생성과 기본 사용법
__8.2.1 프로젝트 생성
__8.2.2 명령어 기본 사용법
__8.2.3 vue-cli-service 사용법
8.3 플러그인
8.4 vue.config.js
8.5 Vue CLI GUI 도구
CHAPTER 09 컴포넌트 심화
9.1 단일 파일 컴포넌트
9.2 컴포넌트에서의 스타일
__9.2.1 범위 CSS(Scoped CSS)
__9.2.2 CSS 모듈(CSS Module)
9.3 슬롯
__9.3.1 슬롯의 기본 사용법
__9.3.2 명명된 슬롯
__9.3.3 범위 슬롯
9.4 동적 컴포넌트
9.5 재귀 컴포넌트
CHAPTER 10 axios를 이용한 서버통신
10.1 서비스 API 소개
10.2 axios 기능 테스트
__10.2.1 http 프록시 설정
__10.2.2 axios 사용
__10.2.3 axios 요청 방법
__10.2.4 axios 응답 형식
__10.2.5 기타 메서드
__10.2.6 파일 업로드 처리
__10.2.7. axios 요청과 config 옵션
__10.2.8 Vue 인스턴스에서 axios 이용하기
__10.2.9 axios 사용 시 주의 사항
10.3. 연락처 애플리케이션 예제
__10.3.1 기초 작업
__10.3.2 App.vue 작성
__10.3.3 ContactList.vue 작성
__10.3.4 입력폼, 수정폼 작성
__10.3.5 사진 변경폼 작성
10.4 정리
CHAPTER 11 Vuex를 이용한 상태 관리
11.1 왜 Vuex를 사용하는가?
11.2 Vuex란?
11.3 상태와 변이
__11.3.1 상태와 변이 적용 예제
__11.3.2 헬퍼 메서드
11.4 게터
11.5 액션
__11.5.1 액션 이용하기
__11.5.2 액션을 이용한 비동기 처리
__11.5.3 액션의 기능
11.6 대규모 애플리케이션에서의 Vuex 사용
__11.6.1 역할별 분리
__11.6.2 모듈 이용하기
11.7 연락처 애플리케이션에 Vuex 적용하기
__11.7.1 상수 정의
__11.7.2 Vuex 저장소 객체 작성
__11.7.3 App.vue 변경
__11.7.4 ContactList.vue 변경
__11.7.5 ContactForm.vue 변경
__11.7.6 UpdatePhoto.vue 변경
__11.7.7 main.js 변경
__11.7.8 정리
CHAPTER 12 vue-router를 이용한 라우팅
12.1 vue-router란?
12.2 vue-router 기초
12.3 동적 라우트
12.4 중첩 라우트
12.5 명명된 라우트
12.6 프로그래밍 방식의 라우팅 제어
__12.6.1 라우터 객체의 push 메서드
__12.6.2 내비게이션 보호
12.7 라우팅 모드
12.8 라우트 정보를 속성으로 연결하기
12.9 연락처 애플리케이션에 라우팅 기능 적용
__12.9.1 초기 설정 작업
__12.9.2 vuex 상태 관리 기능 변경
__12.9.3 main.js에 라우팅 기능 추가
__12.9.4 App.vue 파일 변경
__12.9.5 ContactList.vue 컴포넌트 변경
__12.9.6 ContactForm.vue, UpdatePhoto.vue 컴포넌트 수정
12.10 지연 시간에 대한 처리
__12.10.1 API 호출 지연 시간 발생
__12.10.2 스피너 컴포넌트 작성
__12.10.3 상태와 변이, 액션 변경
CHAPTER 13 트랜지션 효과
13.1 CSS 트랜지션 기초
13.2 트랜지션 컴포넌트 기초
13.3 CSS 애니메이션 처리
13.4 트랜지션 이벤트 훅
13.5 리스트에 대한 트랜지션
13.6 연락처 애플리케이션에 트랜지션 적용하기
부록 A 단위 테스트
A.1 webpack 템플릿을 이용한 테스트
__A.1.1 기본 기능 테스트
__A.1.2 Vue 컴포넌트 테스트
__A.1.3 이벤트 시뮬레이션
A.2 Jest를 이용한 테스트
__A.2.1 Jest 설정
__A.2.2 간단한 테스트 코드 작성
__A.2.3 Vue 컴포넌트에 대한 테스트
부록 B 서버 사이드 렌더링
B.1 프로젝트 생성과 초기화
B.2 디렉터리 구조
B.3 저장소 기능 작성
B.4 nuxt.config.js 파일 작성
B.5 레이아웃 작성
B.6 페이지 작성
B.7 중첩 라우트 적용
B.8 트랜지션 효과 적용
출판사 서평
실무에서 꼭 알아야하는 Vuex와 Vue-router 친절하고 꼼꼼하게 설명합니다.
- Visual Studio Code를 사용하며 Vue.js, ES6 관련 플러그인을 설치하고 이를 이용해 코드 작성을 돕습니다.
- Vue.js를 통해 MVVM 패턴의 뷰 중심 애플리케이션을 개발할 수 있습니다.
- 크롬 브라우저에 Vue devtools를 설치하고 사용하는 방법을 소개하여 디버깅 방법을 이해합니다.
- 동일한 기능의 예제를 여러 가지 형태와 스타일로 개발함으로써 좀더 Vue.js의 기능에 집중할 수 있습니다.
- Vue.js를 개발할 때 알아두어야 할 ES6 문법을 별도의 장으로 구분하여 정리했습니다.
- Vue-CLI를 사용해 프로젝트를 생성하고 개발하는 방법을 익힙니다.
- Vuex를 이용해 중앙집중화된 상태 관리 기법을 다룹니다.
- Vue-router를 이용한 SPA(Single Page Application) 구조를 이해합니다.
- axios를 이용해 서버 통신을 이해합니다.
- Vue.js 개발에는 외부 서비스 API가 필요한 경우가 많습니다. 서비스 API를 직접 개발하지 않아도 되게끔 필자가 제공하는 서비스 API인 http://sample.bmaster.kro.kr이 제공됩니다. 더불어 https://github.com/stepanowon/vuejs_book_2nd에서 직접 내려받아 실행할 수도 있습니다
기본정보
ISBN | 9791186710197 |
---|---|
발행(출시)일자 | 2017년 09월 05일 |
쪽수 | 528쪽 |
크기 |
171 * 233
* 29
mm
/ 852 g
|
총권수 | 1권 |
Klover
e교환권은 적립 일로부터 180일 동안 사용 가능합니다.
리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 리뷰 종류별로 구매한 아이디당 한 상품에 최초 1회 작성 건들에 대해서만 제공됩니다.
판매가 1,000원 미만 도서의 경우 리워드 지급 대상에서 제외됩니다.
일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
- 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
- 도서와 무관한 내용의 리뷰
- 인신공격이나 욕설, 비속어, 혐오발언이 개재된 리뷰
- 의성어나 의태어 등 내용의 의미가 없는 리뷰
리뷰는 1인이 중복으로 작성하실 수는 있지만, 평점계산은 가장 최근에 남긴 1건의 리뷰만 반영됩니다.
구매 후 리뷰 작성 시, e교환권 200원 적립
문장수집
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.
구매 후 리뷰 작성 시, e교환권 100원 적립