[회고] 투두리스트 중간회고

과제로 투두리스트를 만들고 있는데, 한번 중간 점검을 해보기로 했다. 

기능 구현과 에러를 수정하다보니 계속해서 기능을 구현하기보다는 일단 리팩토링을 하는 것이 좋다고 생각했기 때문이다. 

우선 지금 만들고 있는 투두리스트의 기본 스펙과 만들고자 하는 내용은 다음과 같다.

 

 

 

⚙️ 사용한 기술 / 라이브러리

• React
• Redux
• Redux-Thunk
• axios
• Short Id
• Styled-Components
  • Styled-Reset
• Google material icons
• json-server

 

 

 

🖥️  화면

 

 

 

🛠️ 지금까지 구현한 기능

디자인

• [x] 메인페이지는 완성!

기능

필수기능(리덕스 적용 시작함)

• [x] 할일 등록 (에러 고침!!!ㅠㅠㅠㅠㅠ)
• [x] 할일 조회 - 할일 없는 상태도 표시
• [x] 할일 삭제
• [x] 할일 수정

추가기능

• [x] 날짜
• [x] 남은할일 개수
• [ ] 할일 완료처리
  • [x] 완료/미완료
  • [x] 횟수형태는 total 이랑 current가 같아지면 완료되게 처리
• [x] 필터링 기능
  • [x] 전체보기
  • [x] 완료한 할일만 보기
  • [x] 완료되지 않은 할일만 보기
• [ ] 삭제기능 추가
  • [x] 개별 할일 삭제
  • [ ] 완료된 할일만 삭제
  • [ ] 전체할일 삭제
• [x] 등록기능 보완
  • [x] 완료/미완료 작성(기본)
  • [x] 횟수 형태로 작성
• [ ] 완료 결과 보기(통계) : 주 또는 달에 모든 할일을 완료한 내용을 수치화해서 보여주기
  • [ ] 주별 목표 실천 결과
  • [ ] 월별 목표 실천 완료 결과
• [ ] 먼슬리 형태로 볼 수 있는 메뉴 추가하기(데이트피커)
• [ ] 다크모드

 

 

 

📁 폴더 구조

 

 

 

 

리팩토링을 하려는 이유

처음 프로젝트를 시작할때 염두에 뒀던 점이 컴포넌트의 재사용이었다. 비슷한 구조와 디자인이 반복되는 부분들이 있었고(모달, 드롭다운) 그것들을 컴포넌트화하여 구현을 시작했다. 하지만 컴포넌트를 구분할때 기능을 중점적으로 분리를 했어야 했는데, 나는 디자인과 마크업 구조가 같으니까 동일한 컴포넌트를 사용하고 내용과 이벤트는 props를 이용해 다르게 적용하려고 했다. 

다행히 기능이 동작하지 않는 것은 아니었다. 하지만 각 컴포넌트에서 필요한 기능이 달랐기때문에 추가적인 상태를 사용해야했고, 프롭스 드릴링을 막기 위해 리덕스를 사용하기로 했지만 오히려 프롭스 드릴링이 발생하는 부분도 있었다. 

게다가 사용되는 컴포넌트가 다를때, 상태가 바뀌게 됨으로 불필요한 리렌더링도 발생했다. 

 

 

 

리팩토링 방향

1. 컴포넌트를 기능별로 다시 분류한다

2. 다크모드를 비롯해 전역적인 스타일 사용을 위해 styled-components의 themeProvider를 알아보고 적용한다

3. 리덕스 초기값 설정과 리듀서를 다시 확인한다 

(+) 렌더링 최적화를 위한 useMemo, useCallback 사용

 

 

프로젝트를 진행하면서 아쉬웠던 점과 보완 계획

아쉬웠던 점

1. 컴포넌트를 구분하는데에 있어 미숙했다.

2. 파일명과 폴더를 구분하고 이름 짓는것이 하나로 통일되지 않았다.

3. 리덕스, 스타일드 컴포넌트 사용이 미숙했다(이부분은 연습해본적이 없어서 일부러 쓰는것이긴 하다)

4. 리덕스 디버깅이 어려웠다.

5. 상태의 위치를 정하는 것이 어려웠다. 

 

 

보완 계획

1. 스스로 계획한 프로젝트들 외에도 여러 강의들로 클론코딩을 연습하거나 다른사람의 깃허브에서 프로젝트를 많이 읽어보자. 

2. 다음 프로젝트를 할때도 중간 회고를 하면서 부족한 점과 보완 계획을 작성해보자.

3. 코드가 잘 손에 익지 않고 속도가 너무 느리니까, 이론을 배울때는 꼭 작은 예제를 작성해서 직접 동작하는걸 확인하도록 하자. 

 

 

 

 

지금으로서 가장 중요하게 생각하는 점은 개인 프로젝트와 함께 클론코딩을 병행하는 것이다. 

실제로 해본 프로젝트가 별로 없으니까 구조를 짜는것도 너무 오래 걸리고, 상태의 위치를 적절하게 설정하는것도 어렵게 느껴진다. 

일단은 이번 투두 프로젝트를 끝내면 또 회고를 작성하면서 변경사항들과 느낀점들을 기록할것이다.