Today Yewon Learned

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

API

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

데브워니 2021. 11. 8. 14:29

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 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.daum.net

Comments