목표
주소 검색 API를 활용하여 주소를 검색하여 검색된 주소가 회원가입페이지의 주소 필드에 입력되는 것을 목표로 합니다.
- '주소 찾기' 버튼 클릭
- 주소찾기 팝업창에서 자신이 찾고자 하는 주소 검색 및 선택
- 선택된 주소 회원가입페이지 주소 필드에 입력
주소 검색 API는 다음에서 제공하는 주소록API를 사용할 것입니다.
카카오 주소 검색 API
0. 수정
주소 입력 필드에 사용자가 임의로 변경할 수 없도록 join.jsp에서 주소 입력 필드 3개 모두 readonly 속성을 추가합니다.
- 속성이 추가된 태그는 form태그에 쌓여서 Controller로 저송이 되어야 하기 때문에 readonly 속성으로 추가합니다.
<div class="address_wrap">
<div class="address_name">주소</div>
<div class="address_input_1_wrap">
<div class="address_input_1_box">
<input class="address_input_1" name="memberAddr1" readonly="readonly">
</div>
<div class="address_button">
<span>주소 찾기</span>
</div>
<div class="clearfix"></div>
</div>
<div class ="address_input_2_wrap">
<div class="address_input_2_box">
<input class="address_input_2" name="memberAddr2" readonly="readonly">
</div>
</div>
<div class ="address_input_3_wrap">
<div class="address_input_3_box">
<input class="address_input_3" name="memberAddr3" readonly="readonly">
</div>
</div>
</div>1. 외부 스크립트 파일 연결 코드 추가
다음 주소록 API를 사용하기 위해 join.jsp에 외부 스크립트 파일을 연결하는 코드를 추가합니다.
- 자바스크립트 메서드를 포함하는 스크립트 태그 바로 위에 추가해주었습니다.
- 다음 주소록 API 설명 홈페이지를 보면 로딩 방식으로 '통합 로딩 방식' / '동적 로딩 방식' / '정적 로딩 방식'이 있습니다. 이 중 '통합 로딩 방식'을 사용하였습니다.
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>2. 주소 검색 기능 메서드 추가
주소 API 기능을 사용하귀 위한 메서드를 추가하였습니다. 이름은 execution_daum_address로 정하였습니다.(자신이 원하는 이름 사용 가능)
//다음 주소 연동
function excution_daum_address() {
}3. 다음 주소 팝업창 코드 추가
메서드 내용에 주소를 검색하는 팝업창을 띄우는 코드를 추가합니다.(다음 주소 API 홈페이지 참고)
//다음 주소 연동
function excution_daum_address() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
}
}).open();
}4. [주소찾기]버튼과 메서드 연결
주소찾기 버튼(div태그)을 클릭할 시 추가한 메서드가 실행이 되도록 onclick속성을 추가하고 값을 앞에서 추가한 메서드[excution_duam_address()]를 넣습니다.
<div class="address_wrap">
<div class="address_name">주소</div>
<div class="address_input_1_wrap">
<div class="address_input_1_box">
<input class="address_input_1" name="memberAddr1" readonly="readonly">
</div>
<div class="address_button" onclick="execution_daum_address()">
<span>주소 찾기</span>
</div>
<div class="clearfix"></div>
</div>
<div class ="address_input_2_wrap">
<div class="address_input_2_box">
<input class="address_input_2" name="memberAddr2" readonly="readonly">
</div>
</div>
<div class ="address_input_3_wrap">
<div class="address_input_3_box">
<input class="address_input_3" name="memberAddr3" readonly="readonly">
</div>
</div>
</div>6. 주소 입력 예제 코드 추가
다음 주소 API 설명 홈페이지에 주소 팝업창을 선택하여 주소 필드에 입력을 하기 위한 예제 코드들이 있습니다. 자신에게 맞는 예제 코드를 복사하여 추가해줍니다.
- '사용자가 선택한 값 이용하기' 코드를 사용하였습니다.
//다음 주소 연동
function excution_daum_address() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
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("sample6_extraAddress").value = extraAddr;
} else {
document.getElementById("sample6_extraAddress").value = '';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
}
}).open();
}7. 예제코드 수정
예제 코드를 바로 사용할 수는 없습니다. 우리가 사용하고자 하는 의도와 환경에 맞게 수정해주어야 합니다.
- function(data)에서 data는 팝업창에서 선택한 주소에 대한 정보를 반환받는 객체 변수입니다. 객체에 어떠한 데이터(속성)가 있는지는 설명 홈페이지에서 아래에서 확인할 수 있습니다.
1) 주소 필드, 참고 항목 필드 합치기
- 현 예제 코드의 경우는 사용자가 도로명주소를 선택하였을 때 추가적으로 입력되어야 할 정보를 참고 항목 필드 입력되도록 되어 있습니다. 하지만 현재 코드에는 참고항목 필드를 따로 만들어 놓지 않았기 때문에 주소가 입력되는 필드에 추가 항목필드에 입력될 정보가 함꼐 입력되도록 설정할 것입니다.
//제거해야할 코드
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("sample6_extraAddress").value = extraAddr;
//추가해야할 코드
// 주소변수 문자열과 참고항목 문자열 합치기
addr += extraAddr;- 두번째 if문 else 내부의 코드를 지우고 새로운 코드를 추가해줍니다. (기존의 코드는 추가 항목 필드에 아무것도 입력되지 않게 하기 위한 코드입니다.)
//제거해야할 코드
document.getElementById("sample6_extraAddress").value = '';
//추가해야할 코드
addr += ' ';2) 우편변호와 주소 정보를 해당 필드에 넣어주는 코드를 수정해줍니다.
- 제이쿼리를 사용 중이기 때문에 제이쿼리에 맞는 코드로 수정하였습니다.
// 제거해야할 코드
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 추가해야할 코드
$(".address_input_1").val(data.zonecode);
//$("[name=memberAddr1]").val(data.zonecode); // 대체가능
$(".address_input_2").val(addr);
//$("[name=memberAddr2]").val(addr); // 대체가능3) 상세주소 필드를 사용할 수 있도록 변경해주는 코드를 추가해준 뒤, 커서를 상세주소 필드로 이동하는 코드를 수정해줍니다.
// 제거해야할 코드
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
// 추가해야할 코드
// 상세주소 입력란 readonly 속성 변경 및 커서를 상세주소 필드로 이동한다.
$(".address_input_3").attr("readonly",false);
$(".address_input_3").focus(); 8. 테스트
- 주소 찾기 클릭
- 찾고자 하는 주소 입력
- 주소 입력 및 커서 이동 확인
개인이 공부한걸 작성하는 블로그입니다..