Window.kakao undefined

지도/로컬 API
1

nextjs , typescript 활용 했습니다.

layout.tsx 에는 아래 코드를 적용 하였습니다
html lang=“en” className={GeistSans.className}>

<Script
src=“https://dapi.kakao.com/v2/maps/sdk.js?appkey=“내키”&libraries=services,clusterer”
strategy=“afterInteractive” />
{children}

TopMenu.tsx에는 아래 코드를 적용 하였습니다.

declare global {
interface Window {
kakao: any;
}
}
const { kakao } = window; 여기 값은 잘 나옵니다
const geocoder = new kakao.maps.services.Geocoder();

kakao.maps.services: undefined
Cannot read properties of undefined (reading ‘Geocoder’) 나옵니다 어떻게 해결 해야하나요?

2

스크립트가 모두 다운로드된 이후 객체에 접근을 해야 하는데 그전에 객체에 접근을 해서 난 오류로 보입니다.
그리고 SDK는 내부에서 스크립트를 추가하는 부분이 있어서 next/script를 사용하면 script태그 관련 warning 문구가 보일 수 있기 때문에 아래 1번 방법 보단 스크립트를 클라이언트에서 동적으로 호출하는 방법을 추천드립니다.
두 방법을 적용해서 확인해 주세요.

  1. 일반 스크립트 태그로 sdk를 호출
    <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=앱키&libraries=services,clusterer"></script>

  2. useEffect 훅에서 동적으로 스크립트를 로드한 후 sdk가 모두 다운로드되면 객체 생성하는 방법

import { useEffect, useRef } from 'react';
export default function KakaoMap() {
    const container = useRef();
    useEffect(() => {
        const script = document.createElement('script');
        script.src = "https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=앱키&libraries=services,clusterer";
        document.head.appendChild(script);

            script.onload = () => {
                kakao.maps.load(function() {
                    const mapContainer = document.getElementById('map');
                    const mapOption = {
                        center: new kakao.maps.LatLng(33.450701, 126.570667),
                        level: 3
                    };

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

                   // geocorder 객체 생성합니다.
                    const geocorder = new kakao.maps.services.Geocoder();
                    console.log(geocorder);
            });
        };

    }, [container]);

  return (
    <div id="map" style={{width: '100%', height: '600px'}} ref={container}></div>
  )
}