[react] geolocation + kakakoAPI로 현재 위치 찾기

문제 상황 및 해결

geolocation으로 어떻게 해야 하는 지 몰랐는데 아래 코드로 쉽게 해결..

  // 알아낸 좌표가 있을 때  
  const success = (position) => {
    console.log('위도', osition.coords.latitude,'경도', position.coords.longitude);
  };

  // 알아낸 좌표가 없을 때
  const error = (err) => {
    console.warn(`${err.message}`);
  };
  navigator.geolocation.getCurrentPosition(success, error, options);

그리고,  받은 좌표 값으로 kakao API에 요청!

 // 알아낸 좌표로 kakaoAPI 요청
  const success = (position) => {
    console.log(position.coords.latitude, position.coords.longitude);
    const y = position.coords.latitude;
    const x = position.coords.longitude;
    axios
      .get(
        `https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${x}&y=${y}`,
        {
          headers: {
            Authorization: `KakaoAK ${process.env.REACT_APP_KAKAO_API_KEY}`,
          },
        }
      )
      .then((res) => {
        console.log(res.data.documents[0].address.address_name);
        console.log(res.data.documents[0].address);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  // 알아낸 좌표가 없을 때
  const error = (err) => {
    console.warn(`${err.message}, 로그인 버튼 누르기 전에 허용 해주세요`);
  };

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(success, error, options);
  }, []);