Dev Day

Nuxt.js 다음 주소 검색 API 사용하기

프로젝트를 진행하다 회원가입을 진행할 때, 결제창에서 주소를 입력받을 때 등 사용자에게 주소를 입력받아야 하는 상황이 생깁니다. (사실 이 부분을 깜빡하고 있다가 급하게 생각나서 찾아보고 만들게 되었네요ㅋㅋ..)

처음에는 행정안전부에서 제공하는 도로명검색 오픈 API를 활용해서 만들 생각이었습니다.

 

사기업에서 제공하는 오픈 API가 언제 유료화 될 지 모른다는 막연한 생각을 가지고 행정안전부의 도로명검색 API를 찾아 키를 발급받고 테스트를 진행해보았는데 뭐 때문인지는 모르겠지만 발급받은 승인키가 안 먹는 현상이 발생하여 급하게 다음 주소 검색 API를 활용하기로 했습니다.

(개발용으로 키를 발급받아서 테스트를 진행했는데 제가 대충해봐서 인지 잘 모르겠지만 키가 안 먹었습니다...)

 

정확한 API명은 다음 우편번호 API더군요!

공식 가이드 문서를 보며 따라 하니 바로 적용이 가능했습니다.

 

다음 주소 검색 API 특징

• Key를 발급받을 필요가 없습니다.
• 사용량에 대한 제한은 전혀 없습니다.
• 기업용이든 상업적 용도이든 상관없이 무조건 무료로 사용 가능합니다.
• 도로명 주소, 지번 주소, 영문 주소까지 모두 확인 가능합니다.
• 행정안전부에서 제공하는 주소 DB를 직접 업데이트받고 있으므로 가장 최신의 데이터를 이용하실 수 있습니다.
• PC 및 모바일 웹 환경에서 일반적으로 사용되는 모든 브라우저를 지원합니다.
• 하단 로고를 임의로 가릴 경우, 사용에 제약이 발생할 수 있습니다.
• 본 서비스는 인터넷이 가능한 환경에서 동작합니다. 인트라넷(내부망) 환경은 공식적으로 지원하지 않으며, 별도 요청 시 "사용하는 도메인" 정보만 제공 가능합니다.

 

 

일단 Key도 발급받을 필요가 없고 사용량 걱정도 없으며, 무조건 무료라는 점, 그리고 행정안전부에서 제공하는 주소 DB를 직접 업데이트받고 있다고 하니 예전 데이터를 가져올 걱정도 없었습니다.

다만 하단의 로고를 임의로 가릴 수 없다는 점인데 저는 그럴 생각도 없습니다. (카카오 만세)

 

Nuxt.js 다음 주소 검색 API 적용하기

일단 다음 주소 검색 API를 적용하기 위해서 script 파일을 호출해야 하기 때문에 script 파일을 호출해줍니다.

두 가지 방법이 있는데 해당 페이지 내에서 head() 함수를 통해 html에서 <script></script> 처럼 사용이 가능합니다.

// pages/zipSearch.vue

<template>
  <div>

  </div>
</template>

<script>
export default {
  head() {
    return {
      title : 'title',
      meta  : [
        {
          hid    : 'description',
          name   : 'description',
          content: 'description'
        }
      ],
      // 이곳에 script 파일 주소를 넣을 수 있습니다.
      script: [
        {
          src: '//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js'
        }
      ]
    };
  },
}
</script>

<style scoped>

</style>

저는 이 방법 말고 nuxt.config.js 파일에 전역으로 등록해서 사용하도록 적용했습니다. 저는 여러 페이지에서 다음 주소 검색 스크립트를 호출해야 하기 때문에 전역으로 등록해서 쓰는 게 낫다고 판단했습니다.

// nuxt.config.js

  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    titleTemplate: '%s - site',
    title        : 'site',
    meta         : [
      {charset: 'utf-8'},
      {
        name   : 'viewport',
        content: 'width=device-width, initial-scale=1'
      },
      {
        hid    : 'description',
        name   : 'description',
        content: ''
      },
    ],
    link         : [
      {
        rel : 'icon',
        type: 'image/x-icon',
        href: '/favicon.ico',

      },
    ],
    script       : [
      // 다음 주소 검색 API
      {src: '//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js'},
    ]
  },

이렇게 스크립트 호출이 가능해지면 너무 쉽게 주소 검색이 가능합니다.

아래는 전체 소스입니다. (css나 container 클래스 등은 보이기 편하게 하기 위해 넣은 것이니 안 쓰셔도 무방합니다.)

// pages/zipSearch.vue

<template>
  <div class="container p-5">
    <h1>우편번호 검색 테스트</h1>
    <input type="text" id="sample6_postcode" placeholder="우편번호">
    <input type="button" @click="addrSearch" value="우편번호 찾기"><br>
    <input type="text" id="sample6_address" placeholder="주소"><br>
    <input type="text" id="sample6_detailAddress" placeholder="상세주소">
    <input type="text" id="sample6_extraAddress" placeholder="참고항목">
  </div>
</template>

<script>
export default {
  layout: 'none',
  methods: {
    addrSearch() {
      new daum.Postcode({
        oncomplete: function(data) {
          // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

          // 각 주소의 노출 규칙에 따라 주소를 조합한다.
          // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
          var addr = ''; // 주소 변수
          var extraAddr = ''; // 참고항목 변수

          //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
          if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
            addr = data.roadAddress;
          } else { // 사용자가 지번 주소를 선택했을 경우(J)
            addr = data.jibunAddress;
          }

          // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
          if(data.userSelectedType === 'R'){
            // 법정동명이 있을 경우 추가한다. (법정리는 제외)
            // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
            if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
              extraAddr += data.bname;
            }
            // 건물명이 있고, 공동주택일 경우 추가한다.
            if(data.buildingName !== '' && data.apartment === 'Y'){
              extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
            }
            // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
            if(extraAddr !== ''){
              extraAddr = ' (' + extraAddr + ')';
            }
            // 조합된 참고항목을 해당 필드에 넣는다.
            document.getElementById("sample6_extraAddress").value = extraAddr;

          } else {
            document.getElementById("sample6_extraAddress").value = '';
          }

          // 우편번호와 주소 정보를 해당 필드에 넣는다.
          document.getElementById('sample6_postcode').value = data.zonecode;
          document.getElementById("sample6_address").value = addr;
          // 커서를 상세주소 필드로 이동한다.
          document.getElementById("sample6_detailAddress").focus();
        }
      }).open();
    },
  }
}
</script>

<style scoped>
input {
  border: 1px solid black;
  margin: 5px;
}
</style>

위 소스 작성 후 npm run dev로 실행시키면 아래와 같은 화면이 나옵니다.

우편번호 찾기 버튼 클릭 시 정상적으로 팝업이 작동합니다.

테스트로 아무 주소나 입력해보았습니다.

해당 주소를 클릭하면 아래와 같이 정상적으로 데이터가 들어가는 것을 확인할 수 있습니다.

(input을 그냥 만들었더니 짧아서 데이터가 짤려버렸네요..ㅋㅋ)

급하게 찾아보고 만들어 봤지만 가이드에 나온 그대로 가져와서 써보니 주석도 잘 되어 있어서 큰 무리 없이 테스트를 금방 진행할 수 있었습니다. (갓카오..)

이제 이 다음 주소 검색 API를 활용하여 꾸며주기만 한다면 주소 검색은 처리가 가능할 것 같습니다.

행전안전부 도로명검색 API는 왜 안됐는지 다시 확인해서 찾아봐야겠습니다.