[Vue] 카카오 주소 API 활용하기 daum postcode api

웹 개발을 하게 되면 회원가입이나 주소관리 등 주소 혹은 우편번호를 입력받아 사용해야하는 상황이 있다. 단순히 이용자가 모든 내용을 입력하게 할 수 있다. 하지만 이 글을 읽게 될 사람들은 대부분 경험해 봤을 듯이 대다수의 서비스들은 우편번호 검색 서비스를 제공해 이용자들에게 편리함을 제공한다.

 

처음으로 웹페이지를 제작하고 있는 본인이 했던 삽질들을 공유하면서 카카오 우편번호 API 이용하고자 하는 개발자분들에게 활용법을 공유하고자 한다.

 

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

Daum 우편번호 서비스

 

예제 코드도 친절하게 설명되어 있고 쉽게 따라할 수 있다고 생각되지만,

처음으로 적용을 해야하는 입장에서는 보고도 막막함이 더 클 수 있다고 생각한다.(본인도 그랬기 때문)

 

사실 js로만 사용한다면 앞서 말했듯이 따라하기만 하면 크게 어려움이 없다. 하지만 Vue를 적용해서 사용하려면 약간의 변경이 필요하기 때문에 그 방법에 대한 경험을 공유하겠다.

 

반응형

---

Daum postcode API 활용

<사용전>

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

public 패키지에 index.html파일에 추가

 

<템플릿>

<input type="text" v-model="postcode" placeholder="우편번호">
<input type="button" @click="execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="address" placeholder="주소"><br>
<input type="text" id="detailAddress" placeholder="상세주소">
<input type="text" id="extraAddress" placeholder="참고항목">

주소창을 통해 입력 받을 우편번호, 주소, 참고항목 등을 v-model, 주소창을 띄울 click 이벤트 메서드가 있다.

 

<스크립트>

export default {
  data() {
    return {
      postcode: "",
      address: "",
      extraAddress: "",
    };
  },
  methods: {
    execDaumPostcode() {
      new window.daum.Postcode({
        oncomplete: (data) => {
          if (this.extraAddress !== "") {
            this.extraAddress = "";
          }
          if (data.userSelectedType === "R") {
            // 사용자가 도로명 주소를 선택했을 경우
            this.address = data.roadAddress;
          } else {
            // 사용자가 지번 주소를 선택했을 경우(J)
            this.address = data.jibunAddress;
          }

          // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
          if (data.userSelectedType === "R") {
            // 법정동명이 있을 경우 추가한다. (법정리는 제외)
            // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
            if (data.bname !== "" && /[동|로|가]$/g.test(data.bname)) {
              this.extraAddress += data.bname;
            }
            // 건물명이 있고, 공동주택일 경우 추가한다.
            if (data.buildingName !== "" && data.apartment === "Y") {
              this.extraAddress +=
                this.extraAddress !== ""
                  ? `, ${data.buildingName}`
                  : data.buildingName;
            }
            // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
            if (this.extraAddress !== "") {
              this.extraAddress = `(${this.extraAddress})`;
            }
          } else {
            this.extraAddress = "";
          }
          // 우편번호를 입력한다.
          this.postcode = data.zonecode;
        },
      }).open();
    },
  },
};

기존 코드를 Vue 코드에 맞게 변경하였다.

---

주소 검색기능사용은 회원가입 페이지에서만 사용되는 것이 아니라 다른 경우에도 사용될 수 있다.

다음기회에는 재사용을 위한 모듈화를 하는 방법에 대해 준비해 볼까 한다.