자바스크립트 프레임워크인 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의 장점
______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
________데이터 추가하기
________데이터 수정하기
________데이터 삭제하기

■ MEVN(MongoDB, Express, Vue, Node) 스택 구현
■ 환경 설정부터 시작해 상세한 설명과 예제로 초보자도 쉽게 이해할 수 있는 설명
■ CDN과 Vue/CLI를 이용한 프로젝트 생성과 개발
■ Materialize, Vuetify를 이용한 반응형 앱 디자인
■ Vue-router를 이용한 웹사이트 탐색 방법과 접근 제어
■ Vuex를 이용한 효율적인 데이터 관리
■ REST, RESTful 개념과 실제 구현
■ Mongoose를 이용한 RESTful 서버와 MongoDB 연동 방법
■ axios를 이용한 RESTful 서버, MongoDB와 Vue.js 클라이언트 연동

[ 이 책의 대상 독자 ]
■ 초/중급 Java-script 개발자
■ 프론트엔드 개발자를 생각하는 웹퍼블리셔
■ Vue.js를 배우고 싶은 프론트엔드 입문자
■ 기본적인 HTML, CSS, Java-script 경험자
■ RESTful 서버와 MongoDB에 대한 이해가 필요한 초/중급 개발자

[ 이 책의 구성 ]
1장. Vue.js 시작하기
Vue.js를 학습하는 데 필요한 Node.js 설치를 시작으로 Vue.js 학습 시 필요한 기본적인 npm 명령어를 소개한다. Vue.js 프로젝트를 생성하는 방법을 소개하고 구체적으로 vue/cli를 이용한 방법을 설명한다. 개발 툴로 요즘 각광받고 있는 Visual Studio Code 설치 및 기능을 설명하고 Vue.js 개발자 도구인 devtools에 대해서 소개하며 끝으로 자바스크립트 ES6에 새롭게 등장하고 이 책에서도 자주 사용되는 화살표 함수(=>)를 설명한다.

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를 작업하는 방법을 설명한다.

[ 지은이의 말 ]
강의를 할 때마다 학습자들에게 종종 "나는 단지 여러분보다 조금 먼저 알게 된 것을 전달하는 사람이며, 이 강의가 자신이 나아갈 방향을 정하는 데 조금이라도 도움이 되기를 바란다"라고 말하곤 한다. 요즘과 같이 새로운 기술이 자주 등장하고 인터페이스가 변하는 상황에서 이를 이해하고 강의를 하거나 책을 쓰는 일은 쉬운 일이 아닌 것 같다. 대표적인 예로 인공지능, 클라우드를 들 수 있으며 자바스크립트 관련된 분야도 그렇다다. 모두 소위 말하는 인적, 물적 자원이 집중되는 분야다.
자바스크립트 분야를 예로 들면 한동안 아마존에서 자바스크립트와 관련된 여러 책을 주문해 보곤 했지만 요즘은 더 이상 아마존에서 책을 구매하지 않는다. 왜냐하면 대부분의 책들이 저자의 정성이 가득 담긴, 심혈을 기울인 내용이었지만, 중요한 것은 책을 구매해서 읽는 시점에 수록된 예제가 동작하지 않거나 그 사이 변경된 API를 따로 학습해서 이해해야 하는 추가적인 노력이 필요했기 때문이다.
이 책은 2016년 대학교를 떠나 우즈베키스탄에서 KOICA 봉사단원으로 학생들에게 프로그래밍을 가르치던 2017년부터 조금씩 준비해서 나온 결과물이다. 이미 여러 권의 IT 책을 썼지만 매번 책을 쓰는 동안 수백 번 이상 자신과의 싸움을 해야 했고 쓰는 동안 버전이 변경돼 다시 수정하는 작업을 반복했다. 이 책도 모든 예제가 동작하도록 마무리하는 시점에서 다시 테스트를 했다. 개인적으로 모든 독자를 만족시킬 수 있는 책은 이 세상에 없다는 것이 불변의 진리라고 생각한다.
다만 이 책을 통해 Vue.js를 학습하는 독자에게 "책에 투자한 금액과 시간들이 조금은 의미가 있었다" 정도의 얘기를 들을 수 있었으면 좋겠다.
이 책을 학습할 때 HTML, CSS, 자바스크립트에 대한 기본적인 이해가 필요하다면 내 블로그에서 2013년 8월에 공개한 HTML, CSS, 자바스크립트 관련 책 한 권 분량의 자료(https://fromyou.tistory.com/581)를 참고하길 바란다.

원철연
전북대학교 정보통신 대학원 석사
KH 정보교육원, ICU에서 강의
정보처리기사, 직업능력개발훈련교사, 중등학교(정교사) 자격증
대용량 문자, 음성, 팩스 메시지를 전송할 수 있는 KT 크로샷 프로그램 개발
한국전자통신연구원(ETRI)와 DSRC 프로젝트 수행