자바스크립트 프레임워크인 React, Angular, Vue 중 Vue.js는 가장 인기 있는 프론트엔드 Github 프로젝트가 됐다. 이 책에서는 Vue.js 학습에 필요한 기본적인 환경 설정부터 뷰 인스턴스, 컴포넌트, Vue-router를 이용한 라우팅, vuex를 활용한 효과적인 데이터 관리를 자세한 설명과 예제로 쉽게 이해할 수 있게 구성했다. 또한 마지막 장에서 각광받는 풀스택 중 하나인 MEVN(MongoDB, Express, Vue.js, Node.js)의 이론 설명과 함께 예제를 따라 하면서 클라이언트(Vue.js) - 서버단(Node.js, Express, MongoDB)이 어떻게 동작하는지 전체적으로 이해할 수 있게 구성했다.

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

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

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

김도균 / Microsoft MVP, MCT

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

장형욱 / LINE, DevOps 개발자

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

한상훈 / 넥슨코리아

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

■ 초/중급 Javascript 개발자
■ 프론트엔드 개발자를 생각하는 웹퍼블리셔
■ Vue.js를 배우고 싶은 프론트엔드 입문자
■ 기본적인 HTML, CSS, Javascript 경험자
■ 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)를 참고하길 바란다.

원철연

2007년부터 3년 동안 준비한 첫 번째 책 『C# and Database 완벽가이드』가 2010년 세상에 나온 후 이 책이 인연이 돼 성공회대학교에서 프로그래밍과 데이터베이스 중심으로 수년 동안 강의했다. 2011년에 마이크로소프트로부터 전문성과 지식 나눔을 인정받아서 Microsoft MVP로 2018년 중반까지 활동했다.

경력
* 현재 한국연구재단(NRF) 과학기술지원단(TPC)
* 전 성공회대학교 외래교수
* 전 KISA 심사위원(HTML5 웹 표준)
* 전 Microsoft MVP(Most Valuable Professional)
* 전 (사)한국사물인터넷학회 학술이사
* 전 (사)한국인터넷 전문가협회(KIPFA) 자문위원

강의
웹 프로그래밍(C#, ASP.NET), 웹페이지 구축(HTML, CSS, 자바스크립트), 데이터베이스(SQL 서버), 객체지향 시스템, XAML 프로그래밍, 하이브리드 애플리케이션 개발을 위한 Apache Cordova, SQL 서버, PL/SQL 등

저서
* 『C# and Database 완벽가이드』(영진닷컴, 2010)
* 『C# XML LING 완벽가이드』(영진닷컴, 2011)