가볍게 훑어보는 Vue 3

 

#1. Vue 소개

  • Vue 3란 무엇인가?
  • Vue 3의 특징과 장점

 

 

#2. Vue 3 설치 및 설정

      ▷ 프로젝트와 파일의 구조와 형식

 

 

#3. Vue 3 기본 문법

  • Template 문법

      ▷ 컴포넌트 단위로 스타일 적용하기

  • 디렉티브(Directive)

      ▷ 데이터 바인딩하는 방법

      ▷ 반복문(v-for) 사용하는 방법

      ▷ 이벤트 핸들링(v-on)

      ▷ 조건식 v-if, v-show

  • 컴포넌트(Component)

      ▷ 새로운 컴포넌트를 생성하고 추가하는 방법

      ▷ 데이터를 전달할 때는 props

      ▷ 사용자 지정 이벤트(Custom Event)

      ▷ 데이터를 전달하는 또 다른 방법 Slot

  • 라우터(Router)

      ▷ 페이지 전환하기 (라우터 설치부터 사용까지)

      ▷ 게시물마다 번호를 달아주자 (라우터 파라미터)

  • 상태 관리(State Management)

      ▷ Pinia (Vue 상태관리 라이브러리)

 

 

#4. Vue 3 고급 문법

  • Composition API

      ▷ Composition API 사용방법
  • Teleport
  • Suspense
  • Reactive와 Ref
  • ToRefs
  • Watch

      ▷ computed, methods, watch 정리

      ▷ 라이프사이클 훅(Lifecycle hooks)

 

 

#5. Vue 3 성능 최적화

  • 렌더링 최적화
  • 로딩 속도 최적화
  • 메모리 최적화

 

 

#6. Vue 3 실전 예제

  • 간단한 CRUD 앱 만들기
  • 인증 기능 추가하기
  • 실시간 채팅 앱 만들기

 

 

#7. Vue 3 스타일 가이드

      ▷ 조건에 따라 클래스 적용하기

      ▷ 작고 빠른 이미터 라이브러리 Mitt