To-Do List 작성 – 1. 기획 및 실행 기능 정리

작업으로 React로 할 일 목록을 만들기로 했습니다.

구현해야 할 기능은 기본 CRUD 기능입니다.

기본적인 기능 외에 제가 만들고 싶은 기능을 추가하기로 했습니다.

기획 콘텐츠 구성


Todo 앱의 와이어 프레임과 함께 구현 기능을 요약한 이미지

  • 모바일 우선 계획
  • 필수 구현 기능
    • 할일 등록(만들기)
    • 할일 검색(읽기) – 할일이 없어도 상태를 보여줍니다.
    • 할 일 편집(업데이트)
    • 작업 삭제(Delete)
  • 추가 구현 기능
    • 날짜
    • 남은 작업 수 보기
    • 필터 기능 – 모두 표시, 완료된 할일만, 완료되지 않은 할일만 표시
    • 삭제 기능 추가 – 개별 작업 삭제, 완료된 작업만 삭제, 전체 작업 삭제
    • 등록 기능 추가 – 완료/미완성 또는 카운트 형식으로 작성
    • 완료 결과 보기 – 주간 목표 달성 결과, 월간 목표 달성 결과(이번 주/월 완료된 모든 작업의 ​​수치 결과 표시)
    • 월별로 표시할 수 있는 메뉴 추가

우선 계획된 사항은 다음과 같습니다. 모바일 우선으로 계획하고 구현 중에 추가 세부 사항이 염두에두면 더 많은 구현을 위해 진행하도록 결정됩니다. 그리고 대략적인 프로토타입은 다음과 같이 구성되었습니다! 제가 디자인을 잘 못해서… 최대한 엉뚱하게! 조직을 향해서 만들었습니다…하하

프로토타입


사용할 스킬/라이브러리

  • 반응하다
  • 리덕스
  • 스타일이 지정된 구성 요소
  • Google 물건 아이콘
  • JSON 서버

우리는 React로 개발할 계획이며 상태 관리를 위해 Redux를 사용할 것입니다.

구성 요소 스타일은 Styled Components를 사용하고 아이콘 글꼴은 Google 머티리얼 아이콘을 사용합니다.

실제로 서버를 구현하는 대신 json-server와 함께 모의 서버를 사용할 계획입니다.

최대한 많은 기능을 구현하려고 노력합니다!