triplus) 도로명주소를 좌표로 변경하기

가이드 생성 모달의 input기능을 추가하는 중에 한가지 요청을 받게 됐다.

**"도로명주소와 좌표정보를 동시에 보내주세요"**

도로명주소는 도로명주소 api를 사용하고 있어서 그대로 보내면 되지만, 주소를 좌표로 어떻게 보내야하지? 폭풍검색을 시작했다.

Geocoder

주소를 좌표로 변경하는 것을 Geocode라고 하는데, 이미 우리팀에서 사용중이던 카카오 map api도 이 기능을 제공한다는 정보를 발견했다.

로직은 공식문서에도 잘 나와있어서 이해와 코드를 작성하는 데에는 어려움이 없었다.

const { kakao } = window;

const geocoder = new kakao.maps.services.Geocoder();
  const callback = (result, status) => {
    const data = result[0].road_address;
    setInputs({ ...inputs, latitude: data.x, longitude: data.y });
    if (status === kakao.maps.services.Status.Ok) {
      console.log('Ok');
    }
  };

이렇게 window에서 kakao를 구조분해할당으로 빼주고, kakao maps의 services의 Geocoder메소드를 사용해주면 되는 것이었는데, 신나게 코드를 작성하고 보니 Geocoder를 찾을 수 없다는 에러메시지만 반복될 뿐이었다...

❓해결방법

카카오 공식문서의 코드만 그대로 가져왔는데, 설정해주어야 할 게 하나 더있었다. 바로 스크립트에 library 추가해주기!

<script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAOMAP_KEY%&libraries=services"
></script>

맨 끝에 &libraries=services 라고 추가해줘야 services라이브러리를 사용할 수 있게된다.

map기능 외에 기능을 이용하기 위해선 library를 스크립트에 추가해주어야 한다.

스크립트는 public > index.html 안에 넣어주면 된다!

저렇게 script src에 라이브러리를 추가해주니까 작동이 잘 되는 것을 확인할 수 있었다.

주소로 좌표변환하기 성공!