Vue.js 기초 문법부터 Nuxt까지 한 권으로! 실무 흐름을 따라 배우는 프런트엔드 개발 입문서 AI 시대, 더욱 빠르고 효율적으로 웹 애플리케이션을 개발하고 싶은 학습자를 위해 ≪Do it! Vue.js+Nuxt 입문≫이 출간되었다. 이 책은 직관적인 문법과 높은 생산성으로 많은 프런트엔드 개발자에게 선택받고 있는 Vue.js를 기초부터 차근차근 익히고, 실무 개발로 확장할 수 있는 Nuxt까지 함께 다룬 실습 중심 입문서다. 기초 문법과 컴포넌트 설계부터 Vue 3의 핵심인 컴포지션 API와 피니아(Pinia), 그리고 Nuxt까지 단계별 실습으로 안내한다. 먼저 개념을 이해한 뒤 바로 예제로 확인하고, 이를 실제 화면과 기능으로 구현해 보며 학습 내용을 직접 경험할 수 있게 구성했다. 특히 화면을 만들고 데이터를 연결하는 과정을 중심으로 3가지 프로젝트를 직접 완성하며, 작은 기능이 쌓여 하나의 웹 서비스로 이어지는 과정을 경험할 수 있다. 문법을 나열하는 데 그치지 않고, 실제 개발 현장에서 진행하는 흐름과 구조를 자연스럽게 익힐 수 있도록 설계한 점이 가장 큰 특징이다. 이 책은 프런트엔드 개발을 처음 시작하는 입문자는 물론, Vue.js를 실무에 적용해 보고 싶은 개발자에게도 든든한 길잡이가 되어 줄 것이다.

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 폴더와 의 관계 __페이지 컴포넌트 만들기 _11-04 페이지 레이아웃 구성하기 __레이아웃 미리 보기 __메인 뉴스 콘텐츠 레이아웃 구성하기 __최신 뉴스 콘텐츠 레이아웃 구성하기 __섹션 헤더와 버튼 영역 추가하기 _11-05 레이아웃별 컴포넌트 분리하기 __배너 레이아웃 분리하기 __메인 뉴스 콘텐츠 레이아웃 분리하기 __최신 뉴스 콘텐츠 레이아웃 분리하기 __레이아웃별 컴포넌트 조합하기 _11-04 오픈 API로 뉴스 정보 조회하기 __News API 사용 준비하기 __피니아 사용 준비하기 __News API 호출하기 __뉴스 기사 데이터 타입 선언하기 __뉴스 기사 데이터 필터링하기 _11-05 뉴스 정보와 화면의 데이터 바인딩하기 __메인 뉴스 콘텐츠 데이터 바인딩하기 __최신 뉴스 콘텐츠 데이터 바인딩하기 _11-06 useAsyncData로 코드 리팩터링 __기존의 코드를 어떻게 리팩터링할 수 있을까? __useAsyncData 활용하기 찾아보기

방대한 이론보다 실무에서 쓰는 핵심에 집중한다! 이제 프런트엔드 개발에서는 기능을 많이 아는 것보다 복잡한 요구 사항을 얼마나 안정되고 빠르게 구현할 수 있는지가 더 중요해졌습니다. 이 책은 모든 기능을 나열하는 방식에서 벗어나, 실제 개발 현장에서 자주 사용하는 핵심에 집중합니다. 컴포지션 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