[NextJS/Ts] 카카오 지도 띄우기

 

👻 서론

부동산 마켓을 사이드 프로젝트로 생성하다가, 해당 매물의 위치를 띄워줘야 하는 일이 생겼다.

오픈 API를 사용해서 지도 띄우는 것은 처음이라 해당 부분을 기록해 둔다.

 

※ 사용 프레임워크, 라이브러리, 언어이다.

• NextJS
• TypeScript
• TailwindCss

 

▶ Next.js에서는 external synchronous scripts are forbidden 에러가 발생하여 해결방법이 포스팅을 참고해 기록한다.

 

---

🍁 사용 방법

1. 지도를 담을 div 생성 ( ../components/Map.tsx )

interface MapProps {
  latitude: number;
  longitude: number;
}

function Map({ latitude, longitude }: MapProps) {

  return (
    <div id="map" className="w-full h-full rounded-lg"></div>
  );
}

export default Map;

필수: id="map"인 div 를 생성한다.

 

2. App Key 등록

필자는 간단한 프로젝트이기에 환경변수로 따로 등록하지는 않고 바로 사용했다.

하지만, 원래는 모든 키가 그렇듯 지도 API의 키도 노출되면 좋지 않으므로 루트에. env.local을 생성해 App Key를 등록한다.

NEXT_PUBLIC_KAKAOMAP_APPKEY=발급받은 Javascript AppKey

 

참고로. env.xxx 파일의 브라우저에서 환경변수를 사용하기 위해서는 앞에 NEXT_PUBLIC_ 을 꼭 붙여주어야 한다.
해당 코드는 process.env.{환경변수명} 으로 사용 가능하다.

 

아래 글은 react에서 환경변수 설정 방법이었는데 참고해 보는 것도 좋을 것 같다.

2022.10.21 - [Java Script/React] - [React] .env 환경 구분 (prod / dev / local)

[React] .env 환경 구분 (prod / dev / local)

 

3. global interface 선언

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

window 인터페이스에는 kakao라는 정의가 없으므로 Typescript의 타입 시스템에서 컴파일 오류가 발생할 것이다.

아래와 같이 설정해주면 Ts타입 시스템은 window객체에 kakao가 존재하며 any타입인 것을 알게 될 것이다.

 

window 인터페이스의 kakao 프로퍼티를 사용하기 위해 global interface를 선언한다.
해당 코드의 위치는 상관없다.

 

4. useEffect로 불러오기

import { useEffect } from "react";

interface MapProps {
  latitude: number;
  longitude: number;
}

function Map({ latitude, longitude }: MapProps) {

    useEffect(() => {
        const mapScript = document.createElement("script");
    
        mapScript.async = true;
        mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=<API 키 주입>0&autoload=false`;
    
        document.head.appendChild(mapScript);

        const onLoadKakaoMap = () => {
            window.kakao.maps.load(() => {
              const container = document.getElementById("map");
              const options = {
                center: new window.kakao.maps.LatLng(latitude, longitude),
              };
              const map = new window.kakao.maps.Map(container, options);
              const markerPosition = new window.kakao.maps.LatLng(latitude, longitude);
              const marker = new window.kakao.maps.Marker({
                position: markerPosition,
              });
              marker.setMap(map);
            });
          };
          mapScript.addEventListener("load", onLoadKakaoMap);
      
          return () => mapScript.removeEventListener("load", onLoadKakaoMap);
        }, [latitude, longitude]);

  return (
    <div id="map" className="w-full h-full rounded-lg"></div>
  );
}

export default Map;

• Map 컴포넌트를 생성한다.
• document.head.appendChild로 script를 등록한다.
• eventListener를 등록해 script가 load 된 이후 onLoadKakaoMap을 호출한다.

※ 코드를 작성할 때는 removeEventListener가 없으면 Map 컴포넌트가 있는 페이지를 여러 번 방문할 때 스크립트를 불러오기 전 onLoadKakaoMap을 호출하는 문제가 발생한다고 한다.

 

 

참고

[Next.js] 카카오맵 API 이용해 지도 띄우기 (Typescript) (velog.io)

[Next.js] 카카오맵 API 이용해 지도 띄우기 (Typescript)

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