[API] 카카오 우편번호 API 사용해보기

KAKAO - Daum Postcode Service

---

프로젝트 진행 중 고객 정보 등록을 위한 우편번호 서비스를 제공하기 위해 카카오 API를 이용해보았다.

 

 

• 기본 사용법

  

  통합 로딩 방식

•  index.jsp

<tr>
	<th class="text-center align-middle">우편번호</th>
	<td class="text-center align-middle">
		<div class="form-group form-inline align-middle" style="margin-top: 18px;">
		<input type="text" class="form-control col-md-4 mr-1" name="PAT_POST" readonly="readonly">
		<button type="button" class="btn btn-info" onclick="openDaumZipAddress();">주소 검색</button>
		</div>
	</td>
	<th class="text-center align-middle">주소</th>
	<td class="text-center align-middle"><input type="text" class="form-control" name="PAT_ADDR" readonly="readonly"></td>
	<th class="text-center align-middle">상세주소</th>
	<td colspan="3"><input type="text" class="form-control" name="PAT_ADDR1"></td>
</tr>

 

 

•  javascript

function openDaumZipAddress() {
	  new daum.Postcode({
	        oncomplete: function(data) {
	           document.querySelector('input[name=PAT_POST]').value = data.zonecode;
	           document.querySelector('input[name=PAT_ADDR]').value = data.address
	        }
	    }).open();
}

 

• zipcode - 우편번호를 담는 id값
• address - 주소를 담는 id값

 

예시)

고객 정보 입력

 

결과)

고객 목록

 

 

• 전체 주소 보이는 코드

function openDaumZipAddress() {
     new daum.Postcode({
           oncomplete: function(data) {
              console.log(data);
              document.querySelector('input[name=USER_POST]').value = data.zonecode;
              
              var address = data.address;
              
              if(data.buildingName != "") {
                 address += " (" + data.buildingName + ")";
              }
              
              document.querySelector('input[name=USER_ADD1]').value = address;
           }
       }).open();
}

 

 

아래 카카오 홈페이지를 방문하면 다양한 속성을 사용하여 구현가능하다.

 

Daum Postcode Service User Guide

Daum 우편번호 서비스