38리터와 함께하는 세계여행

안녕하세요.

nextjs에서 카카오맵을 어떻게 띄우는지 알아봐요
카카오 지도 API 가이드 그대로하면 안돼요

이유1 : html에서의 로드 방법이기 때문이에요
이유2 : window.kakao.maps.LatLng is not a constructor 오류 나와요.
            왜냐! 9번째줄에 kakao.maps.load를 호출하고 있는데요. 이게 스크립트 로드되기 전에 호출되니까 에러뱉어요
            그래서 스크립트 로드가 다 되고나서~ kakao.maps.load 함수를 호출하게끔 스크립트 주소 끝에 &autoload=false를 붙여줘야 해요. 그럼 호출 끝~

export default function FFF() {
useEffect(()=>{
        const script = document.createElement("script");
        script.async = true;
        script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=당신의AppKey&autoload=false`;
        document.head.appendChild(script);

        script.addEventListener("load", ()=>{
          window.kakao.maps.load(() => {
            const mapContainer = document.getElementById("map");
            const mapOption = {
              center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
              level: 8, // 지도의 확대 레벨
            };
            new window.kakao.maps.Map(mapContainer, mapOption);
          })
        });
    },[])
    
    return (
    <>
    <div id="map">
    //카카오맵이 들어갈 곳
    </div>
    </>
  	)
}