전에 했던 프로젝트에서는 react+typescript로만 카카오 지도 API와 연결을 해보았는데
이번 프로젝트에서는 next.js에서 카카오 지도 API를 사용하게 되었다.
next로는 처음 사용해보니까 이것 저것 찾아보면서 했는데
https://velog.io/@mogulist/use-nextjs-with-kakao-map-declaratively
여기에 나온 방법처럼
// KakaoMap.tsx
import Script from "next/script";
import { Map } from "react-kakao-maps-sdk";
const KAKAO_SDK_URL = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_KEY}&autoload=false`;
interface Position {
latitude: number;
longitude: number;
}
const KakaoMap = ({ latitude, longitude }: Position) => {
return (
<>
<Script src={KAKAO_SDK_URL} strategy="beforeInteractive" />
<Map
center={{ lat: latitude, lng: longitude }}
level={5}
style={{ width: "100%", height: "100%" }}
></Map>
</>
);
};
export default KakaoMap;이 방식으로 코드를 작성했더니
이런식으로 해당 페이지에 처음 접속할때는 흰화면만 떠서 새로고침을 해야지만 지도가 로딩되는 문제가 발생했었다.
지도 api 사용할 때 흰 화면이 뜨는건 전에 사용해볼때도 경험했던 흔히 발생하는 문제라 검색하면 해결방법은 꽤 많이 나왔지만 custom marker를 사용한 내 코드에는 다 적용이 되지 않았다....
custom marker는 무조건 <Map> 컴포넌트 안에 있어야 해서 <div id="map"> 방식을 사용한 코드는 아예 적용이 되지 않았고 useEffect()도 방식도 해결해주지 못했다....
며칠동안 고민을 했었는데 진짜 생각보다 간단하게 갑자기 에러를 읭? 하고 고쳐버렸다~
https://mycodings.fly.dev/blog/2023-06-26-howto-nextjs-react-kakao-map-api
여기에서 말해준것처럼 _document.tsx 파일에 script 코드를 추가해주면 된다
// _document.tsx
import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Script
strategy="beforeInteractive"
src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_KEY}&libraries=services&autoload=false`}
></Script>
<Main />
<NextScript />
</body>
</Html>
);
}
분명 이 방법을 전에 사용했었는데 이 방법을 사용할때는 useEffect() 를 사용해서 만들었었다. 근데 useEffect()는 div id를 map으로 해야했기에 여러 방법을 고민해보다가 _document.tsx 내용을 그대로 냅두고 처음으로 되돌아가서 KakaoMap.tsx 내용을
// KakaoMap.tsx
import Script from "next/script";
import { Map } from "react-kakao-maps-sdk";
const KAKAO_SDK_URL = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_KEY}&autoload=false`;
interface Position {
latitude: number;
longitude: number;
}
const KakaoMap = ({ latitude, longitude }: Position) => {
return (
<>
<Script src={KAKAO_SDK_URL} strategy="beforeInteractive" />
<Map
center={{ lat: latitude, lng: longitude }}
level={5}
style={{ width: "100%", height: "100%" }}
></Map>
</>
);
};
export default KakaoMap;이걸로 되돌렸는데 성공했다.
여기에 script를 생성한게 문제였던것 같다.
그래서 저 코드에서 script를 다 삭제하고
// KakaoMap.tsx
import { Map } from "react-kakao-maps-sdk";
import { ReactNode } from "react";
interface Position {
latitude: number;
longitude: number;
children: ReactNode;
}
const KakaoMap = ({ latitude, longitude, children }: Position) => {
return (
<Map
center={{ lat: latitude, lng: longitude }}
level={5}
style={{ width: "100%", height: "100%" }}
>
{children}
</Map>
);
};
export default KakaoMap;
순수하게 이 내용만 적어줬더니 문제가 해결되었다.
나의 오류 해결과정기를 다 적고 나서 발견했는데
https://react-kakao-maps-sdk.jaeseokim.dev/docs/setup/next
react kakao maps sdk / next.js example에서 정말 정확히 내가 말한 이 방법을 사용하고 있다.
공식문서를 잘 확인하자 ^^
