여러 페이지에서 맵을 쓰다보니 웹팩으로 묶어 로드해보고자 했습니다.
const script = document.createElement('script');
script.src = '//dapi.kakao.com/v2/maps/sdk.js?libraries=services&autoload=false&appKey=JAVASCRIPT_KEY';
script.onload = function () {
kakao.maps.load(function () {
const options = {
center: new kakao.maps.LatLng(35.9277705078779, 127.56556337921758),
level: 14
};
const map = new kakao.maps.Map(document.getElementById('map'), options);
map.addControl(new kakao.maps.ZoomControl(), kakao.maps.ControlPosition.RIGHT);
const geoCoder = new kakao.maps.services.Geocoder();
geoCoder.addressSearch('테스트', function (result, status) {
if (status === kakao.maps.services.Status.OK) {
const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
console.log(coords);
}
});
});
};
이렇게 동적으로 스크립트를 로드한 경우 services.js에서 정상적으로 앱키를 불러오지 못했습니다.
그 상태에서 Geocoder 객체를 생성했고 요청헤더에 앱키가 없는 상태(undefined)로 삽입됩니다.
Authorization: KakaoAK undefined
401 Unauthorized
{
errorType: “AccessDeniedError”,
message: “wrong appKey(undefined) format”
}
html에 직접 스크립트 링크를 넣으면 이 에러가 나타나지 않았습니다.
혹시 이 외에 해결방법 없을까요?