카카오 맵 http에서 구현하기

🧐 왜... http에서 맵이 안 뜨지?

2차 프로젝트를 VM에 배포한 후 웹 서비스를 확인하는데 이상하게 카카오 맵이 뜨지 않았다. 데이터 센터 화재의 여파가 여전히 남아 있던 때라 'API가 복구가 아직 덜 됐나?' 처음엔 다들 대수롭지 않게 여겼다. 로컬에서는 정상 작동하는 걸 확인한 후에야 문제로 인지했다. 지도로 사용자의 현 위치를 불러 오는 게 우리 서비스의 핵심이었기에 얼른 문제를 해결해야 했다.

☁️ 문제 원인

사용자의 현 위치를 불러오기 위해 map center 값으로 Geolocation.getCurrentPosition()을 사용했다. 알고 보니 이 메서드는 보안상의 이유로 https://~ 혹은 localhost url에서만 작동하도록 규제가 걸려 있었다. VM으로 배포한 url은 http://~ 여서 이 규제에 따르면 당연하게도 작동하지 않았던 것이다.

🌥️ 해결 방안

• url을 https://~ 로 바꾼다.
• getCurrentPosition 말고 다른 방안을 찾아본다.

두 가지 다 도전했고 결론은 두 번째 방법으로 성공했다.

☀️ 문제 해결

어떻게 성공했냐면?

😊😄
바로
😄😊
바로
😊😄

사용자가 접속한 IP 주소를 기반으로 위도와 경도를 끌어와 현 위치를 잡아냈다!
코드를 먼저 살펴 보자.

import { useEffect, useState } from "react";

const getIp = async () =>
  await fetch("https://geolocation-db.com/json/")
    .then((res) => res.json())
    .then((res) => res["IPv4"]);
const useGeolocation = () => {
  const [geo, setGeo] = useState({ lat: 0, lon: 0 });
  const getLocation = async () => {
    const nowIp = await getIp();
    const geoData = await fetch(`http://ip-api.com/json/${nowIp}`)
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        return res;
      });
    const latitude = geoData.lat;
    const longitude = geoData.lon;
    setGeo({ lat: latitude, lon: longitude });
  };
  useEffect(() => {
    getLocation();
  }, []);

  return geo;
};

export default useGeolocation;

콘솔을 보면

이렇게 위도와 경도 값이 나온다. map을 띄워주는 컴포넌트에 함수를 가져와 중심 좌표에 함수.lat, 함수.lon을 넣어주면 getCurrentPosition 보다 정교하진 않지만 얼추 가까운 곳이 띄워진다.


🌞 문제 해결 ! 🌞