[TypeScript] TypeScript로 카카오 우편번호 서비스 api 사용하기

 

 

공식 사이트 주소 ↓

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

Daum 우편번호 서비스

 

 

 

Next.js와 Typescript를 사용하는 프로젝트에서 주소 검색 api가 필요해서 공식 사이트를 참고해서 구현해봤다.

사이트에서 너무 친절하게 다 알려주고 있어서 그대로 따라하면 바로 적용이 된다 !!

 

 

예제에 들어가서 나한테 필요한 코드를 가져오면 된다.

나는 사용자가 선택한 값 이용하기 예제의 코드를 아래와 같이 사용했다.

// AddressSearchApi.ts

import React from "react";

interface AddressData {
  userSelectedType: string;
  roadAddress: string;
  jibunAddress: string;
  bname: string;
  buildingName: string;
  apartment: string;
  zonecode: string;
}

// 전역적으로 선언
declare var daum: any;

const AddressSearchApi = () => {
  new daum.Postcode({
    oncomplete: (data: AddressData) => {
      // 팝업에서 검색결과 항목을 클릭했을 때 실행할 코드를 작성하는 부분.

      // 각 주소의 노출 규칙에 따라 주소를 조합한다.
      // 내려오는 변수가 값이 없는 경우에는 공백('')값을 가지므로, 이를 참고하여 분기한다.
      let addr = ""; // 주소 변수

      // 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
      if (data.userSelectedType === "R") {
        // 사용자가 도로명 주소를 선택했을 경우
        addr = data.roadAddress;
      } else {
        // 사용자가 지번 주소를 선택했을 경우(J)
        addr = data.jibunAddress;
      }

      const addressInput = document.getElementById(
        "sample6_address"
      ) as HTMLInputElement;
      if (addressInput) {
        addressInput.value = addr;
      }
      // 커서를 상세주소 필드로 이동한다.
      const detailAddressInput = document.getElementById(
        "sample6_detailAddress"
      ) as HTMLInputElement;
      if (detailAddressInput) {
        detailAddressInput.focus();
      }
    },
  }).open();
  return;
};

export default AddressSearchApi;

 

TypeScript를 사용하고 있어서 먼저 interface로 type을 선언해주었고,

주소와 상세주소만 필요했기 때문에 우편번호와 참고항목 부분의 코드는 삭제했다.

 

(daum에서 자꾸 오류가 나서 위쪽에 전역적으로 선언했더니 해결됐다.)

 

 

 

그 다음, 주소 검색을 띄울 페이지에 들어가 input을 추가해주면 끝!

<input type="text" id="sample6_address" placeholder="주소" />
<input type="text" id="sample6_detailAddress"placeholder="상세주소"/>

 

 

 

 

페이지에 들어가서 작동해보면,

주소 검색 팝업이 잘 뜨는 것을 볼 수 있다!

 

 

 

 

주소 선택 후 input 칸에 선택한 값이 들어가는 것 까지 확인!

생각보다 간단해서 사용하기 편리했다 ㅎㅎ