[실습] 뷰(Vue)로 투두 리스트(Todo list) 구현하기 - 기획/설계하기

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

오늘의 Vue.js 실습 목표는 "투두 리스트 (Todo list) 만들어보기!" 입니다.

투두 리스트를 만들기에 앞서 레이아웃과 기능에 대해서 간단하게라도 기획/설계하는 과정이 필요합니다.

본 게시글에서 다루는 사항은 투두리스트(Todo List) 중에서도 기능 구현하기 위해 기획/설계하는 과정입니다.

 

---

투두 리스트 (Todo List) 기획/설계하기

다양한 종류의 투두 리스트가 있으나 가장 기본적인 항목 추가, 수정, 삭제, 전체 삭제 기능을 위주로 기획하였습니다.

 

UI/UX

기능

Todo를 구성하는 각 요소에 대한 설명은 위 Layout에서 위에서 아래로, 좌에서 우의 방향으로 작성하였습니다.

• 입력 필드: Todo List에 추가할 항목의 텍스트를 작성하는 공간입니다.
  • 입력 필드에 예시 텍스트로 위 "Todo로 관리할 사항을 입력하세요."를 표시합니다.
• A: 현재 작성 중인 항목을 리스트에 추가하는 기능의 버튼입니다.
  
  • 입력 필드가 빈 값(공백, 등)인 경우 항목으로 추가하지 않고 경고창을 띄웁니다.
• V:  리스트에서 완료한 항목에 대한 수행 여부를 표시하는 기능의 체크박스입니다.
  • 체크박스에 체크가 된 경우 리스트에 표시된 항목의 텍스트에 대한 취소선 및 텍스트 색을 회색으로 변경하는 CSS 효과로 가시적으로 완료하였음을 표시합니다.
• D: 리스트에서 해당 버튼에 해당하는 항목을 제거하는 기능의 버튼입니다. 
• Delete All: '전체 삭제' 기능으로 현재 투두 리스트에 표시된 항목을 모두 제거하는 기능의 버튼입니다.

 

Layout

TodoList는 크게 4가지 영역으로 구분하여 Layout이 구성되어 있습니다. 

1. TodoHeader: TodoList의 Header 영역으로 타이틀을 표시하는 영역
2. TodoFooter: TodoList의 Footer 영역으로 TodoList에 등록된 항목을 전체 삭제하는 기능이 제공되는 영역
3. TodoInput: TodoList에 Todo Item을 입력하는 항목이 있는 영역 
4. TodoList: TodoList에 등록된 Todo Item이 표시되는 영역

 

결과 이미지

구현하기에 앞서 본 글을 따라하시면 아래와 같이 투두 리스트의 구현 결과를 확인하실 수 있습니다.