우편번호 서비스 API ( kakao )

회원가입을 구현할 때 사용자의 주소를 직접 입력하는 경우는 요즘 드물다.

 

요즘에는 특정 주소를 검색하면 해당 주소의 우편번호 및 상세주소들의 정보를 제공하는 API가 많이있는데

 

그 중에서도 카카오에서 지원하는 API가 가장 간단하고 따라서 구현하기 쉽습니다.

 

오늘 회원가입 페이지를 구현하면서 해당 API를 사용해봤습니다.

 

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

function openAddressSearchWindow() {
    new daum.Postcode({
      oncomplete: function(data) {
      console.log(data);

      var roadAddr = data.roadAddress; // 도로명 주소 변수
      var extraRoadAddr = ''; // 참고 항목 변수
      // 법정동명이 있을 경우 추가한다. (법정리는 제외)
      // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
      if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
        	extraRoadAddr += data.bname;
      }
      // 건물명이 있고, 공동주택일 경우 추가한다.
      if(data.buildingName !== '' && data.apartment === 'Y'){
      		extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
      }
      // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
      if(extraRoadAddr !== ''){
      		extraRoadAddr = ' (' + extraRoadAddr + ')';
      }

      // 우편 주소와 해당 필드 넣기
      postCode.val(data.zonecode);
      roadAddress.val(roadAddr+" ");

      if(roadAddr !== ''){
      extraRoadAddress.val(extraRoadAddr);
      } else {
      extraRoadAddress.val("");
      }
      --생략--
      }
  }).open();
}

API를 사용하기 위해서 <script> 태그를 붙여서 사용합니다.

순수하게 빈 페이지에서 공식사이트에 있는 코드를 직접 붙여서 사용하면 다음과 같은 데이터를 받을 수 있습니다.

 

이런식으로 callback으로 받은 data를 콘솔로 찍어보면 검색했던 주소지에 대한 정보들이 나타나게 됩니다.

 

해당 정보를 가지고 JSP를 커스텀하면 되겠습니다.

 

 

 

출처 postcode.map.daum.net/guide#usage