geolocation, kakao 로컬 rest api 활용

오늘은 geolocation과 kakao rest api 키를 활용하여 유저의 위도/경로 위치 정보를 가져와서 헤더에 보여주는 작업을 했다. 

 

이번에 geolocation을 처음 사용해 봐서 아직은 기본적인 기능만 구현했다. 

먼저 유저 위치 정보를 가져오는 함수를 만들었다. 

 

//현재 좌표 가져오기
const handleGetCurrentPosition = () => {
    navigator.geolocation.getCurrentPosition((position) => {
      console.log('현재 좌표 : ', position.coords.latitude, position.coords.longitude);
      setLocation({ lat: position.coords.latitude, lng: position.coords.longitude });
    });
};

결과 화면

handleGetCurrentPosition 함수에서 navigator.geolocation.getCurrentPosition으로 유저의 위치 정보를 가져온다. 

setLocation 은 zustand store에 작성한 함수로 유저의 위치 정보를 store에 저장한다. 

 

 

 

store 작성한 파일

/src/shared/store/userLocation.ts

import { create } from 'zustand';

type Store = {
  userLocation: { lat: number; lng: number };
  setLocation: (val: { lat: number; lng: number }) => void;
};

export const useUserLocationStore = create<Store>()((set) => ({
  userLocation: { lat: 37.5286, lng: 127.1264 }, //임시 기본값
  setLocation: (val) => set({ userLocation: { lat: val.lat, lng: val.lng } }),
}));

 

 

kakao rest api 유저 위치 정보에 따른 주소 정보를 조회하는 함수를 구현했다. 

documents를 console에 찍으면 상세한 주소가 나오는데, 거기서 시와 구 부분의 주소인 address.region_1depth_name, address.region_2 depth_name을 useState에 담아서 헤더에 렌더링 될 수 있게 했다. 

  const [userAddress, setUserAddress] = useState('');
  
  //kakao rest api 위도/경도 -> 주소 변환
  const getAddress = async () => {
    const response = await fetch(
      `https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${userLocation.lng}&y=${userLocation.lat}`,
      {
        headers: {
          Authorization: `KakaoAK ${process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY}`,
        },
      },
    );
    const { documents } = await response.json();
    const address = documents[0]?.address;
    setUserAddress(address.region_1depth_name + ' ' + address.region_2depth_name);
  };

 

 

 

지금은 약간의 버그가 있는데, 가끔 첫 렌더링 시에 제대로 주소가 불러와지지 않는 문제가 있다.

useEffect(() => {
    handleGetCurrentPosition();
    getAddress();
}, [userAddress]);

 

userAddress 값이 변경되면 위 함수를 다시 실행하도록 했는데 이 부분에 문제가 있는 것 같다. 

내일 테스트를 더 해봐야겠다.