Vue.js 우편번호 서비스 연동하기 (Daum 우편번호)

Daum 우편번호 서비스를 이용하여 Vue.js 환경에서 우편번호 서비스를 연동하였습니다!

 

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

Daum 우편번호 서비스

 

---

public/index.html

index.html에 다음 코드를 넣어, 스크립트를 호출하게 해주어야 합니다.

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

 

 

컴포넌트에 다음 코드를 넣어주면 됩니다.

코드는 실제 사용한 코드와는 상관없이 용도만 알기 쉽도록 올렸습니다.

<button @click.prevent="execDaumPostcode()" class="btn btn-primary">우편번호 찾기</button>

<input type="text" class="input_text" name="postcode" id="postcode"
                                    placeholder="우편번호" readonly />
<input type="text" class="input_text" name="roadAddress" id="roadAddress"
                                        placeholder="도로명 주소" readonly />
<input type="text" class="input_text" name="detailAddress"
                                        placeholder="상세 주소" required />
                                        
<script>
export default {
    methods: {
        execDaumPostcode() {
            new window.daum.Postcode({
                oncomplete: (data) => {
                    var roadAddr = data.roadAddress; // 도로명 주소 변수
                    var extraRoadAddr = ''; // 참고 항목 변수

                    if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
                        extraRoadAddr += data.bname;
                    }

                    // 건물명이 있고, 공동주택일 경우 추가
                    if (data.buildingName !== '' && data.apartment === 'Y') {
                        extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                    }
                    // 참고항목은 괄호에 추가
                    if (extraRoadAddr !== '') {
                        extraRoadAddr = ' (' + extraRoadAddr + ')';
                    }

                    // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가
                    if (roadAddr !== '') {
                        roadAddr += extraRoadAddr;
                    }

                    // 정보들을 필드에 넣음
                    document.getElementById('postcode').value = data.zonecode;
                    document.getElementById("roadAddress").value = roadAddr;

                    // 참고항목 문자열이 있을 경우 해당 필드에 넣음
                    if (roadAddr !== '') {
                        document.getElementById("extraAddress").value = extraRoadAddr;
                    }
                }
            }).open();
        }
}
</script>

위에 쓰인 변수들은 상단에 링크 걸어놓은 Daum 우편번호 서비스 가이드에 잘 설명되어 있으니 참고하면 됩니다.

 

 

---

 

실행 결과

정상적으로 동작함을 확인할 수 있습니다.