실전 코드로 배우는 Vue.js

마야 셰빈 지음 | 정병열 옮김

한빛미디어 2024년 10월 10일 출간 국내도서 : 2024년 10월 10일 출간

작품소개

책소개

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

출판사 서평

웹 개발의 혁신, Vue.js의 모든 것을 이 한 권으로!

이 책은 자바스크립트와 타입스크립트를 사용하여 Vue 라이브러리로 웹 애플리케이션을 개발하는 전 과정을 상세히 안내한다. 최신 상태 관리 라이브러리인 Pinia를 통해 컴포넌트 간 데이터를 효율적으로 관리하는 방법을 익히고, Vue 라우터를 사용해 애플리케이션의 내비게이션을 구축하는 기술을 배운다. 또한 Vue의 트랜지션 시스템으로 기본적인 애니메이션 효과를 구현하여 사용자 경험을 향상시키는 방법도 다룬다. 이 책을 통해 Vue 3의 핵심 기능들을 활용하고, 확장성 높은 인터랙티브 웹 애플리케이션을 효과적으로 구축하는 기술을 습득하길 바란다.

주요 내용
● Vue로 재사용 가능한 컴포넌트 시스템 생성
● 정적 애플리케이션에 반응성 도입
● Vite.js로 Vue 애플리케이션 프로젝트 생성
● 서버에서 외부 데이터를 Vue 애플리케이션에 연결
● Vue 라우터를 이용해 정적 및 동적 라우팅으로 애플리케이션 흐름 제어
● Vitest와 Playwright로 애플리케이션 테스트

작가정보

저자(글) 마야 셰빈

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

번역 정병열

어린 시절 접한 BASIC 언어를 계기로 프로그래머의 길에 들어섰다. 연세대학교 공과대학을 졸업하고 직업 개발자로 다양한 프로젝트를 수행하며 스타트업과 대기업을 오갔다. 현재는 시니어 개발자로 경력을 이어가는 한편 양질의 개발 서적 출간에 일조하고자 노력하는 중이다. 옮긴 책으로는 『자바 개발자를 위한 데브옵스 툴』, 『자바 마이크로서비스를 활용한 SRE, 『진화적 아키텍처』 (이상 한빛미디어) 등이 있다.