'방방곡곡' 프로젝트 ~ing

최종 프로젝트 2월 6일 ~ 3월 13일

카카오 Maps API 사용해보기

import React, { useEffect } from "react";

const { kakao } = window;

const MapPage = () => {
  useEffect(() => {
    var container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스
    var options = {
      //지도를 생성할 때 필요한 기본 옵션
      center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
      level: 3, //지도의 레벨(확대, 축소 정도)
    };

    var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
  }, []);

  return <div id="map" style={{ width: "300px", height: "300px" }}></div>;
};

export default MapPage;

카카오 맵 사이트에서 기본적인 툴을 가져와서 적용을 다 했는데, 계속 아래와 같이 에러가 뜸.

property 'kakao' does not exist on type 'window & typeof globalthis'.

Typescript를 사용하면 나오는 에러로 기존 Window에 없는 객체 값에 접근하게 될 경우 발생하는 에러.

//react-app-env.d.ts파일

interface Window {
  kakao: any;
}

map페이지에 일단 불러오는 부분 완료!