현재 NEXT.js로 작업중이고 TypeScript는 사용하지 않으며 Vercel에 호스팅 중입니다.
아래 링크의 카카오맵 SDK를 참고하여 코딩하고 있습니다.
https://react-kakao-maps-sdk.jaeseokim.dev/docs/setup/next
vs코드 로컬호스트 작업중에는 지도가 뜨는데 vercel에 호스팅하면 지도가 보이지 않습니다.(사진 왼쪽 로컬호스트, 오른쪽 vercel)
Script에 strategy=“beforeInteractive” 속성을 적용하였고 src 끝에 autoload=false도 적용하였으나 호스팅에서 지도가 보이지 않는데 구글링을 해봐도 어떻게 문제 해결을 해야할지 모르겠습니다.
-app.js
import firebase from “…/firebase”;
import Nav from “…/components/Nav”;
import Footer from “…/components/Footer”;
import Script from “next/script”;
import “…/styles/globals.css”;
function MyApp({ Component, pageProps }) {
return (
<>
<Script
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services,clusterer&autoload=false"
strategy="beforeInteractive"
/>
<Nav />
<Component {...pageProps} />
<Footer />
</>
);
}
export default MyApp;
test.js
import { Map, MapMarker } from “react-kakao-maps-sdk”;
function Test() {
return (
<>
<h1>위</h1>
<Map
center={{ lat: 33.5563, lng: 126.79581 }}
style={{ width: "100%", height: "360px" }}
>
<MapMarker position={{ lat: 33.55635, lng: 126.795841 }}>
<div style={{ color: "#000" }}>Hello World!</div>
</MapMarker>
</Map>
<h1>아래</h1>
</>
);
}
export default Test;
SDK예제를 거의 수정하지 않는 선에서 코딩하고 있습니다.
SDK링크의 코드와 제 코드의 다른 점은 _app.js에서 firebase를 import하는 것과 test.js에서 영역 확인을 위해 위,아래 텍스트를 넣은 것 입니다.
또한,
< ZoomControl position={kakao.maps.ControlPosition.TOPRIGHT} />
와 같이 kakao가 들어가는 코드는 로컬호스트에서 kakao is not defined 이슈가 뜹니다. 이 부분도 답변해주시면 감사 드리겠습니다.
긴 글 읽어주셔서 감사합니다.
현재 버전
“firebase”: “^9.6.11”,
“next”: “12.1.5”,
“react”: “18.0.0”,