본문으로 바로가기
070-8209-4271~2
고객지원센터
로그인 회원가입
평면표지(2D 앞표지)
입체표지(3D 표지)
2D 뒤표지

실전 코드로 배우는 Vue.js

Vue 3 기초부터 Vue 라우터와 Pinia를 사용한 프로젝트 구축까지

  • ISBN-13
    979-11-6921-299-1 (93000)
  • 출판사 / 임프린트
    한빛미디어(주) / 한빛미디어(주)
  • 정가
    33,000 원 확정정가
  • 발행일
    2024-10-10
  • 출간상태
    출간
  • 저자
    마야 셰빈
  • 번역
    정병열
  • 메인주제어
    웹프로그래밍
  • 추가주제어
    프로그래밍 및 스크립트언어 / 일반 , 웹 접근성 및 디지털 디자인
  • 키워드
    #자바스크립트 #타입스크립트 #피니아 #JavaScript #TypeScript #vue #Pinia #Vite #웹프로그래밍 #프로그래밍 및 스크립트언어 / 일반 #웹 접근성 및 디지털 디자인
  • 도서유형
    종이책, 무선제본
  • 대상연령
    모든 연령, 성인 일반 단행본
  • 도서상세정보
    183 * 235 mm, 452 Page

책소개

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

 

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

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

 

초심자도 쉽게 따라할 수 있도록 기초부터 고급 기술까지 체계적으로 구성되어 있어, Vue.js를 배우고자 하는 모든 프런트엔드 개발자에게 완벽한 실전 가이드가 될 것이다.

이 책을 통해 크게 향상된 Vue.js 기술 역량으로 실제 프로젝트에서 뛰어난 성과를 거두길 바란다.

 

주요 내용

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

목차

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의 기본 개념부터 핵심 내용까지 다룬다. 또한 프런트엔드 실무에 필요한 단위 테스트, CI/CD, 서버 사이드 렌더링 등의 주제도 포함하고 있어, Vue를 처음 접하는 개발자에게 큰 도움이 될 것이다

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

 

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

윤수혁, 코나아이 웹 개발자

 

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

임경민, 안랩

저자소개

저자 : 마야 셰빈
마이크로소프트 수석 소프트웨어 엔지니어. MBA, 컴퓨터 공학 학사, 경제학 학사 등의 다양한 학업적 배경을 갖추고 있다. 또한 웹 및 프런트엔드 개발 분야의 전문가이며 타입스크립트, 리액트, Vue 등에 두루 능통하다. 그녀는 오픈 소스 전자 상거래 프레임워크인 StorefrontUI의 코어 메인테이너이기도 하다. 개발자로서 접근성 높은 고성능 컴포넌트를 전달하는 데 주력하며, 바닐라 자바스크립트 지식의 중요성을 무엇보다 강조한다. 코딩 분야 외에도 국제적으로 명망이 높은 강연자이자 출판 저자로서 자신의 역량을 유감없이 발휘하고 있다. 웹 개발, UX/UI, 접근성, 견고한 코딩 표준을 열정적으로 지지하며 블로그(https://mayashavin.com), X(Twitter ) (@mayashavin), 컨퍼런스를 통해 지식을 공유한다. 한편으로 웹 개발, 특히 Vue를 주제로 한 핸즈온 워크샵을 주최하기도 한다.
번역 : 정병열
어린 시절 접한 BASIC 언어를 계기로 프로그래머의 길에 들어섰다. 연세대학교 공과대학을 졸업하고 직업 개발자로 다양한 프로젝트를 수행하며 스타트업과 대기업을 오갔다. 현재는 시니어 개발자로 경력을 이어가는 한편 양질의 개발 서적 출간에 일조하고자 노력하는 중이다. 옮긴 책으로는 『자바 개발자를 위한 데브옵스 툴』, 『자바 마이크로서비스를 활용한 SRE, 『진화적 아키텍처』 (이상 한빛미디어) 등이 있다.
공지사항 자주 묻는 질문 자료실