TODO LIST

개요

todo list를 제작한 지는 몇개월이 지났지만
그때를 회상하면서 기록을 남기려고 한다.

vue를 혼자 독학하며
정말 필요하다고 느낀 기능은 다음과 같다.

1. 데이터 배열의 생성 및 푸쉬
2. 컴포넌트간의 단반향 & 양방향 바인딩
3. 데이터 배열 삭제

todo list는 이 기능을 모두 만들어볼 수 있는 좋은 예제였다.

사용기술

📌 UI Design

• XD

📌 퍼블리싱

• vue
• scss
• javascript

기간

2021.06.14 ~ 2021.06.22

컴포넌트 구성

├── src  
|    ├── components
|    |     ├── Layout.vue
|    |     └── index.js
|    ├── pages
|    |     ├── main
|    |     |    ├── component
|    |     |    |      └── addPopup.vue
|    |     |    └── mainPage.vue
|    |     └── index.js
|    ├── App.vue
|    └── main.js

구현한 기능

깃허브 소스

• todo 추가, 삭제, 수정, 이동
• swipe 기능 추가
• todo task, complete 개수
• 체크박스 애니메이션
• 현재시간 자동 삽입

실행화면

아쉬운점

• 컴포넌트 단위 쪼개는 법이 아직 미흡하다.
• chart.js를 사용하여 도넛차트를 추가해보려 했는데 디자인적으로 안이뻐서 사용 못한게 아쉽다.