React 카카오 지도(Kakao Map) api 연동하기
React에서 카카오 지도(KAKAO MAP) API를 사용해보자!
요번 아웃소싱 팀 프로젝트를 진행하며 초기 세팅을 담당했다. 기왕 세팅을 하는김에 카카오 지도까지 경험해보기 위해 진행했다.
애플리케이션 추가하기
KAKAO MAPS API 웹사이트에 가서 APP KEY를 발급받으려면 아래와 같이 진행하면 된다. 공식문서에서도 확인이 가능하다.
- KAKAO MAP API 웹사이트 접속
- 우측 상단
APP KEY 발급클릭 - 로그인 후 애플리케이션 추가하기
- 교육용으로 사용하게되어 회사명에 간단하게 조 이름으로 작성함
플랫폼 사이트 도메인 등록
처음 블로그를 참고해서 사이트 도메인을 잘 못 등록했는데, 현재 팀원과 같이 로컬에서 작업하기에 http://localhost:5173 으로 등록했다. (본인의 기본 포트에 맞춰 설정)
- 등록한 애플리케이션 클릭
- 좌측 햄버거 버튼 클릭
-
앱 설정 > 플랫폼클릭 - Web 도메인 등록
앱 키 확인
좌측 햄버거 버튼을 클릭 후 앱 설정> 앱 키를 눌러 JavaScript 키 값을 복사한다.
.env 환경 변수 관리
src와 같은 디렉토리 위치에 .env 파일을 만들고 해당 key 값을 넣어줬다.
-
vite로 프로젝트를 세팅했을 경우 앞에 VITE_를 넣어줌
VITE_REACT_APP_JAVA_SCRIPT_KEY=쌍따움표 없이 키값 넣어주면 됩니다.
# 예시
VITE_REACT_APP_JAVA_SCRIPT_KEY=sfasfdas1e12d1dasd2e12d1212
index.html 세팅
- src=”//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_REACT_APP_JAVA_SCRIPT_KEY%&libraries=services”
// index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_REACT_APP_JAVA_SCRIPT_KEY%&libraries=services"
></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
사용하기
useEffect를 사용하여, 가이드에 맞춰 작성해주면 끝!
import { useEffect } from "react";
import styled from "styled-components";
const Main = () => {
useEffect(() => {
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
}, [])
return (
<StMain id="main">
<div id="map" style=></div>
</StMain>
);
};
const StMain = styled.div``;
export default Main;
마무리
처음 블로그를 보며 따라해봤는데, localhost 설정을 잘 못 해준 것과 env로 설정할 때 VITE_를 앞에 작성하지 않아서 에러가 정말 많았다. 현재 팀 프로젝트에서 카카오 맵 API는 역할이 아니지만 추후 사용해볼 수 있으니, 따로 연습해봐야겠다.