Do it! Vue.js+Nuxt 입문

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

찾아보기