원쌤의 Vue.js 퀵스타트 (Vue.js 3.x 빠르게 배워서 바르게 적용하는)

원형섭

2001년까지삼성종합기술원HCILAB에서일하다2001년부터현재까지크레듀멀티캠퍼스(구삼성멀티캠퍼스)에서프로그래밍,빅데이터,NOSQL분야전임교수로활동하고있다.또한강의와병행하여㈜오픈에스지에서수석컨설턴트로재직중이며삼성중공업,삼성디스플레이등에서프로젝트를진행하였다.React,Angular,Vue.js등의프런트엔드프레임워크와OpenAPI,MSA(MicroServiceArchitecture)에관심이많으며DB에서백엔드,프런트엔드까지섭렵하는풀스택개발자를지향한다.최근에는AWS와같은클라우드환경과컨테이너기반기술에대한여러가지시도를하고있으며현재챔피언AWS공인강사(AAI:AWSAuthorizedInstructor)로도활동중이다.

1장Vue.js소개
1.1Vue.js란?
1.2개발환경설정
__1.2.1Node.js설치
__1.2.2VisualStudioCode설치
__1.2.3크롬브라우저및Vue.jsDevtools설치
1.3첫번째Vue.js애플리케이션
1.4마무리

2장Vue.js를위한ES6
2.1ES6소개
__2.1.1ES6를반드시학습해야하는이유
__2.1.2ES6를학습하기위해사용하는도구
2.2ES6를사용하기위한프로젝트설정
2.3let과const
2.4기본파라미터와가변파라미터
2.5구조분해할당
2.6화살표함수
__2.6.1화살표함수의형식
__2.6.2자바스크립트의this
__2.6.3화살표함수에서의this
2.7새로운객체리터럴
2.8템플릿리터럴
2.9모듈
2.10Promise
2.11전개연산자
2.12Proxy
2.13마무리

3장Vue.js기초와Template
3.1보간법
3.2기본디렉티브
__3.2.1v-text,v-html디렉티브
__3.2.2v-bind디렉티브
3.3v-model디렉티브
__3.3.1기본사용법
__3.3.2수식어
__3.3.3v-model의한글처리문제
3.4조건렌더링디렉티브
__3.4.1v-show
__3.4.2v-if
__3.4.3v-else,v-else-if디렉티브
3.5반복렌더링디렉티브
__3.5.1v-for디렉티브
__3.5.2여러요소를묶어서반복렌더링하기
__3.5.3v-for디렉티브와key특성
__3.5.4데이터변경시주의사항
3.6기타디렉티브
__3.6.1v-pre디렉티브
__3.6.2v-once디렉티브
__3.6.3v-cloak디렉티브
3.7동적아규먼트(DynamicArgument)
3.8마무리

4장Vue인스턴스
4.1Vue인스턴스개요
4.2data옵션
4.3계산된속성(ComputedProperty)
4.4메서드
4.5관찰속성
4.6생명주기메서드
4.7마무리

5장이벤트처리
5.1이벤트개요
5.2인라인이벤트처리
5.3이벤트핸들러메서드
5.4이벤트객체
5.5기본이벤트
5.6이벤트전파와버블링
5.7이벤트수식어
__5.7.1once수식어
__5.7.2키코드관련수식어
__5.7.3마우스관련수식어
__5.7.4exact수식어
5.8마무리

6장스타일적용
6.1HTML의스타일적용
6.2인라인스타일
6.3CSS클래스바인딩
__6.3.1CSS클래스명문자열을바인딩하는방법
__6.3.2true/false값을가진객체를바인딩하는방법
6.4동적스타일바인딩
6.5TodoList예제
__6.5.1화면시안작성&확인
__6.5.2데이터와메서드정의
__6.5.3템플릿작성
6.6마무리

7장단일파일컴포넌트를이용한Vue애플리케이션개발
7.1프로젝트설정도구
__7.1.1VueCLI도구
__7.1.2Vite기반의도구
7.2생성된프로젝트구조살펴보기
__7.2.1프로젝트생성과시작(진입점살펴보기)
__7.2.2단일파일컴포넌트살펴보기
__7.2.3간단한단일파일컴포넌트작성과사용
7.3컴포넌트의조합
7.4속성
__7.4.1속성을이용한정보전달
__7.4.2속성을이용해객체전달하기
__7.4.3속성의유효성검증
7.5사용자정의이벤트
__7.5.1사용자정의이벤트를이용한정보전달
__7.5.2이벤트유효성검증
7.6이벤트에미터사용
7.7TodoList예제리팩토링
__7.7.1컴포넌트분할과정의
__7.7.2속성과이벤트를조합한리팩토링
__7.7.3이벤트에미터적용하기
7.8마무리


8장컴포넌트심화
8.1단일파일컴포넌트에서의스타일
__8.1.1범위CSS
__8.1.2CSS모듈
8.2슬롯
__8.2.1슬롯사용전의컴포넌트
__8.2.2슬롯의기본사용법
__8.2.3명명된슬롯
__8.2.4범위슬롯
8.3동적컴포넌트
8.4컴포넌트에서의v-model디렉티브
8.5provide,inject를이용한공용데이터사용
8.6텔레포트
8.7비동기컴포넌트
8.8마무리


9장CompositionAPI
9.1CompositionAPI란?
9.2setup메서드를이용한초기화
9.3반응성을가진상태데이터
__9.3.1ref
__9.3.2reactive
9.4computed
9.5watch와watchEffect
__9.5.1watch
__9.5.2watchEffect
__9.5.3감시자설정해제
9.6생명주기훅(LifeCycleHook)
9.7TodoListApp리팩토링
9.8〈scriptsetup〉사용하기
__9.8.1〈scriptsetup〉이기존과다른점
__9.8.2TodoList앱에〈scriptsetup〉적용하기
9.9마무리

10장vue-router를이용한라우팅
10.1vue-router란?
10.2vue-router의기본사용법
10.3router객체와currentRoute객체
10.4동적라우트
10.5중첩라우트
10.6명명된라우트와명명된뷰
__10.6.1명명된라우트
__10.6.2명명된뷰
10.7프로그래밍방식의라우팅제어
__10.7.1라우터객체의메서드
__10.7.2내비게이션가드
__10.7.3내비게이션가드적용하기
10.8히스토리모드와404라우트
__10.8.1히스토리모드
__10.8.2404라우트
10.9라우트정보를속성으로연결하기
10.10지연로딩
__10.10.1지연로딩적용하기
__10.10.2Suspense컴포넌트
__10.10.3청크스플릿팅
10.11라우팅과인증처리
__10.11.1토큰기반인증개요
__10.11.2내비게이션가드를이용한로그인화면전환
10.12마무리

11장axios를이용한HTTP통신
11.1axios란?
11.2테스트용백엔드API소개
11.3프로젝트생성과크로스오리진오류발생
11.4크로스오리진문제란?
11.5크로스오리진문제해결방법
__11.5.1CORS
__11.5.2프록시를이용한우회
11.6axios라이브러리사용법
__11.6.1Promise와async~await
__11.6.2axios라이브러리사용방법
__11.6.3에러처리
11.7마무리

12장vue-router와axios를사용한예제
12.1애플리케이션아키텍처와프로젝트생성
__12.1.1작성할화면들
__12.1.2컴포넌트계층구조
__12.1.3프로젝트생성
12.21단계예제작성
12.32단계axios적용
__12.3.1백엔드API실행과프록시설정
__12.3.2App컴포넌트변경
12.43단계지연시간에대한스피너UI구현
12.5마무리

13장pinia를이용한상태관리
13.1pinia란?
13.2pinia아키텍처와구성요소
__13.2.1pinia아키텍처
__13.2.2스토어정의
__13.2.3pinia를사용하도록Vue애플리케이션인스턴스설정
__13.2.4컴포넌트에서스토어사용
13.3간단한pinia예제작성
13.4todolist-app-router예제에pinia적용하기
__13.4.1기존예제구조검토
__13.4.2백엔드API서버실행
__13.4.3기초작업
__13.4.4스토어작성
__13.4.5App컴포넌트변경
__13.4.6TodoList,TodoItem컴포넌트변경
__13.4.7AddTodo,EditTodo컴포넌트변경
13.5마무리

이책의구성
■1~2장
Vue개발에필요한개발환경을설정하는방법과Vue개발에필요한ES6(ECMAScript6)문법을학습합니다.
■3~6장
단일파일컴포넌트기반으로개발하지않고,단순히HTML파일에〈script〉태그만으로코드를작성하도록하여Vue의기초인템플릿을작성하는방법,Vue인스턴스를구성하고메서드,이벤트를구성하고사용하는방법을쉽게이해할수있도록정리했습니다.
■7~9장
7~8장에서는단일파일컴포넌트(SingeFileComponent)기반으로Vue애플리케이션을개발하는방법을학습합니다.컴포넌트들을트리구조로조합하여전체앱의기능과UI를만드는방법,컴포넌트간의정보전달,상호작용방법을정확히이해할수있도록내용을구성했습니다.
9장에서는Vue3에서새롭게추가된CompositionAPI를사용하는방법을학습합니다.Vue컴포넌트를작성할때개발자는OptionAPI와CompositionAPI중한가지방법을선택할수있습니다.기존의OptionAPI와비교해다양한장점이있어최근많이사용되고있습니다.
■10~12장
10장에서는VueRouter를이용해URI경로를이용해화면을전환하는라우팅기능의구현방법을학습합니다.Vue를이용해SPA(SinglePageApplication)를개발할때필수적으로사용하는라이브러리이므로상세하게예제중심으로설명합니다.
11장에서는axios라는라이브러리를이용해HTTP통신을수행하는방법을학습합니다.미리제공되는백엔드API를이용해곧바로Vue애플리케이션에서백엔드와통신하는방법을학습할수있습니다.이렇게학습한내용은12장에서바로실전예제를작성하면서정리합니다.
■13장
13장에서는Vue의새로운상태관리라이브러리인Pinia를이용해애플리케이션수준의상태를효과적으로관리하는방법을학습합니다.SPA개발을할때중요하게다뤄지는두개의축이10장에서학습하는라우팅기능과13장의상태관리입니다.이장의마지막에서12장에서작성했던예제를Pinia를적용한예제로리팩토링하면서학습내용을정리합니다.