Vue.js로 만드는 TODO App

강의명: [인프런] Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
강사: 캡틴판교
skill: JavaScript, Vue.js, ES6, Vuex

강의에서 다루는 내용

1. Vue CLI를 이용한 프로젝트 구성 방법
2. 컴포넌트 기반 설계 방법
3. 컴포넌트 구조화 및 컴포넌트 통신 방법
4. ES6를 이용한 효율적이고 간결한 Vue 코딩 방법
5. Vuex를 이용한 상태 관리의 이해 및 적용 방법

Todo App Component

Container Component

데이터 관리, 변경

App.vue

Presentational Component

마크업, UI적으로 표현

TodoHeader.vue
TodoInput.vue
TodoList.vue
TodoFooter.vue
common/Modal.vue

Todo App 리펙토링 과정

1. 각 component 에서 데이터 관리

• data
• computed
• methods

2. App.vue에서 데이터 관리

• props: 부모 > 자식
• $emit: 자식 > 부모

3. Vuex를 사용하여 store.js 에서 데이터 관리

• state
  Vue의 data 와 같은 역할
  this.$store.sate.message 로 접근
• getters
  Vue의 computed 와 같은 역할
  this.$store.getters.getNumber 로 접근
• mutation
  vue의 methods 와 같은 역할
  this.$store.commit('printNumber') 인자값 없을 때
  this.$store.commit('printNumber', 20) 인자값 1개일때
  this.$store.commit('printNumber', { add, 20 }) 인자값 n개일 때 obj 로 보내준다.
• actions
  비동기 처리, 데이터요청

4. Vuex - helper 함수를 사용하여 store.js에서 데이터 관리

• state -> mapState
• getters -> mapGetters
• mutations -> mapMutations
  ...mapMutaions([ 'clickBtn', 'addNumber' ])
• actions -> mapActions

5. modules/todoApp.js에서 모듈로 데이터를 가져와서 store.js에서 데이터 관리

• import
• export

Todo App 리팩토링 전, 후 구조

데이터를 Container Component 에서 관리, 변경해야 유지보수하기 쉽다.

Todo App 주요기능

addOneItem

TodoInput 에서 할 일 입력 후 enter or + 클릭시 생성 기능
+) 빈칸 입력 시 모달 창에서 '내용을 입력하세요' 노출

toggleOneItem

TodoList 에서 할 일 목록 완료 true /미완료 false 변경 기능

removeOneItem

TodoList 에서 할 일 목록 삭제 기능

clearAllItems

TodoFooter 에서 'clear all' 버튼 클릭시 전체 리스트 삭제 기능

완강은 즐거워 :D