카카오 MAP API 사용하기
준비하기
- 카카오 개발자사이트 (https://developers.kakao.com) 접속
- 개발자 등록 및 앱 생성
- 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록
- 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록 (예: http://localhost:8080)
- 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용
- 앱 실행
지도담을 영역만들기
<div id="map" style="width:500px;height:400px;"></div>실제 지도를 그리는 Javascript API를 불러오기
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>react에서 적용하기
import Head from "next/head";
import { useEffect } from "react";
declare const window: typeof globalThis & {
kakao: any;
};
export default function KaKaoMapPage() {
// DidMount로 작성해주기
useEffect(() => {
const container = document.getElementById("map"); // 지도를 담을 영역의 DOM 레퍼런스
const options = {
// 지도를 생성할 때 필요한 기본 옵션
center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표.
level: 3, // 지도의 레벨(확대, 축소 정도)
};
const map = new window.kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴
console.log(map);
}, []);
return (
<>
<Head>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a13f1df4b7399e01e242ffdb37af500a"
></script>
</Head>
<div id="map" style={{ width: "500px", height: "400px" }}></div>
</>
);
}
JSX에는 head태그가 없기 때문에 next에서 제공하는 Head를 import해서 사용하면 저절로 head의 script로 인식해서 실행시켜준다.
하지만, 이렇게 실행시키다보면 지도가 뜨다 안뜨다 하는 현상이 발생하게 된다.
💡 SPA vs MPA
- Single Page Application : 요즘의 대부분 사이트들은 SPA로 만들어졌으며 속도가 빠르다. 새롭게 html, css, js를 다운로드 받아서 사용하는 형태가 아니라 부분 부분 잘라서 일부내용만 변경하면서 보여주는 식.
- Multi Page Application : 예전에는 대부분 MPA로 만들어졌고, 페이지 이동할 때마다 다운로드 받기 때문에 속도가 느리다.(ex.워드프레스로 제작된 사이트)
미리 다운로드 받아서 사용할 수 있도록 변경해보기!
1. _app.tsx 에서 설정해주기
모든 페이지에서 카카오맵을 다운로드 받으므로 비효율이다.
2. 화면에 load
import Head from "next/head";
import { useEffect } from "react";
declare const window: typeof globalThis & {
kakao: any;
};
export default function KaKaoMapPage() {
// DidMount로 작성해주기
useEffect(() => {
const script = document.createElement("script"); // <script></script>
script.src =
"//dapi.kakao.com/v2/maps/sdk.js?appkey=a13f1df4b7399e01e242ffdb37af500a";
// 쿼리 스트링 : 주소 자체에다가 ?(물음표)를 통해 넘기는 방법을 사용해서 작성되는 쿼리
document.head.appendChild(script);
script.onload = () => {
// 스크립트 태그가 load가 다 되면, 카카오 맵을 그려주겠다!
window.kakao.maps.load(function () {
// 카카오 맵이 다 load가 된 다음에 화면에 뿌려주기!
const container = document.getElementById("map"); // 지도를 담을 영역의 DOM 레퍼런스
const options = {
// 지도를 생성할 때 필요한 기본 옵션
center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표.
level: 3, // 지도의 레벨(확대, 축소 정도)
};
const map = new window.kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴
console.log(map);
});
};
}, []);
return (
<>
{/* <Head>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a13f1df4b7399e01e242ffdb37af500a"
></script>
</Head> */}
<div id="map" style={{ width: "500px", height: "400px" }}></div>
</>
);
}
차곡차곡 쌓는 몌으니 개발노트