[ Javascript ] 카카오 주소 API 적용, 함수 활용도 높이기 (공통함수처리)

예전 부트캠프에서 레거시 프로젝트를 진행하는 과정에서

주소 정보를 데이터베이스에 모두 넣고 이를 팝업으로 띄웠던 경험이 있다. 

 

sql 로 데이터를 insert 하는데만 시간이 엄청 오래 걸렸던 기억이 새록새록하다... 

 

그때 그걸 하면서 주소가 계속 업데이트가 될텐데 상당히 번거롭겠다는 생각이 들었었는데 

그리고 분명 다른 간편한 방법이 있을 거라고 생각했는데 

 

어느덧 일경험을 진행하고 있는 지금 주소 api 를 드디어 활용해볼 기회가 생겼다. ㅎㅎ 

 

좋았어... 어려운 게 아니니 간단하게 진행해보았다.

일단 검색창에 다음 카카오 주소 API를 검색하고 사이트에 들어가 자신이 원하는 형태의 주소 api를 골라

코드를 단순히 복사 붙여넣기를 하면 된다.  

 

하지만 나는 여기서 이 함수를 다른 곳에서도 호출해서 인자만 넘겨주면 활용할 수 있도록 

파라미터를 각각 작성해주었다. 

그리고 각각 어떤 요소에 해당 결과값을 넣어줄지 작성하여 어디서든 인자만 넘겨주면

해당 필드에 값이 적용되도록 수정해보았다. 

 

코드는 다음과 같다. 

// 파라미터로 각 값을 변수로 받아오도록 변경 
function exeDaumPostcode(note, zipCode, address, datailAddress) {
	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(note).value = extraAddr;

			} else {
				document.getElementById(note).value = '';
			}

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

// note, zipCode, address, detailAddress
// 만약에 파라미터로 네개의 데이터를 받아오는 함수를 호출하여 보내준다면
// 그대로 인자로 값을 받아서 각 요소의 값을 할당해준다.

 

호출하는 부분

<div class="col-sm-3">
	<input type="button" onclick="exeDaumPostcode('note', 'zipCode', 'address', 'detailAddress')" class="btn btn-primary btn-user btn-block" value="주소찾기" />
</div>

 

 

이렇게 함수 호출 시 파라미터로 각 인자를 넘겨준다. 

 

 

값이 잘 입력된다. 

 

성공! 

 

예전에는 api를 어떻게 내 프로젝트에 적용하는 것인지 잘 이해가 안됐는데 

시간이 약이라고,,, 이제 제법 꽤 간단하게 적용하고 있다! 

 

조금씩 성장하고 있는 중인 것 같다!