[회고] 투두리스트 회고

https://1ncomparable.tistory.com/302

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

 

과제로 만들었던 투두리스트의 기본 기능을 완성했다! 

오늘은 작업하면서 어려웠던 점들과 중간 회고에서 작성했던 리팩토링 과정과 아쉬웠던 점, 보완 계획을 포함한 회고를 정리해보려고 한다. 

 

 

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

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

 

 

👀 현재까지 구현한 화면

할일 조회(Read)

왼쪽 : 할일 없음 / 오른쪽 : 할일 조회

 

할일 등록(Create)

완료 횟수가 1번인 할일, 여러번인 할일 등록하기

 

할일 수정(Update)

할일 수정하기

 

할일 삭제(Delete)

개별로 할일 삭제하기

 

삭제 옵션 (완료한 할일만 삭제 / 전체 삭제)

완료한 할일만 삭제하거나 전체 할일을 삭제하기

 

할일 체크

 

필터링 (전체보기 / 완료한 할일만 보기 / 미완료한 할일만 보기)

할일 필터링

 

 

다크모드

다크모드

 

 

 

 

📚 기능 구현 목표

리팩토링

• [x] styled-components의 themeProvider 알아보고 적용하기
• [x] 컴포넌트 기능별로 분리하기
• [x] 리덕스 초기값 설정 확인
• [x] 리듀서 함수들 확인

디자인

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

기능

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

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

추가기능

• [x] 날짜
• [x] 남은할일 개수
• [x] 할일 완료처리 ⇒ 렌더링 최적확 ㅏ필요할거같다
  • [x] 완료/미완료
  • [x] 횟수형태는 total 이랑 current가 같아지면 완료되게 처리
• [x] 필터링 기능 (리덕스로 안해도 될거같다! 왜냐면 그냥 뷰니까… 괜찮ㅇ지 않을까)
  • [x] 전체보기
  • [x] 완료한 할일만 보기
  • [x] 완료되지 않은 할일만 보기
• [x] 삭제기능 추가
  • [x] 개별 할일 삭제
  • [x] 완료된 할일만 삭제
  • [x] 전체할일 삭제
• [x] 등록기능 보완(컴포넌트 완성)
  • [x] 완료/미완료 작성(기본)
  • [x] 횟수 형태로 작성
• [ ] 완료 결과 보기(통계) : 주 또는 달에 모든 할일을 완료한 내용을 수치화해서 보여주기
  • [ ] 주별 목표 실천 결과
  • [ ] 월별 목표 실천 완료 결과
• [ ] 먼슬리 형태로 볼 수 있는 메뉴 추가하기(데이트피커)
• [x] 다크모드

 

 

 

 

리팩토링한 부분

1. 컴포넌트를 기능별로 분리하기

리팩토링 전에는 컴포넌트를 디자인과 구조 기준으로 정리해서 여러개의 기능을 가진 컴포넌트를 하나의 파일로 사용하고 있었다. 예를 들자면 Dropdown.js 컴포넌트를 가지고 필터링 드롭다운, 삭제 옵션 드롭다운, 수정 옵션 드롭다운 등으로 재사용했다. 하지만 각기 다른 기능을 가진 컴포넌트들을 한 파일로 사용하려고 하니 구조가 너무 복잡해지고 추가적인 state들을 사용하게 되어서 불필요한 렌더링과 프롭스 드릴링이 발생했다. 

 

그래서 컴포넌트들을 기능별로 분리했다. FilterDropdown, DeleteDropdown, EditDropdown 등의 개별 파일로 분리해서 컴포넌트를 작성했다. 이렇게 하니까 추가적으로 작성했던 상태들을 많이 줄일 수 있었다. 또한 기능별로 컴포넌트가 구분되어 있으니까 에러를 수정하기도 쉬웠다. 

 

2. Styled-components의 ThemeProvider 사용

1번과 연결되는 내용이다. 1처럼 컴포넌트들을 분리했지만, 해당 컴포넌트들의 마크업과 css는 똑같았다. 그래서 ThemeProvider를 사용했다. Styled-components의 ThemeProvider는 context API를 기반으로 만들어진 것으로, Provider로 감싼 컴포넌트들이 theme 정보를 props 현태로 넘겨받아서 사용할 수 있다. 

 

사용하면서 편리했던 점은, 테마를 사용하려는 컴포넌트가 어디에 위치하든 theme에 접근해서 스타일을 사용할 수 있다는 점이었다. 컬러나 폰트 사이즈 등을 지정해 줄 수도 있지만 여러개의 내용을 객체 형태로 작성해 한번에 props로 넘겨주니까 적용하려는 내용을 코드 한줄로 사용할 수 있는 점이 좋았다. 

 

조금 어려웠던 점은, 모든 내용을 객체 형태로 작성해야한다는 것이었다. 처음에는 잘 몰라서 객체가 아닌 방식으로 작성하는 바람에 에러가 많이 났었다. 그래도 익숙해지니까 금방 편하게 사용할 수 있었다! 마치 CSS를 Redux처럼 사용하는 느낌🙄

 

또 아쉬웠던 점은 처음부터 사용했더라면 더 좋았을것같다는 점이다. theme.js에 작성한 내용은 거의 GlobalStyle의 :root 내부에 작성한 내용들이었는데, 처음부터 ThemeProvider를 사용했더라면 정리하거나 적용하는것이 훨씬 쉬웠을것같다. 

중간에 헷갈려서 바꿔주지 않은 부분이 있었기때문에 에러가 나서 고쳐야하는 부분들이 많았다. 

 

 

 

 

 

 

구현하면서 어렵거나 아쉬웠던 점

1. 할일 체크 클릭시 업데이트 api 요청이 두번 가는 에러

이거 때문에 진짜 울고싶었다...😢 다른 api 요청은 다 한번씩만 잘 가는데, 이상하게 할일의 체크박스를 클릭하면 api 요청이 두번 가게 되었다. 처음에는 내가 추가적인 state를 너무 많이 써서 여러가지가 리렌더링 되기 때문에 이벤트가 두번씩 발생하나? 하는 생각이 들었다.(그래서 리팩토링을 한것이기도 하다ㅠ) 

 

여기저기 콘솔을 찍어보다가 한참 뒤에 알게 되었다. 이유는 이벤트 버블링 때문이었다.

체크박스는 label 안에 input, span이 들어있고, input은 display:none으로 렌더링 되지 않고, label에 할당된 onClick 이벤트가 api 요청을 보내는 구조였다. 클릭이 될때 e.target을 확인해보니 label과 span이 모두 출력되었다. 실제로 클릭이 된 것은 span이고(event.target) 이벤트가 걸려있는 것은 label이었다.(event.currentTarget) 

따라서 정확히 말하자면 span이 클릭되었고 이벤트 버블링으로 인해 부모인 label에 걸려있던 이벤트가 실행된 것이다. 

 

=> span 클릭 => 버블링으로 click event 실행

=> (span이 포함된)label 클릭 => click event 실행

 

이렇게 해서 이벤트가 두번 실행되고 api 요청이 두번 가게 되었던 것이다. 지난번에 이벤트 버블링에 대해서 정리해보았던게 도움이 많이 되었다. 

 

2. 삭제 옵션 기능(전체 삭제, 완료한 할일만 삭제)

삭제 옵션으로는 전체 삭제와 완료한 할일만 삭제하는 내용을 넣었는데, api 요청을 작성할때 에러가 많이 났다. 

delete 요청을 할때는 user/id 같은 엔드포인트에 요청을 보내게 되는데 1개 이상을 삭제하려고 하니 어떻게 해야할지 몰랐다. 그래서 처음에는 /todos로 delete 요청을 보냈는데 바로 Bad Request가 떴다. 그래서 이것저것 찾아보다가 지금은  state를 받아와서 id만 필터링한 배열을 만들고 forEach를 통해서 배열의 개수만큼 delete 요청을 보내게 했다. 

맞는 방법인지는 모르겠다...🙄 요청을 한번만 해서 처리할 수 있는 방법은 없을까? 이부분을 개선해보고 싶다. 

 

3. 다크모드

ThemeProvider를 사용하려고 했는데 바꿔야하는 부분이 너무 많았다. 검색해서 알아본 다른 코드들은 모두 lightMode, darkMode 별로 다른 객체에 color가 정의되어 있었다. 나는 하나의 객체에 color가 적용되어 있어서, 이렇게 하려면 color가 적용된 모든 내용을 바꿔줘야했다. 그래서 추가적인 state를 사용해 css의 filter: invert를 사용했다. 

이부분은 미리 컬러 팔레트를 정해주었더라면 손쉽게 사용할 수 있었을 것 같아서 아쉽다.

다음번에는 컬러를 미리 정하고 ThemeProvider도 처음부터 적용해야겠다. 

 

 

 

 

 

실천할 계획

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

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

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

 

 

 

 

 

 

정리

Redux나 Styled-Components등 새로운 스택을 많이 사용해보았다. 배우긴 했지만 사용하기는 쉽지 않았는데, 실제로 여러 에러를 해결해보고 공식문서를 많이 읽어보면서 이전보다는 조금 더 익숙해진 것 같다. 

조금 아쉬웠던 점은 어렵더라도 시작부터 툴들을 적용했으면 더 좋았을것같다는 점이다. 

익숙해진 방식으로 작성했다가 다시 새로운 툴을 적용하려니 오히려 더 어려웠다. 

그리고 리액트 디버깅하는 법이 조금 미숙하다는 것이다. 이부분은 좀 더 연습을 해야할것같다. 

다음 프로젝트때는 더 나아졌다는 내용을 쓰고싶다! 

 

 

 

깃허브 레포

https://github.com/moondrop0816/my-react-todo

GitHub - moondrop0816/my-react-todo