Cannot read properties of undefined (reading 'Geocoder') 문의 드립니다

지도/로컬 API
1

안녕하세요
nextjs, 타입스크립트 사용 하고 있습니다.

동적으로
useEffect(() => {

if (typeof window !== 'undefined') {

  const script = document.createElement('script');
  script.src = 'https://dapi.kakao.com/v2/maps/sdk.js?appkey=''내키"&libraries=services,clusterer';
  document.head.appendChild(script);

 
  script.onload = () => {
    const { kakao } = window;
    console.log(kakao.maps.services);
    if (kakao && kakao.maps) {
      const geocoder = new kakao.maps.services.Geocoder();
      const coord = new kakao.maps.LatLng(latitude, longitude);

      geocoder.coord2Address(coord.getLng(), coord.getLat(), (result: ResultItem[], status: string) => {
        if (status === kakao.maps.services.Status.OK) {
          const adr = result[0].address.region_2depth_name;
          setAddr(adr);
          console.log("Address:", adr);
        } else {
          console.log("Geocoding failed:", status);
        }
      });
    }
  };

}

}, [latitude, longitude]);
적용을 하였고

console.log(kakao.maps); 잘 출력 되는 것 같습니다 일부는 제가 지워놨습니다
{
“onloadcallbacks”: ,
“readyState”: 2,
“URI_FUNC”: {},
“VERSION”: {
“ROADMAP_SUFFIX”: “”,
“SKYVIEW_VERSION”: “160114”,
“SKYVIEW_HD_VERSION”: “160107”
},
“RESOURCE_PATH”: {
“ROADVIEW_AJAX”: “/7/roadview.js”,
“ROADVIEW_CSS”: “/adview.js”
},
“apikey”: “7”,
“version”: “4.4.19”
}

console.log(kakao.maps.services);
출력 되는게 아무것도 없습니다.

Cannot read properties of undefined (reading ‘Geocoder’) 에러 출력 됩니다.
도움 요청 드립니다.

2

동적으로 스크립트를 로드하려면 스크립트 파라미터에 autoload=false 옵션을 사용한 다음
kakao.maps.load 콜백 함수에서 객체를 생성해야 합니다.
그리고 src 선언부에 싱글 쿼테이션, 더블쿼테이션 사용이 맞지 않아보이는데
아래 코드와 문서 참고해서 다시 확인 부탁드립니다.
https://apis.map.kakao.com/web/documentation/#load_load

script.src='https://dapi.kakao.com/v2/maps/sdk.js?appkey=앱키&autoload=false&libraries=services,clusterer';

script.onload = () => {
    kakao.maps.load(function() {
        const geocoder = new kakao.maps.services.Geocoder();
        const coord = new kakao.maps.LatLng(33.450701, 126.570667);

        geocoder.coord2Address(coord.getLng(), coord.getLat(), (result, status) => {
            if (status === kakao.maps.services.Status.OK) {
            const adr = result[0].address.region_2depth_name;
            // setAddr(adr);
            console.log("Address:", adr);
            } else {
            console.log("Geocoding failed:", status);
            }
        });
    });
}