도서 소개

Vue.js 기초 문법부터 Nuxt까지 한 권으로!
실무 흐름을 따라 배우는 프런트엔드 개발 입문서

AI 시대, 더욱 빠르고 효율적으로 웹 애플리케이션을 개발하고 싶은 학습자를 위해《Do it! Vue.js+Nuxt 입문》이 출간되었다. 이 책은 직관적인 문법과 높은 생산성으로 많은 프런트엔드 개발자에게 선택받고 있는 Vue.js를 기초부터 차근차근 익히고, 실무 개발로 확장할 수 있는 Nuxt까지 함께 다룬 실습 중심 입문서다.

기초 문법과 컴포넌트 설계부터 Vue 3의 핵심인 컴포지션 API와 피니아(Pinia), 그리고 Nuxt까지 단계별 실습으로 안내한다. 먼저 개념을 이해한 뒤 바로 예제로 확인하고, 이를 실제 화면과 기능으로 구현해 보며 학습 내용을 직접 경험할 수 있게 구성했다. 특히 화면을 만들고 데이터를 연결하는 과정을 중심으로 3가지 프로젝트를 직접 완성하며, 작은 기능이 쌓여 하나의 웹 서비스로 이어지는 과정을 경험할 수 있다. 문법을 나열하는 데 그치지 않고, 실제 개발 현장에서 진행하는 흐름과 구조를 자연스럽게 익힐 수 있도록 설계한 점이 가장 큰 특징이다. 이 책은 프런트엔드 개발을 처음 시작하는 입문자는 물론, Vue.js를 실무에 적용해 보고 싶은 개발자에게도 든든한 길잡이가 되어 줄 것이다.

  출판사 리뷰

방대한 이론보다 실무에서 쓰는 핵심에 집중한다!
이제 프런트엔드 개발에서는 기능을 많이 아는 것보다 복잡한 요구 사항을 얼마나 안정되고 빠르게 구현할 수 있는지가 더 중요해졌습니다. 이 책은 모든 기능을 나열하는 방식에서 벗어나, 실제 개발 현장에서 자주 사용하는 핵심에 집중합니다. 컴포지션 API와 피니아를 활용한 상태 관리, 테일윈드 CSS와 Shadcn UI를 활용한 화면 구성, 그리고 Nuxt를 통한 애플리케이션 확장까지, 최신 Vue.js 개발 흐름에 맞는 기술만을 선별해 실습 중심으로 구성했습니다. 불필요한 이론은 덜어 내고, 독자가 학습하면서 길을 잃지 않도록 프런트엔드 개발의 전체 과정을 하나의 흐름으로 이해할 수 있게 안내합니다.

70개 예제로 기초를 다지고, 레벨 업 문제로 실력을 점검한다!
이 책에서는 Vue.js로 프런트엔드를 개발할 때 필요한 개념을 총 70개의 예제로 차근차근 익힐 수 있습니다. 예제마다 개념을 하나씩 집중해서 다뤄 부담 없이 따라 하며 핵심을 이해할 수 있습니다. 예제로 익힌 내용은 이후 프로젝트와 실습에서 다시 사용하므로, 학습한 개념을 반복적으로 확인하고 정리할 수 있습니다. 주요 문법과 개념은 ‘레벨 업 문제’를 풀면서 한 번 더 점검할 수 있습니다. 단순히 코드를 따라 작성하는 데서 그치지 않고, 스스로 생각하며 문제를 해결하는 과정에서 이해도를 높일 수 있습니다. 이를 통해 배운 내용을 정리하고, 다음 학습 단계로 나아가기 위한 기초를 탄탄하게 다질 수 있습니다.

3가지 프로젝트로 실전 개발 감각을 익힌다!
이 책의 핵심은 직접 만들어 보며 배우는 3가지 실전 프로젝트입니다. 프로젝트는 실제 서비스 개발 흐름을 반영해서 설계했으며, 작은 기능이 쌓여 하나의 웹 애플리케이션으로 완성되는 과정을 직접 경험할 수 있습니다.
이미지 검색 웹 애플리케이션: 컴포넌트 구조와 API 연동의 기본 흐름 이해
날씨 대시보드 웹 애플리케이션: 컴포지션 API를 활용한 상태 관리와 화면 구성, 데이터 흐름 체계화
뉴스 조회 웹 애플리케이션: Nuxt를 활용한 애플리케이션 확장과 구조 이해

책의 실습을 순서대로 따라가다 보면 Vue.js와 Nuxt를 활용해 웹 서비스를 처음부터 끝까지 구현하고, 실무에 맞게 확장할 수 있는 탄탄한 기반을 갖출 수 있을 것입니다.

이 책, 이런 분께 추천합니다!
Vue.js를 처음 배우는 입문자
최신 Vue.js 생태계를 한 번에 익히고 싶은 개발자
프런트엔드 개발 흐름을 직접 경험하고 싶은 취준생

2가지 학습 계획표로 체계적으로,
실습 파일로 효율적으로 공부하세요!
독자의 학습 속도에 맞춰 공부할 수 있도록 2가지 학습 계획표를 제공합니다. 프런트엔드 개발을 처음 접하는 독자라면 30일 학습 계획표로, 이미 개발 경험이 있는 독자라면 15일 학습 계획표로 공부해 보세요. 15일 학습 계획표는 강의에도 활용할 수 있습니다.

이 책에서 사용하는 모든 실습 파일과 예제 코드는 저자의 깃허브와 이지스퍼블리싱 홈페이지 자료실에서 내려받을 수 있습니다. 실습에 필요한 이미지 파일도 함께 제공되어 학습을 효율적으로 진행할 수 있고, 자신이 직접 작성한 코드와 예제 코드를 비교하며 학습 내용을 점검할 수 있습니다.

이지스퍼블리싱 홈페이지 | www.easyspub.co.kr → [자료실] → 도서명으로 검색
저자 깃허브 | github.com/9diin

‘Do it! 스터디룸’에서 공부단을 신청해 보세요!
혼자 계획을 세우고 공부하다 보면 금방 지치기 마련입니다. ‘Do it! 스터디룸’의 공부단에 접속해서 이 책 완독에 도전해 보세요. 함께 공부하는 사람들도 만나고, 공부하는 내용을 올려 공유하고 인증하면 책 선물도 드립니다. 또한 어려운 내용이 있다면 ‘Do it! 스터디룸’ 게시판에 질문을 남겨 보세요. 전문가와 저자가 명쾌하게 해결해 드립니다.
Do it! 스터디룸: cafe.naver.com/doitstudyroom

  작가 소개

지은이 : 박성재
다양한 IT 서비스 기업에서 개발자로 실무 경험을 쌓았으며, 기업과 온라인 플랫폼에서 입문자와 현업 개발자를 대상으로 실무형 강의를 진행해 왔다. 이러한 경험을 바탕으로 현재는 콘텐츠 크리에이터로 활동하며, 유튜브 채널에서 개발 지식과 실무 경험을 공유하고 있다. 학습은 단순한 지식 소비가 아니라 창작과 생산으로 이어져야 한다고 믿으며, 배움이 다시 공유로 확장되는 선순환 구조를 만들어 가는 데 관심을 두고 있다. 열린 마음과 작은 호기심에서 시작된 배움이 협업과 창작으로 이어질 수 있도록, 개발 커뮤니티 활동과 지식 공유 활동으로 후배 개발자를 꾸준히 양성하고 있다.

  목차

01장 프런트엔드와 Vue.js 이해하기
_01-01 프런트엔드 이해하기
__프런트엔드란 무엇일까?
__프런트엔드를 만드는 도구
__최신 프런트엔드 애플리케이션의 구조 - SPA
_01-02 Vue.js 이해하기
__Vue.js란 무엇일까?
__Vue.js의 파일 구조 - SFC
_01-03 Vue.js의 개발 스타일
__옵션 API
__컴포지션 API
__어떤 스타일로 개발해야 할까?

02장 Vue.js 시작하기
_02-01 개발 도구 설치하기
__크롬
__비주얼 스튜디오 코드
__비주얼 스튜디오 코드 설치하기
__Vue.js 개발에 필요한 확장 프로그램 설치하기
__노드
__노드 설치하기
_02-02 비트를 사용해 Vue.js 프로젝트 생성하기
__최신 웹 빌드 도구 - 비트
__Vue.js 프로젝트 생성하기
_02-03 첫 번째 Vue.js 프로젝트 살펴보기
__Vue.js 프로젝트 구조 알아보기

03장 Vue.js 기초 문법 이해하기
_03-01 데이터 보간법
__프로그래밍에서 데이터의 정의
__데이터 보간법이란 무엇일까?
_03-02 선언적 렌더링
__디렉티브
__v-html
__v-bind
_03-03 조건부 렌더링
__v-if
__v-else-if와 v-else
__v-show
__v-if와 v-show 비교
_03-04 리스트 렌더링
__v-for
__v-for 디렉티브의 key 속성
_03-05 이벤트 핸들링
__이벤트 바인딩
__이벤트 핸들러
__이벤트 인자
_03-06 양방향 데이터 바인딩
__v-model
__양방향 데이터 바인딩의 동작 방식
_03-07 계산된 속성과 감시자 속성
__계산된 속성 - computed
__감시자 속성 - watchers

04장 컴포넌트 이해하기
_04-01 화면을 구성하는 기본 단위 - 컴포넌트
__컴포넌트란 무엇일까?
__부모 컴포넌트와 자식 컴포넌트
_04-02 컴포넌트의 라이프사이클
__생성 단계 - Creation
__마운트 단계 - Mounting
__업데이트 단계 - Updating
__파괴 단계 - Destruction
__생성 단계 훅 사용해 보기
__마운트 단계 훅 사용해 보기
__업데이트 단계 훅 사용해 보기
__파괴 단계 훅 사용해 보기
_04-03 데이터 공유하기 - props
__props
__정적 데이터 공유하기
__동적 데이터 공유하기
_04-04 이벤트 전달하기 - emits
__emits
__인라인 핸들러로 이벤트 전달하기
__메서드 핸들러로 이벤트 전달하기

05장 Vue.js의 상태 관리 이해하기
_05-01 복잡한 웹 애플리케이션의 핵심 - 상태 관리
__상태 관리란 무엇일까?
__중앙 집중식 상태 관리
_05-02 Vue3의 새로운 상태 관리 도구 - 피니아
__피니아란 무엇일까?
__피니아의 상태 저장소 - 스토어
__옵션 스토어와 셋업 스토어
__스토어를 사용해야 하는 경우
_05-03 첫 번째 피니아 스토어 만들기
__피니아 설치하기
__피니아 스토어 만들기
__state 옵션 작성하기
__getters 옵션 작성하기
__actions 옵션 작성하기
_05-04 피니아 사용하기
__옵션 API에서 사용하기

06장 Vue.js 화면 스타일링
_06-01 테일윈드 CSS
__테일윈드 CSS란 무엇일까?
__테일윈드 CSS 사용법
__자주 사용하는 테일윈드 CSS 클래스
_06-02 Shadcn UI
__Shadcn UI란 무엇일까?
__Shadcn UI의 특징

07장 이미지 검색 웹 애플리케이션 만들기
_07-01 이미지 검색 웹 애플리케이션 프로젝트 시작하기
__이미지 검색 웹 애플리케이션 프로젝트 만들기
__프로젝트 환경 설정하기
_07-02 뷰 라우터 설정하기
__라우팅이란?
__뷰 라우터
__뷰 라우터 설치하기
__타입스크립트로 라우터 인스턴스 등록하기
__라우터 뷰 연결하기
_07-03 UI 컴포넌트 준비하기
__프로젝트 화면 미리 보기
__화면 개발에 필요한 컴포넌트 설치하기
__검색 창 컴포넌트 만들기
_07-04 공통 컴포넌트 만들기
__헤더 컴포넌트 만들기
__내비게이션 메뉴 컴포넌트 만들기
__페이지네이션 컴포넌트 만들기
__스켈레톤 이미지 카드 컴포넌트 만들기
__공통 컴포넌트 내보내기
_07-05 컴포넌트 조합해서 페이지 완성하기
__App.vue 파일 수정하기
__Home.vue 파일 수정하기
_07-06 액시오스로 이미지 검색 API 호출하기
__프로미스란 무엇일까?
__액시오스란 무엇일까?
__언스플래시 오픈 API Key 발급하기
__오픈 API 호출하기
_07-07 피니아로 API 데이터 바인딩하기
__피니아 스토어 만들기
__카드 컴포넌트에 이미지 API 데이터 바인딩하기
__카드 컴포넌트 수정하기
_07-08 페이지네이션 기능 개발하기
__페이지네이션 컴포넌트 수정하기
__피니아 스토어 수정하기
__App.vue 파일 수정하기
__페이지네이션 컴포넌트에 props 추가하기
_07-09 이미지 상세 정보 조회 다이얼로그 기능 개발하기
__다이얼로그 UI 미리보기
__다이얼로그 기능 추가하기
_07-10 이미지 검색 기능 개발하기
__검색 창 기능 개발하기
__내비게이션 메뉴 기능 개발하기

08장 컴포지션 API 이해하기
_08-01 컴포지션 API
__컴포지션 API란 무엇일까?
__컴포지션 API 코드 작성 방식
_08-02 컴포지션 API와 반응형 데이터
__자바스크립트 데이터의 2가지 종류
__원시 자료형 데이터 선언하기 - ref()
__참조 자료형 데이터 선언하기 - reactive()
_08-03 컴포지션 API의 계산된 속성과 감시자 속성
__계산된 속성 - computed()
__감시자 속성 - watch()와 watchEffect()
_08-04 컴포지션 API의 라이프사이클 훅
__컴포지션 API의 라이프사이클 훅 함수
_08-05 컴포넌트 간 데이터와 이벤트 공유하기
__props를 정의하는 함수 - defineProps()
__props 안전하게 분해하기
__emits를 정의하는 함수 - defineEmits()
_08-06 피니아의 셋업 스토어와 컴포지션 API
__상태 정의하기
__게터 정의하기
__액션 정의하기
__컴포지션 API에서 셋업 스토어 사용하기
_08-07 템플릿 참조 ref
__일반 HTML에서 ref 사용하기
__자식 컴포넌트 참조하기
__defineExpose 사용 방법

09장 날씨 대시보드 웹 애플리케이션 만들기
_09-01 날씨 대시보드 프로젝트 개발 환경 설정하기
__날씨 대시보드 프로젝트 준비하기
__UI 컴포넌트 설치하기
__스타일 파일 준비하기
__뷰 라우터 설정하기
_09-02 기본 디자인 시스템 구성하기
__프로젝트 화면 미리보기
__프로젝트 전역 스타일 설정하기
__HomeView 컴포넌트 작성하기
_09-03 상단 영역 컴포넌트 만들기
__헤더 컴포넌트 만들기
__현재 날씨 위젯 컴포넌트 만들기
__시간대별 날씨 위젯 컴포넌트 만들기
_09-04 하단 영역 컴포넌트 만들기_
__하이라이트 날씨 위젯 컴포넌트 전체 레이아웃 만들기
__최저·최고 기온 카드 만들기
__일출·일몰 카드 만들기
__습도, 기압, 가시거리, 체감 온도 카드 만들기
__하이라이트 날씨 위젯 컴포넌트 사용하기
__주간 날씨 위젯 만들기
_09-05 지도 위젯 컴포넌트 만들기
__네이버 지도 API
__네이버 지도 API 사용 준비하기
__네이버 지도 컴포넌트 만들기
_09-06 날씨와 지도 데이터 동적 바인딩하기
__weather API 사용 준비하기
__날씨 API 조회 및 데이터 바인딩하기
__현재 날씨 위젯에 데이터 바인딩하기
__시간대별 날씨 위젯 컴포넌트에 데이터 바인딩하기
__하이라이트 날씨 위젯 컴포넌트에 데이터 바인딩하기
__주간 날씨 위젯 컴포넌트에 데이터 바인딩하기
_09-07 검색 기능 구현하기
__피니아 적용 전 코드 살펴보기
__피니아 사용 준비하기
__API 조회 코드 이관하기
__HomeView 컴포넌트 수정하기
__검색 기능 구현하기
_09-08 날씨 데이터 실시간 조회 기능 구현하기
__지도 마커 데이터 준비하기
__네이버 지도 컴포넌트 수정하기

10장 Vue.js의 메타 프레임워크 - Nuxt
_10-01 Nuxt 이해하기
__Nuxt란 무엇일까?
__Nuxt 4의 주요 기능
_10-02 Nuxt 프로젝트 시작하기
__Nuxt 프로젝트 생성하기
__첫 번째 Nuxt 프로젝트 살펴보기
_10-03 메타 태그와 SEO 관리하기
__기본 메타 태그 설정하기 - app.head
__동적 메타 태그 관리하기 - useHead
__페이지별 SEO 정보 설정하기 - useSeoMeta
_10-04 데이터 페칭하기
__$fetch
__useFetch
__useAsyncData

11장 뉴스 조회 웹 애플리케이션 만들기
_11-01 뉴스 조회 웹 애플리케이션 개발 환경 설정하기
__프로젝트 미리 보기
__프로젝트 생성하기
__Shadcn-vue 설치하기
_11-02 UI 컴포넌트 준비하기
__화면 개발에 필요한 컴포넌트 설치하기
__헤더 컴포넌트 만들기
__헤더 컴포넌트 사용하기
_11-03 파일 기반 라우팅 설정하기
__pages 폴더와 <NuxtPage>의 관계
__페이지 컴포넌트 만들기
_11-04 페이지 레이아웃 구성하기
__레이아웃 미리 보기
__메인 뉴스 콘텐츠 레이아웃 구성하기
__최신 뉴스 콘텐츠 레이아웃 구성하기
__섹션 헤더와 버튼 영역 추가하기
_11-05 레이아웃별 컴포넌트 분리하기
__배너 레이아웃 분리하기
__메인 뉴스 콘텐츠 레이아웃 분리하기
__최신 뉴스 콘텐츠 레이아웃 분리하기
__레이아웃별 컴포넌트 조합하기
_11-04 오픈 API로 뉴스 정보 조회하기
__News API 사용 준비하기
__피니아 사용 준비하기
__News API 호출하기
__뉴스 기사 데이터 타입 선언하기
__뉴스 기사 데이터 필터링하기
_11-05 뉴스 정보와 화면의 데이터 바인딩하기
__메인 뉴스 콘텐츠 데이터 바인딩하기
__최신 뉴스 콘텐츠 데이터 바인딩하기
_11-06 useAsyncData로 코드 리팩터링
__기존의 코드를 어떻게 리팩터링할 수 있을까?
__useAsyncData 활용하기

찾아보기

  회원리뷰