프로젝트를 시작하며 맵이 필요했다.
네이버와 구글 카카오 맵중에 고민했는데,
구글은 한글 지원 때문에 먼저 제외 시켰고
네이버는 문서가 굉장히 불친절해 맵 띄워보고 제외시켰다.
카카오는 다행히 누군가 만들어놓은 리액트 버전 라이브러리가 있어서
굉장히 간단하게 맵을 띄울 수가 있었다.(감사합니다..!!)
(원래는 바닐라 자바스크립트 다루듯이 맵을 사용해야한다.)
네이버도 리액트 맵 라이브러리가 있긴한데, 타입스크립트가 적용이 안됐었다.
시작
-
우선 카카오 디벨로퍼스에 가서 인증키를 발급받는다.
-
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- 타입스크립트를 사용한다면 해당 라이브러리 타입이 모두 적혀있는 kakao.maps.d.ts 패키지도 다운 받는다.
-npm install kakao.maps.d.ts --save-dev - 다운 받으면 리액트 버전 문제 때문에 legacy로 다운 받으라는 오류가 나오는데, --force를 입력해주면 다운 받을 수 있다.
- 컴포넌트를 import 해오는 방식으로 간단하게 맵을 띄운다.
function(){
return (
<Map // 지도를 표시할 Container
center={{
// 지도의 중심좌표
lat: 33.450701,
lng: 126.570667,
}}
style={{
// 지도의 크기
width: "100%",
height: "450px",
}}
level={3} // 지도의 확대 레벨
/>
);
}- 결과가 쉽게 나오는 것을 볼 수 있다.
간단하게 사용법을 알아보았고 추가적으로 마커를 찍는다든지, 위치를 조정한다든지 하는 기능도 쉽게 추가할 수 있다. 프로젝트에 계속 적용하면서 기능들을 다양하게 사용해볼 예정이다!!
Software Developer