카카오(Daum) 우편번호 API 적용 방법 + 예제

카카오(Daum)의 우편번호 서비스를 소스코드에 적용하는 방법에 대해 알아본다.

 

◆ 적용방법

---

postcode.v2.js라는 파일을 로딩한 뒤 스크립트를 통해 우편번호 서비스를 이용하면 된다.

 

1. postcode.v2.js 파일 로딩

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

 

2. 팝업에서 검색시의 동작을 작성한다.

아래는 daum.Postcode의 생성자 속성(※1)중 하나인 oncomplete의 적용 예제이다.

oncomplete함수는 우편번호 검색 결과 목록에서 특정 항목을 클릭한 경우 동작한다.

(※1) 속성은 oncomplete, onresize, onclose, onsearch 등이 있으니 원하는 처리에 동작 이벤트를 걸어주면 된다.

<script>
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을 때 실행할 코드를 작성하는 부분
        }
    }).open();
</script>

 

 

◆ 예제

---

아래는 카카오(Daum)의 우편번호 서비스를 간단하게 소스코드에 적용해 본 예제이다.

기본적으로 우편번호, 주소, 상세주소 3개의 입력란으로 구성되어 있고, 입력란으로의 직접입력은 막아놓은 상태이다.

단 카카오(Daum)의 우편번호 서비스로 주소검색을 한 경우는 상세주소 입력란을 입력할수 있도록 활성화해준다.

 

검색 버튼을 누르게 되면 searchAddress함수에서 카카오(Daum)의 우편번호 서비스를 호출한다.

 

주소 검색 후 선택하면

 

oncomplete함수에서 정의한 대로 검색결과를 각각의 입력란에 세팅해 준 뒤 상세주소란을 활성화시켜준다.

 

예제로직에서는 도로명, 지번 상관없이 기본주소(address)로 가져와서 세팅하고 있다.

도로명주소(roadAddressEnglish)나 지번주소(jibunAddress), 도/시이름(sido) 등 필요한 정보가 있으면 공식가이드의 oncomplete함수의 항목값을 참조해서 알맞게 사용하면 된다.

 

공식가이드 - https://postcode.map.daum.net/guide

 

취소버튼을 클릭하면 cancelAddress함수가 호출되어 각 입력란에 세팅된 값을 지워주고 다시 비활성화해준다.

 

 

◆ 예제 소스코드

---

위 예제의 소스코드이다.

<%--카카오(Daum) 우편번호 API--%>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

<%--우편번호--%>
<div class="mb-2 row">
    <label for="userPostCode" class="col-sm-1 col-form-label">
        <span class="required-none">&nbsp;</span>
        우편번호
    </label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="userPostCode" name="userPostCode" readonly>
    </div>
    <div class="col-auto">
        <%--주소검색, 취소버튼--%>
        <button type="button" class="btn btn-outline-primary" onclick="searchAddress();"><fmt:message key="code_search"/></button>
        <button type="button" class="btn btn-outline-danger" onclick="cancelAddress();"><fmt:message key="code_cancel"/></button>
    </div>
</div>
<%--주소--%>
<div class="mb-2 row">
    <label for="userAddress" class="col-sm-1 col-form-label">
        <span class="required-none">&nbsp;</span>
        주소
    </label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="userAddress" name="userAddress" readonly>
    </div>
</div>
<%--상세주소--%>
<div class="mb-2 row">
    <label for="userDtlAddress" class="col-sm-1 col-form-label">
        <span class="required-none">&nbsp;</span>
        상세주소
    </label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="userDtlAddress" name="userDtlAddress" maxlength="100" readonly>
    </div>
</div>

<script>
    /** 카카오 주소 처리 */
    function searchAddress() {
        new daum.Postcode({
            oncomplete: function(data) { // 선택시 입력값 세팅
                document.getElementById("userAddress").value = data.address; // 주소 넣기
                document.getElementById("userPostCode").value = data.zonecode; // 우편번호 넣기
                var inputDtlAddr = document.getElementById("userDtlAddress"); // 주소란 읽기전용 설정
                inputDtlAddr.readOnly = false;
            }
        }).open();
    }

    /** 취소버튼 클릭 시 주소, 상세주소 초기화 */
    function cancelAddress() {
        var inputPostCode = document.getElementById("userPostCode");
        inputPostCode.value = ""; // 우편번호 초기화
        var inputAddr = document.getElementById("userAddress");
        inputAddr.value = ""; // 주소란 초기화
        var inputDtlAddr = document.getElementById("userDtlAddress");
        inputDtlAddr.value = ""; // 상세주소란 초기화
        inputDtlAddr.readOnly = true; // 상세주소란 읽기전용 해제
    }
</script>

 

참조
카카오(Daum) 우편번호 서비스 가이드
https://postcode.map.daum.net/guide

 

---

글 내용 중 잘못된 부분이 있거나, 첨부하실 내용이 있으시면 댓글로 남겨주세요. 공부하는데 많은 도움이 됩니다.
-- 기억의 유효기간은 생각보다 짧다. --