리액트에 Kakao 지도 API를 적용하던 중 다음과 같은 에러가 발생했다.
Uncaught ReferenceError: kakao is not defined
public/index.html
index.html의 head태그에 다음과 같이 추가해주고
<head>
...
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={APP_KEY}&libraries=services"></script>
<title>React App</title>
</head>
src/Register.jsx
Register 컴포넌트 내에서 다음과 같이 변수를 선언해줬다.
const geocoder = new kakao.maps.services.Geocoder();
...문제는 index.html에 저렇게 선언하면 지도 API를 불러들이지 못한다는 것이다.
이런 방식으로 리액트에서 지도 API를 사용하기 위해선 kakao 앞에 window를 붙여줘야 한다.
다음과 같이 말이다.
const geocoder = new window.kakao.maps.services.Geocoder();
...
또는 API를 사용하는 컴포넌트 최상단에 /*global kakao*/ 를 추가해주면 해결이 가능하다.
아무래도 이 방법이 더 깔끔해보인다.
/*global kakao*/
import React, { useEffect } from "react";
...
'트러블슈팅' 카테고리의 다른 글
| [트러블슈팅] UseEffect에서 clean up이 되지 않을 때 (feat. async) (0) | 2021.05.25 |
|---|---|
| [트러블슈팅] ER_CON_COUNT_ERROR: Too many connections (1) | 2021.05.06 |
| [트러블슈팅] mongoose find not working (0) | 2021.03.10 |
| [스크랩] 누구나 한 번쯤은 띄워본 JavaScript 에러 TOP 10. (0) | 2021.02.20 |
| [트러블슈팅] FastAPI CORS 에러 (0) | 2021.02.13 |
