Thumbnail
지식공유자의 깜짝할인 중(16분 남음)
BEST
개발 · 프로그래밍 프론트엔드

프로젝트로 배우는 Vue.js 3 대시보드

(4.9)
88개의 수강평 ∙  847명의 수강생

25%

41,250원

55,000원
지식공유자: 코지 코더
총 87개 수업 (9시간 30분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드] 강의입니다.

Vue.js 3 사용 방법을 배우고 프로젝트에 적용을 하면서 익힐 수 있도록 도와드립니다.

✍️
이런 걸
배워요!
Vue.js Composition API
웹앱
Vue CLI로 프로젝트 생성 방법
Vue 3 새로운 기능들
Vue Router 사용 방법
Vuex 사용 방법

최신 Vue 3로 만나는,
쉽고 강력한 프론트엔드 개발 입문!

강의 소개

인기 프론트엔드 프레임워크, Vue.js의
최신 버전 Vue 3을 살펴보고,
내 손으로 직접 적용하며 실습해보세요!

인기 프론트엔드 프레임워크 Vue.js의 입문을 도와드리는 기초 강좌입니다. Vue.js 3에 새롭게 추가된 Composition API를 사용하여 프로젝트를 진행하는 데 기본이 되는 기능을 하나씩 배우고, 바로바로 프로젝트에 적용하며 실습합니다. 각 영상은 대부분 10분 미만의 짧은 영상으로 만들었습니다. 

예상 질문 Q & A

Q. Vue.js를 전혀 몰라도 들어도 될까요?
A. 네! Vue.js 기초 강좌이기 때문에 모르셔도 기초부터 배우실수 있습니다. 이 강좌가 끝내시면 Vue.js로 프로젝트를 혼자 하실 정도의 기본은 배우게 됩니다. 하지만 HTML, CSS, Javascript (ES6+) 기초는 아시는 분이 듣는걸 추천드립니다. 강의 중간 중간에 es6+ 관련된 설명도 들어있습니다. 😊

Q. 코지 코더 유튜브 채널에서 vue.js 2 기초 익히기를 들었는데 이 강좌와 많이 다른가요?
A. 유튜브에 올려놓은 Vue.js 2 기초 익히기는 기초 문법만 배우고 실제 프로젝트에 적용하기엔 약간 제한적입니다. 이 강좌에서는 Vue.js 기능을 배우고 그 기능을 프로젝트에 어떻게 적용하는지 설명해드립니다. 특히 이 강좌에서는 Vue.js 3 신기능 Composition Api를 이용해서 프로젝트를 진행합니다. 그리고 훨씬 더 디테일 한 설명이 되어 있고 Single Page Application에 대한 전반적인 이해를 도와드립니다. 😊  

Q. Composition Api가 무엇인가요?
A. Vue.js 2에서는 Options Api를 사용해서 개발을 했는데 규모가 큰 프로젝트를 진행할때 코드의 재활용을 하는 것이 쉽지가 않았습니다. 그래서 Vue.js 3에서는 Composition Api라는 새로운 기능이 추가되어 로직 재사용이 용이해지고 코드 유지 관리가 더 쉬워졌습니다.😊 

강의 자료 소개

각 영상이 끝날 때의 소스코드를 github에 브랜치로 만들어 올려두었습니다. 에러로 막혔을 때 github에서 소스 코드를 비교하실 수 있어요 😁 찾기 쉽도록 수업 영상 번호를 브랜치 이름으로 올려두었어요.

코지코더 깃허브 (바로가기)

지식공유자 소개

코지 코더

호주에서 웹개발자로 일하고 있으며 유튜브 ‘코지 코더’ 채널을 운영 중입니다.
유튜브 링크: https://www.youtube.com/kossiecoder

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
Vue.js 3 기초를 배우고 싶으신 분
Vue.js로 웹앱을 만들어 보고 싶으신 분
Composition Api를 사용해서 개발하고 싶으신 분
Vue.js를 처음 접하시는 분
📚
선수 지식,
필요할까요?
HTML
CSS
Javascript

안녕하세요
코지 코더 입니다.
코지 코더의 썸네일
커리큘럼 총 87 개 ˙ 9시간 30분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 2. To-Do 리스트 만들기
08 데이터 바인딩 08:44
09 양방향 바인딩 (v-model) 09:00
10 리스트에 새로운 To-Do 추가 09:46
11 To-Do 카드 만들기 04:17
12 v-for 04:55
13 v-show vs v-if 09:32
14 체크박스 바인딩 04:23
15 class/style 바인딩 06:03
16 배열에서 아이템 삭제 05:57
17 폼 컴포넌트 만들기 04:47
18 emit 09:03
19 props 07:17
20 props 사용시 주의할 점 06:59
21 To-Do 삭제하기 03:59
22 emits 03:07
섹션 3. To-Do 검색 기능
23 computed 07:14
24 검색 기능 추가 07:47
섹션 4. Json-Server 로컬개발용 데이터 베이스
25 json-server 패키지 설치 04:36
26 To-Do 생성시 db에 저장하기 11:51
27 async vs sync 05:45
28 async/await 03:10
29 To-Do 데이터 db에서 가져오기 05:13
30 To-Do db에서 삭제하기 05:34
31 To-Do 토글 db에서 하기 03:58
섹션 5. Pagination 추가
32 Pagination 1 07:51
33 Pagination 2 08:22
34 Pagination 3 06:07
섹션 6. 검색기능 개선
35 watch effect 08:34
36 watch 07:15
37 검색 기능에 watch 적용하기 11:50
38 작은 문제점들 수정 04:00
39 검색기능에 setTimeout 적용 08:54
섹션 7. Vue Router 시작하기
40 Vue Router 설치하기 10:45
41 지금까지 만든 To-Do 앱을 To-Do 페이지로 이동 03:04
42 Navbar 추가하기 03:35
43 router-link 03:12
44 vue router 작동 원리 06:30
섹션 8. To-Do 수정 페이지 만들기
45 To-Do 수정 페이지 route 추가 04:20
46 useRouter로 페이지 이동 07:51
47 이벤트 버블링 09:09
48 To-Do 페이지 컴포넌트 만들기 1 09:36
49 To-Do 페이지 컴포넌트 만들기 2 10:00
50 To-Do 페이지 컴포넌트 만들기 3 04:57
51 자바스크립트 객체 복사/비교 10:57
52 To-Do 페이지 컴포넌트 만들기 4 08:14
섹션 9. Toast 알림 컴포넌트 만들기
53 Toast 컴포넌트 13:28
54 Vue 컴포넌트 라이프사이클 08:43
55 메모리 누수 관리 03:40
56 Toast 로직 compositon 함수로 추출 12:46
섹션 10. To-Do 생성 페이지 만들기
57 To-Do 생성 페이지 route 추가 05:29
58 To-Do 생성 페이지 만들기 1 08:07
59 To-Do 생성 페이지 만들기 2 07:10
60 폼 validation 03:36
섹션 11. Scoped Style
61 scoped style 04:57
섹션 12. Toast 애니메이션 적용 및 버그 수정
62 Toast 애니메이션 적용 06:22
63 버그 수정 01:51
섹션 13. 모달창 만들기
64 모달창 컴포넌트 만들기 10:28
65 모달창 이용하여 To-Do 삭제하기 05:01
66 Teleport - 모달창 05:22
67 slot 09:44
섹션 14. 리팩토링
68 scoped slot 이용하여 리스트 리팩토링 10:32
69 컴포넌트에 v-model 사용하기 13:09
69-1 컴포넌트에서 v-model 사용하기 2 03:39
70 vue devtool 03:19
useContext Deprecated
71 useContext 04:03
72 toRefs 05:54
73 axios baseUrl 06:51
섹션 15. Vuex 사용하기
74 Toast 컴포넌트 App 컴포넌트로 이동 08:16
75 vuex 설치하기 04:46
76 vuex state 08:39
77 vuex mutations/actions 10:24
78 vuex mutations/actions/getters 06:30
79 vuex modules 07:23
80 transition-group 11:51
섹션 16. 리팩토링
81 Navbar/Pagination 컴포넌트로 추출 06:46
82 vuex action 실수 수정 05:38
섹션 17. 강좌를 마치며..
강좌를 마치며... 00:32
강의 게시일 : 2021년 04월 13일 (마지막 업데이트일 : 2022년 09월 27일)
수강평 총 88개
수강생분들이 직접 작성하신 수강평입니다.
4.9
88개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Duru thumbnail
5
Vue.js 3의 기본적인 구조와 효율적으로 컴포넌트를 만들 수 있는 방법을 배울 수 있어서 정말 좋았습니다.
2022-04-03
쿠쿠케케 thumbnail
5
좋아요👍👍
2022-04-19
WellBakedToast thumbnail
5
딱 좋은 강의였습니다! 중급편도 제작해주세요~
2022-02-19
황지환 Hwang thumbnail
5
강사님께서 조근조근 설명 잘 해 주시네요. 최신버젼 Vue3로 무언가 시작하는데 큰 도움 받았습니다. 고맙습니다.
2021-05-02
지식공유자 코지 코더
황지환님 수강평 감사합니다 ^^
2021-05-02
이기정 thumbnail
5
좋습니다!
2022-04-21