[vue.js] 무료로 daum의 우편번호 API 이용하기 (daum is undefined 오류해결하기)

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

Daum 우편번호 서비스

다른 블로그 참고하지 않아도 될만큼 Daum에서 잘 알려주고 있습니다.

일반적인 html, javascript, css 로 알려주다보니, vue.js를 사용하는 저로써는, 코드를 약간 수정할 필요가 있었습니다.

<template>
  <div>
    <input type="text" v-model="postcode" placeholder="우편번호">
    <!-- 스크립트 로딩 완료 후에만 버튼을 활성화합니다 -->
    <input type="button" @click="execDaumPostcode" value="우편번호 찾기" :disabled="!isScriptLoaded"><br>
    <input type="text" v-model="roadAddress" placeholder="도로명주소">
    <input type="text" v-model="jibunAddress" placeholder="지번주소">
    <span id="guide" style="color:#999;display:none"></span>
    <input type="text" v-model="detailAddress" placeholder="상세주소">
    <input type="text" v-model="extraAddress" placeholder="참고항목">
  </div>
</template>

<script>
export default {
  data() {
    return {
      postcode: '',
      roadAddress: '',
      jibunAddress: '',
      detailAddress: '',
      extraAddress: '',
      guideText: '',
      isScriptLoaded: false, // 스크립트 로딩 상태를 추적하는 변수
    };
  },
  mounted() {
    this.loadDaumPostcodeScript();
  },
  methods: {
    loadDaumPostcodeScript() {
      const script = document.createElement('script');
      script.src = '//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';
      script.onload = () => {
        this.isScriptLoaded = true; // 스크립트가 로드되면 isScriptLoaded를 true로 설정
      };
      document.head.appendChild(script);
    },
    execDaumPostcode() {
      if (window.daum && window.daum.Postcode) {
        new daum.Postcode({
          oncomplete: (data) => {
            // 우편번호 검색 완료 후의 처리 로직
          }
        }).open();
      } else {
        console.error("Daum Postcode 스크립트가 로드되지 않았습니다.");
      }
    }
  }
}
</script>

 

위 코드를 작성했을때, 저는 daum is undefined 오류가 떴습니다.(Eslint 오류)

이를, 아래의 코드로 해결했습니다.

// eslint-disable-next-line no-undef
new daum.Postcode({...});

Eslint 를 이번에는 넘어가라는 뜻입니다.

결과로, 성공했습니다