★ 이 책에서 다루는 내용 ★ ■ MEVN(MongoDB, Express, Vue, Node) 스택 구현 ■ 환경 설정부터 시작해 상세한 설명과 예제로 초보자도 쉽게 이해할 수 있는 설명 ■ 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를 작업하는 방법을 설명한다.