카카오 우편번호 API 사용법

https://postcode.map.daum.net/guide#usage

위 링크로 들어가면 기본 사용법과 예제를 확인할 수 있다.
그 중에서 본인이 사용하고자 하는 방식의 예제를 활용해서 작성하면 된다.

준비물

1. DB에 우편번호, 주소, 상세주소, 참고항목(필요할 경우) 필드 생성
2. 해당 필드를 VO 혹은 DTO에 작성, mybatis를 사용할 경우 resultMap 작성(필드명과 VO에서 사용하는 이름이 같다면 필요 없다)
3. 각각의 주소를 입력할 input 박스들

사용법

나는 선택한 주소 값을 자동으로 채워주는 이 예제를 사용했다.
예제 코드보기를 누르면 아래와 같이 코드가 나온다.

<input type="text" id="sample6_postcode" placeholder="우편번호">
<input type="button" onclick="sample6_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample6_address" placeholder="주소"><br>
<input type="text" id="sample6_detailAddress" placeholder="상세주소">
<input type="text" id="sample6_extraAddress" placeholder="참고항목">

<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 { // 사용자가 지번 주소를 선택했을 경우(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();
    }
</script>

카카오에서 굉장히 친절하게 적어두었다.
input 박스의 id를 내가 사용할 id 이름으로 바꾸어주고,
function의 이름도 입맛대로 변경해주면 된다.

나는 참고항목은 사용하지 않을거라, 그 부분에 대한 코드는 지웠다.
아래는 내가 변경한 코드이다.

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
		<script>
		    function findPostCode() {
		        new daum.Postcode({
		            oncomplete: function(data) {
		                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

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

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

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

우편번호는 userPostCode, 주소는 userAddress, 상세주소는 userSubAddress로 input 박스의 아이디를 지정해두었다.

사실 사용법이라고 하기도 민망할 정도로 간단하다.
코드 하나하나에 주석이 상세하게 달려있어서,
차근차근 읽어보고 적용하면 누구든 사용할 수 있다!