[개발] 다음 주소 검색 API 적용! [펌]

[회원가입시 주소검색을 위한 다음 api 적용] 

[개발] 다음 주소 검색 API 적용! [펌]

 

 

 

1.우편번호 검색 팝업창을 띄우고자 하는 페이지에 아래와 같은 방식으로 코드를 넣으면 됩니다.

 

 

1 2 3 4 5 6 7 8 9

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script> <script>     new daum.Postcode({         oncomplete: function(data) {             // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.             // 예제를 참고하여 다양한 활용법을 확인해 보세요.         }     }).open(); </script> Colored by Color Scripter

cs

 

 

2.  input 페이지에 추가해야하는 부분 

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

<input type="text" id="sample4_postcode" placeholder="우편번호"> <input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br> <input type="text" id="sample4_roadAddress" placeholder="도로명주소"> <input type="text" id="sample4_jibunAddress" placeholder="지번주소"> <span id="guide" style="color:#999"></span>   <script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script> <script>     //본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.     function sample4_execDaumPostcode() {         new daum.Postcode({             oncomplete: function(data) {                 // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.                   // 도로명 주소의 노출 규칙에 따라 주소를 조합한다.                 // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.                 var fullRoadAddr = 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 + ')';                 }                 // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.                 if(fullRoadAddr !== ''){                     fullRoadAddr += extraRoadAddr;                 }                   // 우편번호와 주소 정보를 해당 필드에 넣는다.                 document.getElementById('sample4_postcode').value = data.zonecode; //5자리 새우편번호 사용                 document.getElementById('sample4_roadAddress').value = fullRoadAddr;                 document.getElementById('sample4_jibunAddress').value = data.jibunAddress;                   // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.                 if(data.autoRoadAddress) {                     //예상되는 도로명 주소에 조합형 주소를 추가한다.                     var expRoadAddr = data.autoRoadAddress + extraRoadAddr;                     document.getElementById('guide').innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';                   } else if(data.autoJibunAddress) {                     var expJibunAddr = data.autoJibunAddress;                     document.getElementById('guide').innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';                   } else {                     document.getElementById('guide').innerHTML = '';                 }             }         }).open();     } </script> Colored by Color Scripter

cs

 

 

저와같은 경우에는 지번 도로명이 모두 나오도록 사용 !

 

3. 회원가입을 위한  signUp.jsp 페이지 

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148

<%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <script>     new daum.Postcode({         oncomplete : function(data) {             // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.             // 예제를 참고하여 다양한 활용법을 확인해 보세요.         }     }).open(); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link     href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css"     rel="stylesheet"> <link rel="stylesheet" href="assets/css/login.css" /> <title>Hello1</title>   </head> <body>         <div class='container'>         <div class="wrapper">             <div class="image"></div>             <div class="join">                 <form name="signupForm" id="signupForm" method="post">                     <div class="input">                         <input type="text" class="box" placeholder="이름" name="name"                             required>                     </div>                     <div class="input">                         <input type="number" class="box" placeholder="학번"                             name="studentNum" required>                     </div>                     <div class="input">                         <input type="password" class="box" placeholder="비밀번호"                             name="password" required                             pattern="(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{6,12}">                     </div>                     <div class="input">                         <input type="password" class="box" placeholder="비밀번호 확인"                             name="passwordConfirm" required>                     </div>                     <div class="input">                         <input type="email" class="box" placeholder="이메일" name="email"                             required>                     </div>                       <div class="input">                         <input type="button" class="btn-primary box"                             onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>                     </div>                     <div class="input">                         <input type="text" name="post" class="box" id="sample4_postcode"                             placeholder="우편번호" required>                     </div>                       <div class="input">                         <input type="text" name="roadAddress" class="box"                             id="sample4_roadAddress" placeholder="도로명주소" required>                     </div>                     <div class="input">                         <input type="text" name="jibunAddress" class="box"                             id="sample4_jibunAddress" placeholder="지번주소" required>                     </div>                                            <a href="#"><div class="login_btn">                             <input type="submit" class="login_btn" value="등록하기">                         </div></a>                     <div class="option">                         <a href="index.jsp"><div class="back">돌아가기</div></a>                     </div>             </div>         </div>       </div>       <script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>     <script>         //본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.         function sample4_execDaumPostcode() {             new daum.Postcode(                     {                         oncomplete : function(data) {                             // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.                               // 도로명 주소의 노출 규칙에 따라 주소를 조합한다.                             // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.                             var fullRoadAddr = data.roadAddress; // 도로명 주소 변수                             alert(fullRoadAddr);                             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 + ')';                             }                             // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.                             if (fullRoadAddr !== '') {                                 fullRoadAddr += extraRoadAddr;                             }                               // 우편번호와 주소 정보를 해당 필드에 넣는다.                             document.getElementById('sample4_postcode').value = data.zonecode; //5자리 새우편번호 사용                             document.getElementById('sample4_roadAddress').value = fullRoadAddr;                             document.getElementById('sample4_jibunAddress').value = data.jibunAddress;                               // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.                             if (data.autoRoadAddress) {                                 //예상되는 도로명 주소에 조합형 주소를 추가한다.                                 var expRoadAddr = data.autoRoadAddress                                         + extraRoadAddr;                                 document.getElementById('guide').innerHTML = '(예상 도로명 주소 : '                                         + expRoadAddr + ')';                               } else if (data.autoJibunAddress) {                                 var expJibunAddr = data.autoJibunAddress;                                 document.getElementById('guide').innerHTML = '(예상 지번 주소 : '                                         + expJibunAddr + ')';                               } else {                                 document.getElementById('guide').innerHTML = '';                             }                         }                     }).open();         }     </script>       </body> </html> Colored by Color Scripter

cs

 

<input> 부분에 name을 알맞게 정하여 추가해줫습니다 !   값을 받아서 저장하기 위해!

 

name="post"   / name="roadAddress"/  name="jibunAddress"

 

 

 

 

 

 

4. controller 부분 

 

 

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

@RequestMapping(value="/signUp.do",method=RequestMethod.GET)     public String hello(Model model) {         return "signUp";     }       @RequestMapping(value="/signUp.do", method=RequestMethod.POST)     public String signUp(MemberDTO member, Model model)throws Exception{         System.out.println(member.getPost()+" / "+member.getJibunAddress()+" / "+member.getJibunAddress());         String road=member.getJibunAddress()+"("+member.getPost()+")";         String jibun=member.getJibunAddress()+"("+member.getPost()+")";         member.setJibunAddress(jibun);         member.setRoadAddress(road);                  memberMapper.insert(member);         return "redirect:/index.do";     } Colored by Color Scripter

cs

 

 

회원가입 페이지로 넘어가기 위한 mapping과 

 

회원가입 페이지에서 입력한 정보를 처리하는 mapping

 

 

 

 

 

 

1 2 3 4

String road=member.getJibunAddress()+"("+member.getPost()+")";         String jibun=member.getJibunAddress()+"("+member.getPost()+")";         member.setJibunAddress(jibun);         member.setRoadAddress(road); Colored by Color Scripter

cs

 

 

저와 같은 경우에는 받은 우편번호정보를 도로명 , 지번 주소로 합친후 

다시 넣어서 디비에 insert 하였습니다 ! 

 

 

 

 

 

정상적으로 우편번호와 주소가 합쳐져서 저장된 것을 볼 수 있습니다 !!

 

 

 

[다음 주소검색 api 가이드 주소]

 

 

 

http://postcode.map.daum.net/guide

Daum 우편번호 서비스

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

http://postcode.map.daum.net/guide

Daum 우편번호 서비스

 

 

개발자가 상요하기에 너무나 편하게 잘 되어있으며 가이드사이트를 참고 하면 

충분히 원하는 형식대로 적용할 수 있습니다 !! 

 

 

출처 : https://m.blog.naver.com/PostView.nhn?blogId=software705&logNo=220759471473