원쌤의 Vue.js 퀵스타트 원형섭 pdf 다운로드를 무료로 제공합니다 이 책은 반드시 알아야 할 ES6 문법과 Vue.js 개념을 시작으로 다양한 예제를 직접 작성한다. 더불어 예제를 계속 리팩터링하는 방식으로 상태 관리(Pinia), 서버 통신
관련 교재 pdf 모음
책 소개
크롬 브라우저의 개발자 도구를 이용해 내부 작동 방식과 구성을 이해할 수 있는 세심한 설명까지 곁들이며 Vue.js 개발 시, 실수하기 쉬운 코드와 발생할 수 있는 오류 사례, 개발부터 사후 관리를 도울 각종 도구 사용법까지 Vue.js 개발에 필요한 모든 것을 다루고 있다. Vue 개발에 필요한 개발 환경을 설정하는 방법과 Vue 개발에 필요한 ES6(ECMAScript 6) 문법을 학습합니다. 단일 파일 컴포넌트 기반으로 개발하지 않고, 단순히 HTML 파일에 〈script〉 태그만으로 코드를 작성하도록 하여 Vue의 기초인 템플릿을 작성하는 방법, Vue 인스턴스를 구성하고 메서드, 이벤트를 구성하고 사용하는 방법을 쉽게 이해할 수 있도록 정리했습니다.
원쌤의 Vue.js 퀵스타트 pdf 다운
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 마무리