취업 준비를 하면서 2개의 프로젝트를 포트폴리오에 포함했는데 처음으로 혼자서 진행했던 프로젝트여서 그런지 코드를 다시 보니 고칠점들이 많이 보였다.
또한, 더 공부한 지금 시점에서 리팩토링을 진행하면서 얼마나 성장 했는지 확인할 수 있을 것 같아 시간을 내서 리팩토링을 진행해보려 한다.
1. 문제점 => 목표
1. 코드 가독성
- Emotion을 사용하면서 스타일 컴포넌트들을 너무 무분별하게 사용했고, 컴포넌트명도 연관성이 떨어지는 등 이해하기 어려워 가독성이 떨어짐
=> 컴포넌트명을 이해할 수 있도록 쉽게 변경하고, 불필요한 컴포넌트 수를 줄인다!
- 같은 결과값을 가지는 로직을 컴포넌트 별로 중복해서 사용한 함수들이 있어 코드의 길이가 길어짐
=> 훅을 통해 같은 결과값을 가지는 로직들을 간결하게 사용할 수 있도록해 코드의 길이를 줄인다!
2. 폴더 구조 : 폴더 구조도 폴더 내부에 있는 컴포넌트들의 연관성이 떨어져 유지보수가 필요할 때 쉽게 찾을 수 없음
=> 폴더 구조를 누구나 필요한 코드를 쉽게 찾을 수 있도록 변경한다!
3. 성능 최적화 : 이전 코드에서는 크롬 Lighthouse 점수에서 높은 점수를 받지 못했고, 초기 로딩 속도가 느리다는 느낌을 받음
=> 성능 최적화 관련 공부를 통해 초기 로딩 속도 및 성능 측점 점수를 높게 받을 수 있도록 한다!
=> 목표를 이룬다면 성능 최적화 관련해서 따로 블로그에 정리하고 기록한다!
2. 추가
Firestore Database를 통해 사용자 입장에서 마이 페이지를 좀 더 깊게 다뤄보려 한다. 그 전에 구현하지 못했던 내가 작성한 리뷰, 좋아요한 게시물, 좋아요받은 갯수, 주소 변경 등을 추가해 볼 예정이다.
3. 후기
5일 동안의 리팩토링과 생각했던 기능들을 추가하면서 아직 부족하겠지만 느낀점이 많았던 것 같다.
첫번째는 이해하기 어렵거나 불필요한 스타일 컴포넌트들을 줄이고, 비슷한 UI 요소를 컴포넌트 하나로 통합해 코드의 양을 줄였이면서 코드 가독성이 좋아지고, 폴더 구조도 깔끔하게 정리할 수 있었다.
두번째는 동일한 결과값을 내는 로직을 커스텀 훅으로 만들면서 컴포넌트 내에서 코드 가독성이 좋아졌다.
세번째는 폴더 구조를 페이지별로 컴포넌트를 정리하면서 프로젝트가 전체적으로 깔끔하게 정리되었다.
마지막으로 성능 점수는 프로젝트 내부에 있는 불필요한 이미지들을 제거하면서 점수가 개선된 것 같다. 아직 초기 로딩 속도가 마음에 들지 않는데 더 공부가 필요할 것 같다.
