카카오 맵을 쓰려면 시크릿 키가 있어야 해서
카카오 developer로 가야한다.
로그인 하고 내 어플리케이션으로 들어간 다음, 애플리케이션 추가하기를 누르면 금방 추가가 가능하다
만들고 들어가면, 이렇게 앱 키가 있는데, REST API 키는 이제 axios를 통해서 데이터를 받아올 때 쓰는 것이고, JavaScript 키는 script를 통해 데이터를 받아올 때 쓴다
네이티브는 모바일 어플일 때 사용하고 Admin은 관리자 전용인데, 이건 어떨 때 사용하는 지 아직 잘 모르겠다. 지금 단계에선 몰라도 되는 부분이기도 하고.
여기서 일단 모바일 제외하고, 프론트엔드가 가장 많이 쓰는 키는 "JavaScript 키"다.
REST API 키는 보통 백엔드가 많이 쓴다.
그럼 대충 어떻게 쓰는 지 docs를 먼저 살펴보자
주소는 아래와 같다
기본설정은 docs를 따라하면 되는데,
몇 가지 주의할 것들이 있다.
- 지도를 띄우는 코드 작성 부분의 코드는 dom이 그려지고 난 뒤 그려져야 에러가 뜨지 않는다. 왜냐면 script 태그를 통해 map 데이터를 가지고 와야하기 때문이다.
그래서 useEffect 안에 저 코드들을 넣어줘야 한다. - 1번을 해도 에러가 뜰 것이다. 바로 kakao를 찾을 수 없다는..
보통 alert 같은 것들은 그냥 쓰긴 하는데 window가 삭제 된 채로 사용되는 것이다.
원래라면 alert가 아니라 window.alert로 써야 한다. 그 window에 kakao를 선언해줘야 에러가 사라진다.
declare const window : typeof globalThis & {
kakao:any
};
const index = () => {
useEffect(() => {
const container = document.getElementById('map');
const options = {
center: new window.kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
const map = new window.kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
},[])
return (
<>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=9e75b440966d71f4c024a68eb9a43103"></script>
<div id = "map" style={{width : 500, height : 400}}>index</div>
</>
)
}
export default index이렇게 전역인 곳에 declare를 통해 선언을 해줘야 window에 kakao를 넣을 수 있다.
그러나... 아래와 같은 에러가 떴다.
근데 신기한 게 새로고침 하면 정상작동 된다.
이런 문제는 대게, 지도를 가져오기도 전에 페이지가 이동 돼서 map을 못 찾는거다.
useEffect(() => {
const script = document.createElement("script")
//script 태그 만들기
script.src =
"//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=18260005708de9c19fe96a4dff026f6c"
//script 경로 설정
document.head.appendChild(script)
//head 아래 script 태그 넣기
script.onload = () => {실행시킬 함수}
//script에서 데이터 가져오고나서 함수 실행위와 같은 코드를 설정하면, 데이터를 가지고 온 다음에 함수들이 실행돼 map을 못 읽어서 발생하는 에러가 발생하지 않는다.
맵을 완성하니 뭔가 검색기능이 있으면 좋을 것 같아 코드를 추가 했다.
useEffect(() => {
const script = document.createElement("script")
script.src =
"//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=18260005708de9c19fe96a4dff026f6c"
document.head.appendChild(script)
script.onload = () => {
window.kakao.maps.load(function() {
const mapContainer = document.getElementById('map'),
mapOption = {
center: new window.kakao.maps.LatLng(37.572371, 126.984445),
level: 3
};
const map = new window.kakao.maps.Map(mapContainer, mapOption);
const imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다
imageSize = new window.kakao.maps.Size(64, 69),
imageOption = {offset: new window.kakao.maps.Point(27, 69)};
var markerImage = new window.kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new window.kakao.maps.LatLng(37.572371, 126.984445);
var markerPosition = new window.kakao.maps.LatLng(37.572371, 126.984445);
var infowindow = new window.kakao.maps.InfoWindow({zIndex:1});
var ps = new window.kakao.maps.services.Places();
ps.keywordSearch(keyWord, placesSearchCB);
function placesSearchCB (data, status, pagination) {
if (status === window.kakao.maps.services.Status.OK) {
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
var bounds = new window.kakao.maps.LatLngBounds();
for (var i=0; i<data.length; i++) {
displayMarker(data[i]);
bounds.extend(new window.kakao.maps.LatLng(data[i].y, data[i].x));
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
}
// 지도에 마커를 표시하는 함수입니다
function displayMarker(place) {
// 마커를 생성하고 지도에 표시합니다
var marker = new window.kakao.maps.Marker({
map: map,
position: new window.kakao.maps.LatLng(place.y, place.x)
});
// 마커에 클릭이벤트를 등록합니다
window.kakao.maps.event.addListener(marker, 'click', function() {
// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
infowindow.open(map, marker);
});
}
// 마커를 생성합니다
var marker = new window.kakao.maps.Marker({
position: markerPosition,
image: markerImage
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
})
}
},[keyWord])
kakao api에서 가져온거라 특별한 건 없고, 원래는 종속성배열이 빈 배열이였는데, 빈 배열로 두면 검색창에 입력했을 때 반영이 안 된다. 그래서 종속성배열을 검색창에서 입력하는 키워드로 두는 설정을 추가했다.
그리고 kakao api 같은 경우, 새로운 데이터를 받아와야 해서 script를 추가해야 한다
지도나, 다른 기능을 추가하고 싶다면 아래 링크에서 script를 가져와야 한다
이것 같은 경우는, 그냥 사용하는 곳의 jsx 작성하는 곳에 이렇게 넣으면 된다
<Head>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=18260005708de9c19fe96a4dff026f6c&libraries=services">
</script>
</Head>적용화면
