뭉균의 개발일지

[Next.js] 카카오 지도 API 사용해보기 본문

Next.js

[Next.js] 카카오 지도 API 사용해보기

박뭉균 2024. 11. 21. 21:02

🚪 들어가며

 

내가 구현해야할 지도

 

프로젝트를 진행하며 위의 사진과 같이 서버로부터 넘겨받은 주소 데이터를 지도로 구현해야하는 업무를 접했습니다. 예를 들어, address: "부산광역시 부산진구 중앙대로" 와 같은 형식의 데이터를 받으면 이 주소를 이용하여 해당 주소지의 지도를 렌더링하는 것이었습니다. 지도 API의 종류는 많지만, 저는 샘플 코드가 많은 카카오 지도 API를 사용하여 업무를 시작했습니다.

 

 

📊 구현 과정

 

1. App key 발급

 

https://developers.kakao.com/

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

우선, Kakao Developers 사이트에 들어가셔서 애플리케이션을 만들고 앱 키를 발급받는 과정을 거쳐야합니다. 앱 키는 4가지 종류가 있는데 JavaScript 키를 이용하면 됩니다. 저는 해당 앱 키를 .env.local 파일에 NEXT_PUBLIC_KAKAOMAP_KEY라는 변수로 보관했습니다.

 

 

2. 실제 지도를 그리는 Javascript API 호출

 

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

출처: https://apis.map.kakao.com/web/guide/

 

위의 코드는 카카오 지도 API를 호출하는 코드이고 일반적인 경우, index.html의 head 또는 body 태그에 삽입하면 되지만, 저는 next.js의 App-router를 이용하여 구현 중이므로 아래와 같이 app/layout.tsx에 구현해주었습니다. 

 

import "@/styles/globals.css";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko">
      <body>
        {children}
        <script
          type="text/javascript"
          src={`https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAOMAP_KEY}&libraries=services,clusterer`}
        ></script>
      </body>
    </html>
  );
}

 

또한, TypeScript로 구현 중이기에 추가적인 과정을 거쳤습니다. 우선, 아래 코드를 입력하여 package.json에 devDependencies로 추가합니다.

 

# npm
$ npm install kakao.maps.d.ts --save-dev

# yarn
$ yarn add kakao.maps.d.ts --dev

 

이후, tsconfig.json의 compilerOptions의 types 속성에 패키지를 추가해주면 TypeScript 설정이 마무리됩니다. 

 

{
  ...,
  "compilerOptions": {
    ...,
    "types": [
      ...,
      "kakao.maps.d.ts"
    ]
  }
}

 

 

3. 지도 생성하기

 

이번 프로젝트에서는 서버로부터 address라는 변수를 문자열으로 받습니다. 예를 들어, address: "부산광역시 부산진구 중앙대로" 와 같은 형식입니다. 저는 Kakao 지도 API를 통해 문자열 주소를 좌표로 바꿔 지도를 생성했습니다.

 

const [coordinates, setCoordinates] = useState({ lat: 33.450701, lng: 126.570667 });

useEffect(() => {
  const geocoder = new kakao.maps.services.Geocoder();

  geocoder.addressSearch(address, (result, status) => {
    if (status === kakao.maps.services.Status.OK) {
      const { x, y } = result[0];
      setCoordinates({ lat: parseFloat(y), lng: parseFloat(x) });
    } else {
      console.error(address);
    }
  });
}, [address]);

 

우선, geocoder라는 주소-좌표간 변환 서비스 객체를 생성합니다. geocoder.addressSearch(address, callback)의 address에는 검색할 주소 문자열을 넣고 callback에는 검색 결과(result)와 상태(status)를 받는 콜백 함수를 넣어줍니다.

이후, 상태(status)가 kakao.maps.services.Status.OK이면 변환된 좌표를 coordinates로 업데이트합니다.

 

return (
    <Map center={coordinates} style={{ width: "100%", height: "476px" }} level={3}>
      <MapMarker position={coordinates}></MapMarker>
    </Map>
  );

 

 

coordinates 좌표를 Map에 넘겨주면 지도를 렌더링합니다. MapMarker는 해당 좌표에 마커를 표시합니다. 상태가 업데이트되면 자동으로 지도와 마커 위치가 변경됩니다. 참고로 level은 지도의 확대/축소 수준을 제어하는 옵션입니다. 

 

전체 코드는 아래와 같습니다.

 

"use client";

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

interface KakaoMapProps {
  address: string;
}

const KakaoMap = ({ address }: KakaoMapProps) => {
  const [coordinates, setCoordinates] = useState({ lat: 33.450701, lng: 126.570667 });

  useEffect(() => {
    const geocoder = new kakao.maps.services.Geocoder();

    geocoder.addressSearch(address, (result, status) => {
      if (status === kakao.maps.services.Status.OK) {
        const { x, y } = result[0];
        setCoordinates({ lat: parseFloat(y), lng: parseFloat(x) });
      } else {
        console.error(address);
      }
    });
  }, [address]);

  return (
    <Map center={coordinates} style={{ width: "100%", height: "476px" }} level={3}>
      <MapMarker position={coordinates}></MapMarker>
    </Map>
  );
};

export default KakaoMap;

 

 

address: "부산광역시 부산진구 중앙대로"를 Kakaomap 컴포넌트에 넘겨 만든 지도를 보여드리며 포스팅을 마무리하겠습니다. 

 

 

추가적인 커스텀 및 과정이 궁금하신 분들은 참고자료의 링크를 참고하시면 될 것 같습니다✍️

 

 

📚 참고자료 

 

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

 

Hello from react-kakao-maps-sdk docs | react-kakao-maps-sdk docs

Description will go into a meta tag in <head />

react-kakao-maps-sdk.jaeseokim.dev

 

2. https://github.com/JaeSeoKim/kakao.maps.d.ts

 

GitHub - JaeSeoKim/kakao.maps.d.ts: TypeScript Definitions for kakao.maps.* (Kakao(구 Daum) 지도 Web API)

TypeScript Definitions for kakao.maps.* (Kakao(구 Daum) 지도 Web API) - JaeSeoKim/kakao.maps.d.ts

github.com

 

'Next.js' 카테고리의 다른 글

[Next.js] Next.js를 이용한 카카오 간편 로그인 구현  (5) 2024.11.14
[Next.js] 모달창 만들기(Modal)  (2) 2024.10.22
[Next.js] SSR 과정과 hydration에 대하여  (5) 2024.09.27
[Next.js] 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유  (3) 2024.09.16
'Next.js' Related Articles more