Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

개발 환경 설정 및 깃헙 리포지토리 클론

뷰 CLI로 프로젝트 생성하기

프로젝트 소개 및 컴포넌트 설계 방법

파비콘, 아이콘, 폰트, 반응형 태그 설정하기

TodoHeader 컴포넌트 구현

TodoInput 컴포넌트의 할 일 저장 기능 구현

TodoInput 컴포넌트 코드 정리 및 UI 스타일링

TodoList 컴포넌트의 할 일 목록 표시 기능 구현

TodoList 컴포넌트 UI 스타일링

TodoList 컴포넌트 할 일 삭제 기능 구현

TodoList 컴포넌트의 할 일 완료 기능 구현

TodoFooter 컴포넌트 구현

깃헙 브랜치 안내

[리팩토링] 할 일 목록 표시 기능

[리팩토링] 할 일 추가 기능

[리팩토링] 할 일 삭제 기능

[리팩토링] 할 일 완료 기능

[리팩토링] 할 일 모두 삭제 기능

리팩토링이 완료된 애플리케이션 정리

모달 컴포넌트 등록

[퀴즈] 모달 컴포넌트의 slot 소개 및 퀴즈 안내

[퀴즈] slot 퀴즈 풀이 및 모달 컴포넌트 기능 구현

트렌지션 소개 및 구현

ES6 강의 개요 및 목표 소개

ES6 배경과 Babel 소개

const & let 소개

[ES5의 주요 특징]변수 스코프와 호이스팅

const와 let 추가 설명 및 정리

[리팩토링] const와 let

화살표 함수 소개 및 설명

화살표 함수 실습

속성 메서드의 축약 특징 설명

[리팩토링] 속성 메서드의 축약 특징 리팩토링

속성명의 축약 특징 설명

[리팩토링] 속성명의 축약 특징 리팩토링

Modules

Flux와 MVC 패턴 소개 및 Flux 등장 배경

Vuex가 필요한 이유, Vuex 컨셉, Vuex 구조

Vuex 설치 및 등록

state와 getters 소개

[리팩토링] state 속성 적용

mutations와 commit() 형식 소개

[리팩토링&퀴즈] mutations 적용 및 퀴즈 안내

[리팩토링&퀴즈] mutations 퀴즈 풀이 및 할 일 지우기 기능 구현

[리팩토링] mutations로 할 일 추가, 완료, 모두 삭제 구현

왜 mutations로 상태를 변경해야 하는가?

actions 소개 및 예제

왜 actions에 비동기 로직을 선언해야 하는가?

헬퍼 함수 및 ES6 Spread 연산자 소개

mapState, mapGetters 소개 및 ES6 Spread 연산자 쓰는 이유

[리팩토링] getters와 mapGetters 적용하기

mapMutations, mapActions 소개 및 헬퍼의 유연한 문법

[리팩토링 & 퀴즈] mapMutations 적용 및 퀴즈

[리팩토링 & 퀴즈] mapMutations 퀴즈 풀이

헬퍼 함수가 주는 간편함

뷰엑스로 리팩토링한 애플리케이션 구조 분석 및 정리

스토어 속성 모듈화 방법

스토어 모듈화 방법