[스프링 부트] JPA 쇼핑몰 # 6.회원가입 주소

 

 

회원가입 주소등록 (카카오 API 사용)

 

 

들어가며

이번에는 회원가입시에 회원의 주소를 입력하는것을 개발할것입니다. 직접 API를 만들어서 할수도있지만 잘만들어진 API를 사용해서 구현하는것도 좋은 서비스라고 생각하여 KAKAO의 주소 찾기 API를 통해서 개발해보도록 하겠습니다.

---

 

기본설정

카카오 우편번호 API

 

카카오 API

 

사이트에 접속하면 자세한 설명들이 나와있습니다. 그릭고 여러종류의 레이아웃이있지만 저는 사용자가 선택한 값 이용하기를 사용하겠습니다.

 

사용자가 선택한 값 이용하기

---

 

join.html

카카오 API를 사용하기 위해서는 스크립트한줄을 추가해줘야합니다.

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

그리고 예제 코드에나와있는것처럼 자신이 맞는 주소찾기의 이름을 적절하게 변경하여 작성해주시면 됩니다.

 

 

script

 function sample6_execDaumPostcode() {
            new daum.Postcode({
                oncomplete: function(data) {
                    var addr = ''; // 주소 변수
                    var extraAddr = ''; // 참고항목 변수

                    if (data.userSelectedType === 'R') {
                        addr = data.roadAddress;
                    } else {
                        addr = data.jibunAddress;
                    }
                    if(data.userSelectedType === 'R'){
                        if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                            extraAddr += data.bname;
                        }
                        if(data.buildingName !== '' && data.apartment === 'Y'){
                            extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                        }
                        if(extraAddr !== ''){
                            extraAddr = ' (' + extraAddr + ')';
                        }
                        document.getElementById("address.subAddr").value = extraAddr;
                    } else {
                        document.getElementById("address.subAddr").value = '';
                    }

                    document.getElementById('address.zipcode').value = data.zonecode;
                    document.getElementById("address.address").value = addr;
                    document.getElementById("address.detailAddr").focus();
                }
            }).open();
        }

 

다음과 같이 스크립트를 자신의 필드값을 적절히 변경하여 작성합니다.

 

---

 

실행

 

실행하는것과 같이 간편하게 우편번호를 찾을수있다.

 

---

 

다음으로

다음에는 로그인을 기능을 개발하도록해보겠습니다. 감사합니다! :)