Jiwift

[Open API] 카카오(다음) 주소 검색 API 사용 본문

다른 개발/기타

[Open API] 카카오(다음) 주소 검색 API 사용

지위프트 2023. 12. 7. 22:21
반응형

해당글은 iOS를 위한 글입니다.

 

 

 

서비스에서 주소 검색이 필요한 경우에 사용하기 좋은 무료 API를 소개합니다.

 

설명

 다음에서 제공해 주는 API를 사용하면 쉽게 웹과 앱에서 주소 검색 기능을 구현할 수 있습니다.

 

  • Key를 발급받을 필요가 없습니다.
  • 사용량에 대한 제한이 없습니다.
  • 기업용이든 상업적 용도이든 상관없이 무료로 사용 가능합니다.
  • 기초구역번호가 발급된 도로명 주소, 영문 주소를 확인 가능합니다.
  • 행정안전부에서 제공하는 "도로명 주소" DB를 직접 업데이트받고 있으므로 가장 최신의 데이터를 이용하실 수 있습니다.

 위에 설명만 봐도 너무나도 좋은 API란 것을 알 수 있습니다. 로고를 가리지 않고 사용한다면 문제가 생기지 않는다고 합니다. 

Daum Postcode Service User Guide

 

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.daum.net

 

 저는 앱에서 사용하기 위해서 해당 API를 살펴보았습니다. 웹에서 구현하시는 분들은 쉽게 적용 가능하겠지만, 앱에서는 어떻게 해야 하나 고민을 했습니다. 처음에는 웹킷에 HTML을 넣는 방식을 사용할까 했는데 찾아보니 안된다고 합니다. 그래서 깃허브를 통해 웹페이지를 열어서 웹킷에서 사용하려고 합니다.

 

 1. 깃 허브에서 주소 검색 API 웹 사이트를 구동

 2. 웹킷에서 사이트 열기

 3. 결과받기

 3가지 절차를 수행한다면 시간은 걸려도 정말 간단하게 가능합니다. 이 글에서는 1번 깃 허브에서 사이트를 여는 방법을 소개하도록 하겠습니다. 사실 저도 다른 사람들의 블로그를 참고해서 진행하니. 더 좋은 글이 있을 수 있습니다.

 

----

 깃 허브에서 간단하게 프로젝트를 하나 생성해 주세요. 

 

 

Create new file을 해야합니다. 

 

 

파일 이름은 "index.html"로 준비해주세요. 

 

<!DOCTYPE html>

<html lang="ko">
  <head>
    <title>주소 찾기</title>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,height=device-height,initial-scale=1.0"
    />
  </head>
  <body onload="execDaumPostcode()">
    <div
      id="layer"
      style="display:block; position:absolute; overflow:hidden; z-index:1; -webkit-overflow-scrolling:touch; "
    ></div>
    <script src="https://spi.maps.daum.net/imap/map_js_init/postcode.v2.js"></script>
    <script>
      window.addEventListener("message", onReceivedPostMessage, false);

      function onReceivedPostMessage(event) {
        //..ex deconstruct event into action & params
        var action = event.data.action;
        var params = event.data.params;
        console.log("onReceivedPostMessage " + event);
      }

      function onReceivedActivityMessageViaJavascriptInterface(json) {
        //..ex deconstruct data into action & params
        var data = JSON.parse(json);
        var action = data.action;
        var params = data.params;
        console.log("onReceivedActivityMessageViaJavascriptInterface " + event);
      }

      function postMessageToiOS(postData) {
        window.webkit.messageHandlers.callBackHandler.postMessage(postData);
      }

      var element_layer = document.getElementById("layer");
      function execDaumPostcode() {
        new daum.Postcode({
          oncomplete: function (data) {
            var jibunAddress = "";

            if (data.jibunAddress == "") {
              jibunAddress = data.autoJibunAddress;
            } else if (data.autoJibunAddress == "") {
              jibunAddress = data.jibunAddress;
            }

            var postData = {
              roadAddress: data.roadAddress,
              jibunAddress: jibunAddress,
              zonecode: data.zonecode,
            };
            window.postMessageToiOS(postData);
          },
          width: "100%",
          height: "100%",
        }).embed(element_layer);
        element_layer.style.display = "block";
        initLayerPosition();
      }

      function initLayerPosition() {
        var width = window.innerWidth || document.documentElement.clientWidth;
        var height =
          window.innerHeight || document.documentElement.clientHeight;
        element_layer.style.width = width + "px";
        element_layer.style.height = height + "px";
        element_layer.style.left =
          ((window.innerWidth || document.documentElement.clientWidth) -
            width) /
            2 +
          "px";
        element_layer.style.top =
          ((window.innerHeight || document.documentElement.clientHeight) -
            height) /
            2 +
          "px";
      }
    </script>
  </body>
</html>

 그리고 안에 내용은 위 코드를 작성해주시고 저장해 주세요.

 

 

그리고 레포지토리의 'Settings->Pages->Branch'를 main으로 해주세요. 브랜치 이름은 정하신 거에 따라서 다를 수 있습니다.

 

 

그리고 save를 눌러주시면 저장되었다는 표시가 보일 겁니다.

 

이제 주소를

https://[깃허브ID].github.io/[레포지토리이름]

 이렇게 해서 들어가면 사이트가 표시될 것입니다.

 

 

 

끄읕

 

 

 

소스코드와 방법 출처 

WebKit - 카카오 우편번호 서비스 구현하기 with UIKit | SDY - Developer Kas (kasroid.github.io)

 

WebKit - 카카오 우편번호 서비스 구현하기 with UIKit

본 포스팅은 Swift 5.3 기준으로 작성되었습니다. Intro 저는 요새 Market Kurly 앱을 클론하는 프로젝트를 진행하고 있는데요. 회원가입 부분에서 Kakao 우편변호 찾기 기능을 지원하더라고요. 사용자로

kasroid.github.io

 

반응형

'다른 개발 > 기타' 카테고리의 다른 글

[Github] 오픈소스 기여하기, Contributor  (0) 2024.01.06
[Web] Sign in with Apple 웹, 애플 로그인 간단하게 알아보기 html, js 사용  (0) 2024.01.05
[Node] FCM Topic(주제)을 이용한 Push Notification 메세지 전송 feat. mutable-content  (0) 2023.06.16
RBPN - Recurrent Back-Projection Network for video Super-Resolution  (0) 2022.12.31
'다른 개발/기타' Related Articles more