[React/Vite] 카카오맵 API 사용 설정하기

초기 설정

1. 카카오 개발자사이트에 접속해 개발자 등록 및 앱 생성

2. 앱 설정 - 플랫폼 - Web 플랫폼 등록으로 사이트 도메인 등록 (지도API를 사용할 도메인이 어디인지 등록! http://localhost:3000/ 으로 등록함

3. 앱 설정 - 앱 키 - JavaScript 키 복사하여 .evn.local에 저장 -> 변수명 VITE_KAKAO_MAP_API_KEY (VITE_로 시작하면 상관없음!)

 

 

간단 테스트 - 지도 띄우기 (API 연결 확인)

// index.html
<script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_MAP_API_KEY%"  // 발급받은 API 키 입력
></script>

import { useEffect } from "react";
const { kakao } = window;

const App = () => {
  useEffect(() => {
    const container = document.getElementById("map");
    const options = {
      center: new kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    };

    const map = new kakao.maps.Map(container, options);
  }, []);

  return (
    <>
      <div id="map" style={{ width: "500px", height: "400px" }}></div>
      <div>test</div>
    </>
  );
};

export default App;

 

Cannot read properties of undefined (reading 'maps')

처음에 maps가 undefined라는 에러가 떴는데, 검색해보니 카카오 개발자 사이트에서 실행할 도메인을 등록하지 않은 경우에 생기는 에러라고 한다. 나는 분명 잘 받아와서 .env.local에도 잘 등록해놨기 때문에 ㅠㅠ 찾아보다가 appKey 환경변수 앞뒤로 %를 붙여주니 해결됐다.

// index.html
<script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_MAP_API_KEY%"  {* 여기! *}
></script>