[VUE.JS] 다음주소 API를 Vue에 적용하기

vue를 공부하면서 vue없이 작성했던 소스들을 적용하는 연습 중에 있다.

이번에는 회원가입, 배송정보 입력시 주소 찾기 및 입력에 많이 사용하는 다음주소 API를 Vue에 적용해보고자 한다.

다음주소 API도 카카오 맵처럼 js를 vue 환경에 맞게 수정해 적용할 수 있다고 한다.

 

공식문서에 들어가면 예시 및 사용방법을 확인할 수 있다.

Daum 우편번호 서비스

적용하기

공식문서에서 스크립트 소스를 가져와 public/index.html head에 추가한다.

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

혹은 관련 특정 페이지에 스크립트 소스가 없다면 추가하는 함수를 작성할 수 있다.(그러나 여기선 사용하지 않기로...)

주소검색 화면 작성

템플릿

<template>
  <div>
    <input type="text" placeholder="우편번호" v-model="zonecode" readonly />
    <button id="postcode" @click="openPostcode">검색</button><br />
    <input type="text" v-model="roadAddress" placeholder="주소" readonly /><br />
    <input type="text" v-model="detailAddress" placeholder="상세주소" />
  </div>
</template>

데이터를 받아올 곳은 입력 및 수정할 수 없도록 우편번호, 주소 input에 readonly 추가, 주소 데이터를 전달받을 수 있도록 v-model로 변수 연결, 검색 버튼을 클릭시 주소검색 창이 나오도록 @click이벤트를 삽입하였다.

스크립트

<script>
export default {
  data() {
    return {
      zonecode: "",
      roadAddress: "",
      detailAddress: "",
    };
  },
  methods: {
    openPostcode() {
      new window.daum.Postcode({
        oncomplete: (data) => {
          // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분
          this.zonecode = data.zonecode;
          this.roadAddress = data.roadAddress;
        },
      }).open();
    },
  },
};
</script>

사용자가 주소를 선택하면 해당하는 우편번호와 주소를 전달받아 입력폼의 우편번호와 주소에 입력되도록 v-model에 삽입했던 변수를 data와 openPostcode() 안에 추가하였다.

결과화면

검색 버튼 클릭 후 특정 주소를 선택하면 그 정보 중 우편번호와 주소가 입력장에 전달되는 것을 확인핧 수 있다

전체소스

<template>
  <div>
    <input type="text" placeholder="우편번호" v-model="zonecode" readonly />
    <button id="postcode" @click="openPostcode">검색</button><br />
    <input type="text" v-model="roadAddress" placeholder="주소" readonly />
    <input type="text" v-model="detailAddress" placeholder="상세주소" />
  </div>
</template>
<script>
export default {
  name: "PostCode",
  data() {
    return {
      zonecode: "",
      roadAddress: "",
      detailAddress: "",
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    openPostcode() {
      new window.daum.Postcode({
        oncomplete: (data) => {
          console.log(data);
          this.zonecode = data.zonecode;
          this.roadAddress = data.roadAddress;
        },
      }).open();
    },
  },
};
</script>

 

이후에 예제를 활용해 필요한 부분들을 사용해 봐야겠다.

참고자료

개발자의 품격 강의자료

Daum 우편번호 서비스

[Vue] 다음주소 API Vue에서 사용하기