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

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

클로스트 이야기

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

개발이야기/Vue

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

클로스트 2021. 2. 1. 23:02

오늘은 다음주소 API를 vue 에서 사용하기에 대해서 포스팅하겠습니다.

기존에 이미 한번 포스팅한 내용인데요. 이 방법은 순수 JS와 HTML의 조합으로 쓸 수 있는

예제였습니다.

공식 API 홈페이지 주소는 아래에 있습니다.

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

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.daum.net

요즘은 프론트엔드 프레임워크들이 많이 나와서 일반적으로 프론트 프레임워크를 써서

프론트단을 많이 개발하게 됩니다.

기존의 방법도 매우 간단하지만 VUE나 REACT에서 쓸려면 약간의 변환이 필요합니다.

물론 이것도 귀찮으면 npmjs사이트에서 적절한 패키지를 설치하시면 됩니다.

저는 일단 패키지를 이용하지 않고 가장 간단하게 추가 할 수 있는 방법에 대해서

설명하겠습니다.

우선 public/index.html에 스크립트를 추가합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

위내용을 보시면 기존 스캐폴딩 (vuetify) 에 script에 postcode를 추가합니다.

이렇게 하면 window 객체에 daum 객체가 바인딩 되게 되고 간편하게 쓸수 있게 됩니다.

이후에 할일은 적절한 컴포넌트나 vue 싱글컴포넌트 파일을 열어서 코딩을 합니다.

<template>
  <div class="daummap">
    <h1>우편번호: <span>{{ zip }}</span></h1>
    <h1>기본주소: <span>{{ addr1 }}</span></h1>
    <h1>상세주소: <span>{{ addr2 }}</span></h1>
    <div ref="embed"></div>
    <button @click="showApi">주소API 호출</button>
  </div>
</template>

<script>
export default {
  name: 'daumMap',
  data() {
    return {
      zip: '',
      addr1: '',
      addr2: ''
    }
  },
  methods: {
    showApi() {
      new window.daum.Postcode({
        oncomplete: (data) => {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

            // 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
            let fullRoadAddr = data.roadAddress; // 도로명 주소 변수
            let 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(fullRoadAddr !== ''){
                fullRoadAddr += extraRoadAddr;
            }

            // 우편번호와 주소 정보를 해당 필드에 넣는다.
            this.zip = data.zonecode; //5자리 새우편번호 사용
            this.addr1 = fullRoadAddr;
        }
      }).embed(this.$refs.embed)
    }
  }
}
</script>

<style>

</style>

임베드로 띄울수 있고

띄우면 아래와 같이 뜨게 됩니다.