처음으로 기획부터 구현까지 완료해본 프로젝트이다.
이 프로젝트는 공부 목적으로 시작했기 때문에 누가봐도 "지긋지긋하게 했다"라는 말이 나올 정도로 리팩토링을 하고 여러번 만져볼 생각이다.
(진행 기간 📆 : 23/3/1 ~ 23/3/9)
기획하기
기획은 이번 프로젝트를 시작할 때 가장 중요하게 생각한 부분이다.
2개월간 부트캠프 과제를 수행하며, 이미 짜여진 단편적인 요구사항만을 해결하는 것이 "내가 잘 하고 있는건가" 의구심을 들게했다.
그래서 이번 프로젝트는 기획 단계를 거치며, 필요한 기능은 무엇이고 어떻게 구현하면 좋을지를 먼저 생각하고 접근하고 싶었다.
✓ 노션으로 프로젝트 관리하기
- 사용자 요구사항에 따른 구현 과제를 정리하기 위해 노션을 이용했다.
- 누락된 기능은 없는지 및 요구사항대로 서비스가 구현되고 있는지 확인하는데 이용했다.
✓ 피그마로 디자인 시안 잡기
- 피그마로 디자인을 잡고, 프로토타입까지 연결한 후에 구현에 들어가니 코드로 구현하기 용이했다.
- 구현 중에 "여기서 필요한 기능은 뭐지?" 생각이 들었을 때 피그마에서 시각적으로 확인할 수 있어 좋았다.
✓ 컴포넌트 정의하기
- 가장 어려웠던 부분이다 🥲 "컴포넌트를 어디까지 쪼개야하나?", "이렇게까지 쪼개는게 맞나?" 고민의 연속이었다. 컴포넌트 단일 책임의 원칙에 맞춰 쪼개고 싶은데... 기능에 집중하여 나눈다는게 말은 간단한데 실제로 해보니 너무 어려웠다. 공식문서의 React로 생각하기를 보고 또 봐도 여전히 어렵다 🫠
- 그래서 기획과 결과물이 가장 다른 부분이기도 하다.
구현하기
중요하게 생각한 점
state & props로 상태 관리하기
사실 구현하면서 상태관리 라이브러리를 사용하고싶은 마음이 매순간 들었지만 꾹 참고 state&props로만 상태를 관리했다. 이번 경험으로 상태관리 라이브러리의 필요성과 유용성은 충분히 느낀 것 같다 😇- auto batching 예측하고 코드 짜기
리액트에서 가장 삽질했던 부분이기 때문에 이번 프로젝트에서는 리액트의 auto batching 특성을 이해하고 코드를 짜고 싶었다.
구현 기능
- 다크모드
styled-component의ThemeProvider를 이용했다. - 할 일의 완료 여부에 따라 필터링하여 볼 수 있도록 했다.
- 할 일의 태그 카테고리(work. study...) 따라 필터링하여 볼 수 있도록 했다.
- 할 일의 CRUD 기능을 구현했다.
시연 화면
다크모드, 필터링 기능
- 토글 버튼을 누르면 다크모드, 라이트모드간 전환이 발생한다.
- Hide Done Tasks 체크박스를 누르면 완료된 todo는 화면에 렌더되지 않는다.
create, update 기능
- 메인 화면의 우측 상단의 "+" 버튼을 누르면 todo 생성이 가능한 create modal을 띄운다.
- todo post의 우측 상단 "..." 버튼을 눌러 나오는 모달에서 update를 선택하면 기존의 todo 수정이 가능한 update modal을 띄운다.
delete 기능
- todo post의 우측 상단 "..." 버튼을 눌러 나오는 모달에서 delete를 선택하면, 해당 todo post가 삭제된다.
다음 과제는 ?
- redux tookit으로 리팩토링하기
- 리액트 공식문서 참고하여 파일 분리해보기
- 캘린더 기능 추가해보기
