✅ 오로지 필요한 내용만 깔끔하고 빠르게 알려드리도록 할거에요! ✅ 불필요하게 질질 끄는 시간 (코드 쓰는 시간, 틀린 코드 다시 쓰는 시간)이 없어요! ✅ 간단하게 요약되어있어서 대부분 강의가 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에 대해서 다룹니다.
- 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
I'm learning something new, and I like that I can learn in detail!! The screen is organized neatly so it's easy to see, and it's organized so that it's easy to follow. It's organized so that it's easy to refer to when learning something new or when you're confused!!
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.
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)