Do it! Vue.js 입문

Do it! Vue.js 입문

$15.02
저자

장기효

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

목차

첫째마당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현업개발자이자국내최초Vue.js전문강사의핵심노하우대공개!
실무자3일완성!입문자7일완성!바쁜개발자의시간절약입문서!
실무의정글속에서살아남기위한실전예제형Vue.js입문서!이책은Vue.js실무개발경험을바탕으로입문자대상강의를수차례진행해온현업Vue.js능력자가집필했습니다.Vue.js의기본동작원리부터꼼꼼하게설명하고,실제서비스를개발할때필요한컴포넌트기반설계방법과프로젝트구조화노하우까지알차게담았습니다.특히입문자들이어려워하는웹팩,ES6,NPM을몰라도쉽게학습할수있도록목차를구성하여배우기쉬운Vue.js의특성을잘살렸습니다.
책에서제공하는‘예제’와‘직접해보세요’를일단직접만들어보세요.그리고상용웹앱설계방식과컴포넌트구조화까지녹여낸종합프로젝트‘할일관리앱’까지만들고나면실무에사용되는기술90%가해결됩니다.실무개발자와입문자의고민을누구보다잘이해하는책,《Doit!Vue.js입문》으로Vue.js를시작하세요!

현업에서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강의를미리접한온·오프라인수강생들의한마디!]

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

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

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