[R-LOG] 서평단 / Do it! Vue.js+Nuxt 입문 / 이지스퍼블리싱

본 서평은 출판사의 서평단으로 선정되어 제공받은 도서를 읽고 작성하였습니다.

 

---

[목차]

들어가며

이 책은 어떤 책인가?

책 후기

추천 대상

마무리

---

---

[들어가며]

React로 프론트엔드 개발자로 취업 준비를 하고 있다.

컴포넌트 기반 구조와 상태 관리, 훅(Hooks)을 공부하며 현재 사이드 프로젝트를 진행하고 있다.

직접 구현해 보며 부딪히는 과정에서 협업과 개발의 재미를 느끼는 요즘이다.

특히 Vue는 React와 비슷하다는 이야기를 많이 들었다.

그래서 두 프레임워크가 얼마나 닮았는지, 학습곡선은 어떤지 직접 확인해 보고 싶었다.

"vue를 한번 공부해 볼까?" 하던 중 서평단 모집 글을 보게 되었다.

vue를 제대로 경험해 볼 좋은 기회라고 생각해 지원하게 되었다.

이번 서평을 진행하면서 react와 비교해 볼 예정이다.

 

---

[이 책은 어떤 책인가?]

Do it! Vue.js + Nuxt 입문

• 제목 : Do it! Vue.js + Nuxt 입문
• 저자 : 박성재
• 출판사 : 이지스퍼블리싱
• 출판일 : 2026년 02월 02일
• https://product.kyobobook.co.kr/detail/S000219074140

 

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 활용하기

찾아보기

 

 

 

 

 

React와 Next로 사이드 프로젝트를 진행하면서 어느 정도 익숙해진 상태다.

하지만 vue는 제대로 경험해 보지 못한 상태다.

간략하게 vue에 대해서는 React와 비슷한 자바스크립트 라이브러리 및 프레임워크라는 것 외에는 깊이 있게 알고 있지는 않다.

Nuxt 역시 이름만 들어봤을 뿐, Next.js와 유사한 역할을 하는 프레임워크지 않을까 조심스럽게 예상해 본다.

 

 

이 책은 독자가 프론트엔드로 Vue를 시작하기에 좋은 책이다.

개인적인 가치관으로는 기초가 잘 잡혀있어야 이후의 응용과 문제 해결 능력이 탄탄해진다고 생각한다.

그래야 프로젝트 단계에서도 흔들리지 않는다고 생각한다.

이론 설명 후 바로 실습으로 이어지고, 레벨 업 문제로 이해도를 높이는 구조라 내가 선호하는 학습 방식과 잘 맞았다.

이론과 실습

 

Vue의 핵심 개념인 SFC(Single File Component), 옵션 API와 컴포지션 API, 컴포넌트 설계 방식, 라이프사이클 등을 차근차근 설명한다.

초반부에서는 파일 구조와 기본 개념을 정리해 주며, 단순히 사용법을 따라 하는 것이 아니라 전체적인 구조를 이해하도록 돕고 있다.

SFC와 vue.js 프로젝트 구조

 

나는 React로 프론트엔드 개발을 시작했다.

하지만 당시에는 개념을 충분히 이해하지 못한 채 바로 프로젝트부터 진행했다.

그 결과 코드의 흐름을 깊이 이해하지 못했고 작은 문제 하나를 해결하는 데도 긴 시간이 걸렸던 경험이 있다.

기본 개념을 충분히 설명한 뒤 다음 단계로 넘어가는 방식이 인상 깊었다.

만약 내가 처음 공부를 시작할 때 이런 책을 접했다면 훨씬 빠르고 수월하게 이해할 수 있었겠다는 생각이 들었다.

그래서 이 책으로 입문하는 독자들이 부럽게 느껴진다.

 

 

특히 흥미로웠던 부분은 Vue.js와 React.js의 구조적 차이였다.

React는 .jsx / .txs를 사용해 자바스크립트 안에 마크업을 함께 작성하는 구조로 로직과 UI를 하나의 흐름 안에서 다루게 만든다.

반면 Vue는 SFC 구조를 기반으로 template, script, style을 한 파일 안에서 구분해 작성한다.

처음에는 기능적인 차이가 클 것이라고 생각했지만 읽으면서 느낀 점은 기능의 차이라기보다 코드를 조직하는 철학의 차이라고 느껴졌다.

React는 자바스크립트 중심 사고를 강화하고 Vue는 구조적 분리를 통해 전통적인 웹 개발 방식에 익숙한 사람에게 더 직관적으로 다가간다.

vue의 코드 구조

 

React와 마찬가지로 Vue에도 컴포넌트의 라이프사이클에 대한 설명을 하고 있다.

Vue 컴포넌트 라이프사이클

 

피니아로 상태관리를 할 수 있도록 설명을 돕고 있다.

음.. 그러면 vue에서는 React처럼 상태관리를 하려면 피니아와 같은 라이브러리가 별도로 필요한 건가?🤔

파니아

 

이후 Tailwind CSS와 shadcn/ui에 대한 설명도 다루고 있다.

현재 사이드 프로젝트에서 shadcn을 사용하고 있기 때문에 이 부분이 특히 반가웠다.

이미 잘 설계도니 컴포넌트를 가져와 사용하는 방식은 단순히 "빠르게 만든다"는 의미를 넘어 컴포넌트 구조와 조합 방식을 자연스럽게 익히게 해 준다.

프론트엔드를 처음 배울 때는 모든 UI를 직접 구현해 보아야 한다는 생각이 있었다.

하지만 실제로는 스타일 구현에 많은 시간을 빼앗기면서 정작 중요한 컴포넌트 설계나 상태 관리 개념에 집중하지 못했었다.

그런 점에서 이 책은 Tailwind로 직접 스타일링하는 방법을 설명하면서도 shadcn을 활용해 빠르게 UI를 구성하는 방식까지 함께 제시해 준다는 점이 인상 깊었다.

이미 있는 컴포넌트를 새로 구현해 사용해서 혼나본 적 있던 건 안 비밀 ㅎㅎ

tailwind와 shadcn

 

세부적인 설정 파일에 대한 설명도 빠지지 않는다.

tsconfig.app.json과 같은 설정 파일의 역할까지 짚어주며 화면만 만드는 게 아닌 프로젝트 구조에 대한 이해를 하게 돕고 있다.

tsconfig.app.json

 

디자인 측면에서는 shadcn 기반의 컴포넌트를 활용하기 때문에 디자인에 대한 부담 없이 기능 구현에 집중할 수 있었다.

UI를 직접 하나하나 구현하느라 시간을 소모하기보다, 컴포넌트 개념과 데이터 흐름에 더 집중할 수 있는 내용이라 좋았다.

shadcn을 활용한 ui 컴포넌트 만들기

 

책의 후반부에서는 이미지 검색 앱, 날씨 대시보드, 뉴스 조회 앱을 만들면서 자연스럽게 라우터, API 호출, 상태 관리, 데이터 바인딩을 익히게 된다.

실제 웹 애플리케이션을 만드는 흐름 안에서 개념을 적용하게 만든다는 점이 인상 깊었다.

Nuxt는 예상대로 Next.js와 유사한 역할을 하는 프레임워크다.

SPA를 넘어 데이터 패칭 전략까지 경험할 수 있도록 구성되어 있다.

React-Next 구조에 익숙한 입장에서 "React-Next 라면 Vue-Nuxt"라는 흐름이 자연스럽게 이해되었다.

Nuxt를 활용한 프로젝트

 

---

[책 후기]

처음에는 기능 차이가 클 것이라 예상했지만, 읽다 보니 이는 기능의 우열이라기보다 코드를 조직하는 철학의 차이라는 생각이 들었다.

러닝 커브 역시 React 경험이 있다면 크게 부담스럽지 않다.

개발 환경 설정부터 VSCode 확장 프로그램, 파일 구조 설명, tsconfig 설정까지 세심하게 안내하고 있어 프론트엔드에 입문하는 사람도 따라가기 어렵지 않다.

동시에 이미 React를 경험한 사람이라면 비교하며 읽는 재미도 충분하다.

 

<장점>

• React 경험자가 읽으면 비교 학습이 가능해 이해 속도가 빠르다.
• 이론 → 문제 → 프로젝트 구조
• 실제 서비스와 유사한 예제 구성
• Nuxt까지 확장 학습 가능
• Tailwind와 shadcn 기반 UI 라이브러리를 활용해 구현 부담을 낮춤
• 설정파일 (tsconfig)까지 다뤄 프로젝트 구조 이해에 도움

 

<단점>

• 내용이 비교적 간단해서 더 깊이 파고싶은 독자에게는 추가 학습이 필요할 수 있다.

 

---

[추천 대상]

• 프론트엔드 입문자
• vue를 경험해보고 싶으신 분

---

[마무리]

처음에는 단순히 "React와 얼마나 비슷할까?"라는 호기심에서 시작한 독서였다.

Vue.js는 Reactㅘ 비슷한 부분도 많지만 SFC 구조와 명확한 영역 분리를 통해 또 다른 관점을 제시한다.

무엇보다 좋았던 점은 이 책이 "빠르게 만들어보는 법"이 아니라 "이해하고 만들어보는 법"을 알려준다.

나는 개인적으로 기초가 단단해야 이후의 문제 해결 능력도 탄탄해진다고 생각한다.

이 책은 그런 학습 방향과 잘 맞는 구성이다.

React 경험자라면 비교하며 읽는 재미가 있고 입문자라면 안정적인 출발선이 되어줄 책이다.

Vue를 한 번쯤 경험해보고 싶다면 이 책은 충분히 좋은 선택지가 될 수 있다고 생각한다.

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!☺️

댓글과 좋아요는 큰 힘이 됩니다!