[Javascript] 카카오 주소검색 연결하기

📱테스트 환경

"nuxt": "^3.11.2"
"vue": "^3.4.21"
"vue-router": "^4.3.0"

---

https://postcode.map.daum.net/guide

Daum 우편번호 서비스

해당 가이드를 참고하여 만들었고

나는 유저에게 따로 먼저 정보를 받지 않고 주소 검색한 정보를

입력 포맷에 입력될 수 있도록 만들고 싶었다.

1. 팝업을 통해 받은 정보를 등록할 수 있도록

2. 함수로 만들어서 여러 곳에서 사용 할 수 있도록

코드는 다음과 같다.

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

// 타입스크립트 daum 무시 -> 나중에 수정 필요
declare var daum: any;

export const searchKakaoAddress = () => {
  return new Promise((resolve, reject) => {
    new daum.Postcode({
      oncomplete: function (data: any) {
        resolve(data);
      },
      onerror: function (e: any) {
        reject(e);
      },
    }).open();
  });
};

const openKakaoAddress = async () => {
  await searchKakaoAddress().then((res: any) => {
    formData.address = res.address;
    formData.zipcode = res.zonecode;
  });
};