[Next.js] TypeScript + Kakao Map API 사용하기

사실 내가 진행했던 프로젝트는 Next.js + TypeScritp 기반이였기 때문에, 앞서 React로 구현한 코드는 흐름을 이해할 수 있는 연습 과정이였다. Next.js로 구현하려니.. React와는 다르게 html 파일이 없었기 때문에, Script 태그는 어디에 넣어야하는지에 대한 고민이 생겼다. 결과적으론 Script를 생성하여 넣어주었는데, 왠지 더 좋은 방법이 있을 것 같다...! next에는  'next/script'도 제공하니, 다음에는 이를 사용해서 구현해봐야겠다~!

 

---

 

TypeScript + Kakao Map API 사용하기

1. script 요소 생성하기

2. 환경변수로 설정한 앱 키 등록하기

그 외 부분은 앞서 React로 구현한 것과 동일하다! MapContainer.js 참고

2022.07.30 - [Programming/React] - [React] Kakao Map API 사용하기

[React] Kakao Map API 사용하기

 

전체 코드

Map.tsx

import { useEffect } from "react";

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

function Map() {
    const mapScript = document.createElement("script");
    mapScript.async = true;
    mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAOMAP_APPKEY}&autoload=false&libraries=services,clusterer,drawing`;
    document.head.appendChild(mapScript);

    useEffect(() => {
        const onLoadKakaoMap = () => {
            window.kakao.maps.load(() => {
                // 지도 생성
                const mapContainer = document.getElementById('map'), // 지도를 표시할 div  
                    mapOption = { 
                        center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
                        level: 3        // 지도의 확대 레벨
                    };

                const map = new window.kakao.maps.Map(mapContainer, mapOption)
                const markerPosition  = new window.kakao.maps.LatLng(33.450701, 126.570667);
                
                // 결과값을 마커로 표시
                const marker = new window.kakao.maps.Marker({
                    map: map,
                    position: markerPosition,
                });
                
                // 지도의 중심을 결과값으로 받은 위치로 이동
                marker.setMap(map);
            });
        };
        mapScript.addEventListener("load", onLoadKakaoMap);

        return () => mapScript.removeEventListener("load", onLoadKakaoMap);
    }, []);
    
    return (
        <div id="map" />
    );
}

export default Map;

 

결과 화면