다음 API를 사용한 우편번호 검색

안녕하세요 IT 이곳저곳을 여행하고 있는 IT여행자입니다.

 

이번 포스팅은 다음 API를 사용한 우편번호 검색 프로그램으로 자바스크립트만을 사용한 우편번호 검색입니다.

 

다음 API를 사용한 우편번호 검색의 특징은 아래와 같습니다.

 

• 별도의 로그인이나 KEY 등록 과정이 필요 없다.
• 자바스크립트만을 사용하여 우편번호 검색을 할 수 있다.
• API 연결과 검색 버튼의 이벤트 처리만으로 모든 것을 해결할 수 있다.

 

step 1.

 

웹페이지를 작성한 뒤 다음 API를 사용하기 위한 스크립트를 추가합니다.

 

<script src='http://dmaps.daum.net/map_js_init/postcode.v2.js'></script>

 

step 2.

 

우편번호 검색을 위한 <form/>을 작성합니다.

 

<form name='frm_member' action='' method='post'>
  <label>우편번호</label>
  <input type='text' name='zipcode' value='11-111' />
  <input type='button' value='우편번호 검색' id='btnZipcode' />
  <br/>
  <label>주소</label>
  <input type='text' name='address' size='50' /><br/>
</form>

 

step 3.

 

우편번호 검색 버튼의 클릭이벤트에 다음 API의 우편번호 검색 로직을 호출합니다.

 

<script>
	var btnZipcode = document.getElementById('btnZipcode');
	if(btnZipcode != null){
		btnZipcode.onclick = function(){
			var frm = document.frm_member;
			new daum.Postcode({
				oncomplete : function(data){
					frm.zipcode.value = data.zonecode;
					frm.address.value = data.address;
				}
			}).open();
		}
	}
</script>

 

우편번호 검색 버튼(btnZipcode)이 클릭되면 다음 API의 우편번호 검색창이 뜨고 주소를 검색하여 검색된 주소를 더블 클릭하면 해당 우편번호와 주소가 <form/>의 zipcode와 address에 표시될 것입니다.

 

다음 API의 우편번호 검색 창

 

이상으로 포스팅을 마치도록 하겠습니다.

 

즐거운 IT 여행이 되시길 바랍니다.