[Refactoring] 끝났다고 끝이 아니다 리팩토링의 시작 - 주석달기 -
리팩토링을 하는 이유?
시간에 쫒겨 개발을 하다보면 코드품질에 신경을 쓰지 못할 수 있다. 어쩔 수 없는 것이다 하지만 그렇다고 용인되는 것도 아니다. 내가 쓴코드 조차 기억속에서 희미해지는 순간, 그 프로젝트를 리팩토링 하는것이 본인의 코딩 실력향상에 도움이 될 것이라고 멘토님이 충고해주신걸 기억해 리팩토링을 진행하고자한다.
Chrome Light House
Light house 라는 툴을 이용해 웹사이트를 분석해보면 대략적으로 나마 웹사이트의 품질을 검사해 볼 수 도 있고, 개선해야 할 점을 알 수 있다. 꽤나 유용한 툴이니 이를 이용해서 고쳐 나가야 할 점을 찾아볼 수 있다.
이번 프로젝트를 하면서는 중간중간에 짬짬히 Light house 테스트를 돌려봤는데 이 덕분에 발견한 문제를 고칠 수 있었다. 이미지 크기가 너무 크다는 문제를 light house를 통해 알게 됬는데 개발하면서 미쳐 생각하지 못한 부분을 발견해주는 고마운 툴이였다.
이미지 크기 문제를 해결한 방법
[React 이미지 압축전송] 필요 이상으로 큰 이미지를 서버로 넘기지 말자. Browser Image Compression 을
이미지 압축을 도입한 이유 Brower Image Compression 을 사용한 계기는 서버로 필요 이상으로 큰 이미지를 전송함으로 인한 트래픽을 줄여 서버의 부하와 비용을 줄이고, 브라우저의 초기 로딩속도를
jobkaehenry.tistory.com
주석부터 달고 시작
성능 향상을 기대하기 전에 먼저 코드에 주석부터 달고 시작하기로 마음을 먹었다. 그 이유는 코드의 유지보수를 용이하게 하기 위함이다. 아무래도 프로젝트를 한창 진행하는 동안에는 머리속에 내가 쓴 코드가 다 캐싱(?)되어 있어서 주석이 없이도 코드를 알아 볼 수 있다.
하지만 서비스가 커지고, 시간이 지남에 따라 뇌내메모리에서 휘발하기 때문에 미래의 나를 위해 주석을 달았다.
Hooks와 Utility 함수를 위주로 주석을 다는 작업을 진행했는데. 위와 같은 포맷 (문서주석)으로 주석을 달게되면 해당 Hooks에 관한 설명을 텍스트에디터 내에서 확인할 수 있다.
위와 같이 Hooks 를 사용하는 다른 사람(혹은 미래의 나)도 해당인자가 무얼 받아서 무얼 리턴하는지 간단하게 파악할 수 있다.