Course curriculum

  1. 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

  2. 4
    • 23 computed

    • 24 검색 기능 추가

  3. 5
    • 25 json-server 패키지 설치

    • 26 Todo 생성시 db에 저장

    • 27 async vs sync

    • 28 async / await

    • 29 Todo 데이터 db에서 가져오기

    • 30 db에서 삭제하기

    • 31 Todo 토글 db에서 하기

  4. 6
    • 32 Pagination 1

    • 33 Pagination 2

    • 34 Pagination 3

  5. 7
    • 35 watch effect

    • 36 watch

    • 37 검색 기능에 watch 적용하기

    • 38 작은 문제점들 수정

    • 39 검색 기능에 setTimeout 적용

  6. 8
    • 40 Vue router 설치하기

    • 41 지금까지 만든 To-do 앱을 페이지로 이동

    • 42 Navbar 추가하기

    • 43 router-link

    • 44 Vue router 작동 원리

  7. 9
    • 45 수정 페이지 route 추가

    • 46 useRouter로 페이지 이동

    • 47 이벤트 버블링

    • 48 Todo 페이지 컴포넌트 만들기 1

    • 49 Todo 페이지 컴포넌트 만들기 2

    • 50 Todo 페이지 컴포넌트 만들기 3

    • 51 자바스크립트 객체 복사/비교

    • 52 Todo 페이지 컴포넌트 만들기 4

  8. 10
    • 53 toast 컴포넌트

    • 54 Vue 컴포넌트 라이프 사이클

    • 55 메모리 누수 관리

    • 56 Toast 로직 composition 함수로 추출

  9. 11
    • 57 생성 페이지 라우트 추가

    • 58 생성 페이지 만들기 1

    • 59 생성 페이지 만들기 2

    • 60 폼 validation

  10. 12
    • 61 scoped style

  11. 13
    • 62 Toast 애니메이션 적용

    • 63 버그수정

  12. 14
    • 64 모달창 컴포넌트 만들기

    • 65 모달창 이용하여 삭제하기

    • 66 teleport - 모달창

    • 67 slot

  13. 15
    • 68 scoped slot 이용하여 리팩토링

    • 69 컴포넌트에 v-model 사용

    • 69-1 컴포넌트에 v-model 사용 2

    • 70 vue devtool

    • useContext Deprecated

    • 71 useContext

    • 72 toRefs

    • 73 axios baseUrl

  14. 16
    • 74 Toast 컴포넌트 App 컴포넌트로 이동

    • 75 vuex 설치하기

    • 76 vuex state

    • 77 vuex mutations/ actions

    • 78 vuex mutations/ actions / getters

    • 79 vuex modules

    • 80 transition-group

  15. 17
    • 81 Navbar/Pagination 컴포넌트로 추출

    • 82 vuex action 실수 수정

  16. 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에서 소스 코드를 비교하실 수 있어요 😁 찾기 쉽도록 수업 영상 번호를 브랜치 이름으로 올려두었어요.

https://github.com/kossiecoder/vue3-basic

강좌 리뷰

5 별 평점

코지코더님은 그저 빛🌟

지은 박

이론으로 설명하는것보다 코코님과 같이프로젝트하니까 이해가 정말 잘 되요!! 얼른 리액트도 강의 열어주세요~!~!~!~!!

이론으로 설명하는것보다 코코님과 같이프로젝트하니까 이해가 정말 잘 되요!! 얼른 리액트도 강의 열어주세요~!~!~!~!!

조금 읽기