API 키 발급
https://apis.map.kakao.com/web/ 이 곳에서 따라하면 된다.
카카오 아이디로 로그인 후,
이름 입력하고 가입하고,
https://developers.kakao.com/console/app 에서 새로운 앱을 등록하면
API가 뚝딱 나온다.
도메인 등록
https://developers.kakao.com/console/app 에서 발급받은
JavaScript 키가 리액트에 사용된다.
https://developers.kakao.com/console/app 의 좌측 메뉴에서 '플랫폼'을 선택한다.
'Android', 'iOS', 'Web'이 있다. 'Web'에 http://localhost:3000를 등록해준다.
리액트에 적용(.env)
https://apis.map.kakao.com/web/guide/ 를 따라가면 되는데, 리액트에 적용하려면 약~간 삽질이 있을 수 있다.
- public 폴더의 index.html를 찾아가서 다음과 같이 등록해준다.
<head>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_MAP_API_KEY%"></script>
</head>여기서 %REACT_APP_KAKAO_MAP_API_KEY%이 부분이 HTML에서 환경변수를 사용하는 방법이다. (REACT_APP으로 시작해야 한다.)
- 루트 폴더에 .env 파일을 만든다
REACT_APP_KAKAO_MAP_API_KEY="d3ae1234asdf1234asdf1234asdf"이제 SDK를 불러올 준비가 됐다.
컴포넌트 생성
mapPage라는 새로운 컴포넌트를 만들었다.
먼저 global 키워드로 eslint 예외를 만들어준다.
/* global kakao */
import React, { useEffect } from "react";아래와 같이 지도가 표시될 부분을 만들고 id를 'map이라고 주었다. 크기는 테일윈드 css로 수정하였다.
return (
<>
<div>MapPage</div>
<div className="MapContainer w-screen h-screen">
<div id="map" className="w-full h-full" />
</div>
</>
);useEffect에 의존자 배열을 비워 최초 마운트 시에 map 돔에 sdk를 주입해주면 된다
useEffect(() => {
let container = document.getElementById("map");
let options = {
center: new window.kakao.maps.LatLng(35.85133, 127.734086),
level: 13,
};
let map = new window.kakao.maps.Map(container, options);
console.log("loading kakaomap");
}, []);
천재가 되어버린 박제를 아시오?