1장 Vue.js 소개 1.1 Vue.js란? 1.2 개발 환경 설정 __1.2.1 Node.js 설치 __1.2.2 Visual Studio Code 설치 __1.2.3 크롬 브라우저 및 Vue.js Devtools 설치 1.3 첫 번째 Vue.js 애플리케이션 1.4 마무리 2장 Vue.js를 위한 ES6 2.1 ES6 소개 __2.1.1 ES6를 반드시 학습해야 하는 이유 __2.1.2 ES6를 학습하기 위해 사용하는 도구 2.2 ES6를 사용하기 위한 프로젝트 설정 2.3 let과 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.10 Promise 2.11 전개 연산자 2.12 Proxy 2.13 마무리 3장 Vue.js 기초와 Template 3.1 보간법 3.2 기본 디렉티브 __3.2.1 v-text, v-html 디렉티브 __3.2.2 v-bind 디렉티브 3.3 v-model 디렉티브 __3.3.1 기본 사용법 __3.3.2 수식어 __3.3.3 v-model의 한글처리 문제 3.4 조건 렌더링 디렉티브 __3.4.1 v-show __3.4.2 v-if __3.4.3 v-else, v-else-if 디렉티브 3.5 반복 렌더링 디렉티브 __3.5.1 v-for 디렉티브 __3.5.2 여러 요소를 묶어서 반복 렌더링하기 __3.5.3 v-for 디렉티브와 key 특성 __3.5.4 데이터 변경 시 주의사항 3.6 기타 디렉티브 __3.6.1 v-pre 디렉티브 __3.6.2 v-once 디렉티브 __3.6.3 v-cloak 디렉티브 3.7 동적 아규먼트(Dynamic Argument) 3.8 마무리 4장 Vue 인스턴스 4.1 Vue 인스턴스 개요 4.2 data 옵션 4.3 계산된 속성(Computed Property) 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.1 once 수식어 __5.7.2 키코드 관련 수식어 __5.7.3 마우스 관련 수식어 __5.7.4 exact 수식어 5.8 마무리 6장 스타일 적용 6.1 HTML의 스타일 적용 6.2 인라인 스타일 6.3 CSS 클래스 바인딩 __6.3.1 CSS 클래스명 문자열을 바인딩하는 방법 __6.3.2 true/false 값을 가진 객체를 바인딩하는 방법 6.4 동적 스타일 바인딩 6.5 TodoList 예제 __6.5.1 화면 시안 작성 & 확인 __6.5.2 데이터와 메서드 정의 __6.5.3 템플릿 작성 6.6 마무리 7장 단일 파일 컴포넌트를 이용한 Vue 애플리케이션 개발 7.1 프로젝트 설정 도구 __7.1.1 Vue CLI 도구 __7.1.2 Vite 기반의 도구 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.7 TodoList 예제 리팩토링 __7.7.1 컴포넌트 분할과 정의 __7.7.2 속성과 이벤트를 조합한 리팩토링 __7.7.3 이벤트 에미터 적용하기 7.8 마무리 8장 컴포넌트 심화 8.1 단일 파일 컴포넌트에서의 스타일 __8.1.1 범위 CSS __8.1.2 CSS 모듈 8.2 슬롯 __8.2.1 슬롯 사용 전의 컴포넌트 __8.2.2 슬롯의 기본 사용법 __8.2.3 명명된 슬롯 __8.2.4 범위 슬롯 8.3 동적 컴포넌트 8.4 컴포넌트에서의 v-model 디렉티브 8.5 provide, inject를 이용한 공용데이터 사용 8.6 텔레포트 8.7 비동기 컴포넌트 8.8 마무리 9장 Composition API 9.1 Composition API란? 9.2 setup 메서드를 이용한 초기화 9.3 반응성을 가진 상태 데이터 __9.3.1 ref __9.3.2 reactive 9.4 computed 9.5 watch와 watchEffect __9.5.1 watch __9.5.2 watchEffect __9.5.3 감시자 설정 해제 9.6 생명주기 훅(Life Cycle Hook) 9.7 TodoList App 리팩토링 9.8 〈--script setup〉 사용하기 __9.8.1 〈--script setup〉이 기존과 다른 점 __9.8.2 TodoList 앱에 〈--script setup〉 적용하기 9.9 마무리 10장 vue-router를 이용한 라우팅 10.1 vue-router란? 10.2 vue-router의 기본 사용법 10.3 router 객체와 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.2 404 라우트 10.9 라우트 정보를 속성으로 연결하기 10.10 지연 로딩 __10.10.1 지연 로딩 적용하기 __10.10.2 Suspense 컴포넌트 __10.10.3 청크 스플릿팅 10.11 라우팅과 인증 처리 __10.11.1 토큰 기반 인증 개요 __10.11.2 내비게이션 가드를 이용한 로그인 화면 전환 10.12 마무리 11장 axios를 이용한 HTTP 통신 11.1 axios란? 11.2 테스트용 백엔드 API 소개 11.3 프로젝트 생성과 크로스 오리진 오류 발생 11.4 크로스 오리진 문제란? 11.5 크로스 오리진 문제 해결 방법 __11.5.1 CORS __11.5.2 프록시를 이용한 우회 11.6 axios 라이브러리 사용법 __11.6.1 Promise와 async~await __11.6.2 axios 라이브러리 사용 방법 __11.6.3 에러 처리 11.7 마무리 12장 vue-router와 axios를 사용한 예제 12.1 애플리케이션 아키텍처와 프로젝트 생성 __12.1.1 작성할 화면들 __12.1.2 컴포넌트 계층 구조 __12.1.3 프로젝트 생성 12.2 1단계 예제 작성 12.3 2단계 axios 적용 __12.3.1 백엔드 API 실행과 프록시 설정 __12.3.2 App 컴포넌트 변경 12.4 3단계 지연 시간에 대한 스피너 UI 구현 12.5 마무리 13장 pinia를 이용한 상태 관리 13.1 pinia란? 13.2 pinia 아키텍처와 구성 요소 __13.2.1 pinia 아키텍처 __13.2.2 스토어 정의 __13.2.3 pinia를 사용하도록 Vue 애플리케이션 인스턴스 설정 __13.2.4 컴포넌트에서 스토어 사용 13.3 간단한 pinia 예제 작성 13.4 todolist-app-router 예제에 pinia 적용하기 __13.4.1 기존 예제 구조 검토 __13.4.2 백엔드 API 서버 실행 __13.4.3 기초 작업 __13.4.4 스토어 작성 __13.4.5 App 컴포넌트 변경 __13.4.6 TodoList, TodoItem 컴포넌트 변경 __13.4.7 AddTodo, EditTodo 컴포넌트 변경 13.5 마무리