TS | TypeScript에서 Kakao SDK 사용하기 (카카오 맵, React)

토이프로젝트 진행을 무턱대고 타입스크립트로 해보기로 했다...

index.html에 SDK추가

카카오 디벨로퍼 사이트에서 본인 프로젝트 등록을 해줘야 하는데, 가이드를 참고해서 진행하면 된다.
public경로에 있는 index.html에 카카오 맵 SDK를 붙여넣는다. appKey부분을 수정하는 것 잊지말기..

useEffect()에서 스크립트를 동적으로 추가해주는 방법도 있다.

<script 
    type="text/javascript" 
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."
></script>

자바스크립트에서 지도를 생성하는 법

new kakao.~를 통해 포지션을 등록하거나 지도를 생성할 수 있다.

타입스크립트에서도 new kakao.~를 통해 지도를 생성해야 한다!

var container = document.getElementById('map');
var options = {
        center: new kakao.maps.LatLng(33.450701, 126.570667),
        level: 3
    };

var map = new kakao.maps.Map(container, options);

타입스크립트에서 바로 new kakao를 사용할 수 없다. kakao를 읽지 못해서 그런 것인데..
사용할 수 있는 방법이 두 가지 있다.(더 있을 수도..)

any타입으로..

(window as any)를 통해 window객체를 any타입으로 정의한 뒤 kakao객체를 사용하는 방법.

const kakao = (window as any).kakao;

const mapDiv = document.querySelector('#map');
const options = {
    center: new kakao.maps.LatLng(33.450701, 126.570667),
    level: 2,
};

new kakao.maps.Map(mapDiv, options);

interface로..

window인터페이스를 확장하는 방법으로 사용한다.

declare global {
  interface Window {
    kakao: any;
  }
}

const mapDiv = document.querySelector('#map');
const options = {
    center: new window.kakao.maps.LatLng(37.17058840207, 127.112843761156),
    level: 2,
};

return new window.kakao.maps.Map(mapDiv, options);