Next.js 기반 프로젝트에서 카카오 맵 api를 사용하여 지도를 화면에 띄우는 방법에 대해 순서대로 정리해보자.
[ 목차 ]
- 카카오 맵 Api key 받기
- 지도 화면 출력
- 지도 출력 영역 설정
- script를 이용하여 Api 불러오기
- 지도 띄우는 코드 작성
- 전체코드
참고로 이 글은, NextJS 프로젝트를 만들 줄은 알고, Next.js 혹은 React에 대한 최소한의 지식은 가지고 있다는 가정하에 작성하였다.
(Next.js 프로젝트를 처음 만드는 방법은 공식문서를 참고하자.)
또한 Openlayers라는 라이브러리를 통해서 지도를 그리는 방법도 있는데, 이 부분은 Openlayers 지도 포스팅을 참고하자.
1. 카카오 맵 Api key 받기
우리가 kakaoMap Api를 이용하기 위해서는 kakao에서 제공하는 key가 필요한데, 이 부분은 카카오에서 매우 잘 제공해주고 있다. (kakao 공식 가이드)
우선 kakao.developers로 접속하자.
그럼 아래와 같은 페이지가 보일 것이다.
그리고 시작하기 버튼을 누르면, 회원가입과 같은 절차를 하게 되고, 애플리케이션을 만들 수 있는 다음과 같은 페이지를 볼 수 있다.
여기에서 매우 간단히 애플리케이션을 만든 후, 해당 애플리케이션으로 들어가 보면 다음과 같은 페이지에서 Api키를 확인 할 수 있다.
우리는 Next.js, 웹에서 카카오지도를 출력할 예정이므로, 4가지 ApiKey 중 JavaScript 키를 사용할 것이다.
2. 지도 화면 출력
아니, 바로 화면에 출력이 된다고? 라고 생각 할 수도 있겠지만, 가이드를 보면서 조금만 손보면 가능하다.
Step by Step으로 따라가보자.
[지도 출력 영역 설정]
먼저, 지도가 화면에 보일 영역을 설정해주자.
(참고로 필자는 tailwind를 이용하기에 className으로 높이와 넓이를 지정해주었지만,
당연히 일반 CSS든, SCSS든 높이, 넓이만 지정해주면 상관없다.)
return (
<div>
<div id="map" className="w-96 h-96"></div>
</div>
);
[ Script를 이용하여 Api 불러오기]
카카오에서는 위 사진처럼 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 파일까지 모두 다 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;
잘못된 부분이 있거나, 이해가 안되는 부분에 대해서는 언제든지 댓글을 남겨주세요!
'NextJS' 카테고리의 다른 글
[Solved] Property 'value' does not exist on type 'HTMLElement' (React Input Event Type) (1) | 2022.10.08 |
---|---|
[Solved] kakao.maps.LatLng is not a constructor (0) | 2022.10.01 |
[Nextjs] - tailwind 작동이 안될때(Error: Cannot find module 'tailwindcss') (0) | 2022.09.30 |
[NextJS - 7] Next.js - Edge? (1) | 2022.08.30 |
[NextJS - 6] Rendering ( Next.js의 꽃, pre-rendering ) (0) | 2022.08.30 |