[Vue.js] 다음 주소 API 연동하기

 

여는 글

---

 

어쨌든 주문 기능이 있으니 주소 입력도 있으면 좋을 것 같고 그러면 주소 API 써보고 싶었기도 해서 연동하려는 데 생각만큼 뚝딱 되진 않았다.

 

잘안되니까 막 module 다운로드하고 컴포넌트 연결하고 package 형태로 된 것도있어서 그것도 다운로드하고 연결하는 코드 집어넣고 그러니까 어느 순간부터 vue 웹 페이지가 갱신이 안되기 시작했다.

 

정확하게 말하면, vue에서 코드를 고쳤는데 웹 페이지에서는 고친 코드가 반영이 안됐다.

 

이 상황이 이틀 동안 계속됐고 코드가 반영이 안되면 vue cache 문제라는 글이 대부분이길래 크롬 캐시도 지우고 meta태그 넣어서 cache 사용 안하도록 코드 넣고 했는데도 안됐다.

 

생각해보면 그 전에도 새로고침은 알아서 잘만 됐는데 갑자기 이런 코드 넣는다고 되면 그 전부터 안돼야 했다.

 

어쩔 수 없이 코드를 롤백하기 시작했는데 역시나...

 

롤백하니까 새로고침이 알아서 잘 된다.

 

내 생각엔 vue.config.js에서 module 설치했던 부분을 지웠던 게 해결 원인이 된 것 같다.

 

진짜 왜 이러는 지 몰라서 다 엎을까 생각하기도 했는데 이제 해결됐으니 api 연동을 해보겠다.

 

 

 

Vue.js - 다음 주소 API 연동

---

 

코드 출처 https://postcode.map.daum.net/guide

Daum 우편번호 서비스

 

 

참고한 블로그 https://chlost.tistory.com/53

다음주소 API VUE에서 사용하기

 

 

공식 사이트에서 제공하는 코드에서 진짜 약간만 수정하면 된다.

 

Vue에 맞게 약간 코드를 바꾼 부분은 6번, 20번, 22번 줄을 참고하면 된다.

 

나머지는 제공하는 코드와 동일하다.

 

++아래 코드는 컴포넌트 파일에 넣으면 에러가 나므로 frontend/public/index.html에 넣어야 한다.

    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

 

전체코드

components/Address.vue

<template>
  <div class="address">
      <h3>ADDRESS</h3>
    <input type="text" id="postcode" placeholder="우편번호">
    <button @click="search()">우편번호 찾기</button><br>
    <!--onclick이 아니라 @click으로 바꿔야한다. -->
    <input type="text" id="roadAddress" placeholder="도로명주소">
    <input type="text" id="jibunAddress" placeholder="지번주소">
    <span id="guide" style="color:#000;display:none"></span>
    <input type="text" id="detailAddress" placeholder="상세주소">
    <input type="text" id="extraAddress" placeholder="참고항목">
  </div>
</template>

<script>

export default {
  name: "Address",
    methods : {
        search(){ //@click을 사용할 때 함수는 이렇게 작성해야 한다.
            new window.daum.Postcode({
            oncomplete: (data) => { //function이 아니라 => 로 바꿔야한다.
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                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('postcode').value = data.zonecode;
                document.getElementById("roadAddress").value = roadAddr;
                document.getElementById("jibunAddress").value = data.jibunAddress;
                
                // 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
                if(roadAddr !== ''){
                    document.getElementById("extraAddress").value = extraRoadAddr;
                } else {
                    document.getElementById("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>

 

나는 컴포넌트로 만들어서 끼워넣었다.

 

 

닫는 글

---

 

이제 로그인 기능이랑 회원가입할 때 아이디중복체크 기능 만들고 나면 드디어 결제 기능을 구현하면 된다.

 

 결제 기능 너무 구현해보고 싶다...

 

완성된 페이지