React.js
[프로젝트] 포토프로젝트 Kakao map 이슈
furaha
2023. 11. 5. 17:59
반응형
미니 프로젝트인 포토프로젝트를 진행하면서 겪었던 2가지 이슈에 대해 적고자 한다.
1. Kakao map
index.html head 에 카카오맵 스크립트를 삽입하고
컴포넌트에 옵션들과 함께 #map 에 지도와 마커를 생성해주었다.
오류 1) 그런데 kakao 와 kakao.map 객체를 찾지 못하는 오류가 발생했다. index.html 의 스크립트를 로드하지 못하는 상황
주로 스크립트를 불러오는 상황에서 비동기적으로 처리할 때 이슈가 발생하는 것 같다. 스크립트가 완전히 로드되기 전에 코드가 실행되어서 오류가 나는 것이다.
해결책 1) useEffect 를 사용해서 스크립트 로딩을 시키고 로딩 후에 지도 생성하는 함수 실행 (순서가 보장되게끔)
useEffect(() => {
const script = document.createElement("script");
script.async = true;
script.src = "//dapi.kakao.com/v2/maps/sdk.js?appkey=키값&autoload=false";
script.onload = () => {
mapscript();
};
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}, []);
해결책 2) 타입 오류의 경우는 Kakao.maps.d.ts 라이브러리를 설치해주어도 된다.
오류 2) mapscript() 안의 메소드인 kakao.maps.LatLng is not a constructor 오류 발생
스크립트 로딩이 끝나기 전에 객체에 접근을 하기 때문에 오류가 생겼다.
해결책 1) 스크립트에 autoload=false 를 넣어주고, Load() 메서드를 사용해서 스크립트 로딩이 끝난 후에 객체에 접근하도록
반응형