카카오 지도를 띄우려고 하다보면, 위와 같은 에러메시지를 만날 수 있다.
어떻게 해결 할 수 있는지 알아보자.
이전에, 내가 어떻게 지도를 띄우는지 정리한 글을 포스팅 한적이 있다.
그 방식대로 완전히 따라 했다면, 위와 같은 에러가 생기지 않았겠지만, 여기서는 어떻게 해결하는지 알아보자.
원인
원인은 script가 완전히 로드 되기 전에 map 관련 메소드를 실행 시키려고 하기 때문에 생기는 에러이다.
kakao에서 제공하는 api script는 sdk.js가 모두 로드 된 이후, kakao.js라는 파일을 로드하게 되는데, kakao.js가 완전히 로드 되기 전에 kakao.js 안에 있는 함수를 호출하려고 하여 생기는 문제이다.
해결책
방법은 매우 간단하다. kakao에서 제공하는 load라는 메소드를 아래와 같은 방식으로 사용하면 된다.
useEffect(() => {
const mapScript = document.createElement('script');
mapScript.async = true;
mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_API_KEY}&autoload=false`;
document.head.appendChild(mapScript);
const onLoadKakaoMap = () => {
window.kakao.maps.load(() => {
const mapContainer = document.getElementById('map');
const mapOption = {
center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3, // 지도의 확대 레벨
};
new window.kakao.maps.Map(mapContainer, mapOption);
});
};
mapScript.addEventListener('load', onLoadKakaoMap);
}, []);
'NextJS' 카테고리의 다른 글
[Solved] useEffect 두번 실행 되는 문제 (strictMode) (0) | 2022.11.06 |
---|---|
[Solved] Property 'value' does not exist on type 'HTMLElement' (React Input Event Type) (1) | 2022.10.08 |
[NextJS] Next.JS에서 kakao map api 사용 (1) | 2022.10.01 |
[Nextjs] - tailwind 작동이 안될때(Error: Cannot find module 'tailwindcss') (0) | 2022.09.30 |
[NextJS - 7] Next.js - Edge? (1) | 2022.08.30 |