[Error] 카카오 맵 동적 로딩

문제 발생

코드를 작성하면서 api Key를 가져오면서 문제가 발생했다.
깃 허브에 올릴려면 api Key를 노출 시키면 안돼서 따로 보관해야되는데, 그것을 가져올 수가 없어서 진땀을 뺐다.
가져오지 못한 이유는 apiKey.js에 key가 보관되어 있는데 카카오 맵 로딩도 스크립트로 로딩하기 때문에 config.apiKey를 못쓰기 때문..

<script src="apiKey.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=내 앱 키"></script>

이것을 해결하기 위해서 아래 코드를 썼는데 자꾸 kakao를 찾을 수 없다는 오류가 떴다.
콘솔에 찍어서 잘 되는 것을 확인했는데도 작동이 안되었음..

<script>
    const apiKey = config.apikey;
    const script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "//dapi.kakao.com/v2/maps/sdk.js?appkey=" + apiKey + "&libraries=services";
    document.body.appendChild(script);
</script>

kakao를 찾을 수 없다는 것은 kakaoMap API를 사용할때 쓰는 생성자 때문에 일어남
이걸 찾을 수 없다는거면 스크립트에 제대로 로드가 안됐다는데 과연 뭘까...

center: new kakao.maps.LatLng(33.450701, 126.570667)

원인

원인은 kakaoMap Api를 사용하는 스크립트가 로드되기 전에 그 밑에 있는 코드인 new kakao.map.LatLng이 실행되기 때문이었다...
스크립트 로딩이 끝나기 전에 v3 객체에 접근하려고 했기 때문..😓
난 죽었다 깨어나도 원인이 왜 그런지 못 찾았겠지만 멘토님이 찾아주셨다 멘토님 감사합니다..

kakao Map API 공식 사이트를 보면 해결 방법이 나와있다.
https://apis.map.kakao.com/web/documentation/#load_load

해결 방법

스크립트를 동적으로 로드하게끔 해야한다.
그럴려면 우선 v3 로딩 스크립트 주소에 autolad=false를 지정해주어야한다.

<script type="text/javascript" src="http://dapi.kakao.com/v2/maps/sdk.js?autoload=false"></script>

또한 v3가 로드 된 후 콜백 함수가 실행되게 끔 코드를 짜야한다.
geoFindMe()는 kakaoMap 객체를 사용하여 현재 위치 및 주소를 반환하는 함수이다.

<script>
    const apiKey = config.apikey;
	...
    script.onload = function () {
        geoFindMe();
    };
    document.body.appendChild(script);
</script>

그리고 geoFindMe에도 kakao.maps.load()를 추가한다.

kakao.maps.load() : 스크립트 로딩이 된 후 안에 있는 코드들이 실행된다.

kakao.maps.load(() => {
            let address = document.querySelector(".myAddress");
  			...
                    }
        });

이렇게 코드를 작성하면 잘 동작하는 것을 확인할 수 있다.

함수만 비동기 이슈 신경써야되는 줄 알았는데 스크립트까지 비동기를 생각해야된다니 프론트 엄청 어려운 것 같다..