Do it! Vue.js+Nuxt 입문

Do it! Vue.js+Nuxt 입문

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

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

박성재

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

목차

01장프런트엔드와Vue.js이해하기
_01-01프런트엔드이해하기
__프런트엔드란무엇일까?
__프런트엔드를만드는도구
__최신프런트엔드애플리케이션의구조-SPA
_01-02Vue.js이해하기
__Vue.js란무엇일까?
__Vue.js의파일구조-SFC
_01-03Vue.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-02Vue3의새로운상태관리도구-피니아
__피니아란무엇일까?
__피니아의상태저장소-스토어
__옵션스토어와셋업스토어
__스토어를사용해야하는경우
_05-03첫번째피니아스토어만들기
__피니아설치하기
__피니아스토어만들기
__state옵션작성하기
__getters옵션작성하기
__actions옵션작성하기
_05-04피니아사용하기
__옵션API에서사용하기

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

07장이미지검색웹애플리케이션만들기
_07-01이미지검색웹애플리케이션프로젝트시작하기
__이미지검색웹애플리케이션프로젝트만들기
__프로젝트환경설정하기
_07-02뷰라우터설정하기
__라우팅이란?
__뷰라우터
__뷰라우터설치하기
__타입스크립트로라우터인스턴스등록하기
__라우터뷰연결하기
_07-03UI컴포넌트준비하기
__프로젝트화면미리보기
__화면개발에필요한컴포넌트설치하기
__검색창컴포넌트만들기
_07-04공통컴포넌트만들기
__헤더컴포넌트만들기
__내비게이션메뉴컴포넌트만들기
__페이지네이션컴포넌트만들기
__스켈레톤이미지카드컴포넌트만들기
__공통컴포넌트내보내기
_07-05컴포넌트조합해서페이지완성하기
__App.vue파일수정하기
__Home.vue파일수정하기
_07-06액시오스로이미지검색API호출하기
__프로미스란무엇일까?
__액시오스란무엇일까?
__언스플래시오픈APIKey발급하기
__오픈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날씨와지도데이터동적바인딩하기
__weatherAPI사용준비하기
__날씨API조회및데이터바인딩하기
__현재날씨위젯에데이터바인딩하기
__시간대별날씨위젯컴포넌트에데이터바인딩하기
__하이라이트날씨위젯컴포넌트에데이터바인딩하기
__주간날씨위젯컴포넌트에데이터바인딩하기
_09-07검색기능구현하기
__피니아적용전코드살펴보기
__피니아사용준비하기
__API조회코드이관하기
__HomeView컴포넌트수정하기
__검색기능구현하기
_09-08날씨데이터실시간조회기능구현하기
__지도마커데이터준비하기
__네이버지도컴포넌트수정하기

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

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

출판사 서평

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

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