[Vue.js] click 이벤트로 카카오주소api 적용해보기

 

여러가지 방법이 있겠지만

보통은 index.html에 카카오에서 제공해주는 script 주소를 박아주지만

보안상(?) 이유는 사실 잘 모르겠다..하지만 어쨌든 스크립트를 처음부터 딱 박아서 사용하는게 아닌

필요한 화면에서 mounted 를 이용해서

이 시점에서!

 

화면이 불러와질때 스크립트 소스를 유동적으로 집어넣어주려고 한다

 

 

---

 

joinView.vue

mounted(){
    const script = document.createElement('script');    //script 변수 선언해서 <scrpit /> 얘를 만들어가지고 담는다
    script.src = '//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';   //script의 src속성에 카카오에서 제공한 주소값을 넣어준다
    document.head.appendChild(script);    //head에 src 속성까지 만들어진 script소스를 append한다
  },

 

 

---

 

 

그리고나서 화면 불러오면

head안에 script소스가 잘 생성되어있는 모습이다 

무조건 이렇게 해야하는방법이 절대 아니고, index.html에 박아서 사용하는 법 대신에 찾은 방법이다 ,,,, 어쨌든 성공!

 

 

 

 

 

 

---

 

그리고 나서 이제 버튼에 클릭이벤트를 준다

	<b-button @click="addrSearch()">
         주소검색
	</b-button>
    
    
   	//script
    
    addrSearch(){
      new window.daum.Postcode({
        oncomplete: (data) => {
          if (this.extraAddress !== '') {
            this.extraAddress = '';
          }
          if (data.userSelectedType === 'R') {
            // 사용자가 도로명 주소를 선택했을 경우
            this.addr = data.roadAddress;
          } else {
            // 사용자가 지번 주소를 선택했을 경우(J)
            this.addr = data.jibunAddress;
          }

          // 우편번호를 입력한다.
          this.zip = data.zonecode;
        },
      }).open();

    },

 

---

 

 

마지막으로,

oncomlete안에 어떤식으로 data를 불러올것인지는 공식사이트에서 참고하며 본인이 원하는대로 수정해주면 된다.

https://developers.kakao.com/docs/latest/ko/local/dev-guide

Kakao Developers

 

 

 

 

 

 

 

---