SNUBUS [트러블 슈팅(1)] - 'kakao' is not defined(리액트로 카카오맵 API 사용하다 생긴 문제)

오늘 리액트 프로젝트에 카카오맵 API를 적용시키려다가 생긴 오류와 해결 방법을 정리해보려고 한다! 1️ 카카오맵 API 적용 코드(공식 문서) 일단 문제들을 정리하기 전에 카카오맵 공식 문서에 쓰여져 있는 자바스크립트 코드를 먼저 확인해보자.

카카오맵 공식 문서 : https://apis.map.kakao.com/web/guide/ 먼저 카카오맵을 그릴 div 요소를 하나 만든다. 그리고 HTML에 아래와 같이 script 태그로 실제 지도를 그리는 Javascript API를 불러온다. // 이라는 상대 프로토콜을 사용하면, 사용자의 http, https 환경에 따라 자동으로 해당 프로토콜을 따라가게 된다.

API를 로딩하는 스크립트 태그는 HTML파일안의 head, body 등 어떠한 위치에 넣어도 상관없지만, 반드시 "실행 코드보다 먼저 선언"되어야 한다.