쉽고 빠르게 배우는 Vue 3 기본 (Composition API)

01. 개발환경 구성하기

개발에 필요한 Chrome과 Vue.js Devtools, VSCode, Node.js를 설치합니다.

02. VSCode 사용방법

Visual Studio Code를 모르시는 분들 위해서 간단한 사용방법을 설명합니다.

03. VSCode 확장프로그램 설치하기

VSCode를 사용하면서 같이 쓰면 좋을 확장프로그램들을 설치합니다.

• Korean Language Pack
• indent-rainbow
• Live Sever
• Material Icon Theme
• Auto Rename Tag
• Prettier - Code formatter
• Vue Lanugage Features (Volar)

04. 소스코드 다운로드

예제 코드들이 들어있는 파일들을 다운로드하는 방법에 대해서 다룹니다

01. Vue.js 시작하기

Vue를 시작하기 위해 createApp 함수를 불러오고 app을 만드는 법을 배웁니다.

02. 컴포넌트 (Component)

Vue.js에서 핵심 개념이라 할 수 있는 컴포넌트(Component)에 대해서 다룹니다.

03. 데이터 바인딩 

컴포넌트 안에서 HTML을 좀 더 효율적으로 그리기 위한 데이터 바인딩(Data Binding)을 배웁니다.

04. 반응성

상호작용을 통해 좀 더 동적인 웹을 만들기 위해 필요한 반응성(Reactivity)의 개념을 다룹니다.

01. v-bind

속성에 데이터바인딩할 수 있는 v-bind에 대해 알아볼겁니다!

02. v-for

v-for를 통해서 반복적으로 태그를 만드는 방법에 대해서 다루어보겠습니다.

03. v-if와 v-show

v-if나 v-show를 통해서 조건에 따라 태그를 나타나거나 사라지게 할 수 있습니다.

04. v-on

태그에서 이벤트 처리를 할 수 있게 도와주는 v-on에 대해서 다룹니다.

05. v-model

사용자가 상호작용을 통해 변화시킬 수 있는 입력폼에서 데이터바인딩 할 수 있는 v-model에 대해 다룹니다.

01. ref vs reactive

반응형 객체인 reactive와 ref 를 비교해서 어떻게 다른지 다룹니다.

02. Computed

반응형 객체를 이용해서 또다른 값을 만드는 computed에 대해서 다룹니다.

03. Watcher

반응형 객체의 변화에 따라 추가적인 작업을 할 수 있는 Watcher에 대해서 다룹니다.

01. Single File Component

컴포넌트를 좀 더 활용할 수 있는 vue 파일, Single File Component!!

02. Vue 프로젝트 생성

npm을 통해 Vue 개발을 하기에 최적인 프로젝트를 만드는 방법에 대해서 배웁니다.

03. script setup / style scoped

script를 좀 더 효율적이게 활용할 수 있는 script setup
style을 컴포넌트 안에서만 적용하는 style scoped

04. Life Cycle Hook

컴포넌트가 생성되고 사라지는 과정에서 특정 작업을 수행할 수 있는 Life Cycle Hook에 대해 배웁니다.

05. Template Refs

template에서 ref를 사용해 DOM을 조작해보아요!

06. 비동기 컴포넌트

비동기적으로 서버에서 필요한 컴포넌트를 부르는 비동기 컴포넌트와
동적으로 컴포넌트를 그릴 수 있는 동적 컴포넌트에 대해 배웁니다.

01. Notion 사용법

Notion을 모르시는 분들을 위해 회원가입부터 간단한 사용법까지 다룹니다!

02. Notion 데이터 불러오기

vue-notion 패키지를 통해 Notion 데이터를 가져오는 방법에 대해서 배웁니다.

01. Props

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 Props에 대해서 알아봅니다.

02. Emits

하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달하는 Emits에 대해서 알아봅니다.

03. Provide / Inject

상위 컴포넌트에서 깊은 하위 컴포넌트로 데이터를 전달할 수 있는 Provide와 Inject에 대해서 다룹니다.

04. Fallthrough Attributes

컴포넌트에 넣은 속성을 어떻게 다룰 수 있는 지 attrs를 통해 알아봅니다.

05. Component v-model

컴포넌트에 v-model을 써야할 때 어떻게 해야하는 지 알아봅니다.

06. Slots

컴포넌트의 template을 상위 컴포넌트에서 다룰 수 있는 slot에 대해 다룹니다.