[CRUD] 기능구현 - Daum (KaKao) 우편번호 API

 

참조 홈페이지 

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

Daum 우편번호 서비스

 

 

 

관련 화면

이 화면에서 우편번호 버튼을 클릭하면 

사진과 같이 주소를 입력할 수 있는 팝업창이 뜬다 

팝업창에 본인의 주소를 입력해서 확인을 눌러주면 

자동으로 우편번호와 주소가 입력된다.

 

 

관련 코드

1.  HTML 

<table class="tb_bottom">
    <tr>
        <th rowspan="3"><div class="img_address"><img src="/images/address.png"></div></th>
        <td>
            <div class="post_code">
                <input type="text" id="regist_postcode" class="post_code_write" placeholder="우편번호" readonly>
                <input type="button" id="post_code" class="post_code_box" value="우편번호">
            </div>
        </td>
    </tr>
    <tr>
        <td><input type="text" class="input_address" id="regist_addr" placeholder="기본주소" readonly></td>
    </tr>
    <tr>
        <td><input type="text" id="regist_addr2" placeholder="나머지주소 (선택입력 가능)"></td>
    </tr>
</table>

 

2.  Script 우편번호 서비스 연결

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

 

 

3. JS 우편번호 서비스 호출 및 이용

function fnPostcode(){
    new daum.Postcode({
        oncomplete: function(data) {
            regist_postcode.value = data.zonecode;
            regist_addr.value = data.address;
        }
    }).open();


}

 

 

+ 데이터 값 확인 

 

참조 홈페이지에서 아래로 내리다 보면 반환되는 데이터 값 확인도 가능할 수 있음

 

JS 전체 코드 : 위에서 말한 우편번호와 기본주소에 자동으로 적용이 되는데 어떻게 아이디에 연동되는지 확인

"use strict";

let register_btn = document.getElementById('regist_button');        // 회원가입 버튼
let postcode_btn =  document.getElementById('post_code');           // 우편번호 버튼
let regist_postcode = document.getElementById('regist_postcode');   // 우편번호 적는곳
let regist_addr =document.getElementById("regist_addr");            // 기본주소 적는곳

document.addEventListener('DOMContentLoaded', function() {
    addEventListnerCRUDBtn();

});


function addEventListnerCRUDBtn(){
    register_btn.addEventListener('click', fnRegist);
    postcode_btn.addEventListener('click', fnPostcode);
}



/* 우편번호 버튼 */
function fnPostcode(){
    new daum.Postcode({
        oncomplete: function(data) {
            regist_postcode.value = data.zonecode;
            regist_addr.value = data.address;
        }
    }).open();



}