Spring Boot Board Project_09 다음 주소 API 활용

회원가입 시 주소 입력은 필수 사항은 아님

다음 주소 API 검색하면 사용 방법 상세 설명

예제코드 보기 눌러서 갖다 쓰기만 하면 됨

필요없는 건 지우고 필요한 것만 사용

Daum Postcode Service

1. 다음API script html 에 복사 붙여넣기

signup.html

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

2. js 에 다음API 내용 복사 붙여넣고 필요한 것만 남기고 지우고 변수명 변경해주기

signup.js

/* 다음 주소 API 활용 */
function execDaumPostcode() {
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

            // 각 주소의 노출 규칙에 따라 주소를 조합한다.
            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
            var addr = ''; // 주소 변수

            //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
            if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                addr = data.roadAddress;
            } else { // 사용자가 지번 주소를 선택했을 경우(J)
                addr = data.jibunAddress;
            }

            // 우편번호와 주소 정보를 해당 필드에 넣는다.
            document.getElementById('postcode').value = data.zonecode;
            document.getElementById('address').value = addr;
            // 커서를 상세주소 필드로 이동한다.
            document.getElementById('detailAddress').focus();
        }
    }).open();
}

4. 검색 버튼 클릭 시 함수 수행되도록 js 작성

// 주소 검색 버튼 클릭 시
document.querySelector("#searchAddress").addEventListener("click", execDaumPostcode);

검색 버튼 눌렀을 때 출력 화면