[React+Typescript+Vite] 카카오맵 api 사용법

카카오 맵 api 사용

쓴 라이브러리 : reack-kakao-maps-sdk

https://react-kakao-maps-sdk.jaeseokim.dev/

1, index.html 에 추가

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

2. vite-env.d.ts, global.d.ts 추가

window에 kakao라는 변수 인식을 위한 추가

/// <reference types="vite/client" />

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

export {}; // 모듈로 인식되도록 함

kakao 내의 maps 정의

//////////vite-env.d.ts

/// <reference types="vite/client" />

//아래 코드 추가하기
declare global {
	interface Window {
		kakao: {
			maps: {
				load: (callback: () => void) => void;
				Map: any; // 다른 필요한 타입들도 여기에 추가
			};
		};
	}
}

export {};

3. kakao.maps.d.ts 추가

src/types 폴더를 만들어서 추가

kakao에서 사용할 좌표와 map class를 정의

declare namespace kakao.maps {
	class LatLng {
		constructor(lat: number, lng: number);
	}

	class Map {
		constructor(container: HTMLElement, options: MapOptions);
		setCenter(latlng: LatLng): void;
		// 추가 메서드 및 속성 정의
	}

	interface MapOptions {
		center: LatLng;
		level: number;
		// 필요한 다른 옵션 속성들을 여기에 정의합니다.
	}

	// 추가적으로 필요한 Kakao Maps API 클래스와 인터페이스 정의
}

4. tsconfing.json

src/types 내의 문서들을 설정할 수 있게 함

"typeRoots": ["./node_modules/@types", "./src/types"],
...
"include": ["src/**/*.ts", "src/**/*.tsx", "src/types"],

5. Map 설정

import { useEffect, useState } from "react";
import { Map, MapMarker } from "react-kakao-maps-sdk";

import TheHeader from "@components/common/TheHeader";
import TheFooter from "@components/common/TheFooter";

const UserMap = () => {
	const [currentPosition, setCurrentPosition] = useState({
		lat: 37.566826,
		lng: 126.9786567,
	});

	// 사용자의 현재 위치를 가져오는 함수
	useEffect(() => {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(
				(position) => {
					setCurrentPosition({
						lat: position.coords.latitude,
						lng: position.coords.longitude,
					});
				},
				(error) => {
					console.error("Error occurred while fetching location:", error);
				},
			);
		} else {
			console.error("Geolocation is not supported by this browser.");
		}
	}, []);

	return (
		<>
			<TheHeader />
			<div className="w-full h-screen">
				<Map
					center={currentPosition}
					className="w-full h-full"
					level={3}
				>
					<MapMarker position={currentPosition}>
						<div style={{ color: "#000" }}>현재 위치</div>
					</MapMarker>
				</Map>
			</div>
			<TheFooter />
		</>
	);
};

export default UserMap;

여기서 발생한 이슈

• Map에 사이즈를 %단위로 넣었음 (테일윈드 사용중 w-full h-full는 width: 100% height: 100%)
  • 상위 html 컴포넌트(부모 html)에 해당하는 width랑 height이 설정되어 있어야 적용됨

6. index.html에 API KEY 삽입

		<script
			type="text/javascript"
			src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_JAVASCRIPT_API_KEY%&libraries=services&autoload=false"
		></script>

VITE 프로젝트로 하고 있다면 꼭 환경변수명은 VITE_를 붙여줘야 한다.

VITE_JAVASCRIPT_API_KEY = ${자바스크립트 키}

여기서 발생한 이슈

• %변수% ← 이런 식으로 key를 넣게 되면 String으로 인식하여 전부 통째로 들어가기 때문에 세미콜론이나 작은따옴표 같은 것은 쓰지 않아야 한다.