Tech is created to fix problem

Wiki 프로젝트가 끝나고 파이어베이스 용량 초과, 한 컴포넌트에 200~300줄 가까이 되는 코드량, 더딘 로딩 속도 등등... 리팩토링의 필요성을 느꼈고 팀원들과 개선점을 논의하고 코드 수정을 진행했다. 먼저, 성능최적화할 때 고려해야 할 사항들을 팀장님이 정리해왔고 아래 항목들에서 각자 선택해서 리팩토링을 진행했다. 1. 로딩성능 1) 이미지 최적화 - 이미지 확장자 : png => webp 파일로 변환 🏁 - 이미지 자체 크기 조절 - 용량 압축 - 디바이스 크기에 대응하는 이미지 사이즈 srcset - 파이어베이스 이미지 업로드 전 최적화 - image 프록시 - Lazy / Pre Loading 적용하기 2) 번들 사이즈 최적화 - cra-bundle-analyzer 전체 : 6.51MB sr..

🗼리팩토링 리뷰1 "index.html 정보를 관리하자" index.html You need to enable JavaScript to run this app. 이 태그의 의미는 자바스크립트를 활성화하지 않아서 활성화하라고 안내하는 태그이다. React에서도 index.html에서 해야할 일들이 있기 때문에 활성화를 해주어야 하며 보통 해야할 일들은 google analytics 와 같이 분석할 때도 index.html 에 코드를 넣어준다. 혹은 특정 페이지나 컴포넌트에서만 불러와야 할 스크립트가 있다면? React Helmet을 사용하면 된다. React Helmet은 정보를 동적으로 변경할 수 있게 해주는 라이브러리이다. 이 라이브러리를 사용하면 다른 컴포넌트에서 정보를 변경할 수 있다. 🗼리팩토링 ..