TypeError: Cannot read properties of undefined (reading 'Geocoder')

 

 

nextjs에서 주소를 좌표로 변환하기 위해 지오코더 서비스를 사용하려고 하였고, Geocoder를 찾을 수 없다는 오류가 발생했다.

script 에 &libraries=services 는 이미 추가한 상태였고, 어디 부분이 문제인지 찾기 어려웠다.

* libraries=services 장소 검색과 주소-좌표 변환을 할수있는 services 라이브러리(src url sdk 뒤에 사용할 라이브러리를 불러 올 수 있음)

* strategy : 웹 성능 최적화를 도와줄 Next.js의 strategy 속성, beforeInteractive로 값을 넣어주면 어떠한 코드보다도 먼저 script를 로드하게 도와줌

(기본값은 afterInteractive로 script가 빠르게 로딩 되지만 다른 페이지에 있는 코드가 먼저 실행될 수 있음)

<Script src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.KAKAO_KEY}&autoload=false&libraries=services`}
        strategy="beforeInteractive"
/>

 

 

기존코드

 useEffect(() => {
      const geocoder = new window.kakao.maps.services.Geocoder();
  }, []);

 

 

수정코드

src url 뒤에 추가해줬던 autoload와 연관이 있었다.

script를 동적으로 로드하게 되면 로드가 다 끝나기도 전에 kakao api를 불러오는 코드가 먼저 실행 될 수 있기 때문에 autoload=false를 추가해 자동으로 로드 되는 것을 꺼준다. 그리고 코드 실행 부분에서 load 메서드를 사용한다.

window.kakao.maps.load 콜백함수로 감싸주어 카카오 맵 SDK 가 로드가 다 되고난 후 실행되도록 처리해주니 지오코더 오류가 더이상 발생하지 않고 서비스 라이브러리를 정상적으로 사용할 수 있게 되었다.

 useEffect(() => {
    window.kakao.maps.load(() => {
      const geocoder = new window.kakao.maps.services.Geocoder();
    });
  }, []);

 

 

느낀점

지난번에는 sdk 없이 리액트에서 카카오맵api 를 사용했었고 이번에는 next.js 에서 sdk 를 활용해서 지도를 불러왔다.

환경이 조금 바뀌다보니 어떻게 다뤄야할지 헷갈렸었고, 왜 오류가 발생하는지 이해하지 못했다.

그러다가 src에 아무생각없이 추가해줬던 코드들을 차근차근 뜯어보니 왜 오류가 발생했는지, 어떻게 해결해야하는지 이해하면서 해결 할 수 있었던 것 같다.