[JavaScript] 카카오 우편번호 api 사용방법

[JavaScript] 카카오 우편번호 api 사용방법 알아보기

1. 카카오 개발자 사이트에서 API 키 발급받기

카카오 개발자 사이트(https://developers.kakao.com/)에 가입하고 로그인한 후, API 키를 발급받아야 합니다. 발급받은 API 키를 웹페이지에서 사용하여 우편번호 검색 기능을 구현할 수 있습니다.

2. 카카오 우편번호 API 라이브러리 불러오기

먼저 HTML 파일의태그 안에 아래 코드를 추가하여 카카오 우편번호 API 라이브러리를 불러옵니다.

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

3. 주소 검색 창 생성하기

아래와 같이 JavaScript 코드를 작성하여 주소 검색 창을 생성합니다.

<script>
  function openZipcode() {
    new daum.Postcode({
      oncomplete: function(data) {
        var address = data.address; // 선택한 주소
        document.getElementById('address').value = address; // 결과 출력
      }
    }).open();
  }
</script>

<input type="text" id="address">
<button type="button" onclick="openZipcode()">우편번호 검색</button>

위 코드에서 new daum.Postcode()는 카카오 우편번호 API를 호출하는 코드입니다. oncomplete 콜백 함수는 우편번호 검색 결과를 받아 처리하는 함수입니다. 검색 결과 중 data.address는 선택한 주소 정보를 담고 있습니다.

4. API 키 등록하기

우편번호 검색 기능을 사용하기 위해서는 API 키를 등록해야 합니다. 아래와 같이 JavaScript 코드를 추가하여 API 키를 등록합니다.

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

<script>
  // API 키 설정
  daum.postcode.load(function() {
    new daum.Postcode({
      oncomplete: function(data) {
        var address = data.address;
        document.getElementById('address').value = address;
      },
      onerror: function(error) {
        console.error(error);
      }
    }).open({
      apiKey: '발급받은 API 키를 입력하세요'
    });
  });
</script>

<input type="text" id="address">
<button type="button" onclick="openZipcode()">우편번호 검색</button>

위 코드에서 apiKey에 발급받은 API 키를 입력하여 사용합니다.