[Vue] Vue-Daum-Postcode

패키지를 받아서 사용해야 하는 이유는 무엇인가요?
cdn은 우리가 사용하는 서버에서 패키지를 다운로드 받지 않고, 패키지가 등록된 서버에서 다운로드 받아 사용하므로 서버의 스트레스를 줄일 수 있습니다.
하지만, 우리는 vue 프레임워크를 사용하고 있고 vue에서는 이미 우리가 사용하기위해 받아준 패키지들을 빌드할 때 한 번에 번들링을 진행합니다. 때문에, 앱이 로드될 때 사용자가 스크립트에서 패키지를 로드받을 필요가 없습니다. 또한, 전체 라이브러리를 다운로드 하지 않고, 사용하는 라이브러리에서 일부만 사용자 지정 번들로 만들기 때문에 더 효율적이며, 필요하다면 라이브러리의 일부분을 커스텀(수정)해서 우리가 원하는대로 사용할 수 있습니다.

npm i vue-daum-postcode

// App.js
import VueDaumPostcode from "vue-daum-postcode"
Vue.use(VueDaumPostcode)

// 프로젝트 내 예시 (Dialog 모달로 띄우기)
<script setup>
...
function onComplete(data) {
  /* 데이터를 저장하는 로직
     data 매개변수 안에서 가져와 저장해주세요 */
  ...
}
</sccript>
<template>
...
<Dialog 
    v-model:visible="isPostCodeOpen"
    :modal="true"
    :closeOnEscape="false"
    @hide="() => isPostCodeOpen=false">
    <VueDaumPostcode @complete="onComplete" />
  </Dialog>
</template>