프로그래머스 데브코스 - 3주차 과제 회고

프로그래머스 3주 차 과제 회고

Simple Todo List

---

리팩토링까지 완료 후 작성하는 3주 차 과제 회고

다행히도 리팩토링은 노션 프로젝트 PR을 한 이후에 진행하게 되어 바쁘지 않게 진행할 수 있었습니다. 이번 회고에서는 프로젝트를 진행하며 궁금했던 점들이나 어떤 식으로 코드들을 개선했는가에 대해 작성해보려고 합니다.

자칭 Todo List 장인..?

이전에도 Vanilla JS와 리액트를 이용한 미니 Todo list 프로젝트를 진행한 경험이 있어서 프로젝트 초기에는 자신감이 넘쳤다. 물론 컴포넌트 방식으로 진행해본 건 처음이지만 강의를 통해 방법을 이미 학습하고 난 후 진행하여 혼자서도 잘 만들 것이라고 생각했으나.. 아마 선행했던 강의 코드를 참고하지 못했다면 시간이 더 필요했을 것 같기도 하다. 이번 프로젝트를 진행하며 중요하게 생각했던 점들은 컴포넌트 방식을 잘 사용했는가와 컨벤션을 잘 지켜서 가독성이 좋은 코드를 작성하는 것을 목표로 하였다.

친구들끼리 의존할 수도 있지🤪

초기 프로젝트를 진행하며 지키려고 한 내용들은 컴포넌트를 생성할 때 다른 컴포넌트가 없어도 동작하는가, 이벤트와 상태 값 변경이 잘 이루어 지는가를 생각하며 코드를 작성하려고 노력하였다. id로 어떤 값을 전해줄 것인가에 대해 주로 생각하였고 중복되는 id값이 생긴다면 이벤트가 중복으로 일어날 것이라고 생각하여 이 점을 신경 썼다.

프로젝트 중반에는 거의 모든 컴포넌트들을 만들고 생성자 함수에 대해서 학습하며 책을 읽다가 스코프 세이프 생성자 패턴에 대해 발견하여 validation에 대한 내용을 코드에 적용시키고 todo의 값은 항상 배열로 들어오기 때문에 상태 validation도 배열인지 아닌지로 체크하였다.

프로젝트 후기에는 상태 값을 참조하여 Todo Count 컴포넌트를 만들며 재사용성과 쉬운 유지보수를 위해 의존성을 줄이는 것이 필요하다고 느껴 코드를 조금씩 수정하였다. 어려웠던 점은 "어디까지가 의존이지?"라는 생각이었다. 상태 값만 참조한다면 의존성이 없다고 말할 수  있는 것 아닌가?라는 생각을 하였다. 또한 코드들을 컨벤션에 따라 정리해보며 쓸모없는 내용들을 줄이고 과제를 제출하였다.

 

멘토님과 팀원들의 코드 리뷰 리팩토링♻️

PR을 작성하며 질문한 내용은 아래와 같다.

• 초기 로컬 스토리지에서 기본값을 전해주어 이후에는 유효한 배열인지 확인하였는데 더 확인해야 할 validation이 있을까요?
• innerHTML을 사용하였는데 강의에서 크로스 사이트 스크립팅 공격에 취약하다고 배웠습니다. 실무의 경우에는 textContent를 이용하는 것이 좋을까요?
• 이번 경우에 주석을 따로 정리하지 않고 커밋에 간단하게 내용을 적었는데 주석을 정리하는 게 좋을까요?
• TodoList 컴포넌트에서 Date.now()로 중복되지 않는 값을 만들고 id=${id}로 작성하였습니다 id 또한 중복될 수 없다고 생각해서 id로 지정하였는데 이러한 방법들이 좋지 않은 방법일까요? 

우선 초기 목표로 했던 가독성이 좋은 코드를 작성하는 목표는 어느 정도 달성했다고 생각한다. 팀원들이 작성해준 코드 리뷰에도 읽기 편해서 리뷰하기 좋았다는 내용을 많이 적어주셨다.

멘토님의 코드 리뷰를 통해 배운 점은 유효성을 검사하는 것은 수준의 문제라는 점이다. 단순히 오류가 발생하는 것을 방지하는 코드는 작성할 수 있지만 모든 가능성을 다 확인한 것은 아니기 때문에 누가 코드를 재사용하는지도 중요하다고 느꼈다. 이번 프로젝트에서는 파라미터 값을 전해주지 않을 경우 발생하는 에러를 놓치고 있었고 헤더의 텍스트에 default value를 넣어주었다.

가장 큰 이슈는 TodoForm 컴포넌트에서 TodoList 컴포넌트 상태에 직접 접근하는 문제였다. 상태 값에 접근하여 이벤트를 처리하였다. 웃긴 점은 TodoCount 컴포넌트에서는 상위 컴포넌트의 상태값을 잘 활용했다는 점이다. 놓치지 쉬운 문제이지만 상태값의 흐름을 잘 체크해야한다는 점을 느끼게 되었다. 해결법으로 상위 컴포넌트에서 상태값 관리가 가능하도록 하여 상위 컴포넌트의 상태 값이 바뀔 때 하위 컴포넌트들로 보내주는 방식을 사용하였다.

또한 className을 사용하였는데 이에 대한 문제점도 발견하게 되었고 classList를 사용하는 방식으로 리팩토링을 진행하였고 todo값이 비워질때 localStorage를 아예 삭제하는 것과 코드를 조금 더 간결하게 작성가능한 널 병합 연산자와, !를 활용하여 리팩토링을 진행하였다.

마지막으로 id에 대한 내용은 따로 unique id 제너레이터를 사용하거나 랜덤한 값을 사용한다면 최대한 중복 확률을 줄이는 방식을 사용하는 것이 최선이고 현재 사용한 Date.now()는 숫자값이 커질 때 bigInt로 수정이 필요한 점과 낮은 확률이지만 중복이 가능하다는 것을 알게되었고 랜덤한 문자열과 숫자열을 혼합한 6자리 id를 주어주는 방법으로 수정하게 되었습니다.

회고하며

이번 과제에서 가장 많이 배운 점은 의존성을 줄이고 상태 값을 어떻게 다룰 것인가에 대한 내용이었습니다. 다른 팀원들의 코드 리뷰를 진행하며 의존성을 해결하는 방식을 보고 저의 문제점도 쉽게 발견할 수 있었고 크고 작은 내용들을 새롭게 배우며 조금은 성장했다고 생각하게 되었습니다.