[Next.js] Next.js에서 Kakao Map API 사용하기

 

Next.js를 이용한 프로젝트를 진행하면서 지도 서비스를 기반으로 한 기능을 구현하기로 하였다. 따라서 간편하게 이용할 수 있는 Map API를 찾아보는 중, 그중에서도 Google Map, Naver Map, Kakao Map의 선택지가 있었다. 그중에서도 Kakao Map API를 이용하기로 결정하였다. 우선 작년 채용 플랫폼 프로젝트를 진행하면서 Kakao Map API를 발급받은 키가 이미 있었기 때문에 이번 프로젝트에서도 자연스럽게 Kakao Map API를 이용하기로 결정하였다.

 

따라서 이번 포스팅에서는 Next.js에서 Kakao Map API를 이용해 렌더링하는 방법을 자세히 알아보고자 한다.

 

 

01. API Key 발급

Kakao Map API를 이용하기 위해서는 먼저 kakao developers에서 API Key를 발급받아야 한다.

발급 과정은 다음과 같다.

 

1️⃣ https://developers.kakao.com/ 에서 ‘내 어플리케이션’ 선택

 

2️⃣ 카카오 계정 로그인

 

3️⃣ 어플리케이션 추가하기

 

4️⃣ 어플리케이션 정보 입력 후 저장

 

5️⃣ 생성된 웹 어플리케이션 선택

 

6️⃣ 앱 설정 → 플랫폼 선택 → Web 플랫폼 등록

 

7️⃣ 사이트 도메인 등록

 

8️⃣ 앱 키 확인

여기서 JavaScript 키를 복사하면 된다.

 

 

 

 

02. Next.js 프로젝트에 API 연동

1️⃣ react-kakao-maps-sdk를 next.js 프로젝트에 추가

npm install react-kakao-maps-sdk

 

2️⃣ kakao map 컴포넌트 작성

#1. API 키 설정 및 URL 설정

const KAKAO_MAP_URL = `//dapi.kakao.com/v2/maps/sdk.js?appkey={api-key-value}&autoload=false`

Kakao Developers에서 발급받은 JavaScript 앱 키를 사용하여 Kakao Map API URL을 설정해야 한다.

 

이때 URL 주소 및 API Key를 입력하고, autoload=false를 추가해야 한다. 만약 이 파라미터를 생략하거나 true 값을 주게 되면, kakao.maps가 제대로 로딩되지 못하게 되어 TypeError : kakao.maps.LatLng is not a constructor라는 오류가 발생할 것이다.

autoload=false는 자동 로딩을 방지하여 kakao.maps.load()를 통해 수동으로 로드하도록 설정한다.

 

 

#2. Kakao Map 객체 생성 및 옵션 설정

Kakao Map 컴포넌트를 작성하여 실제 지도를 렌더링해야 한다.

if (typeof window !== 'undefined' && window.kakao)

먼저 window 객체가 존재하는지 확인하여 클라이언트 환경에서만 실행되도록 한다.

window.kakao가 존재해야 kakao.maps를 사용할 수 있다.

 

window.kakao.maps.load(() => { ... })

window.kakao.maps.load()를 통해 kakao map API의 지도를 비동기적으로 로드한다.

해당 함수 내부에서 지도의 세부적인 설정을 한다.

 

const container = document.getElementById('map')
const options = {
  center: new window.kakao.maps.LatLng(37.5665, 126.978),
  level: 3,
}

window.kakao.maps.load() 내부에 지도 컨테이너 및 옵션을 설정해야 한다.

container은 지도를 렌더링 할 DOM 요소를 지정하며, id='map'을 가진 요소를 가져온다.

옵션 설정은 다음 두가지를 설정한다.

• center : 지도 중심 좌표 설정
• level : 지도 확대 수준. 값이 작을수록 더 확대된 상태를 나타낸다.

 

const map = new window.kakao.maps.Map(container, options)

다음은 지도 객체를 생성한다. Map 객체를 생성하여 지도를 해당 container에 렌더링한다.

 

new window.kakao.maps.Marker({
  position: new window.kakao.maps.LatLng(37.5665, 126.978),
  map: map,
})

지도에 해당 위치를 나타내는 마커를 추가해야 한다.

Marker는 객체를 생성하여 지정된 position에 마커를 표시한다.

• position : 마커가 표시될 좌표
• map : 마커를 표시할 지도 객체

 

 

#3. 스크립트 로드 및 지도 표시 영역 작성

<Script src={KAKAO_MAP_URL} strategy='beforeInteractive' />

스크립트의 stratefy에 beforeInteractive 속성을 주어 코드가 렌더링 되기 전에 로드되도록 설정한다.

 

<div id='map' style={{ width: '100%', height: '400px' }} />

마지막으로 지도를 표시할 영역을 <div>로 설정한다.

style을 이용해 지도의 크기를 설정하고 id='map'을 통해 useEffect에서 이 id를 이용하여 DOM 요소를 참조하도록 한다.

 

 

전체 코드는 다음과 같다.

'use client'

import { useEffect } from 'react'
import Script from 'next/script'
import 'react-kakao-maps-sdk'

const KAKAO_MAP_URL = `//dapi.kakao.com/v2/maps/sdk.js?appkey={api-key-value}&autoload=false`

export default function KaKaoMap() {
  useEffect(() => {
    if (typeof window !== 'undefined' && window.kakao) {
      window.kakao.maps.load(() => {
        const container = document.getElementById('map')
        const options = {
          center: new window.kakao.maps.LatLng(37.5665, 126.978),
          level: 3,
        }
        const map = new window.kakao.maps.Map(container, options)

        new window.kakao.maps.Marker({
          position: new window.kakao.maps.LatLng(37.5665, 126.978),
          map: map,
        })
      })
    }
  }, [])
  return (
    <>
      <Script src={KAKAO_MAP_URL} strategy='beforeInteractive' />
      <div id='map' style={{ width: '100%', height: '400px' }} />
    </>
  )
}

 

 

3️⃣ 지도를 표시할 page.tsx에 앞서 작성한 kakao map 컴포넌트 불러오기

해당 프로젝트에서는 /home 경로에서 지도를 보여주기 위해 /app/home/page.tsx에 Map 컴포넌트를 import 하였다.

import KaKaoMap from '@/components/map/kakaomap'

export default function HomePage() {
  return (
    <>
      <KaKaoMap />
    </>
  )
}