[React] 카카오맵 사용하기 With. 타입스크립트 - (1) key 발급과 스크립트 적용하기

 

1. APP KEY를 발급한다.

 

🔗 https://developers.kakao.com/

Kakao Developers

 

로그인 후 상단의 Maps API

 

상단의 버튼을 누른다.

 

 

2. 어플리케이션을 등록한다.

그냥 스터디용으로 등록해줬고, 클릭해서 Javascript key를 가져오면 된다.

 

 

 

3. 도메인을 등록한다.

 

 

4. index.html에 넣어준다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"></script>

 

 

5. 코드를 작성한다.

 

📄 Map.txs

import React, { useEffect } from 'react'
import styled from 'styled-components'

declare global {
  interface Window {
    kakao: any
  }
}

const Map = styled.div`
  width: 100%;
  height: 300px;
`

function MapContainer() {
  useEffect(() => {
    const container = document.getElementById('map')
    const options = {
      center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심 좌표
      level: 3, // 지도의 레벨(확대, 축소 정도)
    }

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

  return <Map id="map" />
}

export default MapContainer

 

 

여기서 declare는 어떤 역할을 할까?

declare global {
  interface Window {
    kakao: any
  }
}

 

전역으로 window를 추가해주지 않으면 아래와 같은 에러가 발생하기때문에 추가해주었다.

나중에 변수가 늘어나면 common.d.ts로 분리할 생각이다.

* 출처: 카카오톡 데브톡(https://devtalk.kakao.com/t/typescript/42202/9)

 

 

 

 

 

6. 이렇게 수월히 진행될리가 없지

maps를 못찾는다고 해서 살려주삼..살려주삼..하면서 다시 서치 시작..!

 

알고보니 도메인을 등록 안헀다고 한다. 3번에서 하고 왔는데요?!

그래서 다시 돌아가보니 콜론을 빼먹었다. 마음이 급한 죄..

 

 

 

 

 

완성!

 

 

 

---

 

 

참고

React, kakao 지도 띄우기 #2 앱키를 이용해 지도 띄우기

- https://apis.map.kakao.com/web/guide/

 

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.