홈앤서비스 SK BROADBAND

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 마무리