choijming21 님의 블로그

랜딩 페이지의 Lighthouse Performance 점수를 17점에서 60점까지 올린 최적화 과정을 공유합니다. 주요 개선 사항은 Hero 배너 최적화, 섹션 지연 로딩 적용, 서드파티 스크립트 최적화, 그리고 CLS 개선입니다. 항목BeforeAfter개선도Lighthouse Performance(mobile)17점65점+43점사용하지 않는 JavaScript956KiB693KiB-263KiB이미지 크기 최적화미적용적용-50KiB 배경과 목표📊 문제 상황랜딩 페이지 첫 진입 시 대용량 영상과 이미지가 모두 로드되어 Lighthouse 측정이 불가할 정도로 랜더링 속도가 매우 느림LCP(최대 콘텐츠 표시 시간) 지연 및 CLS(누적 레이아웃 이동) 발생Lighthouse Performance ..

데이터 검색 성능은 웹 애플리케이션의 사용자 경험에 직접적인 영향을 미치는 중요한 요소입니다. 특히 데이터 목록이 많아질수록 검색 알고리즘의 효율성이 더욱 중요해집니다. 이 글에서는 JavaScript에서 배열의 includes() 메서드와 Set 객체의 has() 메서드의 차이점을 살펴보고, 실제 사용 사례를 통해 성능 최적화 방법을 알아보겠습니다. ✅ 배열과 Set의 기본 개념 ☑️ 배열(Array)배열은 JavaScript에서 가장 기본적인 자료구조로, 여러 값을 순서대로 저장합니다. 배열에서 특정 값을 찾을 때는 주로 includes() 메서드를 사용합니다.const favorites = ["BTC", "ETH", "XRP"];console.log(favorites.includes("BTC"..