TODO LIST 프로젝트 회고

부트캠프에서 진행한 Todo list 개인 프로젝트

프로젝트

 

GitHub - hyeon17/todolist

 

---

KPT

Keep

• 기존 중복 코드를 최대한 덜어내 함수 형태로 작성하여 코드의 가독성을 높였다.
• 기존에 구현한 우선순위 기능을 새로고침 하여도 유지되게 수정하였다.

Problem

• 우선순위를 설정 시 로컬스토리지에 정보를 저장했는데 우선순위를 바꾸면 기존에 저장되어 있던 데이터가 바뀌지 않았다.
• 로컬스토리지에 저장된 우선순위 데이터가 화면에 삭제되어도 로컬스토리지에는 삭제되지 않고 유지되었다.

Try

• 우선순위가 변동될 시 변동된 데이터의 id가 로컬스토리지에 저장된 id와 같으면 데이터가 저장되게 수정했다.
• 로컬스토리지의 데이터를 가져와서 현재 있는 데이터의 id와 로컬스토리지의 데이터 id를 비교하여 id값이 같은 데이터만 다시 로컬스토리지에 넣었다.

---

느낀점 및 마무리

부트캠프 초기에 javascript를 배운지 약 3주가 되었을 때 진행한 프로젝트를 다시 리팩토링하니 감회가 새로웠다. 내가 예전에 작성한 코드를 보면서 그때의 나는 코드를 작성하기에 급급하여 지금 작성된 코드가 좋은 코드인지 알 방법이 없었던 기억이 떠올랐다. 지금에서 보니 나는 많이 성장한것을 느꼈는데 예전에 작성했던 코드들이 중복코드가 많고 구현된 기능에 대해 아쉬운 점이 보이기 때문에 리팩토링을 진행하였다.

먼저 main.js에 모든 코드가 작성되어 있어 가독성이 떨어지므로 기능에 따라 코드를 분리하였다. 분리 작업이 끝난 후 로딩을 보여주는 코드가 중복 작성된 게 많으므로 따로 코드를 분리한 뒤 함수로 만들어 가독성을 높였다. 또한 예전에 구현해 놓은 우선순위 기능이 있었는데 이 부분은 API에서 따로 지원해주지 않으므로 프론트에서 모두 처리해야 했다. 작성된 부분은 우선순위에 따라 중요도 색을 표시해주지만, 화면이 새로고침 된다면 기존 데이터가 유지되지 않으므로 초기화 되는 현상이 발생했다. 따라서 이 기능을 유지하기 위해 로컬스토리지를 사용하였고 사용자는 우선순위를 정하면 해당하는 우선순위 값과 id가 로컬스토리지에 저장되므로 화면을 새로 고쳐도 데이터가 유지되었다.

부트캠프에서 강사님들이 프로젝트 기간이 끝난다고 끝이 아니라 추후 본인의 작업물을 다시 되돌아보면서 개선사항을 찾아 수정하는 것이 좋다고 하셨다. 그전까지는 계속되는 팀 프로젝트를 진행하느라 여유가 없어서 리팩토링하지 못한 것이 너무 아쉬웠는데 이제 여유가 생겨 다시 되돌아보니 개선사항이 많이 보여 리팩토링하길 잘했다는 생각이 들었다.

아쉬운 점은 API가 많은 것을 지원해주지 않아 프로젝트의 규모를 키우는 것에 한계가 있는 것이 아쉬웠다.

만족스러운 점은 프로젝트를 통하여 리팩토링의 중요성을 깨달았고 로컬스토리지의 사용법을 다시 되돌아보아 만족했다.