VUE
[Vue] 카카오 주소 우편번호 api 활용하기
hobbada
2021. 6. 11. 17:45
회원가입 화면 등에서 유저의 주소 혹은 우편번호를 입력받아야 하는 상황이 있다. 이럴 때 카카오(다음)에서 제공하는 우편번호 서비스를 이용하면 매우 편리하다.
https://postcode.map.daum.net/guide
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
사실 너무도 예제코드가 쉽고 잘 정리되어 있기에 그냥 보고 따라 하기만 하면 된다.
본인은 iframe을 이용하여 페이지에 끼워 넣는 방식을 이용했다.
<템플릿 부분>
|
1
2
3
4
5
|
<input type="text" class="addr1" id="address" placeholder="서울특별시 서초구 -" v-model="address" disabled>
<button class="w-button3" @click="openDaumPostcode">주소 검색</button>
<div ref="wrap" style="display:none;border:1px solid;width:500px;height:300px;margin:5px 0;position:relative">
<img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnFoldWrap" style="cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1" @click="foldDaumPostcode" alt="접기 버튼">
</div>
|
cs |
입력받을 텍스트 인풋에 v-model, 그리고 검색버튼과 닫기 버튼에 각각 click 이벤트 메서드를 붙여놨다.
<스크립트 부분>
|
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
32
33
34
35
36
37
38
39
40
41
42
43
|
openDaumPostcode () {
const elementWrap = this.$refs.wrap
// 현재 scroll 위치를 저장해놓는다.
const currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop)
new window.daum.Postcode({
oncomplete: (data) => {
// 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
let addr = '' // 주소 변수
// 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
// document.getElementById('address').value = addr
this.address = addr
// iframe을 넣은 element를 안보이게 한다.
// (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
elementWrap.style.display = 'none'
// 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다.
document.body.scrollTop = currentScroll
},
// 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다.
onresize: function (size) {
elementWrap.style.height = size.height + 'px'
},
width: '100%',
height: '100%'
}).embed(elementWrap)
elementWrap.style.display = 'block'
},
foldDaumPostcode () {
const elementWrap = this.$refs.wrap
elementWrap.style.display = 'none'
}
|
cs |
어렵지 않다. 2가지만 바꿔주면 된다.
javascript의 엘리먼트 접근 방식인 document.getElementById() 를 this.$ref 로 바꿔준다.
function(data) {} 함수를 화살표 함수 (data) => {} 로 바꿔준다. 그래야 this가 먹힌다.
반응형