예제로 배우는 Vue.js (Vue.js 기초부터 MEVN(MongoDB, Express, Vue.js, Node.js)까지)

원철연

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

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

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

저서
*『C#andDatabase완벽가이드』(영진닷컴,2010)
*『C#XMLLING완벽가이드』(영진닷컴,2011)

1장.Vue.js소개

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

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

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

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

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

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

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

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

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

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

__6.1Form관련엘리먼트에대한이해
____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.5v-model수식어을이용한공백제거,data프로퍼티지연업데이트
__6.2유효성검사
____6.2.1vue.js에서의기본적인유효성검사
____6.2.2Vuetify를이용한form유효성검사

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

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

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

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

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

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

★이책의대상독자★

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

★이책의구성★

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

2장.Vue.js애플리케이션의시작-뷰인스턴스
Vue.js애플리케이션의시작점인뷰인스턴스(Vueinstance)를정의하고지원하는다양한속성을이해하고나아가이를응용할수있도록소개한다.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.js2.6버전에서새롭게등장한v-slot까지설명한다.

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

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

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

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

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