Spring

[Spring] daum 우편번호 Api 사용하기

아잠만_ 2024. 8. 2. 14:38
  • key 발급 필요없으며
  • 기업, 상업용이든 무조건 무료로 사용 가능
  • 행정안전부에서 제공하는 주소 DB를 직접 업데이트

API를 받을 수 있는 해당 링크에도 잘 설명이 되어있다

사용 방법

html이나 jsp파일의 <head>나 <body> 윗부분에 작성한다

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

기본 틀을 작성한 후에

우편번호 검색을 호출하는 함수를 작성한다

function openHomeSearch(){
	new daum.Postcode({
	    oncomplete: function(data) {
	    	// json 형태로 데이터가 전달
	    	console.log(data);
	    }
	}).open();
}

사용 예시

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<div class="row">
<div class="col-md-12 card">
	<div class="card-header">
		<h3>유저 카드 등록</h3>
	</div>
	<div class="card-body row" style="justify-content: space-between;">
			 <div class="card-body p-0">
			 <form method="post" action="/prod/cardFormPost">
				<p><input value="a001" placeholder="아이디" type="text" name="userId" id="userId"></p>
				<p><input value="java" placeholder="비밀번호" type="password" name="password" id="password"></p>
				<p><input value="오리" placeholder="이름" type="text" name="name" id="name"></p>
				<p><input value="duckduck@duck.com" placeholder="이메일" type="text" name="email" id="email"></p>
				<p><input value="2020-06-30" placeholder="생년월일" type="date" name="bir" id="bir "></p>
				<p><input value="12345" placeholder="우편번호" type="text" name="zipcode" id="zipcode">
					<input type="button" value="우편번호 검색" onclick="openHomeSearch()">
				</p>
				<p><input value="대전" placeholder="주소" type="text" name="addr" id="addr"></p>
				<p><input value="건물" placeholder="상세주소" type="text" name="addrdet" id="addrdet"></p> 
			 </form>
              </div> 
              <!-- /.card-body -->
	</div>
</div>
</div>
<script>
function openHomeSearch(){
	new daum.Postcode({
	    oncomplete: function(data) {
	    	// json 형태로 데이터가 전달
	    	console.log(data);
	    	$('#zipcode').val(data.zonecode);
	    	$('#addr').val(data.address);
	    	$('#addrdet').val(data.buildingName);
	    	$('#addrdet').focus();
	    }
	}).open();
}
</script>