[React] 카카오 api를 통해 주소를 좌표로 변환해보기 (undefinded Geocorder)

일단 페이지에 카카오 지도가 열려있다면 단순하게 kakao.maps.services.Geocoder()를 열어서 키워드를 콜백함수에 넣어주면 쉽게 나옴. 아래는 카카오 문서에 있는 예시 

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();

// 주소로 좌표를 검색합니다
geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {

    // 정상적으로 검색이 완료됐으면 
     if (status === kakao.maps.services.Status.OK) {

        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
            map: map,
            position: coords
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new kakao.maps.InfoWindow({
            content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
        });
        infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
    } 
});

 

** 트러블 슈팅

하지만 나 같은 경우 카카오 지도가 필요 없는 페이지에서 키워드를 통해 알아낸 address가 있을 때, 단지 데이터베이스에 좌표를 보내주고 싶었다. 

떄문에 react-daum-postcode 라이브러리가 제공하는 DaumPostCode가 onComplete 되었을 떄, 받아오는 result.address를 kakao.map.services.Geocoder()를 통해 좌표를 추출할려고 함.

하지만 이럴 경우 지도가 생성되지 않은 페이지에서 라이브러리를 사용했다고 undefinded Geocorder 에러가 뜸.

(만약 지도가 생성된 페이지에서 이 에러가 뜬다면 link를 삽입한 script문에 &libraries=services를 추가해주길) 

이것을 타파하기 위해 방법을 찾던 중 카카오 로컬 REST API 에서 아래 정보를 찾게 됨

 

응답 데이터로 아래와 같이 좌표까지 제공.

 

이를 위한 코드는 아래와 같음 ( REST API KEY는 카카오 문서 상단에 내 에플리케이션으로 들어가면 볼 수 있음 )

// address를 입력하면 좌표를 알아올 함수 

const getPosition = async (address: string) => {
    const url = `https://dapi.kakao.com/v2/local/search/address?query=${address}`;
    try {
      const res = await fetch(url, {
        headers: {
          Authorization: `KakaoAK ${REST_API_KEY}`,
        },
      });
      if (res.ok) {
        const data = await res.json();
        const { x: longitude, y: latitude } = data.documents[0];

        return { latitude, longitude };
      }
      throw new Error("somethis is wrong");
    } catch (error) {
      console.log(error);
    }
  };


// 키워드를 통해 알아낸 address
  const handleComplete = async (result: any) => {
    try {
      const { address, zonecode } = result;
      const position = await getPosition(address);
      if (position) {
        const { latitude, longitude } = position;
        sessionStorage.setItem(
          process.env.NEXT_PUBLIC_POST_ADDRESS!,
          JSON.stringify({
            address,
            zonecode,
            latitude,
            longitude,
          }),
        );
        onClose();
      } else {
        throw new Error("Something is wrong");
      }
    } catch (error) {
      console.log(error);
    }
  };