Vue 3 Intermediate - Composition API
captain
The easiest and most accurate course to learn Vue Composition API, available in both Vue 2 and the latest Vue 3!
중급이상
Vue 3, Vue.js
쉽고 빠르게 배우는 Vue 3 기본 (Composition API)
Vue.js를 처음 배우는 분들을 위한 강의입니다. 공식 문서를 알기 쉽게 소화할 수 있도록 간단한 예제들과 그림들로 설명이 잘 되어있습니다.
먼저 경험한 수강생들의 후기
이런 걸 배울 수 있어요
Vue3 기본 개념 (반응성, 데이터 바인딩, 컴포넌트 등)
Composition API 개발 방법
vue-notion 패키지를 통한 Notion 데이터 가져오기
🌟 Vue.js를 쉽고 빠르게 배우자! 🌟
이 강의는 Vue.js 공식문서를 기반으로 알기 쉽게 만들어진 강의입니다.
✅ 오로지 필요한 내용만 깔끔하고 빠르게 알려드리도록 할거에요!
✅ 불필요하게 질질 끄는 시간 (코드 쓰는 시간, 틀린 코드 다시 쓰는 시간)이 없어요!
✅ 간단하게 요약되어있어서 대부분 강의가 10분 미만! 하지만 세세하게 알려드릴 수 있도록 압축되어있습니다!
✅ 화면은 그대로인채 말만하는 시간? 거의 없습니다! 집중하셔야해요!
결과물
이 강의는 Section 2부터 강의마다 과제가 있습니다.
Section 4까지는 연습이며, Section 5부터 꾸준히 과제를 잘 수행하신다면 이런 사이트를 만들 수 있어요.
자잘한 설명보다 어떤 것들을 배우는지 궁금하시죠?
아래에서 바로 알아볼게요!
Section 01. 강의 준비하기
시작하기에 앞서 컴퓨터에 설치하고 설정할 것들을 다룹니다.
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. 소스코드 다운로드
예제 코드들이 들어있는 파일들을 다운로드하는 방법에 대해서 다룹니다
Section 02. Vue.js 시작하기
Vue.js 문법을 본격적으로 다루기 시작합니다.
이해를 돕기 위해 HTML 파일 하나만으로 진행합니다.
01. Vue.js 시작하기
Vue를 시작하기 위해 createApp 함수를 불러오고 app을 만드는 법을 배웁니다.
02. 컴포넌트 (Component)
Vue.js에서 핵심 개념이라 할 수 있는 컴포넌트(Component)에 대해서 다룹니다.
03. 데이터 바인딩 
컴포넌트 안에서 HTML을 좀 더 효율적으로 그리기 위한 데이터 바인딩(Data Binding)을 배웁니다.
04. 반응성
상호작용을 통해 좀 더 동적인 웹을 만들기 위해 필요한 반응성(Reactivity)의 개념을 다룹니다.
Section 03. 디렉티브 (Directive)
컴포넌트에서 HTML 요소를 다양하게 작업할 수 있는 디렉티브에 대해 다룹니다.
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에 대해 다룹니다.
Section 04. 반응성 (Reactivity)
반응성을 이용할 수 있는 ref와 reactive, 그리고 이를 이용해서 추가적인 작업을 할 수 있는 computed와 watcher를 다룹니다.
01. ref vs reactive
반응형 객체인 reactive와 ref 를 비교해서 어떻게 다른지 다룹니다.
02. Computed
반응형 객체를 이용해서 또다른 값을 만드는 computed에 대해서 다룹니다.
03. Watcher
반응형 객체의 변화에 따라 추가적인 작업을 할 수 있는 Watcher에 대해서 다룹니다.
Section 05. 컴포넌트 (Component)
컴포넌트 파일(.vue)을 만들어서 컴포넌트를 좀 더 심화적으로 다루어봅니다.
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. 비동기 컴포넌트 
비동기적으로 서버에서 필요한 컴포넌트를 부르는 비동기 컴포넌트와
동적으로 컴포넌트를 그릴 수 있는 동적 컴포넌트에 대해 배웁니다.
Section 06. 노션 (Notion)
블로그처럼 노션(Notion)을 에디터로 활용하는 방법에 대해 배웁니다.
01. Notion 사용법
Notion을 모르시는 분들을 위해 회원가입부터 간단한 사용법까지 다룹니다!
02. Notion 데이터 불러오기
vue-notion 패키지를 통해 Notion 데이터를 가져오는 방법에 대해서 배웁니다.
Section 07. 컴포넌트 통신
컴포넌트 간에 데이터를 주고받는 다양한 방법에 대해서 다룹니다
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에 대해 다룹니다.
이렇게 봐도 잘 모르시겠다면 무료강의를 몇 개 보시길 바랍니다!
어떤 느낌인지 확❗️아실거에요
💬 예상 질문 Q&A
이런 분들께
추천드려요
학습 대상은
누구일까요?
Vue.js 문서를 읽기가 어렵거나 귀찮은 사람
Vue.js 처음 입문하는 사람
프론트엔드 입문자
선수 지식,
필요할까요?
HTML 기본 (input 태그에 value 속성을 쓰는거 아시나요?)
CSS 기본 (border, margin, padding 등 아는 정도)
Javascript 기본 (console.log나 화살표 함수를 아는 정도)
커리큘럼
전체
32개 ∙ (3시간 20분)
1. 강의소개
03:19
2. 개발환경 구성하기
05:38
3. VSCode 사용방법
04:20
5. 소스코드 다운로드
00:58
6. Vue.js 시작하기
04:14
7. 컴포넌트 (Component)
08:41
9. 반응성 (Reactivity)
05:50
강의 게시일:
마지막 업데이트일:
수강평
전체
9개
4.9
9개의 수강평
sftblw수강평 3
∙
평균 평점 4.7
5
44% 수강 후 작성- Editing: ★★★★★ 5.0 Artistic. Excellent level that goes without saying - Description: ★★★★☆ 4.5 Excellent. There are some parts where the quality of the concept explanation is lacking or rushed, but it does not miss out on going over the concept itself, and the lacking parts are covered with editing. - Self-directedness: ★★★★☆ 4.5 Excellent. At the end of each lecture, an assignment is given, and the correct answer is shown in the next lecture, so you can review it. It is well organized to fit the single purpose of creating a blog. - Lecture target selection: ★★★★_ 4.0 It is a bit disappointing. It seems that the target is considered to be beginners, but there are some parts where the concept explanation is subtly lacking. If you already know similar concepts, you can move on smoothly. - Recommended candidates: People who have experience using JavaScript in the workplace but have never used Vue.js; People who have used other UI frameworks and want to learn Vue.js; Beginner learners who are confident that they can learn concepts they do not understand by searching or asking the instructor; Employees of Inflearn Business member companies who need to use the course quickly in practice but find the official documentation too long to read it one by one
- urco129524
수강평 1
∙
평균 평점 5.0
- cuhexa0754
수강평 2
∙
평균 평점 5.0
5
100% 수강 후 작성It's great that the course is well-organized and runs according to the curriculum, from course planning to execution. It's not a course where you just show off your knowledge and the lecture is cut off if you make a mistake, but it's a great course that doesn't leave out even the smallest animation effects. In particular, it was great that it didn't just install with the npm package, but explained the basic principles and npm methods separately. This person's course is something I want to listen to again even if other information comes up.
- guizan6111
수강평 1
∙
평균 평점 5.0
5
31% 수강 후 작성Thank you for explaining the difficult coding-related terms and content to non-majors in a really easy-to-understand way! I needed to study development in these difficult times when job preparation is difficult, and this lecture was just right for me. I'll listen to the next lecture when it comes out (I think you have a nice voice)
- neeunbox3114
수강평 1
∙
평균 평점 5.0
₩22,000
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
