항공권 최저가 서비스의 지도 기능에서 Google Maps API의 레이지 로딩을 활용한 성능 최적화 전략

[collie-jun]

< 해당 논제의 필요성 >

구글 리서치 자료에 따르면 모바일 웹 사이트의 로딩 시간이 3초 이상일 때 32%, 5초 이상은 90%, 6초 이상은 106% 마지막으로 10초가 넘으면 123%의 이탈률이 발생한다고 합니다.
Google map api를 사용하는 경우, 고도의 데이터 처리와 시각적 렌더링을 수반하기 때문에 성능 저하로 이어질 가능성이 있습니다. 방대한 지도 데이터와 상호작용이 필요하기 때문에 불필요한 데이터 로딩을 최소화 하고, 사용자가 필요로 하는 정보를 신속하게 제공하기 위한 전략이 필수적입니다.
저는 Google map api 를 사용한 지도 기능에서 레이지 로딩을 적용하여 성능을 최적화 하기 위한 방법을 탐구하고 사용자가 더 빠르고 편리하다고 느끼는 환경을 조성해보고자 합니다.

< 초기 Google Map api 을 통한 지도 생성 방식 >

2024.09.05 버전임을 명시합니다.

Google Maps API를 사용하여 지도를 적용한 페이지가 어떻게 로드되고 렌더링되는지 알아보겠습니다.

import SearchResultsPopup from '../../components/mapPage/searchResultsPopup.js';

{markers.length > 0 && markers.map((marker, index) => (
  <Marker 
    key={index} 
    position={marker.position} 
    onClick={() => handleMarkerClick(marker)}
  />
))}

{selectedPlace && (
  <InfoWindow
    position={selectedPlace.position}
    onCloseClick={handleInfoWindowClose}
  >
    <InfoWindowContent>
      <h3>{selectedPlace.name}</h3>
      <p>{selectedPlace.address}</p>
      <a 
        href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(selectedPlace.name)}`} 
        target="_blank" 
        rel="noopener noreferrer"
      >
        Google Maps에서 열기
      </a>
    </InfoWindowContent>
  </InfoWindow>
)}

[startupcodekr]

본인 프로젝트 시나리오와 관련성이 보이지 않습니다

[collie-jun]

변경했습니다