[NextJS] Next.JS에서 kakao map api 사용

Next.js 기반 프로젝트에서 카카오 맵 api를 사용하여 지도를 화면에 띄우는 방법에 대해 순서대로 정리해보자.

 

[ 목차 ]

1. 카카오 맵 Api key 받기
2. 지도 화면 출력
   1. 지도 출력 영역 설정
   2. script를 이용하여 Api 불러오기
   3. 지도 띄우는 코드 작성
   4. 전체코드

 

---

 

 

참고로 이 글은, NextJS 프로젝트를 만들 줄은 알고, Next.js 혹은 React에 대한 최소한의 지식은 가지고 있다는 가정하에 작성하였다.
(Next.js 프로젝트를 처음 만드는 방법은 공식문서를 참고하자.)

 

또한 Openlayers라는 라이브러리를 통해서 지도를 그리는 방법도 있는데, 이 부분은 Openlayers 지도 포스팅을 참고하자.

 

1. 카카오 맵 Api key 받기

우리가 kakaoMap Api를 이용하기 위해서는 kakao에서 제공하는 key가 필요한데, 이 부분은 카카오에서 매우 잘 제공해주고 있다. (kakao 공식 가이드)

 

우선 kakao.developers로 접속하자. 

그럼 아래와 같은 페이지가 보일 것이다.

kakao.developers render page

 

 

그리고 시작하기 버튼을 누르면, 회원가입과 같은 절차를 하게 되고, 애플리케이션을 만들 수 있는 다음과 같은 페이지를 볼 수 있다. 

애플리케이션 추가 화면

 

여기에서 매우 간단히 애플리케이션을 만든 후, 해당 애플리케이션으로 들어가 보면 다음과 같은 페이지에서 Api키를 확인 할 수 있다.

우리는 Next.js, 웹에서 카카오지도를 출력할 예정이므로, 4가지 ApiKey 중 JavaScript 키를 사용할 것이다.

KakaoMap Api Key

 

---

 

 

2. 지도 화면 출력

아니, 바로 화면에 출력이 된다고? 라고 생각 할 수도 있겠지만, 가이드를 보면서 조금만 손보면 가능하다. 

Step by Step으로 따라가보자.

 

---

[지도 출력 영역 설정]

먼저, 지도가 화면에 보일 영역을 설정해주자.

(참고로 필자는 tailwind를 이용하기에 className으로 높이와 넓이를 지정해주었지만, 
당연히 일반 CSS든, SCSS든 높이, 넓이만 지정해주면 상관없다.)

  return (
    <div>
      <div id="map" className="w-96 h-96"></div>
    </div>
  );

 

 

---

[ Script를 이용하여 Api 불러오기]

kakao-guide 1

카카오에서는 위 사진처럼 scipt 태그를 이용하여 api를 불러오고 있다. 

 

Next.js에서도 방법만 조금 다를분 내용은 같다.
아래 코드를 살펴보자.

 

우선, 알아야 할 점은 useEffect의 의존성을 빈 배열로 줌으로써 해당 코드는 렌더될 때 한번만 실행되게 된다.

 

  useEffect(() => {
  	// DOM을 이용하여 script 태그를 만들어주자.
    const mapScript = document.createElement('script');
	// script.async = true 라면, 
    // 해당 스크립트가 다른 페이지와는 비동기적으로 동작함을 의미한다.
    mapScript.async = true;
    // script.src에 map을 불러오는 api를 넣어주자.
    // 여기에서 우리가 기존에 발급 받았던 apiKey를 넣어주면 된다.
    mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.KAKAO_MAP_API_KEY}&autoload=false`;
	
    //이제 우리가 만든 script를 document에 붙여주자.
    document.head.appendChild(mapScript);

  }, []);

 

---

 

[ 지도 띄우는 코드 작성]

이제, 우리가 작성한 script가 완전히 load된 이후, 지도를 띄우는 코드가 실행 될 수 있도록 코드를 작성해보자.

 

  useEffect(() => {
  	// DOM을 이용하여 script 태그를 만들어주자.
    const mapScript = document.createElement('script');
	// script.async = true 라면, 
    // 해당 스크립트가 다른 페이지와는 비동기적으로 동작함을 의미한다.
    mapScript.async = true;
    // script.src에 map을 불러오는 api를 넣어주자.
    // 여기에서 우리가 기존에 발급 받았던 apiKey를 넣어주면 된다.
    mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.KAKAO_MAP_API_KEY}&autoload=false`;
	
    //이제 우리가 만든 script를 document에 붙여주자.
    document.head.appendChild(mapScript);

	// script가 완전히 load 된 이후, 실행될 함수
    const onLoadKakaoMap = () => {
      window.kakao.maps.load(() => {
        const mapContainer = document.getElementById('map');
        const mapOption = {
          center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
          level: 3, // 지도의 확대 레벨
        };
        new window.kakao.maps.Map(mapContainer, mapOption);
      });
    };
    
    // sciprt가 완전히 load 된 이후, 지도를 띄우는 코드를 실행시킨다.
    mapScript.addEventListener('load', onLoadKakaoMap);
  }, []);

 

자, 이제 지도는 정상적으로 출력 될 것이다. 

그리고 위 코드의 대부분 다 주석만으로 충분히 이해가 될 것이다. 

다만, 왜 꼭 콜백 형식으로 해야 하고, load라는 메소드는 왜 사용해야 하는 걸까?

 

우리가 작성한 script는 sdk.js 파일만 받아오는 것이 아니라, kakao.js 라는 부분까지 로드를 하게 된다. 
참고로 이 kakao.js 라는 파일은 지도에서 사용되는 각종 이벤트핸들러들과 메소드들이 담겨져 있는 파일이다.

kakao.js 일부 발췌

그러므로, 우리는 kakao.js 파일까지 모두 다 load된 이후에! 
지도를 띄우는 코드가 실행 되도록 보장해줄 필요가 있는 것이다. 
그리고 Kakao에서는 그 보장하는 방법에 대해 아주 친절히 제시하고 있다.(kakao load 메소드)

 

 

자, 이제 어떻게 Nextjs에서 카카오 지도를 띄우는지에 대해 정리해봤다.

 

kakao 라는 변수가 어디서 나온 것인지 에 대한 의문이 생길 수 있는데, 이 부분에 대해서는

다음 글에서 알아보도록 하자.

 

 

---

[ 전체 코드 ]

import { useEffect, useState } from 'react';

function Map() {
  useEffect(() => {
    const mapScript = document.createElement('script');

    mapScript.async = true;
    mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_API_KEY}&autoload=false`;

    document.head.appendChild(mapScript);

    const onLoadKakaoMap = () => {
      window.kakao.maps.load(() => {
        const mapContainer = document.getElementById('map');
        const mapOption = {
          center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
          level: 3, // 지도의 확대 레벨
        };
        new window.kakao.maps.Map(mapContainer, mapOption);
      });
    };
    mapScript.addEventListener('load', onLoadKakaoMap);
  }, []);

  return (
    <div>
      <div id="map" className="w-96 h-96"></div>
    </div>
  );
}

export default Map;

 

잘못된 부분이 있거나, 이해가 안되는 부분에 대해서는 언제든지 댓글을 남겨주세요!