React Kakao Maps 구현시 Cannot read property ‘Geocoder’ of undefined 오류

지도/로컬 API
#1

React JS 환경에서 지도를 이용한 주소검색 기능을 사용하기 위해 아래와 같이 구현했고,

  1. 지도 및 마커는 정상적으로 출력됩니다.
  2. 주소검색을 위해 kakao.maps.services.Geocoder() 호출시 오류가 발생합니다. (Cannot read property ‘Geocoder’ of undefined)
  3. DevTalk 에서 유사한 이슈들을 참고하여 수정하였으나, services 라이브러리가 적용되지 않습니다.

---------- index.html -------------
…
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=********&​libraries=services&autoload=false"></script>
…

--------- MapContainer.js ----------
…

useEffect(() => {
    
    kakao.maps.load(() => {
        const container = document.getElementById('myMap');
        const options = {
            center: new kakao.maps.LatLng(33.450701, 126.570667),
            level: 3
        };
        const map = new kakao.maps.Map(container, options);
        
        var marker = new kakao.maps.Marker({
            map: map,
            position: new kakao.maps.LatLng(33.450701, 126.570667)
        });
        

        var services = kakao.maps.services;
        if(!services) {
            console.log('kakao.maps.services 를 찾을 수 없음 :', kakao.maps);
            return;
        }
        else {
            var geocoder = services.Geocoder();
            
            var callback = function(result, status) {
                if (status === kakao.maps.services.Status.OK) {
                    console.log(result);

                }
            };
            
            geocoder.addressSearch(props.address, callback);
        }
    });

}, []);

…

실행결과 : kakao.maps.services 를 찾을 수 없음 (지도와 마커만 출력 됨)

#2

위 스크립트에 공백이 있어 라이브러리를 불러오지 못했습니다.
libraries 앞 &연산자 사이에 공백이 있었어요.
아래와 같이 스크립트 import를 해주세요.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=Javascript Key&libraries=services&autoload=false"></script>
#3

실제 코드에서는 한줄이고 공백도 없는데 여기에 글 작성할때 코드샘플 붙여넣기로 하니깐 작은따옴표가 나타나면서 저렇게 표시 됩니다. devTalk 의 버그인 것 같습니다.

#4

먼저 제가 첨부한 스크립트로 import해서 동작 확인해보셨나요?
첨부주신 스크립트에 보이지 않는 공백이 존재했어요.
그대로 복사해서 설명드린대로 연산자 사이에 backspace로 지워보면 확인하실 수 있습니다.

2개의 좋아요
#5

와우! 감사합니다! 정말 너비를 차지하지 않는 특수공백 문자열(https://www.fileformat.info/info/unicode/char/200b/index.htm)이 존재했군요;;;

1개의 좋아요