Vue.js는 최신의 MVVM(Model-View-View-Model) 패턴 기반의 뷰 프레임워크이다. 재사용 가능한 컴포넌트와 반응형 바인딩의 쉬운 사용법으로 널리 알려져 있다. 프로토타입부터, Vuex를 이용하면 대규모 애플리케이션에도 적용할 수 있을 뿐만 아니라, 외부 의존성을 거의 가지지 않기 때문에 기존 프로젝트에 바로 적용해 개발하는 것도 가능하다. 이 책은 친절하고 재치 넘치는 설명법으로 포로모토 타이머와 쇼핑 목록 애플리케이션 예제를 중심으로 뷰를 사용해 SPA 앱을 개발하는 방법을 알려준다.

[목 차]

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
__애플리케이션 되돌아보기
____쇼핑 목록 애플리케이션
____포로모도 애플리케이션
__단지 이것이 시작인 이유
____예제 애플리케이션에 기능 추가하기
____애플리케이션 꾸미기
____애플리케이션을 다른 장치들로 확장하기
__요약

★ 이 책에서 다루는 내용 ★

■ 뷰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장. '그다음은?'에서는 이전까지 해온 것들을 마무리하고 독자들에게 더 공부할 내용들을 남겨둔다.

★ 지은이의 말 ★

이 책은 뷰JS(Vue.js)에 관한 내용을 다룬다. 이 책은 먼저 뷰JS가 무엇인지 소개하고 다른 프레임워크와 어떻게 다른지 비교하며 이를 통해 무엇을 할 수 있는지 설명한다. 뷰JS를 이용해 작고 재미있는 애플리케이션을 작성하며 애플리케이션의 다양한 특징들을 이해하고 그 특징들을 실제로 적용해본다. 최종적으로는 우리가 배운 것을 정리하고 이후 무엇을 더 공부해야 하는지 알아본다. 다음은 앞으로 살펴볼 내용들이다.
- 뷰JS가 무엇이고 어떻게 동작하는지 알아본다
- 뷰JS를 이용한 데이터 바인딩과 반응형
- 뷰JS의 재사용 가능한 컴포넌트
- 뷰JS의 플러그인
- 뷰JS 애플리케이션을 테스트하고 배포하기
이 책의 모든 예제들은 최근 공개된 뷰2.0 버전으로 작성됐고 삭제되거나 변경된 이전 버전의 내용에 관해서도 다룬다. 뷰JS를 사용한 애플리케이션 개발을 다룬 이 책의 내용이 독자 여러분의 흥미를 크게 북돋울 것이라 확신한다.

★ 옮긴이의 말★

관련 없는 분야의 사람들에게 개발자는 단순히 컴퓨터 프로그램을 작성하는 사람으로 생각되지만 실제 그 종류와 다루는 업무는 매우 다양하다. 그리고 업무의 성격과 도메인에 따라서 주로 사용되는 언어들이 존재하고, 같은 언어라도 프로젝트 진행 시에 사용하는 프레임워크에 따라 개발 스타일, 속도, 유지 보수성 등도 함께 변화한다. 이 책을 읽는 독자들은 아마 대부분 자바스크립트를 사용해본 경험이 있을 것이다. 프토로타입 기반인 자바스크립트는 동적 타입 언어며, 실행 환경이 주로 브라우저이므로 사용자와 UI의 상호작용을 방해하지 않기 위해 주로 비동기적인 특성을 가진다. 그럼 뷰SJ는 어떠한 특성을 가질까?
자바스크립트가 가지는 특성 위에 렌더링되는 뷰와 모델 사이의 데이터 바인딩을 손쉽게 만들어주며 재사용 가능한 컴포넌트를 통해 생산성과 유지 보수성을 높여준다. 여기까지는 리액트와 굉장히 유사한 특성을 보여준다고 할 수 있다. 그렇다면 어떠한 특성이 리액트와 뷰 사이에서 고민하는 개발자에게 셀링 포인트가 될 수 있을까? 이 책의 2장에도 설명돼 있지만 간단히 표현하면 빠른 개발 속도와 경량감이다. 리액트에 비해 결정해야 하는 것들의 수가 적고 기존 지식들을 활용할 수 있기 때문에 빠르게 프로토타입을 작성할 수 있다. 프로덕션 환경에 배포되는 파일 크기를 보면 뷰가 좀 더 작고, 뷰 2.0부터는 가상 DOM을 사용해 렌러딩 속도도 리액트보다 좀 더 빨라졌다. 이 점을 염두에 두면 문제 해결을 위한 선택지를 줄일 수 있을 것이다.
이 책의 저자는 여성인 동시에 한 아이의 엄마다. 따라서 책을 쓰기에 매우 어려운 환경이었을 것으로 짐작되지만, 그럼에도 이 책의 원서는 굉장히 짜임새 있게 구성돼 있으며 게다가 재치까지 가득하다. 이 책의 번역을 진행하면서 많이 배운 것 같아 기쁘고 더 많은 사람과 나눌 수 있어서 더욱 기쁘다.
번역을 진행하면서 뷰의 공식 한글화 문서를 참고해 되도록이면 용어를 통일하려고 노력했다. 아무쪼록 뷰를 시작하는 데 이 책이 좋은 출발점이 될 수 있길 기원한다.

올가필리포바
우크라이나 키예브에서 태어났으며 물리학자, 과학자, 교수 가족들 사이에서 자랐다. 우크라 국립기술대학교(National University of Ukraine Kyiv Polytechnic Institute)에서 시스템 분석을 전공했고, 20세에 포르투갈로 옮겨 코임브라대학(University of Coimbra)에서 학사 및 석사 학위를 취득했다. 재학 기간 동안 유럽에서 진행되는 프로젝트의 개발과 연구에 참여했고 컴퓨터 그래픽스와 운영체제 분야 조교로서 활동했다.
석사 학위를 취득한 후에는 피드자이(Feedzai)에서 근무를 시작했다. 그 당시 팀은 네 명으로 구성된 작은 규모의 팀으로 프로덕트를 시작부터 개발해, 현재는 가장 성공적인 포르투갈 스타트업이 됐다. 어느 시점에 엔진에서 웹 인터페이스로 데이터를 가져오는 자바스크립트 라이브러리를 작성하는 것이 주 업무가 됐고, 이를 계기로 해서 웹 개발이 주 관심사가 됐다. 동시에 코임브라의 전문가 교육 센터에서 고급 웹 개발 과정을 가르치는 일을 계속해오고 있다.
2013년에는 동생 및 남편과 함께 우크라이나에 기반을 둔 교육 프로젝트를 시작했다. 프로젝트의 이름은 EdEra며, 작은 규모의 온라인 교육 플랫폼에서 우크라이나 교육 시스템의 강자로 커나가고 있다. 현재 EdEra는 세계 시장을 노리고 있으며 IT에 관한 멋진 온라인 코스를 준비 중이니 놓치지 말자.
2014년 남편, 딸과 함께 포르투갈에서 베를린으로 이사했으며 그곳에서 미트릭스(Meetrics)의 프론트엔드 엔지니어로 일을 시작했다. 1년 후에는 멋진 프론트엔드 소프트웨어 개발자들을 이끄는 역할을 하게 됐다.
역시 소프트웨어 엔지니어이면서 멋진 남자인 루이(Rui)와 결혼했다. 루이는 코임브라 대학교에서 같이 공부했으며 피드자이에서도 함께 근무했다. 영특하고 사랑스러운 딸 타이사(Taissa)와 북실북실한 고양이 파투스카(Patusca), 두 마리의 친칠라 고양이 바라바시카(Barabashka), 체브라시카(Cheburashka)와 함께 살고 있다.
옮긴이 조승진
일본 IT 기업에서 근무 중인 소프트웨어 엔지니어다. 자바, 스프링, 자바스크립트, 파이썬, 객체지향 TDD, DDD에 관심이 많으며 웹 서비스를 개발한다. 개발자 문화를 사랑하고 세상에 영향을 미칠 수 있는 무엇인가를 만들기 위해 노력하고 있다.