BEST

개발 · 프로그래밍 프론트엔드

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

(4.9) 84개의 수강평 ∙ 829명의 수강생

코지 코더

Vue.js Vuex 웹앱

55,000원

지식공유자: 코지 코더

총 87개 수업 (9시간 30분)

수강기한:

수료증: 발급

난이도: --

지식공유자 답변이 제공되는 강의입니다

폴더에 추가 852

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

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

이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.

섹션 0. 강좌 소개 및 개발 환경 세팅 3 강 ∙ 17분

00 강좌 소개 미리보기 05:55 01 Vue 프로젝트 설치하기 미리보기 04:30 02 폴더 구조 살펴보기 미리보기 06:35

섹션 1. To-Do 추가 폼 만들기 6 강 ∙ 20분

03 Vue 컴포넌트 미리보기 03:31 04 Fragment 미리보기 01:40 05 함수 사용하기 미리보기 04:03 bootstrap link 미리보기 06 이벤트 미리보기 06:15 07 ref vs reactive 미리보기 04:58

섹션 2. To-Do 리스트 만들기 15 강 ∙ 1시간 37분

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 검색 기능 2 강 ∙ 15분

23 computed 07:14

24 검색 기능 추가 07:47

섹션 4. Json-Server 로컬개발용 데이터 베이스 7 강 ∙ 40분

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 추가 3 강 ∙ 22분

32 Pagination 1 07:51

33 Pagination 2 08:22

34 Pagination 3 06:07

섹션 6. 검색기능 개선 5 강 ∙ 40분

35 watch effect 08:34

36 watch 07:15

37 검색 기능에 watch 적용하기 11:50

38 작은 문제점들 수정 04:00

39 검색기능에 setTimeout 적용 08:54

섹션 7. Vue Router 시작하기 5 강 ∙ 27분

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 수정 페이지 만들기 8 강 ∙ 1시간 5분

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 알림 컴포넌트 만들기 4 강 ∙ 38분

53 Toast 컴포넌트 13:28

54 Vue 컴포넌트 라이프사이클 08:43

55 메모리 누수 관리 03:40

56 Toast 로직 compositon 함수로 추출 12:46

섹션 10. To-Do 생성 페이지 만들기 4 강 ∙ 24분

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 1 강 ∙ 4분

61 scoped style 04:57

섹션 12. Toast 애니메이션 적용 및 버그 수정 2 강 ∙ 8분

62 Toast 애니메이션 적용 06:22

63 버그 수정 01:51

섹션 13. 모달창 만들기 4 강 ∙ 30분

64 모달창 컴포넌트 만들기 10:28

65 모달창 이용하여 To-Do 삭제하기 05:01

66 Teleport - 모달창 05:22

67 slot 09:44

섹션 14. 리팩토링 8 강 ∙ 47분

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 사용하기 7 강 ∙ 57분

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. 리팩토링 2 강 ∙ 12분

81 Navbar/Pagination 컴포넌트로 추출 06:46

82 vuex action 실수 수정 05:38

섹션 17. 강좌를 마치며.. 1 강 ∙

강좌를 마치며... 00:32

강의 게시일 : 2021년 04월 13일 (마지막 업데이트일 : 2022년 09월 27일)

수강생분들이 직접 작성하신 수강평입니다.

4.9

84개의 수강평

5점

4점

3점

2점

1점

VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순

좋습니다!

2022-04-21

좋아요👍👍

2022-04-19

강사님께서 조근조근 설명 잘 해 주시네요. 최신버젼 Vue3로 무언가 시작하는데 큰 도움 받았습니다. 고맙습니다.

2021-05-02

지식공유자 코지 코더

황지환님 수강평 감사합니다 ^^

2021-05-02 1

Vue.js 3의 기본적인 구조와 효율적으로 컴포넌트를 만들 수 있는 방법을 배울 수 있어서 정말 좋았습니다.

2022-04-03

딱 좋은 강의였습니다! 중급편도 제작해주세요~

2022-02-19