Vue 3 Todo 앱

Vue 3 입문서를 따라가며 만든 Todo 앱이다. TodoHeader, TodoInput, TodoList, TodoFooter 네 컴포넌트와 공용 Modal 로 되어 있고, 항목은 localStorage 에 저장되어 새로고침해도 남는다. 빈 값을 넣으면 모달이 뜬다.

책을 읽으며 정리한 내용은 노트에 있다: 1장 Vue 소개, 2장 인스턴스와 컴포넌트, 3장 라우터와 HTTP 통신, 4장 뷰 템플릿.

정오표

책은 Vue 2 기준이라 Vue 3 에서 다른 곳이 있었다.

1. Vue 3 에서는 start-from 을 쓴다.
2. v-slot 속성으로 오버라이딩하는데, 이는 template 태그에서만 쓸 수 있는 어트리뷰트다.
3. @keyup.enter="addTodo" 는 input 태그 속성에 넣어야 한다.
4. dev 서버가 localStorage 에 loglevel:webpack-dev-server 를 남겨 목록에 섞이므로 localStorage.key(i) != "loglevel:webpack-dev-server" 로 걸렀다.

플레이그라운드에서 바뀐 것

하위 경로에 배포하기 위한 vue.config.js(publicPath)만 추가했다.