next.js 로 카카오 API 불러오기

1. 카카오맵 API 키 발급: 먼저 카카오맵 API 키를 발급받아야 합니다.

API 키는 카카오 개발자 웹사이트에서 발급받을 수 있습니다.

 

2. 카카오맵 스크립트 추가: 발급받은 API 키를 사용하여 카카오맵 API 스크립트를 웹사이트에 추가해야 합니다.

스크립트를 추가하면 카카오맵 API를 사용할 수 있게 됩니다.

 

3. 카카오맵 불러오기: 스크립트를 추가한 후에는 원하는 위치에 카카오맵을 불러올 수 있습니다.

불러오는 방법에는 여러 가지가 있으며,

일반적으로는 카카오맵 API를 사용하여 원하는 위치를 지도에 표시하는 방법을 사용합니다.

 

---

1.카카오 개발자 웹사이트 https://developers.kakao.com/ 에 접속하여 로그인 합니다.

2. 로그인 후, "내 애플리케이션" 메뉴에서 새 애플리케이션을 등록합니다.

3. 등록한 애플리케이션을 선택하고, "플랫폼" 탭에서 "Web" 플랫폼을 추가합니다.

Web 플랫폼 등록 버튼 누르기

사용중인 플랫폼 도메인 넣기

4. "Web" 플랫폼을 추가하면 "JavaScript 키"가 생성되며, 이 키를 복사하여 사용하면 됩니다.

(페이지를 올려보면 있음)

5. 리액트에서 외부 스크립트를 사용하려면  useEffect 훅을 사용하여 동적으로 로드하기 때문에,

스크립트 태그를 그대로 붙여넣기하지 않고 useEffect 훅을 사용해 줍니다.

(컴포넌트 단위로 파일 생성하는걸 추천 ex. my-map.js)

 

그리고 각각 발급받은  API 키는 외부에 노출되면 보안에 취약해질 수 있습니다.

예를 들어, 누군가 API 키를 알고 있다면 해당 키를 사용하여 API를 남용하거나 악용할 수 있습니다.

따라서 API 키를 코드에 직접 하드코딩하는 것은 권장되지 않습니다.

환경변수에 저장하면 코드에서 직접 키를 노출시키지 않고,

서버 측에서 안전하게 관리할 수 있습니다.

import React, { useEffect } from "react";

export default function MyMap() {
  useEffect(() => {
    const kakaoMapScript = document.createElement("script");
    kakaoMapScript.async = false;
    kakaoMapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.KAKAO_MAP_KEY}&autoload=false`;
    document.head.appendChild(kakaoMapScript);

    const onLoadKakaoAPI = () => {
      window.kakao.maps.load(() => {
        var container = document.getElementById("map");
        var options = {
          center: new window.kakao.maps.LatLng(33.450701, 126.570667),
          level: 3,
        };

        var map = new window.kakao.maps.Map(container, options);
      });
    };

    kakaoMapScript.addEventListener("load", onLoadKakaoAPI);
  }, []);

  return <div id="map" style={{ width: "500px", height: "400px" }} />;
}

+ 지도를 보여 줄 컴포넌트에 불러와줍니다.

<li>
  <MyMap kakaoMapApiKey={kakaoMapApiKey} />
</li> //li는 예시 태그

---

+ 내 위치 보여주기

import React, { useEffect } from "react";

export default function MyMap() {
  useEffect(() => {
    const kakaoMapScript = document.createElement("script");
    kakaoMapScript.async = false;
    kakaoMapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.KAKAO_MAP_KEY}&autoload=false`;
    document.head.appendChild(kakaoMapScript);

    const onLoadKakaoAPI = () => {
      window.kakao.maps.load(() => {
        const container = document.getElementById("map");
        const options = {
          center: new window.kakao.maps.LatLng(33.450701, 126.570667),
          level: 3,
        };

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

        // 사용자의 위치 가져오기
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            (position) => {
              const latlng = new window.kakao.maps.LatLng(
                position.coords.latitude,
                position.coords.longitude
              );

              // 지도 중심을 사용자의 위치로 이동
              map.setCenter(latlng);

              // 사용자 위치에 마커 추가
              const marker = new window.kakao.maps.Marker({
                position: latlng,
              });
              marker.setMap(map);
            },
            (error) => {
              console.error("Error getting user's location:", error);

              // 위치 정보를 가져오는 데에 실패한 경우 기본 위치로 설정
              const defaultLatlng = new window.kakao.maps.LatLng(
                33.450701,
                126.570667
              );
              map.setCenter(defaultLatlng);

              // 기본 위치에 마커 추가
              const marker = new window.kakao.maps.Marker({
                position: defaultLatlng,
              });
              marker.setMap(map);
            }
          );
        } else {
          console.error("Geolocation is not supported.");

          // 위치 정보를 지원하지 않는 경우 기본 위치로 설정
          const defaultLatlng = new window.kakao.maps.LatLng(
            33.450701,
            126.570667
          );
          map.setCenter(defaultLatlng);

          // 기본 위치에 마커 추가
          const marker = new window.kakao.maps.Marker({
            position: defaultLatlng,
          });
          marker.setMap(map);
        }
      });
    };

    kakaoMapScript.addEventListener("load", onLoadKakaoAPI);
  }, []);

  return <div id="map" style={{ width: "500px", height: "400px" }} />;
}

navigator.geolocation.getCurrentPosition 함수를 사용하여 사용자의 위치 정보를 가져오고,

가져온 위치 정보를 기반으로 지도의 중심을 설정하고 마커를 추가하고,

getCurrentPosition 메서드의 두 번째 인자로 에러 처리를 추가하였습니다.

 

에러 발생 시 기본 위치로 설정하여 지도와 마커를 표시하고,

브라우저가 위치 정보를 지원하지 않을 경우에도 마찬가지로 기본 위치를 사용하여 지도와 마커를 표시합니다.

이렇게 하면 사용자의 위치 정보를 가져오는데 발생하는 오류를 처리할 수 있습니다.