[강원대 FE_허윤수] 미션 제출합니다.

[sugoring]

[강원대 FE_허윤수]

이 애플리케이션은 사용자가 할 일을 추가, 삭제, 완료 상태로 전환할 수 있는 간단한 할 일 목록(Todo List) 관리 웹 애플리케이션입니다. 동작은 TodoMVC의 기능 동작을 참고하였습니다.

---

과제 진행 소감

"함수(또는 메서드)가 한 가지 일만 하도록 최대한 작게 만들어라"라는 요구사항에 맞추기 위해 최대한 노력했습니다. TodoApp(src\components\TodoApp\TodoApp.jsx) 컴포넌트를 더 작은 단위로 분리하여 상태 관리를 보다 효율적으로 하려고 시도했습니다. 이를 위해 상태를 저장하는 부분을 여러 컨테이너로 분리했으나, 이 과정에서 각 컨테이너 간에 상태가 공유되지 않는 문제점이 발생했습니다. 😓

이 문제를 해결하기 위해 CONTEXT API를 사용할 수 있다는 것을 알게 되었습니다. 하지만 아직 CONTEXT API에 대한 공부가 충분히 이루어지지 않아, 이를 적용하는 데 어려움을 겪었습니다. 앞으로 고급 개념을 학습하여 더 나은 코드를 작성할 수 있도록 노력할 것입니다. 📚

---

저장소

저장소 URL: https://github.com/sugoring/react-todo-list-precourse.git

브랜치

• 메인 브랜치(과제 제출): sugoring
• 오류 수정 브랜치: fix/addTodo-function-error
• 개발 브랜치: develop

1. 초기 개발

초기에 메인 브랜치인 sugoring에서 개발을 시작했습니다.

2. 오류 수정

개발 도중 addTodo 함수와 관련된 오류가 발생하여, 오류를 해결하기 위해 fix/addTodo-function-error 브랜치에서 수정 작업을 진행하였습니다.

3. 개발 브랜치 전환

오류 수정 후, 메인 브랜치(sugoring)로 돌아와서 오류가 해결된 상태를 반영한 뒤, 이후 개발 작업은 develop 브랜치에서 계속 진행하였습니다.

4. 과제 제출

개발 작업을 완료한 후, develop 브랜치에서 작업 내용을 sugoring 브랜치로 PR(Pull Request)하여 병합하였고, 과제를 제출하였습니다.

---

기본 기능

[할 일 추가 기능 구현]

• 할 일 입력 폼 생성
  • 사용자는 Enter 키 또는 추가 버튼을 통해 새로운 할 일을 입력할 수 있습니다.
• 할 일 데이터 유효성 검사 (빈 문자열)
  • 입력된 할 일이 빈 문자열인 경우, 경고 메시지를 표시하고 추가하지 않습니다.
• 할 일 목록 업데이트
  • 유효한 할 일은 목록에 추가되고 화면에 반영됩니다.

[할 일 삭제 기능 구현]

• 삭제 요청 인터페이스 생성
  • 각 할 일 항목 옆에 삭제 버튼이 있습니다.
• 삭제 요청 처리
  • 사용자가 삭제 버튼을 클릭하면 해당 할 일이 목록에서 제거됩니다.

[할 일 목록 보기 기능 구현]

• 목록 불러오기
  • 할 일 목록을 불러옵니다.
• 목록 표시
  • 불러온 할 일 목록을 화면에 표시합니다.

[할 일 완료 상태 전환 기능 구현]

• 완료 상태 전환 인터페이스 생성
  • 각 할 일 항목 옆에 완료/미완료 버튼이 있습니다.
• 상태 전환 요청 처리
  • 사용자가 완료/미완료 버튼을 클릭하면 해당 할 일의 완료 상태가 토글됩니다.

---

선택 요구 사항

[할 일 필터링]

• 필터링 버튼 추가
  • 할 일 목록 상단에 '전체', '진행 중', '완료' 버튼을 추가합니다.
• 필터링 기능 구현
  • 사용자는 이 버튼들을 클릭하여 필터링할 수 있습니다.
• 실시간 필터링 반영
  • 필터링된 목록이 화면에 반영됩니다.

[해야 할 일의 총 개수 확인]

• 총 개수 표시 영역 추가
  • 할 일 목록 하단에 남아있는 할 일의 총 개수를 표시합니다.
• 개별 개수 표시 옵션
  • 완료된 할 일과 미완료된 할 일의 개수를 각각 표시합니다.

[데이터 지속성]

• 데이터 저장 기능 구현
  • 새로고침을 하여도 이전에 작성한 데이터는 유지됩니다.