새로고침시 지도 못 불러옴, hard reload 시 지도 잘 불러옴, 에러 발생 없음

지도/로컬 API
1
  • kakao.map.Maps API로 생성된 지도입니다
  • 최초 로드, 혹은 Hard reload (cmd + shift + r) 하면 지도가 무조건 불러와지지만, 일반 reload (cmd + r) 했을 때 지도가 불러와지지 않습니다
  • 일반 reload 시도시, 개발자 도구 > Network 탭을 보면, hard reload 시도시와는 달리, kakao 쪽에서 아무 데이터가 내려오지 않고 있습니다 (지도를 구성하는 .png 파일들 및 sdk.js 파일 불러오지 않음)
  • 테스트 가능한 url은 dev.pkme.io/jb 이고, 최하단에 지도가 있습니다.
  • 참고로, 해당 페이지는 Next.js Static Site Generation으로 만들어져 있습니다.
2

페이지가 매번 동일하게 동작하지 않고 간헐적으로 지도가 보이지 않는 문제가 있네요.
보이지 않을 때 일반/강제 새로고침 상관없이 새로고침을 하면 이후에는 지도가 계속 뜨고 있는 걸로 확인했습니다.

우선 지도가 보이지 않을 때 개발자 도구 > sources 탭 > dapi.kakao.com 을 열어보면 sdk.js는 다운된 걸로 보이고
지도를 생성하지 않아 타일 이미지를 호출하지 않은 것으로 보입니다.
지도가 보이지 않을 때, 개발자 도구 콘솔창에서 아래 코드를 실행하면 지도 영역에 지도가 표시되고 있습니다.

kakao.maps.load(() => { 
    let mapContainer = document.getElementById('react-kakao-maps-sdk-map-container'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

    // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
    let map = new kakao.maps.Map(mapContainer, mapOption)
})

스크립트가 로드된 시점과 지도를 생성하는 시점이 차이로 지도가 표시되지 않는걸로 추측됩니다.

autoload=false을 사용해서 동적으로 스크립트를 로드하는 경우,
스크립트가 모두 다운로드된 이후 지도를 생성할 수 있도록 kakao.maps.load 콜백 함수에서 지도를 생성해주셔야 합니다.
코드도 함께 확인해 주세요.

https://apis.map.kakao.com/web/documentation/#load_load

3

autoload=false 옵션을 제거하고, 불필요한 defer 옵션을 제거함으로써 해결했습니다. 감사합니다.

1개의 좋아요