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

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

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

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

[목 차]
  

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 정적 사이트 생성기

정리

오정준 (현대오토에버 SW개발센터)

프런트엔드 개발 분야의 트렌드는 자바스크립트 프레임워크와 라이브러리 중심으로 움직인다고 해도 과언이 아닐 것이다. 이 책은 주요 자바스크립트 프레임워크 중 하나인 Vue의 기본 개념부터 핵심 내용까지 다룬다. 또한 프런트엔드 실무에 필요한 단위 테스트, CI/CD, 서버 사이드 렌더링 등의 주제도 포함하고 있어, Vue를 처음 접하는 개발자에게 큰 도움이 될 것이다

 

윤수혁 (코나아이 웹 개발자)

Vue는 컴포넌트 개발 입문 시 권장될 정도로 간단하다. 이 책은 기본적인 가상 Dom부터 Vue 라이프사이클, 컴포넌트의 관계 등을 상세하게 설명해주어, CDN으로 컴포넌트를 개발하고 싶은 모든 개발자에게 추천하고 싶다.

 

임경민 (안랩)

이 책은 Vue.js 3의 새로운 특징들을 다양한 예제와 함께 쉽고 명확하게 설명한다. 대표적으로 컴포지션 API, 라이프사이클 훅 등이 있으며 라우터, 상태 관리, 테스트 등 관련 라이브러리를 통해 전체적인 웹 개발에 도움이 되는 내용이 잘 담겨 있는 인상 깊은 서적이다.