현재 작성일(9월 25일)을 기준으로 어제 이번에 새롭게 진행하게된 프로젝트에서 사용하기 위해서 kakao map을 가지고 여러가지를 해봤다 사용하면서 어려웠던점 신기한점들을 공유하려고 이 글을 쓴다 참고로 사용 환경은 next (app router) + typescript 이다
사용전 세팅
일단 사용을 하려면 api 키가 필요한데 kakao developers에 접속해서 애플리케이션을 등록해서 javascript 키를 가져온다
그 다음 next layout.tsx에 script 태그를 넣어준다 그냥 react의 경우에는 index.html에 넣어주면 될것이다
import Script from "next/script";
declare global {
interface Window {
kakao: any;
}
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body>
{children}
<Script
type="text/javascript"
strategy="beforeInteractive"
src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&autoload=false&libraries=services`}
/>
</body>
</html>
);
}
잘이해가 안되는 사람이 있을수 있어서 추가적인 설명을 하자면 next에서 제공하는 Script 컴포넌트를 사용하였고 (그냥 html script랑 같다고 생각하면 된다) strategy prop을 'beforeInteractive' 값으로 줘서 페이지가 로드 되기전에 script가 실행된다 그리고 autoload를 false로 줘야 kakao map을 사용하는 코드보다 먼저 로드 된다
그리고 process.env.NEXT_PUBLIC_KAKAO_API_KEY는 각자 받은 javascript 키를 넣어주면 된다
추가로 이번에 내가 새로 알게된것인데 위의 스크립트 태그를 보면 주소 앞에 http나 https가 붙어있지 않은데 //로 하면 상대 프로토콜이 되서 사용자의 http, https 환경에 따라 자동으로 해당 프로토콜을 따라가게 된다 (해당 사항은 next Script 뿐만 아니라 html script도 적용됨)
사용하기
"use client";
import { useEffect, useRef } from "react";
declare global {
interface Window {
kakao: any;
}
}
export default function Page() {
const mapRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (window.kakao) {
const kakaoMap = window.kakao.maps;
kakaoMap.load(() => {
const mapOption = {
center: new window.kakao.maps.LatLng(
35.14275440256283,
126.8007393987329
)
};
const map = new kakaoMap.Map(mapRef.current, mapOption);
});
}
}, []);
return <div ref={mapRef} style={{ width: 600, height: 500 }} />;
}
기본적으로 카카오맵을 띄우는 코드이다
window 객체가 활성화가 된다면 kakao map api에 접근해서 사용하는 식이다
new kakaoMap.Map(elementRef, mapOption)으로 맵을 생성하고 옵션 필수값으로 center를 지정해줘야 한다
center는 위도 경도 값을 받고 map이 보여줄 위치를 정하는 필드이다
그리고 보여주는 element에 width랑 height를 꼭 지정해줘야 한다 지정해주지 않으면 보이지 않는다
나는 광주소프트웨어마이스터고등학교의 위도와 경도를 넣어줬다
마커 추가하기
카카오 맵처럼 클릭했을때 클릭한곳에 마커를 추가할수도 있다
kakaoMap.event.addListener(
map,
"click",
({ latLng }: { latLng: number }) => {
const marker = new kakaoMap.Marker({
position: latLng,
});
marker.setMap(map);
}
);
아까 위에서 만든 kakaoMap 변수에다 eventListener를 추가해서 만들어 준다
마무리
간단하게만 만들어봐서 아직 다양한 기능을 사용해보지는 못했지만 이정도만 사용해봤어도 충분히 재밌는 경험이였다
새롭게 진행하는 프로젝트에서는 거리도 구해야하고 길찾기 기능도 만들어야해서 앞으로 더 사용해볼거 같다
그리고 만들어볼때는 몰랐지만 이글을 적으면서 알게된 사실이 있는데 개발할때는 타입을 제공안하는줄알고 직접 임시로 선언해줬는데
찾아보니 라이브러리로 있었다 공식 라이브러리는 아니지만 개발할때 사용해볼거 같다 kakao map 타입 라이브러리
'Library' 카테고리의 다른 글
| jest와 react testing library로 프로젝트에 단위 테스트 도입하기 (0) | 2024.11.26 |
|---|---|
| axios가 불러온 개발 편의성 (2) | 2024.10.22 |
| 제발 디자인 못하면 mui 쓰세요! - mui 사용기 (0) | 2024.06.21 |
| zod 쓸까? 말까? - zod를 알아보자 (0) | 2024.04.22 |
| 동화책 읽고 개발자 경험 향상시키기 - storybook에 대해 알아보자 (0) | 2024.04.13 |
