프로젝트를 시작하며 맵이 필요했다.
네이버와 구글 카카오 맵중에 고민했는데,
구글은 한글 지원 때문에 먼저 제외 시켰고
네이버는 문서가 굉장히 불친절해 맵 띄워보고 제외시켰다.
카카오는 다행히 누군가 만들어놓은 리액트 버전 라이브러리가 있어서
굉장히 간단하게 맵을 띄울 수가 있었다.(감사합니다..!!)
(원래는 바닐라 자바스크립트 다루듯이 맵을 사용해야한다.)
네이버도 리액트 맵 라이브러리가 있긴한데, 타입스크립트가 적용이 안됐었다.
우선 카카오 디벨로퍼스에 가서 인증키를 발급받는다.
index.html 내부 body 태그 끝에 script 태그를 추가한다.
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=4c90a9ac2e5c03af35e19f6193081395&libraries=services"></script>
</body>
npm install react-kakao-maps-sdk
npm install kakao.maps.d.ts --save-dev
function(){
return (
<Map // 지도를 표시할 Container
center={{
// 지도의 중심좌표
lat: 33.450701,
lng: 126.570667,
}}
style={{
// 지도의 크기
width: "100%",
height: "450px",
}}
level={3} // 지도의 확대 레벨
/>
);
}
간단하게 사용법을 알아보았고 추가적으로 마커를 찍는다든지, 위치를 조정한다든지 하는 기능도 쉽게 추가할 수 있다. 프로젝트에 계속 적용하면서 기능들을 다양하게 사용해볼 예정이다!!