Vue.js 2 시작하기 [가볍고 빠른 웹 개발을 위한 Vue.js]
- 원서명Learning Vue.js 2 (ISBN 9781786469946)
- 지은이올가 필리포바(Olga Filipova)
- 옮긴이조승진
- ISBN : 9788960777439
- 30,000원
- 2017년 05월 29일 펴냄 (절판)
- 페이퍼백 | 388쪽 | 188*235mm
- 시리즈 : acorn+PACKT
판매처
- 현재 이 도서는 구매할 수 없습니다.
책 소개
소스 코드 파일은 여기에서 내려 받으실 수 있습니다.
요약
Vue.js는 최신의 MVVM(Model-View-View-Model) 패턴 기반의 뷰 프레임워크이다. 재사용 가능한 컴포넌트와 반응형 바인딩의 쉬운 사용법으로 널리 알려져 있다. 프로토타입부터, Vuex를 이용하면 대규모 애플리케이션에도 적용할 수 있을 뿐만 아니라, 외부 의존성을 거의 가지지 않기 때문에 기존 프로젝트에 바로 적용해 개발하는 것도 가능하다. 이 책은 친절하고 재치 넘치는 설명법으로 포로모토 타이머와 쇼핑 목록 애플리케이션 예제를 중심으로 뷰를 사용해 SPA 앱을 개발하는 방법을 알려준다.
이 책에서 다루는 내용
■ 뷰JS를 사용해 완전히 동작하는 반응형 웹 애플리케이션을 밑바닥부터 작성하기
■ MVVM 아키텍처의 중요성과 뷰JS와 앵귤러JS/ 리액트JS 프레임워크의 차이점
■ 뷰JS를 사용해 기존 정적 애플리케이션을 반응형으로 변경하기
■ 플러그인을 사용한 애플리케이션 강화
■ 요구 사항에 맞는 커스텀 플러그인 제작
■ Vuex를 통한 애플리케이션 전역 상태 관리
■ 애플리케이션의 테스트 및 배포
이 책의 대상 독자
이 책은 웹 개발자가 되고 싶어 하는 사람들을 위해 쓰였다. 따라서 이제 막 웹 기술들을 접해본 입문자뿐 아니라 프레임워크나 다른 프로그래밍 언어와 같은 다양한 웹 기술에 이미 익숙한 전문가 모두가 이 책으로 반응형 웹 애플리케이션의 새로운 세상을 만날 수 있다.
만약 당신이 뷰 개발자고 뷰1.0을 사용해봤다면, 이 책의 모든 예제는 뷰2.0으로 작성됐기 때문에 뷰2.0으로 마이그레이션하기 위한 좋은 지침서로 활용될 수 있다. 또한 당신이 이미 뷰2.0을 사용하고 있더라도 다양한 뷰와 소프트웨어 엔지니어링의 개념을 사용해 처음부터 애플리케이션을 개발하고 나아가 배포 단계까지 진행해보는 좋은 경험을 얻을 수 있다.
이 책의 내용을 충분히 이해하려면 최소한의 기술적인 배경 지식은 필요하다. 이미 자바스크립트 코드를 작성할 수 있다면 큰 도움이 될 것이다.
이 책의 구성
1장. '뷰JS와 쇼핑 가기'에서는 뷰JS를 소개하고 책 전반에서 사용될 용어들을 정리하며, 처음으로 기본적인 예제들을 보여준다.
2장. '뷰JS의 기초: 설치 및 사용'에서는 뷰JS의 동작 원리를 설명한다. 아키텍처 패턴에 관한 이론적인 인사이트를 제공하고 거의 모든 뷰JS의 주요 개념들을 다룬다. 그리고 책의 나머지 영역을 거치면서 개발하게 될 애플리케이션을 부트스트랩한다.
3장. '컴포넌트: 이해 및 사용'에서는 컴포넌트에 대해 더 자세히 알아보고 간단한 콤퍼넌트 시스템과 단일 파일 컴포넌트를 사용해 애플리케이션을 다시 작성하는 법을 살펴본다.
4장. '반응형: 애플리케이션에 데이터 바인딩하기'에서는 뷰JS의 데이터 바인딩 메커니즘의 사용을 자세히 설명한다.
5장. 'Vuex: 애플리케이션 상태 관리'에서는 뷰JS의 상태 관리 시스템인 Vuex를 자세히 소개한다. 그리고 유지 보수 가능한 아키텍처를 위해서는 어떻게 사용해야 하는지 설명한다.
6장. '플러그인: 자신만의 벽돌로 집 짓기'에서는 뷰 애플리케이션에서 기존 플러그인을 사용하는 방법과 새로운 플러그인을 만들고 사용하는 법을 알아본다.
7장. '테스트: 지금까지 해온 것들을 테스트할 시간!'에서는 뷰 애플리케이션의 품질을 일정 수준으로 끌어올리기 위한 테스트 기술들을 살펴본다.
책의 예제 애플리케이션을 위해 단위 테스트와 종단 테스트를 작성해보면서 문제를 해결해 나간다.
8장. '배포: 서비스를 시작할 시간!'에서는 CI 도구들을 사용해 품질을 보장하면서 뷰 애플리케이션을 세상에 공개하는 법을 알려준다. 깃허브 저장소를 트래비스 CI와 헤로쿠 클라우드 배포 플랫폼에 연결하는 법을 설명한다.
9장. '그다음은?'에서는 이전까지 해온 것들을 마무리하고 독자들에게 더 공부할 내용들을 남겨둔다.
목차
목차
- 1장. 뷰JS와 쇼핑 가기
- 유행어
- 뷰JS의 역사
- 뷰JS에서 가장 중요한 것
- 쇼핑을 시작하자!
- jQuery를 이용해 쇼핑 목록 제작하기
- 뷰JS를 이용해 쇼핑 목록 제작하기
- 개발자 도구를 사용해 데이터 바인딩 분석하기
- 양방향 바인딩을 통해 사용자 입력을 데이터와 연동하기
- v-for 지시자를 사용해 목록을 렌더링하기
- 쇼핑 목록의 항목들을 체크, 언체크하기
- v-on 지시자를 사용해 새로운 쇼핑 목록 추가하기
- 뷰JS를 기존 프로젝트에서 사용하기
- 뷰JS 2
- 뷰JS를 이용한 프로젝트들
- Grammarly
- Optimizely
- FIlterBlend
- PushSilver
- 책의 진행 방향
- 시간을 관리하자!
- 계산된 속성으로 타이틀 수정하기
- 계산된 속성을 사용해 시간 값에 좌측 패딩 연산하기
- 시작, 일시 정지, 정지 버튼으로 상태 저장
- 연습 문제
- 요약
- 2장. 뷰JS의 기초: 설치 및 사용
- MVVM 아키텍처 패턴
- defineProperty, getter, setter
- 다른 프레임워크와의 비교
- 리액트
- 앵귤러
- 뷰
- 뷰JS 기초
- 재사용 가능한 컴포넌트
- 뷰JS 지시자
- 뷰JS 플러그인
- 연습 문제
- 애플리케이션 상태와 Vuex
- vue-cli
- IDE를 위한 뷰 플러그인
- 뷰JS 애플리케이션의 설치와 사용 그리고 디버깅
- 뷰JS 설치
- 뷰 애플리케이션을 디버깅
- 애플리케이션 스캐폴딩
- 쇼핑 목록 스캐폴딩
- 포모도르 애플리케이션 부트스트래핑하기
- 연습 문제
- 요약
- 3장. 컴포넌트: 이해 및 사용
- 컴포넌트 다시 한 번 알아보기
- 컴포넌트 사용의 장점
- HTML로 템플릿 작성
- 컴포넌트의 data와 el 속성 처리하기
- 컴포넌트의 범위
- 컴포넌트 내의 또 다른 컴포넌트
- 간단한 컴포넌트를 사용해 쇼핑 목록 재작성
- 모든 컴포넌트들을 위한 템플릿 정의하기
- 모든 컴포넌트들을 정의하고 등록하기
- 연습 문제
- 단일 파일 컴포넌트
- IDE 플러그인
- 스타일과 스코프
- 핫 리로딩
- 전처리기
- 단일 파일 컴포넌트를 사용해 쇼핑 목록 애플리케이션 재작성
- AddItemComponent
- ItemComponent와 ItemsComponent 구성하기
- 연습 문제
- 단일 파일 컴포넌트로 포모도르 애플리케이션 재작성
- CSS 트랜지션의 반응형 바인딩
- 요약
- 4장. 반응형: 애플리케이션에 데이터 바인딩하기
- 데이터 바인딩 다시 알아보기
- 데이터 보간(interpolation)
- 제목에 포도도로 상태 추가
- 연습 문제.
- 표현식과 필터 사용하기
- 표현식
- 필터
- 연습 문제
- 지시자 사용법 다시 알아보기
- v-model 지시자를 통한 양방향 바인딩
- v-bind 지시자를 사용해 속성 바인딩하기
- v-if와 v-show 지시자를 사용한 조건부 렌더링
- v-for 지시자를 사용해 배열 순회
- v-on 지시자를 사용한 이벤트 리스너
- 축약 표현
- 연습 문제
- 고양이들
- 요약
- 5장. Vuex: 애플리케이션 상태 관리
- 부모 자식 관계 컴포넌트 간의 통신, 이벤트, 그리고 어려운 문제들
- 전역 상태 관리가 필요한 이유는 무엇일까?
- Vuex의 정체?
- 저장소는 어떻게 동작하고 어떤 특징을 가지는가?
- 저장소 시작하기
- 저장소 세터와 게터
- 변이
- 액션
- 예제 애플리케이션에서 Vuex 저장소를 설치하고 사용하기
- 쇼핑 목록 애플리케이션에서 Vuex 저장소 사용하기
- 포모도로 애플리케이션에서 Vuex 저장소 사용하기
- 시작, 일시 정지, 정지 버튼에 활력 더하기
- 포도도로 분과 초를 바인딩하기
- 포모도로 타이머 생성
- 고양이 사진 변경
- 요약
- 6장. 플러그인: 자신만의 벽돌로 집 짓기
- 뷰 플러그인의 특징
- 쇼핑 목록 애플리케이션에서 vue-ressource 플러그인 사용하기
- 간단한 서버 생성
- vue-resource 설치와 자원 및 메소드 생성
- 애플리케이션 구동 시 모든 쇼핑 목록 가져오기
- 수정 시에 서버 상태 갱신하기
- 새로운 쇼핑 목록 생성하기
- 기존 쇼핑 목록을 삭제하기
- 연습 문제
- 플러그인을 직접 만들어 포모도로에서 사용하기
- NoiseGenerator 플러그인 제작
- 포모도로 애플리케이션에서 플러그인 사용
- 소리 전환을 위한 버튼 만들기
- 연습 문제
- 요약
- 7장. 테스트: 지금까지 해온 것들을 테스트할 시간!
- 왜 단위 테스트를 작성하는가?
- 뷰 애플리케이션에서 단위 테스트
- 쇼핑 목록 애플리케이션의 단위 테스트 작성
- 액션, 게터, 변이 테스트하기
- 좋은 테스트의 기준
- 코드 커버리지
- 서버 응답 흉내 내기 및 비동기 테스트 작성하기
- 컴포넌트 테스트하기
- 포모도로 애플리케이션의 단위 테스트 작성하기
- 종단 간 테스트란 무엇인가?
- 종단 테스트를 위한 나이트와치
- 포모도로 애플리케이션의 종단 테스트 작성하기
- 요약
- 8장. 배포: 서비스를 시작할 시간!
- 소프트웨어 배포
- 깃허브란?
- 트래비스란?
- 헤로쿠란?
- 깃허브 저장소로 애플리케이션 옮기기
- 트래비스로 CI 구축
- 포모도로 애플리케이션 배포하기
- 쇼핑 목록 애플리케이션 배포하기
- 요약
- 소프트웨어 배포
- 9장. 그다음은?
- 현재까지의 여정
- 뷰 2
- 애플리케이션 되돌아보기
- 쇼핑 목록 애플리케이션
- 포로모도 애플리케이션
- 단지 이것이 시작인 이유
- 예제 애플리케이션에 기능 추가하기
- 애플리케이션 꾸미기
- 애플리케이션을 다른 장치들로 확장하기
- 요약