카카오 지도 api 사용해 좌표로 주소 얻어내기

카카오 지도 api를 사용해 맛집 데이터베이스를 만들고 있는데, 맛집을 등록할 때 지도에서 위치를 클릭하면 주소를 가져와 저장할 수 있도록 하고 싶었다. 카카오 지도 api는 공식문서에 설명이 잘 되어 있는 편이지만, 업데이트가 안 되어 있는 부분도 있는 거 같았다. 좌표를 통해 주소를 알아내는 방법은 가이드에 const geocoder = new window.kakao.maps.services.Geocoder();를 선언해서 할 수 있다고 되어 있었으나 타입 에러가 뜨길래 콘솔로 window.kakao.maps를 찍어보니 services라는 객체가 존재하지 않았다. 그래서 메서드 대신에 요청해서 가져오는 게 있을까 싶어서 찾아봤다.

https://developers.kakao.com/docs/latest/ko/local/dev-guide#coord-to-address
여기에 api 요청 하는 것이 아주 잘 나와있었다! 문서에 나와있는대로 axios 인스턴스를 만들고 요청했더니 원하는 정보를 얻을 수 있었다.

import axios from 'axios';

const AxiosInstance = axios.create({
  baseURL: `https://dapi.kakao.com`,
  headers: { Authorization: `KakaoAK ${process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY}` },
});

AxiosInstance.defaults.paramsSerializer = {
  serialize: (paramObj: { [key: string]: string }) => {
    const params = new URLSearchParams();

    Object.entries(paramObj).forEach(([key, value]) => {
      if (value === null) return;
      if (value) params.append(key, value);
    });

    return params.toString();
  },
};

export const getAddressByCoord = async params => {
  const { data } = await AxiosInstance.get('/v2/local/geo/coord2address.json', { params });

  return data;
};

지도 불러올 때 쓰였던 API KEY는 자바스크립트키여서 처음에 Authorization에 그 키를 넣었더니 401에러가 뜨길래 왜 권한 문제가 있다는 거야! 했는데 REST API KEY를 가져와서 했어야 했다.
문서신봉자여서 새로운 걸 사용할 때 문서를 꼼꼼히 읽고 사용하는 편인데 문서가 업데이트가 안 되어 있는 경우도 종종 있으므로 개발을 할 때는 콘솔로 잘 확인해보고 이상한 데에서 헤매는 일이 없도록 해야겠다고 또 느꼈다.