[REACT] 카카오 맵 API 커스텀 적용하기 (1) 🌍

현재 백엔드와 협업하며 웹 프로젝트를 진행하고 있다. 😀
지금까지 작업했던 내용중에 가장 다루기 까다로웠던 카카오 맵 API 사용법에 대해 소개해보려고 한다.

✨카카오 맵 API✨에서 Guide를 보면 아주 자세히 사용법이 나와있기 때문에 그대로 따라하면 지도는 쉽게 생성할 수 있다.

기본적인 지도 생성 및 사용법은 Guide에 자세히 나와있고, Sample 카테고리에는 카카오 맵을 이용한 여러가지 샘플 예시들이 코드와 함께 잘 설명돼있기 때문에 사용법에 큰 어려움이 없다 !

그런데 왜 가장 까다로웠던 작업이었냐면 . . .
나는 카카오가 제공한 샘플들을 어느정도 섞어서 커스텀을 해야했기 때문이다.
다행히 샘플 예시들이 많기 때문에 잘 참고하며 작업하였다.
그 중에서도 내가 참고한 샘플은 다음과 같다.

✔️ 클릭한 위치에 마커 표시하기
✔️ 좌표로 주소를 얻어내기
✔️ geolocation으로 마커 표시하기

위 세 개의 샘플을 이용해서 내가 최종적으로 만들고자 한 것은 다음과 같다.

✨ 완성본 ✨

• 지도에 마커를 찍으면 해당 법정동 주소(시/구/동 정보)가 하단에 태그로 생성된다.
• 동일한 법정동 주소에 마커가 생길 때는, 태그가 생성되지 않는다.
• 서로 다른 법정동 주소를 최대 5개까지 마커를 찍을 수 있고, 태그도 최대 5개 생성된다.
• 찍은 마커를 다시 클릭하면 마커가 없어지고 해당 법정동 주소가 담긴 태그도 없어진다.

그럼 이제 본격적으로 방법을 알아보자 ! 👀

1. 지도 생성 및 세팅 🔨

✔️ 나는 React, Next.js 환경에서 작업을 하였고, index.html 에서 script 를 추가하지 않고, createElement 를 통해 해당 파일에서 script를 바로 생성하여 사용하였다.

const getMap = () => {
    const mapScript = document.createElement("script");
    mapScript.async = true;
    mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAOMAP_APPKEY}&autoload=false&libraries=services`;
    document.head.appendChild(mapScript);
    mapScript.addEventListener("load", onLoadKakaoMap);
  };

❗ 여기서 주의할 점은 .env 파일에 저장할 APP KEY의 이름은 아무렇게나 저장하면 안된다. 나의 경우에는 NEXT_PUBLIC_KAKAOMAP_APPKEY 로 저장하니 되었고, 다른 블로그의 글을 보니 REACT_APP을 꼭 붙여줘야 한다고 하는데 정확히 뭐라고 입력하는게 맞는 것인지는 잘 모르겠다. 여하튼 여기까지 잘 따라왔는데 지도가 안 뜬다면 이름의 오류일 수 있으니 다들 확인하길 바란다. ❗
❗ 또한, 나처럼 좌표로 주소를 얻어내기와 같은 카카오 맵 API 중에서도 라이브러리를 이용하는 경우에는 script의 뒤에 libraries=services를 놓치면 안된다. 다들 나처럼 저거하나 때문에 오랫동안 헤매지 않길 바란다.. ❗

나는 카카오 맵 API의 예시들을 참고하며 주요 코드들을 함수로 나누어 작업했다. 위의 코드는 script를 생성하고, 해당 script의 src로 카카오 맵 API KEY를 설정해주는 함수이다. 기본적인 세팅을 했다고 보면 된다. 그 다음으로 addEventListener가 실행돼 밑의 코드가 실행된다.

const onLoadKakaoMap = () => {
    kakao.maps.load(() => {
      const container = document.getElementById("map");
      const options = {
        center: new kakao.maps.LatLng(37.56682420062817, 126.97864093976689), //지도의 중심좌표
        level: 5, //지도의 확대 레벨
      };
      const map = new kakao.maps.Map(container, options); //지도 생성
      const geocoder = new kakao.maps.services.Geocoder(); //주소-좌표 변환 객체 생성
      const marker = new kakao.maps.Marker(); //클릭한 위치를 표시할 마커

      getCenter(map); //지도의 중심좌표 얻기
      getArea(map, geocoder, marker);
    });
  };

위의 내용은 카카오 맵 API 샘플에서 쉽게 볼 수 있는 코드이다. 나는 지도의 중심좌표를 서울시청으로 설정해두었다.

const getCenter = (map) => {
    //사용자의 위치를 정상적으로 받아오면 해당 위치가 중심좌표
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        const lat = position.coords.latitude,
          lon = position.coords.longitude;

        const locPosition = new kakao.maps.LatLng(lat, lon);
        map.setCenter(locPosition);
      });
    }
    //아니라면 서울시청이 기본 중심좌표
    else {
      const locPosition = new kakao.maps.LatLng(
        37.56682420062817,
        126.97864093976689
      );
      map.setCenter(locPosition);
    }
  };

위 코드는 geolocation으로 마커 표시하기를 참고하여 구현하였다. HTML5 GeoLocation을 이용하여 사용자가 접속 위치 허용을 하면, 지도를 load 하자마자 사용자의 위치가 중심좌표가 된다.

다음 포스팅에서는 마커를 찍고, 찍은 위치의 주소를 얻어오는 법을 포스팅 해보겠다. 👀