Do it! Vue.js 입문 (예제로 이해하고 실전 프로젝트로 완성한다!)

장기효

미국샌프란시스코에서IT인턴십을시작으로포스코ICT기술연구소에재직중이다.기업용자바스크립트프레임워크및다수의B2B엔터프라이즈웹앱을개발했다.Vue.js실무개발경험을바탕으로온·오프라인에서국내최초Vue.js강의를진행중이다.Google웹기술공식사이트번역및GoogleDeveloperGroupWebTech커뮤니티리더를맡는등웹개발커뮤니티활동에도적극적으로참여하고있다.또한대한민국연예인예술협회에가수로등재되어있는노래하는개발자이다.다른사람에게도움이많이되었다는이야기를들을때가장뿌듯함을느낀다는저자는,지식을나눔으로써세상을이롭게하는데힘을보태는삶을살고싶다고한다.강의※온라인교육플랫폼인프런〈누구나다루기쉬운Vue.js프런트개발〉〈쉽게배우는Webpack〉※실무교육기관패스트캠퍼스〈프런트엔드개발자를위한웹앱CAMP〉〈Vue.js로구현하는PWACAMP〉수상2014년대한민국소프트웨어기술대상우수상2017년포스코ICT우수사내전문강사상

첫째마당Vue.js필수기술살펴보기

01Vue.js소개
01-1Vue.js란무엇인가?
Vue.js란?
프레임워크시장속에서뷰의위치와성장성
뷰의장점
01-2Vue.js의특징
UI화면단라이브러리
컴포넌트기반프레임워크
리액트와앵귤러의장점을가진프레임워크

02개발환경설정및첫번째프로젝트
02-1뷰학습을위한개발환경설정하기
크롬브라우저설치하기
아톰에디터설치하기
아톰테마
아톰패키지
노드제이에스설치하기
뷰개발자도구설치하기
02-2HelloVue.js!프로젝트만들기
뷰시작하기
크롬개발자도구로코드확인하기
뷰개발자도구로코드확인하기
뷰개발자도구사용방법

03화면을개발하기위한필수단위
-인스턴스&컴포넌트
03-1뷰인스턴스
뷰인스턴스의정의와속성
뷰인스턴스옵션속성
뷰인스턴스의유효범위
뷰인스턴스라이프사이클
03-2뷰컴포넌트
컴포넌트란?
컴포넌트등록하기
지역컴포넌트와전역컴포넌트의차이
03-3뷰컴포넌트통신
컴포넌트간통신과유효범위
상·하위컴포넌트관계
상위에서하위컴포넌트로데이터전달하기
하위에서상위컴포넌트로이벤트전달하기
같은레벨의컴포넌트간통신
관계없는컴포넌트간통신-이벤트버스

04상용웹앱을개발하기위한필수기술들
-라우터&HTTP통신
04-1뷰라우터
라우팅이란?
뷰라우터
네스티드라우터
네임드뷰
04-2뷰HTTP통신
웹앱의HTTP통신방법
뷰리소스
액시오스

05화면을개발하기위한기본지식과팁
-템플릿&프로젝트구성
05-1뷰템플릿
뷰템플릿이란?
데이터바인딩
자바스크립트표현식
디렉티브
이벤트처리
고급템플릿기법
05-2뷰프로젝트구성방법
HTML파일에서뷰코드작성시의한계점
싱글파일컴포넌트체계
뷰CLI
뷰CLI로프로젝트생성하기
뷰로더

둘째마당Vue.js실전투입!
06실전애플리케이션만들기
06-1할일관리앱살펴보기
왜할일관리앱을만들어야하나?
할일관리앱살펴보기
애플리케이션컴포넌트구조도
06-2프로젝트생성하고구조확인하기
뷰CLI를이용한프로젝트생성
프로젝트초기설정
06-3컴포넌트생성하고등록하기
컴포넌트생성
컴포넌트등록
06-4컴포넌트내용구현하기
애플리케이션제목을보여주는TodoHeader
컴포넌트
할일을입력하는TodoInput컴포넌트
저장된할일목록을표시하는TodoList
컴포넌트
TodoList.vue에할일삭제기능추가하기
모두삭제하기버튼을포함하는TodoFooter
컴포넌트
06-5기존애플리케이션구조의문제점해결하기
현재애플리케이션구조의문제점
문제해결을위한애플리케이션구조개선
props와이벤트전달을이용해할일입력기능
개선하기
이벤트전달을이용해ClearAll버튼기능
개선하기
이벤트전달을이용해할일삭제기능개선하기
06-6더나은사용자경험을위한기능추가하기
뷰애니메이션
뷰모달

07Vue.js고급개발자되기
07-1뷰중·고급레벨로올라가기위한지식
Vuex
뷰의반응성
서버사이드렌더링
07-2뷰개발을위한웹팩
웹팩이란?
웹팩의주요속성
웹팩데브서버
webpack-simple프로젝트의웹팩설정
파일분석
07-3뷰개발을위한ES6
ES6란?
const와let예약어
블록의유효범위
화살표함수
Import와Export
07-4뷰CLI에서사용하는NPM
NPM소개
NPM설치명령어
전역설치와지역설치
NPM커스텀명령어

현장밀착취재
지금당장실무에서써먹는Vue.js
Tip1뷰와제이쿼리를같이사용해도되나요?
Tip2개발기간이너무짧은데기존레거시코드에
어떻게뷰를바로적용하죠?
Tip3뷰에UI라이브러리와차트를어떻게
연동할까요?
Tip4뷰로프로그레시브웹앱을개발하려면어떻게
시작해야하죠?

현업에서Vue.js를사용중인저자만이집필할수있는친절한목차구성!
400명이상수강생에게Vue.js를가르치며터득한입문자의눈높이로설명합니다.

대부분의입문자들은처음프런트엔드프레임워크를배울때웹팩,ES6,NPM과같은기술들을모두이해해야만시작할수있다고생각합니다.그래서시작조차하지못하는경우가많습니다.
국내최초Vue.js전문강사인저자는온·오프라인강의를진행하며입문자의눈높이를깨닫고,실무경험과강의경험을바탕으로입문자들의진입장벽을낮출수있는목차를구성했습니다.첫째마당에서Vue.js의기본단위인인스턴스와컴포넌트를익혀애플리케이션을컴포넌트기반으로설계할수있는능력을기릅니다.이러한구조를먼저익히면라우터,HTTP통신,템플릿,프로젝트구성방법을더쉽게이해할수있습니다.이를바탕으로둘째마당에서실제웹앱까지만들어봅니다.

50개도해와실전예제로더빠르게이해하는Vue.js
일단만들면실무에사용하는기술90%가저절로익혀집니다!

이책은구글링이필요없을만큼자세한용어설명과다양한도해로Vue.js기본개념을쉽게이해하고,‘실전예제’와‘직접해보세요’코너를통해몸으로습득합니다.그야말로키보드잡고Doit!하며배웁니다.배운내용을종합한실전애플리케이션인‘할일관리앱’까지직접만들어볼수있고,책곳곳에서Vue.js중·고급개발자로성장할수있는팁까지제공합니다.이책을다보고나면실무에사용하는기술90%가저절로익혀지고,Vue.js를스스로응용할수있는자신감이생길겁니다.

Vue.js로갈아탈지말지고민되나요?‘현장밀착취재’에서그답을확인하세요.

지금쓰고있는제이쿼리와Vue.js를같이쓸수있는지궁금한가요?개발기간이너무짧은데기존코드에Vue.js를바로적용할수는없을까요?더이상걱정하지마세요.이책의부록‘현장밀착취재’에서개발자들이고민하는내용들을Q&A형태로미리정리해두었습니다.Vue.js로요즘가장핫한프로그레시브웹앱(PWA)개발을시작하는방법까지덤으로알려드립니다.

주말동안공부하고월요일에바로쓴다!-맞춤형학습진도표

이책은입문자와실무자를위한맞춤형학습진도표를제공합니다.Vue.js입문자라면하루두시간씩7일,프런트엔드개발경험이있는실무자라면3일안에Vue.js를완성할수있습니다.진도표에함께제시된학습목표를바탕으로체계적인학습을시작해보세요.

혼자공부하다지치지않도록도와드립니다!-Doit!스터디룸

만약혼자공부하기힘들다면함께공부하는친구들을만날수있는Doit!스터디룸네이버카페(cafe.naver.com/doitstudyroom)를방문해보세요.책도보고선물도받는‘두잇공부단’도참여할수있습니다.

※저자의기술블로그(https://joshua1988.github.io/)에서최신프런트엔드개발트렌드에대한다양한이야기를만나보세요.책의모든소스코드는저자의깃허브(https://github.com/joshua1988)와이지스퍼블리싱홈페이지(www.easyspub.co.kr)에서다운로드받을수있습니다.

[추천사]

“Vue.js핵심기술을익히며최신웹트렌드에대한통찰력까지키우고싶다면?”

Vue.js프레임워크를활용한웹앱개발입문자의필독서!
‘내꿈은세상을이롭게하는것이다’라고외쳤던저자가이제《Doit!Vue.js입문》으로그꿈에한발자국더다가서려한다.이책에는웹앱개발이무엇인지쉽게이해하고,독자들로하여금결과를빨리만들어낼수있도록하기위한저자의수많은고민이담겨있다.또한웹트렌드를따라가려는사람들에게귀중한통찰력을줄뿐만아니라개발에대한열정도불러일으킨다.Vue.js프레임워크를활용한웹앱개발의입문자라면한번은꼭읽어봐야하는필독서가될것이다.-이태영,삼성전자소프트웨어엔지니어

실무에바로적용할수있는개념부터효율적으로학습할수있습니다.
개인적으로Vue.js는최근유행하는여러프런트엔드기술중가장보편성이높다고생각합니다.사용법이쉬워퍼블리셔직군에서도당장시작할수있을뿐만아니라개발자들도만족할만한좋은성능을갖고있기때문이죠.이책은Vue.js기본개념을꼼꼼하게설명하며실무에서바로적용할수있는지식들을예제를통해쉽게설명하고있습니다.특히어려운개념들을그림으로설명하기때문에개발에대한기본적인소양을키우는데도매우도
움이될것입니다.부록에담긴내용도훌륭한데,당장실무에서맞닥뜨릴만한문제들을미리비켜갈수있도록도와주는친절한멘토의면모를보이고있습니다.프런트엔드개발경험이없거나Vue.js를써보고싶은개발자누구에게나추천할만한꼼꼼하게구성된실용적인책입니다.-이형주,인프런CEO(Vue.js온라인강의업체)

프런트엔드개발입문스터디교재로추천!
백엔드개발자로개인프로젝트를진행하다보면프런트엔드쪽이필요할때가종종있습니다.앵귤러나리액트로진행하려면어느새이쪽의시간비중이훨씬더커져정작중요한부분에는시간할당이안될때가많았습니다.그래서프런트엔드개발자외다른직군에서보기엔과하다는생각을가지고있던차에좋은기술과책을소개받았습니다.
읽는내내책여기저기에서저자의세심함을확인할수있었습니다.아무래도실제로Vue.js로강의를한경험이있어어느부분에서부가적인설명이필요한지정확히잘짚어주신것같습니다.단순히설명에서그치지않고장별로배운내용을점검해볼수있는실전예제가있어스터디교재로삼기에도충분하다고생각합니다.아무쪼록저와같이프런트엔드프레임워크에대해부담을갖고계신분들에게좋은시작점이될만한책이나온것에반갑고감사할따름입니다.-이동욱,우아한형제들웹개발자

쉽고빠른Vue.js를Vue.js답게배우세요!
Vue.js의장점은‘쉽고빠르다’입니다.이책또한Vue.js를쉽고빠르게익힐수있도록구성되어있습니다.전문적인용어가나왔을때구글링이필요없을정도로자세하고친절한용어설명은저자가독자의마음을읽고옆에서설명해주고있는것같은착각이들게합니다.또한조금은추상적인개념설명으로이해가어려울때등장하는도해는Vue.js를쉽게익힐수있도록도와줍니다.Vue.js를Vue.js답게,쉽고빠르게익히고싶은분이라면이도서를추천합니다.-김용성,패스트캠퍼스코스매니저(Vue.js오프라인강의업체)

최신기술로눈에띄는포트폴리오를만들고싶은분에게꼭필요한책!
이책은다른웹프레임워크를경험해보지못했어도다양한예제와다이어그램을통하여Vue.js를깊이있게이해할수있게도와줍니다.또한책중간중간저자가세심하게챙긴‘알아두면좋아요’코너나‘직접해보세요’실습을통해Vue.js를더욱잘활용할수있을것입니다.이책의압권은배운내용을총정리해서실제웹앱을만들어보는것입니다.책에있는내용뿐만아니라심화된내용을학습할수있도록안내해주므로개발자들이이직할때나신입으로지원할때제출할포트폴리오를만들때아주유익할듯합니다.
-고재도,카카오뱅크프런트엔드엔지니어

[이책의Vue.js강의를미리접한온·오프라인수강생들의한마디!]

사소한궁금증과용어까지놓치지않고꼼꼼하게담겨있어,추가강의나설명없이혼자완독하고공부할수있는책입니다.이론뿐아니라꿀잼실습과다른UI요소와연동방법까지알려줍니다.프로젝트에Vue.js를적용해야한다면이책을추천합니다.-김준영,고려대학교컴퓨터학과3학년(인프런강의수강생)

이책을보고세가지에놀랐어요!알차게꼭꼭눌러담은Vue.js핵심내용들,독자가궁금해할만한내용에대한세심한설명,그리고실무에서Vue.js를사용할때꼭필요한내용들을담고있는부록그이상의부록까지!-김동빈,네이버프런트엔드엔지니어(패스트캠퍼스강의1기수강생)

프런트엔드프레임워크를배우며가장어려웠던건프레임워크의원리와구조를이해하는것이었습니다.용어와개념이익숙하지않은상태에서읽는설명들은추상적이고난해했어요.하지만이책은그림을활용해서프레임워크의원리,구조등을직관적으로이해할수있습니다.또한입문자는중급이상의개발자들이미처생각하지못한매우사소한부분에서어려움을느낄수있는데,이런부분도놓치지않고쉽게설명해주어좋습니다.-임송이,데이터콘텐츠시각화디자이너(패스트캠퍼스강의2기수강생)