고정 헤더 영역
상세 컨텐츠
본문
반응형
[ 사용 환경 : Vue.js, tailwind css ]
Vue.js 에서 daum address api (kakkao map) 를 사용하는 방법을 포스팅 하겠습니다.
기존 html css js 에서 사용하는 것과 달리 조금은 번거로운 작업이 존재합니다.
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
위 링크를 통해 실제 예제가 존재합니다. 이를 변형하여 vue에 맞게 제작하겠습니다.
팝업(pop up)을 이용한 웹 (Web application) 전용으로 제작하도록 하겠습니다.
■ 작업 순서
1. index.html
2. component 생성
3. component import
1. index.html 파일에서 cdn 연결해주기
위의 내용을 복사해서 <head></head> 에 작성해주세요.
2. component 생성
이제 해당 내용을 작성할 컴포넌트를 생성하도록 하겠습니다.
src/views/Account/Address.vue 파일을 생성하였습니다.
Address.vue
<template>
<div class="text-md my-5">
<label class="text-xs px-2" for="company_name">회사주소</label><br>
<input class="focus:outline-none focus:ring focus:border-blue-600 border-b-2 border-black pt-2 px-2 mb-3 mr-10"
type="text" id="sample4_postcode" name="post_number" placeholder="우편번호">
<button class="border-2 border-gray-400 rounded bg-gray-100 p-1 inline-block"
type="button" @click="addressApi">우편번호 찾기</button><br>
<input class="mr-10 focus:outline-none focus:ring focus:border-blue-600 border-b-2 border-black pt-2 px-2 mb-3"
type="text" id="sample4_roadAddress" name="address1" placeholder="도로명주소">
<span id="guide" style="color:#999;display:none"></span>
<input class="focus:outline-none focus:ring focus:border-blue-600 border-b-2 border-black pt-2 px-2"
type="text" id="sample4_extraAddress" name="address3" placeholder="참고항목">
<input class="focus:outline-none focus:ring focus:border-blue-600 border-b-2 border-black pt-2 px-2"
type="text" id="sample4_detailAddress" name="address4" placeholder="상세주소">
</div>
</template>
<script>
export default {
methods: {
addressApi() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var roadAddr = data.roadAddress; // 도로명 주소 변수
var 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 + ')';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample4_postcode').value = data.zonecode;
document.getElementById("sample4_roadAddress").value = roadAddr;
// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
if(roadAddr !== ''){
document.getElementById("sample4_extraAddress").value = extraRoadAddr;
} else {
document.getElementById("sample4_extraAddress").value = '';
}
var guideTextBox = document.getElementById("guide");
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
if(data.autoRoadAddress) {
var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
guideTextBox.style.display = 'block';
} else if(data.autoJibunAddress) {
var expJibunAddr = data.autoJibunAddress;
guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
guideTextBox.style.display = 'block';
} else {
guideTextBox.innerHTML = '';
guideTextBox.style.display = 'none';
}
}
}).open();
}
}
}
</script>
<style>
.address-layout{
display:none;
position:fixed;
overflow:hidden;
z-index:1;
-webkit-overflow-scrolling:touch;
}
</style>
3. component import
본래 사용할 component에 Address.vue 를 import 하도록 합니다.
<template>
<Address />
</template>
<script>
import Address from './Address'
export default {
components: {
Address,
},
</script>
■ 결과 확인
이제 우편번호 찾기를 클릭하면 정상적 출력 됨을 확인하실 수 있습니다.
■ 후기
사실 완전히 Vue.js style로 변형한건 아닙니다.
그냥 js 기반의 언어기 때문에 혼용이 될 뿐입니다.
$emit 을 이용한다던가, data () {} 를 작성하여 값을 모니터링 한 것도 아닙니다.
쓰면 좋겠지만, 렌더링 속도나 구현 속도 등을 고려했을 때 굳이 안바꿔도 된다 생각하여 제멋대로 변형해보았습니다.
'FrontEnd > Vue.js' 카테고리의 다른 글
| [ Vue.js ] methods , computed 안에서 함수 호출하는 방법 (0) | 2021.11.22 |
|---|---|
| CORS 에러 없애기 (0) | 2021.11.22 |
| [ Vue.js ] Axios - PHP, 200 response를 Error로 보내는 방법 (0) | 2021.11.18 |
| [ Vue.js ] Axios - post - php 데이터 송신방법 | REST API | 다른 포트 번호 에서 데이터 송수신 (1) | 2021.11.12 |
| [ Axios ] Axios 사용하기 / url에 관한 짧은 정보 / where is root path of Axios(url) ? / 예시 / example (0) | 2021.11.11 |
댓글 영역