최근에 멘토님 권유로 사이드 프로젝트에 참여하게 되었다. 아직 와이어프레임이 다 나온 건 아니지만 나온 것들 중에서 내가 맡은 부분은 지도 API를 가져와서 간단하게 축소, 확대, 현재 위치 보여주기 기능이다.
카카오 맵 API
카카오 맵 API 공식 사이트에 들어가면 정말 자세하게 나와있다. 왼쪽 사이드바의 [Guide]탭을 보면 [준비하기]에 나와있는 대로 따라하면 key 발급까지 무사히 마칠 수 있다. 안드로이드 / ios / 웹 3가지 유형에 따라 나누어져있고 그 중 나는 웹 등록을 하고 key를 발급받았다.
react에 지도 띄우기
실제 지도를 그리는 js api 불러오기
<script type="text/javascript"src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"></script>
이 코드를 head 또는 body 맨 마지막에 추가하면 된다. 왜 head나 body 맨 마지막에 script 코드를 넣어야하냐면 이 글을 읽어보면 알 수 있다. ㅎㅎ
실제로 나는 public/index.html의 body 맨 마지막에 삽입했다.
코드
...생략
<body>
<div id="root"></div>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"
></script>
</body>
...생략app 컴포넌트에 지도 띄우는 코드 작성하기
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴공식 사이트에 나와있는 코드다. 이걸 활용해서 react에 작성했다.
코드
const App = () => {
const [map, setMap] = useState({})
useEffect(() => {
const container = document.getElementById('map')
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3,
}
setMap(new kakao.maps.Map(container, options))
}, [])
return (
<div>App Component</div>
)
}여기서 잠깐!! 이대로 작성하면 kakao를 찾을 수 없다는 에러메세지가 뜬다. 여기서 살짝 헷갈렸는데 당연한거였다. public/index.html에 링크된 스크립트 덕분에 kakao는 존재한다. 하지만 어플리케이션은 알 수가 없다. ㅠㅠ 그래서 전역으로 불러와야한다.
declare global {
interface Window {
kakao: any;
}
}이 코드를 추가하고, new kakao 앞에 new window.kakao로 수정해주면 된다.
수정한 코드
declare global {
interface Window {
kakao: any;
}
}
const App = () => {
const [map, setMap] = useState({})
useEffect(() => {
const container = document.getElementById('map')
const options = {
center: new window.kakao.maps.LatLng(33.450701, 126.570667),
level: 3,
}
setMap(new window.kakao.maps.Map(container, options))
}, [])
return (
<div id="map" style={{width: '500px', height: '400px'}} />
// 지도 담을 영역 추가함!
)
}여기에 지도를 담을 영역 코드까지 추가하면 지도가 잘 뜨는 걸 확인할 수 있다.
