개인적으로 진행하고 있는 프로젝트에 지도를 활용하고자 Kakao Developers 에서 제공하는 Maps API 를 공부하고 사용해 보았습니다.
Start 를 누르면 이동되는 Guide 페이지의 준비하기 단계를 마치고 진행하시면 됩니다 ❗❗❗
차근차근 상세하게 설명되어 있기 때문에 잘 따라하기만 하면 되는데, 문제는 제 프로젝트는 typescript 와 Next.js 를 사용하고 있기 때문에, 이 환경에 맞게 잘 옮겨(?) 주어야 합니다. Pages Router 를 사용하여 진행하고 있고, Pages 하위에 Kakao-map 폴더를 생성하여 진행 하였습니다.
📦pages
┣ 📂kakao-map
┃ ┗ 📜index.tsx
┣ 📜index.tsx
┣ 📜_app.tsx
┗ 📜_document.tsx
➡️ 지도를 담을 영역 만들기
// pages/kakao-map/index.tsx
return (
<>
<div id="map" style={{ width: '100%', height: '400px' }}></div>
</>
);
// id 는 map 이고, 스타일이 지정된 <div> 태그 선언합니다.➡️ 실제 지도를 그리는 Javascript API 불러오기
// pages/_document.tsx
export default function Document() {
return (
<Html lang="ko">
<Head>
<Script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
// 발급받은 본인의 APP KEY와 함께 Next.js 의 Script 컴포넌트를 추가 해주었습니다.➡️ 지도를 띄우는 코드 작성
// pages/kakao-map/index.tsx
const KakaoMap: React.FC = () => {
useEffect(() => {
let container = document.getElementById('map');
let options = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // Cannot find name 'kakao'.ts(2304)
level: 3,
};
let map = new kakao.maps.Map(container, options); // Cannot find name 'kakao'.ts(2304)
}, []);
return (
<>
<div id="map" style={{ width: '100%', height: '400px' }}></div>
</>
);
};
여기서 에러가 발생하는데, typescript 에서 kakao 라는 객체를 찾을 수 없어 발생합니다. 따라서 다음 코드를 추가 해줍니다.
// pages/kakao-map/index.tsx
declare global {
interface Window {
kakao: any;
}
}
// 전역 객체인 window에 새로운 속성인 kakao를 추가한 코드 입니다. 그 다음, kakao 를 window.kakao 로 바꾸어 주면 됩니다.
그리고 실행하면, 위와 같은 에러를 마주하게 되는데, 이것은 <Script ... /> 컴포넌트 보다 useEffect 가 먼저 실행되어 maps 프로퍼티를 찾을 수 없기 때문에 발생하는 에러입니다. 해결하기 위해서 kakao.maps.load(callback) 의 설명을 참조하여 다음과 같이 코드를 수정하였습니다.
// pages/_document.tsx
<Script
type="text/javascript"
strategy="beforeInteractive" // 이 부분도 추가해주어야 함 !!!
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY&autoload=false"
/>
// pages/kakao-map/index.tsx
useEffect(() => {
window.kakao.maps.load(() => {
let container = document.getElementById('map');
let options = {
center: new window.kakao.maps.LatLng(33.450701, 126.570667),
level: 3,
};
let map = new window.kakao.maps.Map(container, options);
});
}, []);결과적으로 화면에 지도가 잘 나타나는 것을 확인할 수 있었고, 다음에는 원하는 위치에 막대기(?) 를 세워 보도록 할 예정입니다.
