📌 최근 새로운 팀 프로젝트를 진행하며 카카오맵 API를 공부하게 되었다.
📌 진행하면서 어려웠던 부분을 다시 기억하고자 기록을 남기기로 했다!
참고사이트 : https://apis.map.kakao.com/web/guide/
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
npm install react-kakao-maps-sdk
참고사이트 : https://react-kakao-maps-sdk.jaeseokim.dev/
여기까지 하면 간단하게 세팅 완료입니다 🫡
// 예시코드
import { useState } from 'react';
import { Map, MapMarker } from 'react-kakao-maps-sdk';
export default function App() {
const [state, setState] = useState({
center: { lat: 33.452613, lng: 126.570888 },
});
return (
<Map
center={state.center}
style={{ width: '800px', height: '820px', margin: '0 auto' }}
>
<MapMarker position={state.center}></MapMarker>
</Map>
);
}
여기까지 하면 간단하게 지도와 마커 생성 완료!!!!
위의 좌표값은 카카오 본사 위치인데, 만약 원하는 특정 위치나 현위치를 표시하고 싶을 때에는 그에 맞게 좌표값을 구해서 코드에 넣어주면 된다.
이 부분은 뒤에서 정리할 예정이다!!