Do IT Vue.js+Nuxt 입문 - 화면을 만들고 데이터를 연결하며 실무 감각을 익힌다(Do it 시리즈)

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

 

찾아보기