💭 [ 과제 기록 ] - TodoList 만들기 (JavaScript)

TodoList 과제로 네이버를 벤치마킹한 투두리스트를 만들었습니다. 이 과정에서의 경험과 느낀 점을 공유하고자 합니다.

📌 프로젝트 소개

이 프로젝트는 네이버를 벤치마킹하여 구현한 투두리스트로 간단한 기능들을 통해 사용자가 편리하게 할 일을 관리할 수 있도록 디자인되었습니다. 제작 기간은 2023.12.22 ~ 2024.01.12 였고, 이를 배포한 사이트는 Naver TodoList 에서 확인하실 수 있습니다.

이 프로젝트는 다음과 같은 주요 기능과 특징을 갖추고 있습니다:

1. 할 일 목록 페이지
   • Home 페이지에서 모든 할 일 목록을 한눈에 확인할 수 있습니다.

2. 사용자 소개 페이지

   • 간단한 Naver 기업 소개와 개발자 소개가 담긴 About 페이지가 제공됩니다.

3. 할 일 항목 추가, 수정, 삭제 (CRUD)

   • REST API를 사용하여 사용자는 간단한 기능을 통해 할 일을 추가하거나 수정, 삭제할 수 있습니다.

4. 할 일 완료 여부 구분

   • 완료되지 않은 항목과 완료된 항목이 시각적으로 구분되어 목록에 표시됩니다.

5. Modal 창

   • 각 투두 아이템을 클릭하면 해당 아이템의 상세 정보를 표시하는 Modal 창이 나타납니다.
   • 해당 투두 아이템의 생성일과 최신 수정일이 표시되어 있습니다.
   • 해당 투두 아이템을 수정할 수 있는 기능이 제공됩니다.
     

6. 로딩 애니메이션

   • 할 일 항목 추가, 수정, 삭제 중 간단한 로딩 애니메이션을 통해 사용자에게 진행 상황을 시각적으로 알려줍니다.

💡 부족한 부분 : 당시 구현하고 싶었지만, 하지 못한 기능들과 해결하지 못한 오류가 몇가지 있습니다(e.g., 완료항목만 삭제, skeleton). 리팩토링을 하며 수정할 예정입니다!

---

💭 어려웠던 부분 / 느낀 점

프로젝트를 진행하면서 가장 큰 도전은 코드를 순수 JavaScript 로 작성하는 것이었습니다. 처음에는 JavaScript에 대한 이해가 부족해서 많은 시간이 걸렸으며, 특히 REST API 를 활용한 CRUD 기능의 구현은 복잡한 과정이었습니다. 완벽하게 숙지했다고 할 수는 없지만 이 과정을 통해 JavaScript에 대한 이해도가 크게 향상되었고, 코드의 복잡성에도 불구하고 포기하지 않고 계속 노력했습니다.

추가로, 멘토님께 코드 리뷰 받은 부분을 수정하고 React 로 리팩토링할 예정입니다. 사실, 순수 JavaScript로만 코드를 작성하다가 React를 사용하면 훨씬 편할거라는 말을 많이 들었습니다. 아직 제대로 React를 활용해보지 않아 어렵게 느껴지기도 하지만... JS 코드를 React로 변환하면 코드가 더 간결해지고, React를 활용하여 프로젝트를 보다 효과적으로 관리할 수 있을 것으로 기대됩니다!