프론트엔드 개발자 엄성준

이전에 WiniLogis의 메인 페이지 성능을 개선하기 위해 Google Lighthouse를 사용하여 Core Web Vitals 점수를 체크한 적이 있습니다. 이 과정에서 지적받은 주요 문제 중 하나는 현재 페이지에서 사용 중인 PNG와 JPG 이미지들을 차세대 이미지 포맷으로 교체하라는 것이었습니다.이 문제를 해결하기 위해 여러 블로그와 자료를 참고하면서 HTML의 태그에 대해 알게 되었고, 이를 적용하게 되었습니다. 태그를 활용하면, WebP 형식을 지원하지 않는 브라우저에서는 기존의 PNG나 JPG 이미지를 표시할 수 있으며, WebP를 지원하는 브라우저에서는 요소를 통해 WebP 이미지를 로드할 수 있습니다. 이 방법을 통해 페이지 성능을 개선하고, 다양한 브라우저 환경에서도 최적화된 이미..

AuctionWini Seller 사이트의 메인 페이지에서 사용된 Slider는 데이터를 map 함수로 반복 처리하여 1px씩 동적으로 계속 움직이는 방식으로 구현되어 있었습니다. 이러한 방식으로 구현된 Slider는 초기 로드 시 많은 자원을 소모하여 페이지 로딩 시간이 길어졌습니다. 이로 인해 사용자 경험이 저하되었고, Google Lighthouse 평가에서도 성능 점수가 낮게 나오는 문제가 발생했습니다.이 문제를 해결하기 위해 React-Swiper를 도입하여 Slider 문제를 개선했습니다.React-Swiper로 교체 전React-Swiper로 교체 후React-Swiper Code {5 {data.map((carInfo) => { return (..