spring
SPRING(9) 다음 주소 API
Alan__kang__morlang
2022. 1. 24. 15:27
반응형
이번에 알아볼 기능은 다음 주소 API 입니다.
-주소 API 는 회원가입에서 빠질 수 없는 기능 중 하나입니다.
1. 다음 API 를 사용하기 위한 설명이 나와있는 URL입니다.
https://postcode.map.daum.net/guide
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
2. 접속한 후에 설명을 잘 읽어보고 해당 함수를 복사합니다.
3. 그리고 회원가입을 할 때 주소를 작성하는 곳을 생성하기 때문에 회원가입 jsp로 가서 작업합니다.
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function daumPost() { //여기서 복사하고 가져왔을때 function이 없어서 추가함
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
// 예제를 참고하여 다양한 활용법을 확인해 보세요.
}
}).open();
}
</script>해당 script를 <header>사이에 넣어줍니다.
4. 그리고 위의 함수를 누를수 있는 버튼을 생성해 줍니다.
<input type="text" name="id" placeholder="아이디"><br>
<input type="text" name="pw" placeholder="비밀번호"><br>
<input type="text" name="addr" placeholder="주 소">
<input type="button" onclick="daumPost()" value="우편번호 찾기">
//여기에서 주소 쪽에서 버튼을 만들어줍니다.
<br>
<hr>
<input type="submit" value="회원가입">그러면 하단에 보이는 것처럼 주소를 넣을 수 있는 button 이 생성됩니다.
5. 그리고 함수 내부에서 console로 확인하기 위해서 코드 작성
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function daumPost() {
new daum.Postcode({
oncomplete: function(data) {
// R : 도로명, J : 지번
console.log("data.userSelectedType :"+ data.userSelectedType)
console.log("data.roadAddress : " + data.roadAddress)
console.log("data.jibunAddress :" + data.jibunAddress)
console.log("data.zonecode :" + data.zonecode)
}
}).open();
}
</script>이렇게 작성이되고 나면 우편번호를 찾기를 누르고 해당 주소를 클릭하게 되면 F12를 누르고 console을 누르게 되면 주소가 나오게 됩니다.
6. 그리고 주소를 클릭하였을 때 값을 넣어주게 만드는데
- 작성한 전체 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 상단의 주소는 jquery를 사용하기 위한 소스입니다. -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function daumPost() {
new daum.Postcode({
oncomplete: function(data) {
// R : 도로명, J : 지번
console.log("data.userSelectedType :"+ data.userSelectedType)
console.log("data.roadAddress : " + data.roadAddress)
console.log("data.jibunAddress :" + data.jibunAddress)
console.log("data.zonecode :" + data.zonecode)
var addr = ""
if(data.userSelectedType === 'R') {
addr = data.roadAddress //도로명 주소
}else {
addr = data.jibunAddress //지번 주소
}
document.getElementById("addr1").value = data.zonecode
$("#addr2").val(addr)
$("#addr3").focus()
}
}).open();
}
</script>
</head>
<body>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:import url="../default/header.jsp"/>
<div align="center">
<form action="register" method="post">
<table border="1">
<tr><td>
<input type="text" name="id" placeholder="아이디"><br>
<input type="text" name="pw" placeholder="비밀번호"><br>
<input type="text" name="addr" id="addr1" readonly placeholder="우편번호" > <!-- readonly를 해야 사용자가 직접 작성하지 못합니다, -->
<input type="button" onclick="daumPost()" value="우편번호 찾기"><br>
<input type="text" id="addr2" readonly placeholder="주 소"> <!-- readonly를 해야 사용자가 직접 작성하지 못합니다, -->
<input type="text" id="addr3" placeholder="상세주소">
<br>
<hr>
<input type="submit" value="회원가입">
</td></tr>
</table>
</form>
</div>
<c:import url="../default/footer.jsp"/>
</body>
</html>
- script의 전체코드
여기에서 첫번째로 R은 도로명을 뜻하고 J는 지번을 뜻하는데 if문을 사용해서
선택한 타입을 결정하고 난 후에 만약 R이라면 roadAddress 를 주고
아니라면 jibunAddress 을 줍니다.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 상단의 주소는 jquery를 사용하기 위한 소스입니다. -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function daumPost() {
new daum.Postcode({
oncomplete: function(data) {
// R : 도로명, J : 지번
console.log("data.userSelectedType :"+ data.userSelectedType)
console.log("data.roadAddress : " + data.roadAddress)
console.log("data.jibunAddress :" + data.jibunAddress)
console.log("data.zonecode :" + data.zonecode)
var addr = ""
if(data.userSelectedType === 'R') {
addr = data.roadAddress //도로명 주소
}else {
addr = data.jibunAddress //지번 주소
}
document.getElementById("addr1").value = data.zonecode //js문법
$("#addr2").val(addr) //jquery 문법
$("#addr3").focus() //jquert 문법
}
}).open();
}
</script>그리고 값을 넣어줄 때 js문법으로는 document로 우편번호를 넣어주고
나머지 주소를 jquery 문법으로 해당 도로명이든 지번이든 선택한 값을 넣어주고
그리고 선택이 끝나면 상세주소로 커서가 이동하게 되는 구조입니다.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- 상단의 주소는 jquery를 사용하기 위한 소스입니다. -->- jquery를 사용할 수 있게 해주는 소스를 삽입해야 합니다.
반응형