DAUM 주소찾기 API 동 주소 활용하기
회원가입 시, 사용자의 주소 정보를 받아오기 위해 Daum API 를 사용 할 경우,
(1) 주소를 검색
(2) 도로명 혹은 지번 을 클릭하여 선택
(3) 해당 주소의 data 들을 받아서 사용할 수 있습니다.
data.zoncode : 우편번호
addr : 주소
detailAddr : 상세주소 ( 사용자 추가 입력 )
extraAddr : 추가주소 ( 동 이름 등 참고항목 )
// 다음 주소찾기 API
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function (data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
console.log(data)
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var detailAddr = ''; //상세주소
var extraAddr = ''; // 참고항목 변수
var add = addr + detailAddr;
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
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;
adress = addr;
KakaoGeocoder();
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
document.getElementById("sample6_detailAddress").value = detailAddr;
$("#address").val(addr);
}
}).open();
} //Daum 주소찾기
하지만,
위와같이 회원가입시 입력한 주소로 => "법정동" 이름을 가져다 사용하려할 때,
두 가지 문제점이 발생할 수 있었습니다.
1. 지번주소
주소를 클릭하여 선택할 때, 도로명을 선택하면 문제가 없지만
지번을 선택할 시, extaaddr 에 따로 동 이름을 넣어주는 로직이 없기 때문에 법정동을 가져올 수 없습니다.
=> 사용자는, 도로명 / 지번 중 익숙한 주소를 선택하되,
선택시 입력값은 모두 '도로명일 때 '의 로직을 따르도록 수정해주었습니다.
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function (data) {
console.log(data)
var addr = ''; // 주소 변수
var detailAddr = ''; //상세주소
var extraAddr = ''; // 참고항목 변수
var add = addr + detailAddr;
//'도로명일 때' 의 조건을 없애고, 모든 경우 data.roadAddress 를 넣는다.
addr = data.roadAddress;
if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
extraAddr += data.bname;
}
if (data.buildingName !== '' && data.apartment === 'Y') {
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("sample6_extraAddress").value = extraAddr;if ( data.userSelectedType === 'R' ) <= '도로명을 선택했을 경우'의 조건을 삭제, 모든 경우에 적용되도록 해주고
특히 else 일 경우 extraAddre 를 ' ' 빈값으로 만드는 로직을 삭제 해 주면
사용자가 도로명 주소를 선택하든, 지번 주소를 선택하든 입력값은 '도로명 주소'를 기준으로 받아와서
extraAddre 변수에 '동' 이름을 가져와 사용할 수 있습니다.
2. '면리길' 주소
하지만, 우리나라에는 '법정동' 이름을 가지지 않은 주소들이 많이 있습니다.
예를들어, ~면 ~리, 등의 주소는
도로명 주소가 보통 '~길' 로 끝나게 됩니다.
이 경우, 로직 상 '동|로|가' 에 해당되는 주소 test 를 통과하지 못하므로
extraAddr 에 입력값이 들어오지 않고 ' ' 빈값으로 남게 됩니다.
=> extraAddr 가 ' ' 빈값 일 경우 의 로직을 추가해서
'~면' 등의 주소 이후 index 부터 ~ '40-12' 등의 주소 이전까지의 주소 index 만 substring 해서,
즉, '전나무골길' 이라는 '길' 단위의 주소만을 뽑아내서 extraAddr 에 넣어주었습니다.
// 동 이름이 아닐 때, region input에 전체 주소를 넣은 후 후처리
if (extraAddr == ''){
let numIndex = '';
let spaceIndex = '';
var pattern = /\s/;
for(var i = 0; i < addr.length; i++){
if(!isNaN(addr.charAt(i)) && !addr.charAt(i).match(pattern)){
numIndex = i;
break;
}
}
for(var j = 0; j < numIndex-1; j++){
if(!isNaN(addr.charAt(j))){
spaceIndex = j;
}
}
document.getElementById("sample6_extraAddress").value = addr.substring(spaceIndex+1,numIndex-1);
}
결과적으로, 기존의 API를 가져다 쓸 경우, 동이름 단위의 주소를 가져다 쓰고 싶을 때
(1) 지번 주소를 선택했을 시, 동주소가 가져와 지지 않는 문제
(2) '법정동' 주소가 아닌 '~길' 주소를 가진 주소일 때 가져와 지지 않는 문제
위와 같은 문제들을 주어진 API를 조금씩 수정해서 원하는 값을 가져올 수 있게끔 활용할 수 있었습니다.
API 가 내가 원하는 Data 를 바로 보내준다면 더할나위 없겠지만,
이렇게 조금 씩 어긋날 경우, API 를 적절하게 수정해서 활용하는 역량도 계속 키워나가야 겠습니다.