실무에 바로 적용 가능한 코드만 다루는 Vue 핵심 가이드

Vue.js는 자바스크립트 프레임워크 중에서 간편성과 유연성으로 주목받고 있으며, 빠르게 변화하는 프런트엔드 개발 환경에서 그 중요성이 더욱 커지고 있다. 특히, Vue 3와 Pinia, Vite 등의 최신 도구들이 등장함에 따라 개발 효율성과 확장성이 크게 향상되었다.

이 책에서는 이러한 최신 기술 흐름을 반영해 Vue 3의 핵심 기능을 실무에 바로 적용할 수 있도록, 실용적인 코드 예제와 함께 구체적으로 설명한다. 컴포지션 API, Pinia, 라우터 설정, 그리고 서버 사이드 렌더링 등 현대 웹 애플리케이션 구축에 필수적인 주제들을 상세히 소개한다. 또한, 최신 프런트엔드 개발 트렌드에 맞춘 단위 테스트, CI/CD 통합, 트랜지션 및 애니메이션 기능까지 설명하며 실전에서 바로 사용할 수 있는 프로젝트를 구축하는 방법을 제시한다.

초심자도 쉽게 따라할 수 있도록 기초부터 고급 기술까지 체계적으로 구성되어 있어, Vue.js를 배우고자 하는 모든 프런트엔드 개발자에게 완벽한 실전 가이드가 될 것이다. 이 책을 통해 크게 향상된 Vue.js 기술 역량으로 실제 프로젝트에서 뛰어난 성과를 거두길 바란다.

마이크로소프트 수석 소프트웨어 엔지니어. MBA, 컴퓨터 공학 학사, 경제학 학사 등의 다양한 학업적 배경을 갖추고 있다. 또한 웹 및 프런트엔드 개발 분야의 전문가이며 타입스크립트, 리액트, Vue 등에 두루 능통하다. 그녀는 오픈 소스 전자 상거래 프레임워크인 StorefrontUI의 코어 메인테이너이기도 하다. 개발자로서 접근성 높은 고성능 컴포넌트를 전달하는 데 주력하며, 바닐라 자바스크립트 지식의 중요성을 무엇보다 강조한다. 코딩 분야 외에도 국제적으로 명망이 높은 강연자이자 출판 저자로서 자신의 역량을 유감없이 발휘하고 있다. 웹 개발, UX/UI, 접근성, 견고한 코딩 표준을 열정적으로 지지하며 블로그(https://mayashavin.com), X(Twitter ) (@mayashavin), 컨퍼런스를 통해 지식을 공유한다. 한편으로 웹 개발, 특히 Vue를 주제로 한 핸즈온 워크샵을 주최하기도 한다.

CHAPTER 1 Vue.js의 세계로

_1.1 Vue.js란?
_1.2 현대 웹 개발과 Vue의 이점
_1.3 Node.js 설치
_1.4 Vue 개발자 도구
_1.5 빌더 관리 도구 Vite.js
_1.6 Vue 애플리케이션 생성
_1.7 파일 리포지터리 구조
정리

CHAPTER 2 Vue의 기본 작동 방식

_2.1 가상 DOM 들여다보기
_2.2 Vue 앱 인스턴스 및 옵션 API
_2.3 옵션 API 탐색
_2.4 템플릿 구문
_2.5 데이터 프로퍼티를 통한 로컬 상태 생성
_2.6 Vue의 반응성이 작동하는 방식
_2.7 v-model을 이용한 양방향 바인딩
_2.8 v-model.lazy 수정자
_2.9 v-bind를 통한 반응형 데이터 바인딩 및 Props 데이터 전달
_2.10 클래스 및 스타일 속성 바인딩
_2.11 v-for를 이용한 데이터 컬렉션 순회
_2.12 v-on을 이용한 이벤트 리스너 추가
_2.13 v-if, v-else, v-else-if를 이용한 조건부 렌더링
_2.14 v-show를 이용한 조건부 표시
_2.15 v-html을 이용한 동적 HTML 코드 표시
_2.16 v-text를 이용한 텍스트 콘텐츠 표시
_2.17 v-once 및 v-memo를 이용한 렌더링 최적화
_2.18 전역 컴포넌트 등록
정리

CHAPTER 3 컴포넌트 구성

3.1 Vue 싱글 파일 컴포넌트 구조
3.2 defineComponent()와 타입스크립트 지원
3.3 컴포넌트 라이프사이클 훅
3.4 메서드
3.5 computed 프로퍼티
3.6 와처
3.7 슬롯
3.8 템플릿과 v-slot으로 명명된 슬롯
3.9 ref의 이해
3.10 믹스인과 컴포넌트 설정 공유
3.11 컴포넌트 스타일과 적용 범위
3.12 CSS 모듈과 컴포넌트 스타일
정리

CHAPTER 4 컴포넌트 상호작용

_4.1 자식 컴포넌트의 데이터 흐름
_4.2 커스텀 이벤트와 컴포넌트 간 통신
_4.3 defineEmits()를 이용한 커스텀 이벤트 정의
_4.4 제공/주입 패턴을 이용한 컴포넌트 통신
_4.5 텔레포트 API
정리

CHAPTER 5 컴포지션 API

_5.1 컴포지션 API를 통한 컴포넌트 설정
_5.2 ref()와 reactive()로 데이터 처리하기
_5.3 라이프사이클 훅
_5.4 컴포지션 API의 와처
_5.5 computed()
_5.6 재사용 컴포저블
정리

CHAPTER 6 외부 데이터 통합

_6.1 Axios란?
_6.2 Axios 설치
_6.3 라이프사이클 훅과 Axios로 데이터 가져오기
_6.4 런타임 중 비동기 데이터 요청
_6.5 재사용 fetch 컴포넌트 생성
_6.6 애플리케이션과 외부 데이터베이스 연결
정리

CHAPTER 7 고급 렌더링, 동적 컴포넌트, 플러그인 구성

_7.1 렌더 함수와 JSX
_7.2 기능성 컴포넌트
_7.3 기능성 컴포넌트의 props와 emits 정의
_7.4 Vue 플러그인으로 전역 커스텀 기능 추가하기
_7.5 〈component〉 태그를 이용한 동적 렌더링
정리

CHAPTER 8 라우팅

_8.1 라우팅이란?
_8.2 Vue 라우터
_8.3 라우트 간 데이터 전달
_8.4 props로 라우트 파라미터 분리하기
_8.5 내비게이션 가드의 이해
_8.6 중첩 라우트
_8.7 동적 라우트 생성
_8.8 라우터 인스턴스로 앞뒤 이동하기
_8.9 미확인 라우트 처리
정리

CHAPTER 9 피니아와 상태 관리

_9.1 Vue의 상태 관리
_9.2 피니아
_9.3 저장소 생성
_9.4 장바구니 저장소 생성
_9.5 컴포넌트에서 장바구니 저장소 사용하기
_9.6 피자 갤러리에 장바구니 기능 추가하기
_9.7 액션으로 장바구니 목록 표시하기
_9.8 장바구니 저장소에서 항목 제거하기
_9.9 피니아 저장소 유닛 테스트
_9.10 저장소 변경 사항 처리하기
정리

CHAPTER 10 Vue 트랜지션과 애니메이션

_10.1 CSS 트랜지션 및 애니메이션
_10.2 Vue.js의 트랜지션 컴포넌트
_10.3 엘리먼트 그룹 트랜지션
_10.4 라우트 트랜지션
_10.5 트랜지션 이벤트로 애니메이션 제어하기
정리

CHAPTER 11 Vue 테스트

_11.1 유닛 테스트와 E2E 테스트
_11.2 Vitest와 유닛 테스트
_11.3 Vitest 파라미터와 설정 파일
_11.4 테스트 작성
_11.5 비-라이프사이클 컴포저블 테스트
_11.6 라이프사이클 훅 컴포저블 테스트
_11.7 Vue 테스트 유틸로 컴포넌트 테스트하기
_11.8 컴포넌트 상호작용 및 이벤트 테스트
_11.9 Vitest와 GUI
_11.10 Vitest와 커버리지 러너
_11.11 PlaywrightJS를 이용한 엔드투엔드 테스트
정리

CHAPTER 12 Vue.js 애플리케이션과 CI/CD

_12.1 소프트웨어 개발과 CI/CD
_12.2 GitHub Actions와 CI/CD 파이프라인
_12.3 Netlify를 이용한 지속적 배포
_12.4 Netlify CLI 배포
정리

CHAPTER 13 Vue와 서버 사이드 렌더링

_13.1 Vue의 클라이언트 사이드 렌더링
_13.2 서버 사이드 렌더링
_13.3 Nuxt.js와 서버 사이드 렌더링
_13.4 정적 사이트 생성기
정리