Vue3, json-server 이용한 Todo List 서비스 만들기

1. Home 화면에서 navbar 활용해 Todo 화면으로 이동

    - 내용이 없을 때 'There is nothing to display' 메세지 출력

     - 내용이 있을 때 목록 출력

 

 

 

2. Create Todo 버튼을 활용해 Todo 입력, 성공 시 toast 메시지 출력

 

- 2.1 수정 기능

 

- 2.2 체크박스를 활용해 completed / incomplete 여부 설정 가능

 

- 2.3 subject 미입력시 toast 메시지 출력 , update 버튼 비활성화

 

 

 

3. Delete 버튼을 활용해 팝업으로 재확인 후 Todo 삭제

 

 

4. Pagination - 화면 이동

 

 

 

5. Search 박스를 통한 검색 기능

 

 

 

---

회사에서 갑자기 Vue 화면개발 업무를 하게 되었습니다.

실무에서 화면개발은 처음이었고 더군다나 Vue도 처음이었기에 미리 학습을 해봤습니다.

'고양이도 할 수 있는 vue' 책을 통해 기초를 익히고 코지코더의 '프로젝트로 배우는 Vue.js3' 인강으로 기초적인 서비스 하나를 만들며 학습했습니다.

결론적으로 빠른 처리가 중요한 실무에서 복붙을 통해 진행하다 온전한 학습 후 vue의 생명주기와 어떻게 상호작용하는지 등 생각할 거리가 생겼고 좀 더 빠르게 업무를 처리할 수 있었습니다.

향후에 개인 프로젝트를 진행할 때 프론트쪽은 Vue로 진행하며 미흡했던 부분을 학습할 예정입니다.