hyonie's Stack 👩🏻‍💻

[JavaScript] 반복되는 코드를 전역 공통 컴포넌트로 개선하기

웹 프로젝트를 진행하다 보면 메인 페이지, 이벤트 페이지 등 여러 화면에서 동일한 HTML 구조가 반복적으로 등장하는 경우가 많습니다. 이런 코드를 그대로 두면 유지보수가 어려워지고, 새로운 요구사항이 생겼을 때 모든 페이지를 수정해야 하는 불편함 이 생깁니다.이번 작업에서는 이러한 문제를 해결하기 위해, 반복되는 코드를 전역 자바스크립트 컴포넌트로 모듈화하여 공통으로 사용할 수 있도록 개선했습니다. 📂 목차 1. 전역 네임스페이스 패턴window.RentalComponents = window.RentalComponents || {};전역 변수 오염(Global Pollution) 방지.window 객체에 RentalComponents라는 네임스페이스를 정의하여 모든 함수를 이 안에 모아 관리이미 선..

회사 사이트의 웹페이지 품질을 측정하고 개선하기 위해 Google Lighthouse를 활용했습니다.최초 측정 결과 성능 점수 76점을 받았고, Lighthouse에서 제안한 개선 사항 중 일부를 적용하여 82점까지 끌어올릴 수 있었습니다. 이번 글에서는 구체적으로 어떤 부분을 개선했는지, 그리고 그 과정에서 어떤 점을 고려했는지 정리해보겠습니다. 📂 목차 1. Lighthouse에서 제안한 개선 항목Lighthouse는 웹페이지 성능 저하 요인으로 여러 항목을 제안했으며, 이 중 두 가지를 주요 개선 포인트로 선정했습니다. 이미지 요소에 width 및 height 속성이 명시되지 않음CSS 파일 최적화(축소 및 중복 제거 필요)이 두 가지는 단순해 보이지만 실제로는 CLS(Cumulative ..