Course curriculum
-
3
-
08 데이터 바인딩
-
09 양방향 바인딩 (v-model)
-
10 리스트에 새로운 todo 추가
-
11 todo 카드 만들기
-
12 v-for
-
13 v-show vs v-if
-
14 체크박스 바인딩
-
15 class & style 바인딩
-
16 배열에서 아이템 삭제
-
17 폼 컴포넌트 만들기
-
18 emit
-
19 props
-
20 props 사용시 주의 할 점
-
21 Todo 삭제하기
-
22 emits
-
-
4
-
23 computed
-
24 검색 기능 추가
-
-
5
-
25 json-server 패키지 설치
-
26 Todo 생성시 db에 저장
-
27 async vs sync
-
28 async / await
-
29 Todo 데이터 db에서 가져오기
-
30 db에서 삭제하기
-
31 Todo 토글 db에서 하기
-
-
6
-
32 Pagination 1
-
33 Pagination 2
-
34 Pagination 3
-
-
7
-
35 watch effect
-
36 watch
-
37 검색 기능에 watch 적용하기
-
38 작은 문제점들 수정
-
39 검색 기능에 setTimeout 적용
-
-
8
-
40 Vue router 설치하기
-
41 지금까지 만든 To-do 앱을 페이지로 이동
-
42 Navbar 추가하기
-
43 router-link
-
44 Vue router 작동 원리
-
-
9
-
45 수정 페이지 route 추가
-
46 useRouter로 페이지 이동
-
47 이벤트 버블링
-
48 Todo 페이지 컴포넌트 만들기 1
-
49 Todo 페이지 컴포넌트 만들기 2
-
50 Todo 페이지 컴포넌트 만들기 3
-
51 자바스크립트 객체 복사/비교
-
52 Todo 페이지 컴포넌트 만들기 4
-
-
10
-
53 toast 컴포넌트
-
54 Vue 컴포넌트 라이프 사이클
-
55 메모리 누수 관리
-
56 Toast 로직 composition 함수로 추출
-
-
11
-
57 생성 페이지 라우트 추가
-
58 생성 페이지 만들기 1
-
59 생성 페이지 만들기 2
-
60 폼 validation
-
-
12
-
61 scoped style
-
-
13
-
62 Toast 애니메이션 적용
-
63 버그수정
-
-
14
-
64 모달창 컴포넌트 만들기
-
65 모달창 이용하여 삭제하기
-
66 teleport - 모달창
-
67 slot
-
-
15
-
68 scoped slot 이용하여 리팩토링
-
69 컴포넌트에 v-model 사용
-
69-1 컴포넌트에 v-model 사용 2
-
70 vue devtool
-
useContext Deprecated
-
71 useContext
-
72 toRefs
-
73 axios baseUrl
-
-
16
-
74 Toast 컴포넌트 App 컴포넌트로 이동
-
75 vuex 설치하기
-
76 vuex state
-
77 vuex mutations/ actions
-
78 vuex mutations/ actions / getters
-
79 vuex modules
-
80 transition-group
-
-
17
-
81 Navbar/Pagination 컴포넌트로 추출
-
82 vuex action 실수 수정
-
-
18
-
강의를 마치며..
-
예상 질문 Q & A
-
Vue.js를 전혀 몰라도 들어도 될까요?
네! Vue.js 기초 강좌이기 때문에 모르셔도 기초부터 배우실수 있습니다. 이 강좌가 끝내시면 Vue.js로 프로젝트를 혼자 하실 정도의 기본은 배우게 됩니다. 하지만 HTML, CSS, Javascript (ES6+) 기초는 아시는 분이 듣는걸 추천드립니다. 강의 중간 중간에 es6+ 관련된 설명도 들어있습니다. 😊
-
코지 코더 유튜브 채널에서 vue.js 2 기초 익히기를 들었는데 이 강좌와 많이 다른가요?
유튜브에 올려놓은 Vue.js 2 기초 익히기는 기초 문법만 배우고 실제 프로젝트에 적용하기엔 약간 제한적입니다. 이 강좌에서는 Vue.js 기능을 배우고 그 기능을 프로젝트에 어떻게 적용하는지 설명해드립니다. 특히 이 강좌에서는 Vue.js 3 신기능 Composition Api를 이용해서 프로젝트를 진행합니다. 그리고 훨씬 더 디테일 한 설명이 되어 있고 Single Page Application에 대한 전반적인 이해를 도와드립니다. 😊
-
Composition Api가 무엇인가요?
Vue.js 2에서는 Options Api를 사용해서 개발을 했는데 규모가 큰 프로젝트를 진행할때 코드의 재활용을 하는 것이 쉽지가 않았습니다. 그래서 Vue.js 3에서는 Composition Api라는 새로운 기능이 추가되어 로직 재사용이 용이해지고 코드 유지 관리가 더 쉬워졌습니다.😊
강의 자료 소개
각 영상이 끝날 때의 소스코드를 github에 브랜치로 만들어 올려두었습니다. 에러로 막혔을 때 github에서 소스 코드를 비교하실 수 있어요 😁 찾기 쉽도록 수업 영상 번호를 브랜치 이름으로 올려두었어요.
강좌 리뷰
코지코더님은 그저 빛🌟
지은 박
이론으로 설명하는것보다 코코님과 같이프로젝트하니까 이해가 정말 잘 되요!! 얼른 리액트도 강의 열어주세요~!~!~!~!!
이론으로 설명하는것보다 코코님과 같이프로젝트하니까 이해가 정말 잘 되요!! 얼른 리액트도 강의 열어주세요~!~!~!~!!
조금 읽기