자바스크립트 프레임워크인 React, Angular, Vue 중 Vue.js는 가장 인기 있는 프론트엔드 Github 프로젝트가 됐다. 이 책에서는 Vue.js 학습에 필요한 기본적인 환경 설정부터 뷰 인스턴스, 컴포넌트, Vue-router를 이용한 라우팅, vuex를 활용한 효과적인 데이터 관리를 자세한 설명과 예제로 쉽게 이해할 수 있게 구성했다. 또한 마지막 장에서 각광받는 풀스택 중 하나인 MEVN(MongoDB, Express, Vue, Node)의 이론 설명과 함께 예제를 따라 하면서 클라이언트(Vue) - 서버단(Node, Express, MongoDB)이 어떻게 동작하는지 전체적으로 이해할 수 있게 구성했다.
1장. Vue.js 시작하기
Vue.js를 학습하는 데 필요한 Node.js 설치를 시작으로 Vue.js 학습 시 필요한 기본적인 npm 명령어를 소개한다. Vue.js 프로젝트를 생성하는 방법을 소개하고 구체적으로 vue/cli를 이용한 방법을 설명한다. 개발 툴로 요즘 각광받고 있는 Visual Studio Code 설치 및 기능을 설명하고 Vue.js 개발자 도구인 devtools에 대해서 소개하며 끝으로 자바스크립트 ES6에 새롭게 등장하고 이 책에서도 자주 사용되는 화살표 함수(\u003d>)를 설명한다.

2장. Vue.js 애플리케이션의 시작 - 뷰 인스턴스
Vue.js 애플리케이션의 시작점인 뷰 인스턴스(Vue instance)를 정의하고 지원하는 다양한 속성을 이해하고 나아가 이를 응용할 수 있도록 소개한다. method 프로퍼티를 이용해 전통적인 이벤트 처리 방법과 computed, watch 프로퍼티를 이용해 data 객체 내 데이터를 저장하는 프로퍼티에 변화가 발생했을 때마다 변화를 처리하는 방법을 설명한다. props 프로퍼티를 이용해 부모 컴포넌트(뷰 인스턴스)로부터 자녀 컴포넌트에게 데이터를 전달하는 방법과 뷰 인스턴스의 생존 주기에 대해서 설명한다.

3장. 엘리먼트에 기능을 덧붙이는 디렉티브
디렉티브(Directives)는 p, div 같은 HTML 엘리먼트에 붙여 해당 엘리먼트에 뭔가를 할 수 있도록 정의하는 일종의 명령으로 v-prefix 형태로 엘리먼트의 시작태그에 속성의 형태로 추가해 사용한다. v-if, v-for 같은 디렉티브를 이용한 흐름제어를 소개한다. v-model 디렉티브를 이용한 양방향 데이터 바인딩에 대해서 소개하며 마지막으로 v-on 디렉티브를 이용한 이벤트 처리에 대해 설명한다.

4장. 재사용이 가능한 레고(Lego)와 같은 컴포넌트
Vue.js의 애플리케이션을 기능적이고 효과적으로 관리하는 데 핵심적 역할을 하는 컴포넌트(Component)에 대해 CDN, vue/cli를 이용해 어떻게 컴포넌트를 정의, 등록해 사용할 수 있는지 소개한다. 독립적으로 동작하는 컴포넌트 간의 데이터 전달을 위해 props, $emit, eventbus를 이용하는 방법을 설명한다. 좀 더 복잡한 데이터들을 전달하는 데 용이한 슬롯(slot) 개념을 소개하고 vue.js 2.6 버전에서 새롭게 등장한 v-slot까지 설명한다.

5장. 다양한 장치들에 대한 사이트 디자인에 적합한 Materialize, Vuetify
스마트폰, 태블릿, 랩톱, PC 등 다양한 장치에서 동작하는 페이지를 디자인하는 일은 쉬운 일이 아니다. 이러한 작업을 수월하게 할 수 있도록 Google Material Design에 기반을 둔 Materialize, Vuetify 라이브러리를 소개한다. 이 두 라이브러리를 이용해 Grid 시스템을 이해하고 활용할 수 있으며 이미지, 텍스트가 포함된 card 형태의 콘텐츠를 추가하는 방법, slider 컴포넌트를 이용한 이미지 슬라이더를 만들고 Navbar 컴포넌트를 이용해 사이트를 탐색하는 방법 등을 설명한다. 마지막으로 vue.js와 구글 클라우드(Google Cloud) 데이터베이스인 Firestore를 이용해 프론트는 vue.js, 백엔드는 Firestore로 구성되는 실시간 채팅 프로그램을 만들어봄으로써 앞서 학습한 Materialize에 실제로 적용해본다.

6장. 사용자로부터 데이터 입력 및 서버로 데이터 전달을 위한 Forms
form과 관련된 HTML 엘리먼트를 소개하고 엘리먼트와 뷰 인스턴스의 data 객체 내에 정의되는 데이터들 간의 양방향 데이터 바인딩이 v-model 디렉티브를 통해 어떻게 이뤄지는지 설명한다. 서버로 전송하기 전에 입력된 데이터가 정확한지 확인하는 작업인 유효성 검사과정을 소개하고 유효성 검사를 위해 vuetify를 이용하는 방법을 설명한다. node.js를 이용해 서버를 만들어 실제 서버로 전송되는 데이터에 대한 유효성 검사를 설명한다.

7장. 웹사이트 탐색을 위한 Routing
라우팅은 사용자가 원하는 정보나 서비스를 쉽게 탐색할 수 있도록 웹사이트 내의 웹페이지들 간의 이동을 정의한다. 이 장에서는 vue-router를 이용해 프로젝트에 기능을 추가하는 방법을 소개한다. nested routes를 이용해 중첩 라우팅 경로, named routes, named views를 통해 다수의 뷰를 하나의 페이지에 관리하는 방법을 알 수 있으며 navigation guard를 이용해 페이지에 대한 접근 제어를 설명한다.

8장. 효율적인 데이터 관리를 위한 Vuex
Vue.js 애플리케이션에서 한 곳에 데이터 저장소(store)를 두고 애플리케이션 내의 모든 컴포넌트가 이용할 수 있게 효율적으로 관리하는 vuex를 소개한다. 상태(state)를 이용해 데이터를 저장하고 이 상태에 대한 직접적인 변경과 추적이 가능한 mutation, 상태로부터 데이터를 가져오는 함수인 getters, mutation을 커밋(commit)해 간접적으로 상태를 수정하고 비동기적으로 동작하는 Action을 설명한다.

9장. MEVN 기반 RESTful 서비스
2000년 로이 필딩(Roy Fielding)이 박사학위 논문에 REST를 소개한 이후 모바일 환경은 개발 환경의 대세가 됐다. 요즘 개발자가 알아야 할 REST 개념, RESTful 서비스에 대해 설명한다. RESTful 서비스와의 연동을 위해 알아야 할 개념인 callback, promise, async/await 같은 비동기처리 방법을 설명하고 NoSQL의 대명사인 MongoDB의 이해와 기본적인 CRUD 작업을 설명한다. 이러한 이해를 바탕으로 Node.js를 이용해 RESTful 서비스를 만들고 MongoDB와 연동할 수 있다. 마지막으로 Vue.js를 이용해 만들어진 RESTful 서비스로 MongoDB에 CRUD를 작업하는 방법을 설명한다.

올해 프론트엔드에서 백엔드까지 여성 개발자를 양성하는 강의를 진행하면서 수업에서 활용하기 위한 Vue.js 참고도서에 대한 목마름을 느끼던 차에 지인을 통해 이 책을 접하게 됐다. 이 책은 Vue.js 주요 디렉티브 문법부터 SPA 개발에 필요한 각종 확장 플러그인 활용 기술, 그리고 몽고 DB 기반의 노드 백엔드 OPEN API 개발 기술까지 다루고 있다. Vue.js 기반의 프론트엔드 애플리케이션 개발을 목표로 하는 입문자뿐 아니라 노드 기반 풀스택 개발자들에게도 강력히 권장하는 자바스크립트 풀스택 개발자가 되기 위한 필수 참고도서다.

강창훈 / 서울시 남부여성발전센터 웹 개발 전문강사, 마이크로소프트 AI MVP

마이크로소프트 MVP가 되면서 친분을 맺은 원철연 님은 오랫동안 성공회대학교에서 C#부터 웹 프로그래밍, 데이터베이스까지 프로그래밍 전반의 탄탄한 기본기를 학생들에게 잘 가르치기로 소문난 선생님이었다. 이미 몇 권의 프로그래밍 책을 집필한 연륜 있는 저자이며, 같은 동네 주민이기도 하다. 몇 달 전 동네 카페에서 커피 한 잔을 앞에 놓고 남자들만의 수다를 하던 중 새로운 책의 집필 아이디어를 듣게 됐다.
이미 시중에 제법 많은 Vue 책이 나와 있는 상태이지만 프로그래밍에 입문하는 학생들을 오랫동안 가르쳐온 감각으로 설계한 책의 골격을 듣고 나니, 내용을 빨리 보고 싶어졌다. 그래서 이 책의 집필 초반에 책 내용을 볼 수 있는 기회를 얻었고, 책을 써 내려간 방식이 마음에 와 닿았다. 프론트엔드 기술인 Vue를 다루는 책이긴 하지만, 백엔드 기술을 접목하지 않고서는 Vue의 효과적인 설명과 실무에서 필요한 사용법을 익히기에 한계가 있다고 생각했다.
이 책은 Vue를 현장감 있게 배울 수 있도록 MongoDB와 Node, Express를 등장시켰지만, 이들 기술에 대한 배경지식이 없어도 Vue를 학습하는 데 걸림돌이 되지 않도록 잘 구성했다. 최근의 프론트엔드 개발 자바스크립트 프레임워크로 가장 핫한 Vue를 학습자의 입장에서 잘 풀어낸 이 책 한 권이 처음 Vue에 입문하는 개발자에게 시원한 생수가 돼줄 것 같다. 최근 <클라우드 기반 웹 개발> 과정을 진행하면서 교재로 쓸 Vue 책을 고르기 위해 시중에 나온 책들을 살펴봤지만, 원철연 님의 책을 접하고 나서 교재로 선택하는 타이밍이 맞지 않은 것에 아쉬움이 많이 남았다.
곧 이 책을 통해 Vue를 쉽고 빠르게 배워 잘 사용하는 독자들이 많아지길 기대한다. 책을 집필하느라 오랫동안 열정을 쏟은 원철연 님께도 감사를 전한다.

김도균 / Microsoft MVP, MCT

Vue.js에 관심이 있는 입문자가 Vue.js에 쉽고 편하게 접근할 수 있도록 풀어낸 책이다. 그리고 Vue.js뿐 아니라 여러 환경의 개발 방법이나 브라우저로 디버깅을 하는 방법까지 수록돼 있어 놓칠 수도 있는 기초를 튼튼하게 할 수 있다.

장형욱 / LINE, DevOps 개발자

이미 웹 프로그래머로 활동하고 있는 이들에게도, 또 준비를 하고 있는 이들에게도 Vue.js는 더 이상 낯선 이름이 아니다. 그래서 대부분이 배워보고 싶다는 생각을 하고 있지만 막상 시작하려고 하면 어디서부터 어떻게 시작해야 하는지 막막하기 마련이다. 이 책은 그 막막함을 해소해주는 것은 물론이고 편안하고 아늑하게 학습할 수 있는 길까지 제시해준다. Vue.js의 개발 환경 구성부터 애플리케이션 구축까지 이어지는 이 길은 중간중간 Vue.js와 어우러져 활용할 수 있는 프레임워크나 서비스들에 대한 설명들도 포함하고 있으며, 오랜 시간 강단에서 교육에 힘쓰고 있는 저자의 진심이 묻어져 있다. 자, 이제 이 길을 함께 걸어보자.

한상훈 / 넥슨코리아

 

1장. Vue.js 소개

______양방향 데이터 바인딩
______가상 돔
______Vue.js의 장점
______Vue.js 현재와 향후 전망
__1.1 Vue.js 시작하기
____1.1.1 Node.js 설치 및 NPM 명령어 이해
________package.json을 만들기 위한 npm init
________패키지 설치를 위한 npm install, 삭제를 위한 npm uninstall
________npm start 명령을 이용한 실행
__1.1.2 VUE/CLI
__1.1.3 Visual Studio Code
________새로운 폴더 생성과 doc + tab 키를 이용한 index.html 기본 구조 만들기
________프로젝트를 실행하거나 패키지를 설치하는 방법
________scaffolding 기능
________Emmet 기능
________Lorem 문자열 입력하기
__1.1.4 Live Server
__1.1.5 Vue.js devtools 설치하기
__1.1.6 화살표 함수


2장. Vue.js 애플리케이션의 시작 - 뷰 인스턴스

__2.1 template 프로퍼티
__2.2 methods 프로퍼티
__2.3 computed 프로퍼티
____2.3.1 computed 프로퍼티를 이용한 필터링
__2.4 props 프로퍼티
__2.5 watch 프로퍼티
__2.6 한 페이지 내에서 다수의 뷰 인스턴스
__2.7 뷰 인스턴스 생존 주기


3장. 엘리먼트에 기능을 덧붙이는 디렉티브

__3.1 v-if, v-for를 이용한 흐름제어
____3.1.1 v-if, v-if … v-else, v-if … v-else-if … v-else 구문
____3.1.2 v-if와 v-show의 비교
____3.1.3 v-for를 이용한 반복 처리
__3.2 v-bind를 이용한 데이터 바인딩
____3.2.1 스타일을 적용하기 위한 v-bind:class, v-bind:style
____3.2.3 이미지 연결을 위한 v-bind:src와 링크 연결을 위한 v:bind:href
__3.3 v-model을 이용한 양방향 데이터 바인딩
__3.4 v-on을 이용한 이벤트 처리
____3.4.1 v-for를 이용해 컬렉션 이벤트 처리하기
____3.4.2 하나의 HTML 엘리먼트에 여러 개의 이벤트 적용하기
____3.4.3 이벤트 수식어


4장. 재사용이 가능한 레고(Lego)와 같은 컴포넌트

__4.1 컴포넌트의 정의 및 등록
____4.1.1 CDN을 이용한 방법
____4.1.2 VUE/CLI를 이용한 방법
__4.2 컴포넌트 적용 범위 이해하기
____4.2.1 CDN을 이용한 전역(global), 지역(local) 적용 이해하기
____4.2.2 VUE/CLI를 이용한 전역(global), 지역(local) 적용 이해하기
__4.3 컴포넌트 간 데이터 전달하기
____4.3.1 props 프로퍼티를 이용해 부모 컴포넌트에서 자녀 컴포넌트로 데이터 전달
____4.3.2 $emit( ) 메서드로 자녀 컴포넌트에서 부모 컴포넌트로 데이터 전달
________CDN을 이용한 방법
________Vue CLI를 이용한 방법
____4.3.3 이벤트 버스를 이용한 데이터 전달
________이벤트 버스의 초기화
________이벤트 버스의 사용
________CDN을 이용한 방법
________Vue CLI를 이용한 방법
__4.4 슬롯 사용하기
____4.4.1 Unnamed slot
____4.4.2 Named slot
____4.4.3 Scoped slot
____4.4.4 v-slot


5장 다양한 장치 디자인에 적합한 Materialize, Vuetify

__5.1 Materialize를 이용한 스타일링
________Materialize 다운로드 및 설치
____5.1.1 색, 정렬
____5.1.2 Image, Icon, Video
____5.1.3 장치의 화면 크기에 따른 Hide/Show Content 기능
____5.1.4 Grid
________반응형 레이아웃
________offset
________컬럼의 순서 바꾸기 push, pull
____5.1.5 Button
____5.1.6 Table
____5.1.7 Card
____5.1.8 Navbar
____5.1.9 Slider
____5.1.10 Autocomplete
____5.1.11 Scrollspy
__5.2 Vuetify를 이용한 스타일링
____5.2.1 Color, Text
____5.2.2 v-btn, v-icon
________v-btn
________v-icon
____5.2.3 Breakpoints, Visibility
____5.2.4 그리드 시스템
________v-container
________v-layout
________v-flex
____5.2.5 v-dialog
________Modal 형태의 대화상자
________Form 형태의 대화상자
____5.2.6 v-toolbar, v-navigation-drawer
__5.3 Vue.js + Cloud Firestore를 이용한 실시간 채팅 프로그램 만들기
________채팅 프로그램 구조
____5.3.1 Firebase 설정하기
____5.3.2 Vue 프로젝트 생성
________Firebase 연결을 위한 파일 추가
________디자인을 위한 css, icon 추가
________라우팅 기능을 위한 router.js 설정하기


6장. 사용자로부터 데이터 입력 및 서버로 데이터 전달을 위한 Forms

__6.1 Form 관련 엘리먼트에 대한 이해
____6.1.1 한 행(row) 텍스트 입력을 위한 input 엘리먼트와 v-model
____6.1.2 멀티 행 텍스트 입력을 위한 textarea 엘리먼트와 v-model
____6.1.3 옵션 선택 가능한 checkbox와 v-model
____6.1.4 선택 가능한 다수의 아이템을 바인딩하는 select
____6.1.5 v-model 수식어을 이용한 공백 제거, data 프로퍼티 지연 업데이트
__6.2 유효성 검사
____6.2.1 vue.js에서의 기본적인 유효성 검사
____6.2.2 Vuetify를 이용한 form 유효성 검사


7장. 웹사이트 탐색을 위한 라우팅

__7.1 vue-router로 라우팅 프로젝트 생성하기
__7.2 라우터 뷰, 라우터 링크, 리다이렉트
__7.3 중첩된 라우트
__7.4 Named Routes와 Named Views
________Named Route
________Named View
__7.5 네비게이션 가드
____7.5.1 컴포넌트 수준의 Guard 메서드
________beforeRouteEnter( ) 메서드
________beforeRouteLeave( ) 메서드
________beforeRouteUpdate() 메서드
____7.5.2 Per-Route Guard
____7.5.3 전역 Navigation Guard


8장. 효율적인 데이터 관리를 위한 Vuex

__8.1 Vuex 패키지 설치하기
__8.2 Getters
__8.3 Mutations
__8.4 Actions
__8.5 mapState, mapGetters, mapMutations, mapActions
__8.6 Mutations와 Actions의 차이점


9장. MEVN(MongoDB, Express, Vue, Node.js) 기반 RESTful 서비스

__9.1 REST 정의 및 개념 이해하기
________REST의 정의
________REST의 제약 조건
________RESTful 웹서비스
__9.2 콜백, promise 이해하기
____9.2.1 동기와 비동기
____9.2.2 콜백함수, callback Hell
____9.2.3 Promise
________promise 생성하기
________promise.then() 메서드
________promise.catch() 메서드
____9.2.4 Promise Chaining
____9.2.5 async/await를 이용한 비동기 처리
__9.3 Axios
____9.3.1 GET 요청
________응답 객체
________에러 객체
____9.3.2 POST request
____9.3.3 PUT request
____9.3.4 DELETE request
__9.4 MongoDB
________다운로드 및 설치
____9.4.1 데이터 추가(CREATE)
____9.4.2 데이터 검색(READ)
____9.4.3 데이터 수정(UPDATE)
____9.4.4 데이터 삭제(DELETE)
____9.4.5 save( ) 메서드로 데이터 추가, 수정
__9.5 Node.js + MongoDB를 이용한 RESTful 서비스 만들기
____9.5.1 Express.js
____9.5.2 RESTful 서비스 서버 + MongoDB
____9.5.3 Postman을 이용한 REST 서비스 테스팅
________데이터 추가(POST)
________데이터 검색(GET)
________데이터 업데이트(PUT)
________데이터 삭제(DELETE)
__9.6 Vue.js + RESTful 서비스 + MongoDB
________데이터 추가하기
________데이터 수정하기
________데이터 삭제하기