3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기

우선 http://postcode.map.daum.net/guide 여기 들어가시면

 자세하게 다음에서 사용 방법까지 친절하게 설명해주고 있습니다. 

 회원 가입시에 우편번호,주소 외에 추가로 요구되는 사항이 있으면 확인하시어 변경하시면 되겠습니다.

우선 지금까지 작성하신 회원가입에서 코드를 추가하겠습니다. ~ 기본 회원가입, 비밀번호 암호화를 익시히고 

오시면 되겠습니다.~

Signup.JSP에서 

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

스크립트를 추가합니다.

저같은경우엔 js파일을 따로 빼서 불러왔습니다.~

<script src="/resources/js/addressapi.js"></script> 이부분은 선택 사항입니다.

이제 주소에 해당하는 form을 수정하겠습니다.

<div class="form-group">                   
<input class="form-control" style="width: 40%; display: inline;" placeholder="우편번호" name="addr1" id="addr1" type="text" readonly="readonly" >
    <button type="button" class="btn btn-default" onclick="execPostCode();"><i class="fa fa-search"></i> 우편번호 찾기</button>                               
</div>
<div class="form-group">
    <input class="form-control" style="top: 5px;" placeholder="도로명 주소" name="addr2" id="addr2" type="text" readonly="readonly" />
</div>
<div class="form-group">
    <input class="form-control" placeholder="상세주소" name="addr3" id="addr3" type="text"  />
</div>

우편번호 검색 버튼을 만들고 onclick="execPostCode(); 이벤트 버튼을 추가해주세요  각각 id=addr1를 부여하고

다음에서 제공하는 

function execPostCode() {
         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;
                }
 
                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                console.log(data.zonecode);
                console.log(fullRoadAddr);
                
                
                $("[name=addr1]").val(data.zonecode);
                $("[name=addr2]").val(fullRoadAddr);
                
                /* document.getElementById('signUpUserPostNo').value = data.zonecode; //5자리 새우편번호 사용
                document.getElementById('signUpUserCompanyAddress').value = fullRoadAddr;
                document.getElementById('signUpUserCompanyAddressDetail').value = data.jibunAddress; */
            }
         }).open();
     }

고대로~ 복사 하여 붙여넣기하고 제가 수정한 부분은 이부분입니다.

 $("[name=addr1]").val(data.zonecode);

 $("[name=addr2]").val(fullRoadAddr);

저는 이렇게 처리를 하였는데 

// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample3_postcode').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('sample3_address').value = fullAddr;

다음에서 제공하는 코드에는 이런식으로 작성 되어있을 것입니다.

// 우편번호와 주소 정보를 해당 필드에 넣는다.

document.getElementById('addr1').value = data.zonecode; //5자리 새우편번호 사용

document.getElementById('addr2').value = fullAddr;

요런식으로 바꿔주면 되겠죠 ??ㅎㅎ  끝입니다.  처음엔 데이터베이스에 테이블을 생성해야하나, 

컬럼이 30개가 넘는걸 어떻게 다 만들어서 넣지 ㅠㅠ 엄청 고민했던 기억이 있네요 ㅎㅎㅎ

다른곳에서도 api를 제공하겠지만 , 저는 안해봐서 모르겠어요 ㅎㅎ 다음이 처음이자 마지막?ㅎㅎㅎ

사이트 들어가시면 초보자도 쉽게 이해 할 수있게 예제를 잘 만들어 뒀으니 ~ 활용해보시기 바랍니다.

우편 번호와 , 주소는 readonly처리하면 더 확실 하겠습니다~ ㅎㅎ 

다음엔 회원가입시  유효성검사 validation 를 하겠습니다~