[CRUD] 2. 회원가입 기능 구현 - Daum 우편번호 API

Daum 우편번호 API

 

회원가입 시, 주소를 입력해야 할 때 편리한 우편번호 서비스 API를 이용한다. 

 

아래 주소를 통해 Daum 우편번호 서비스를 이용할 수 있다. 

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

Daum 우편번호 서비스

 

---

1. HTML 

먼저 해당 서비스를 적용할 HTML 코드를 작성한다.

<div class="join-contents">
    <input type="text" placeholder="우편번호" id="btnPostCode" name="zip" readonly>
    <input type="text" placeholder="기본주소" id="addr1" name="addr1" readonly>
    <input type="text" placeholder="상세주소" id="addr2" name="addr2">
</div>

우편번호, 기본주소, 상세주소가 들어갈 <input> 태그를 작성한다. 

 

---

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

해당 HTML 화면 페이지에 우편번호 서비스를 호출한다.

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

 

---

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

해당 HTML 화면 페이지에 <script>를 작성하거나 연결된 JS 파일에 서비스를 호출하는 코드를 작성한다. 

new daum.Postcode({
    oncomplete: function(data) {
        // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
        // 예제를 참고하여 다양한 활용법을 확인해 보세요.
    }
}).open();

 

다음 가이드 화면을 통해 반환되는 데이터명과 데이터값을 미리 확인할 수 있다. 

 

 

"우편번호" <input> 태그를 클릭하면 우편번호 서비스가 호출되게 만든다.

앞서 HTML 페이지에서 "우편번호"에 아이디 값을 작성했다.

 <input type="text" placeholder="우편번호" id="btnPostCode" name="zip" readonly>

 

아이디를 이용해 JS를 작성한다.

let btnPostCode = document.getElementById('btnPostCode');   // 우편번호
let addr1 = document.getElementById('addr1');               // 기본주소

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

    // CRUD 버튼 이벤트 등록
    addEventListenerCRUDBtn();


});

/* 우편번호 API */
function fnPostCode(){
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
            // 예제를 참고하여 다양한 활용법을 확인해 보세요.
            console.log("postcode");
            console.log("zip : " + data.zonecode);
            console.log("address: " + data.address);

            btnPostCode.value = data.zonecode;
            addr1.value = data.address;
        }
    }).open();
}

function addEventListenerCRUDBtn() {
    // 여기에 CRUD 버튼에 대한 이벤트 리스너 추가
    btnPostCode.addEventListener("click", fnPostCode);
}