Vue.js 코딩 공작소 (컴포넌트, Vuex, Vue-CLI, Vue-Router까지 | 웹 애플리케이션 제작 흐름 그대로 배우자!)

에릭한쳇

ErikHanchett
웹개발자로10년이상일했다.『Ember.jsCookbook』의저자이자http://erik.video의유튜버이고,http://programwitherik.com의블로거다.https://goo.gl/UmemSS에서자바스크립트개발자들을위한팁과트릭을소개한다.

1부Vue.js와친해지기

1장Vue.js소개
1.1거인의어깨위에서
__1.1.1모델-뷰-컨트롤러패턴
__1.1.2모델-뷰-뷰모델패턴
__1.1.3반응형애플리케이션이란?
__1.1.4자바스크립트계산기
__1.1.5Vue계산기
__1.1.6자바스크립트와Vue비교
__1.1.7Vue는어떻게MVVM과반응성을사용할까?
1.2왜Vue.js를사용할까?
1.3미래에대한생각
1.4요약

2장Vue인스턴스
2.1첫애플리케이션
__2.1.1Vue인스턴스루트
__2.1.2애플리케이션이잘작동하는지확인
__2.1.3뷰안에서무언가보여주기
__2.1.4Vue에서속성살펴보기
2.2Vue생명주기
__2.2.1생명주기훅추가
__2.2.2생명주기코드탐구
__2.2.3생명주기코드를유지할까?
2.3상품표시
__2.3.1상품데이터정의
__2.3.2상품화면마크업
2.4출력필터적용
__2.4.1필터함수작성
__2.4.2마크업에필터를추가하고여러값테스트
2.5연습문제
2.6요약

2부뷰와뷰-모델

3장상호작용성추가
3.1장바구니데이터는배열추가로시작
3.2DOM이벤트에바인딩
__3.2.1이벤트바인딩기초
__3.2.2[장바구니담기]버튼에이벤트연결
3.3[장바구니담기]버튼을추가하고개수세기
__3.3.1계산된속성은언제사용할까?
__3.3.2계산된속성으로업데이트이벤트살펴보기
__3.3.3장바구니에담긴상품개수표시및테스트
3.4버튼에사용자편의추가
__3.4.1재고주시
__3.4.2계산된속성과재고작업
__3.4.3v-show지시자기초
__3.4.4v-if와v-else를사용해서버튼비활성화
__3.4.5토글기능이있는〈장바구니담기〉버튼추가
__3.4.6v-if를사용해서체크아웃페이지표시
3.4.7v-show와v-if/v-else비교
3.5연습문제
3.6요약

4장폼과입력
4.1v-model바인딩사용
4.2값바인딩살펴보기
__4.2.1체크박스에값바인딩
__4.2.2값바인딩과라디오버튼작업
__4.2.3v-for지시자알아보기
4.3수식어살펴보기
__4.3.1.number수식어사용
__4.3.2입력값다듬기
__4.3.3.lazyv-model수식어
4.4연습문제
4.5요약

5장조건부,반복,리스트
5.1사용가능한목록메시지표시
__5.1.1체크박스에값바인딩
__5.1.2v-else와v-else-if를사용해서메시지더추가
5.2상품반복
__5.2.1v-for범위를이용한별점추가
__5.2.2별점에HTML클래스바인딩
__5.2.3상품셋팅
__5.2.4products.json에서상품정보가져오기
__5.2.5v-for지시자로앱리팩토링
5.3레코드정렬
5.4연습문제
5.5요약

6장컴포넌트사용
6.1컴포넌트란?
__6.1.1컴포넌트생성
__6.1.2전역등록
6.1.3지역등록
6.2컴포넌트의관계
6.3속성을사용해서데이터전달
__6.3.1리터럴속성
__6.3.2동적속성
__6.3.3속성검증
6.4템플릿컴포넌트정의
__6.4.1인라인템플릿문자열사용
__6.4.2text/x-template스크립트요소
__6.4.3단일파일컴포넌트
6.5커스텀이벤트
__6.5.1이벤트수신
__6.5.2.sync를사용해서자식속성변경
6.6연습문제
6.7요약

7장고급컴포넌트와라우팅
7.1슬롯사용
7.2지정슬롯살펴보기
7.3범위슬롯
7.4동적컴포넌트앱생성
7.5비동기컴포넌트설정
7.6Vue-CLI를사용하여애완용품샵앱변환
__7.6.1Vue-CLI로새로운애플리케이션생성
__7.6.2라우트설정
__7.6.3애플리케이션에CSS,Bootstrap,Axios추가
__7.6.4컴포넌트설정
__7.6.5Form컴포넌트생성
__7.6.6Main컴포넌트추가
7.7라우팅
__7.7.1매개변수가있는상품경로추가
__7.7.2태그와함께라우터링크설정
__7.7.3스타일을적용한라우터링크설정
__7.7.4수정경로추가
__7.7.5리다이렉션과와일드카드사용
7.8연습문제
7.9요약

8장트랜지션및애니메이션
8.1트랜지션기본
8.2애니메이션기본
8.3자바스크립트훅
8.4트랜지션컴포넌트
8.5애완용품샵애플리케이션업데이트
__8.5.1애완용품샵애플리케이션에트랜지션추가
__8.5.2애완용품샵애플리케이션에애니메이션추가
8.6연습문제
8.7요약

9장Vue확장
9.1믹스인과함께기능재사용
__9.1.1전역믹스인
9.2예제와함께커스텀지시자배우기
__9.2.1수정자,값,인수를포함한전역커스텀지시자
9.3렌더함수와JSX
__9.3.1렌더함수예제
__9.3.2JSX예제
9.4연습문제
9.5요약

3부데이터모델링,API사용과테스트

10장Vuex
10.1Vuex,뭐가좋을까?
10.2Vuex상태와뮤테이션
10.3게터와액션
10.4애완용품샵앱과함께Vue-CLI에Vuex추가
__10.4.1Vue-CLI에서Vuex설치
10.5Vuex헬퍼
10.6모듈살펴보기
10.7연습문제
10.8요약

11장서버와의통신
11.1서버사이드렌더링
11.2Nuxt.js소개
__11.2.1음악검색앱생성
__11.2.2프로젝트생성과의존성설치
__11.2.3빌딩블록및컴포넌트생성
__11.2.4기본레이아웃업데이트
__11.2.5Vuex를사용해서저장소추가
__11.2.6미들웨어사용
__11.2.7Nuxt.js를사용해서경로생성
11.3파이어베이스와VuexFire로서버와통신
__11.3.1파이어베이스설정
__11.3.2파이어베이스로애완용품샵앱설정
__11.3.3인증상태로Vuex업데이트
__11.3.4인증으로헤더컴포넌트업데이트
__11.3.5파이어베이스실시간데이터베이스로Main.vue업데이트
11.4연습문제
11.5요약

12장테스트
12.1테스트케이스생성
12.2지속통합·전달·배포
__12.2.1지속통합
__12.2.2지속전달
__12.2.3지속배포
12.3테스트종류
12.4환경설정
12.5vue-test-utils로첫테스트케이스생성
12.6테스트컴포넌트
__12.6.1테스트속성
__12.6.2텍스트테스트
__12.6.3CSS클래스테스트
__12.6.4모의Vuex테스트
12.7크롬디버거설정
12.8연습문제
12.9요약

부록A환경설정
A.1크롬개발자도구
A.2크롬vue-devtools
A.3각장의컴패니언코드얻기
A.4Node.js와npm설치
__A.4.1원클릭인스톨러를사용해서Node.js설치
__A.4.2NVM을사용해서Node.js설치
__A.4.3리눅스패키지관리시스템을사용해서Node.js설치
__A.4.4MacPorts혹은Homebrew를사용해서Node.js설치
__A.4.5Node.js가제대로설치되었는지확인
A.5Vue-CLI설치

부록B연습문제해답

빠르게학습하고손쉽게개발하라!

왜Vue.js인가?
Vue.js는웹애플리케이션에서사용자인터페이스(UI)를만들기위한자바스크립트프레임워크다.다른단일형프레임워크와달리점진적으로채택할수있게설계되어웹애플리케이션의일부분에만적용하다가점차확장할수있으며,처음부터Vue.js로구현할수도있다.또한,문법이간단해HTML,CSS,자바스크립트를경험한적이있다면비교적손쉽게익힐수있다.

Vue.js핵심개념부터웹스토어애플리케이션구축까지
인스턴스,상호작용,폼,입력,반복문,리스트,컴포넌트같은기초지식부터트랜지션,애니메이션,Vuex까지애완용품을판매하는웹스토어애플리케이션을구축하며학습한다.이과정에서Vue.js가무엇을하는지,왜그렇게하는지에대한기초개념과웹애플리케이션개발흐름에대해확실히이해할수있다.

바로써먹을수있는실용적인코드로학습하자
책전체에걸쳐제품목록,체크아웃,관리인터페이스를갖춘웹스토어애플리케이션을구축한다.반응형UI모델을시작으로Vue.js의고유기능을추가하면서프로젝트를확장해나가며,Vue-CLI를사용해복잡한애플리케이션을단순화한다.또한,Vuex와테스트까지설명해웹애플리케이션서비스를준비하는데필요한모든과정을경험할수있다.이뿐만아니라자신만의프로젝트를진행할때웹스토어예제를기초로사용할수도있다.