Giter Club home page Giter Club logo

daumpostcode's Introduction

Daum Postcode

다음 우편번호 서비스를 별도의 패키지 설치 없이도 네이티브 앱에서 쉽게 사용할 수 있습니다.

사용 방법

  1. 웹뷰를 사용해서 https://postcode.pocketlesson.io URL을 로드합니다.
  2. 로드된 웹뷰에서 주소를 선택하면 postcode:// URL scheme과 webkit.messageHandlers.postcode 핸들러를 통해 메시지가 전달됩니다.

API

Query Parameters

이름 설명 예시
query 검색어 (Optional) 역삼로 180

Callback Data

콜백은 두 가지 방식으로 제공됩니다.

  1. URL Scheme postcode://complete?<key>=<value>&... 형태로 제공됩니다.
  2. Message Handler {key: value, ...} 형태로 제공됩니다.

자세한 데이터는 다음 우편번호 서비스 문서를 참고해 주세요.

사용 예시

iOS

URL Scheme

let webView = WKWebView()
webView.navigationDelegate = self

let url = URL(string: "https://postcode.pocketlesson.io")!
webView.load(URLRequest(url: url))

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
  switch navigationAction.request.url?.scheme {
  case "postcode":
    if let urlString = navigationAction.request.url?.absoluteString {
      let components = URLComponents(string: urlString)
      let address = components?.queryItems?.first { $0.name == "address" }?.value
      let zonecode = components?.queryItems?.first { $0.name == "zonecode" }?.value
      print(address) // e.g. 서울 강남구 역삼로 180
      print(zonecode) // e.g. 06248
    }
    decisionHandler(.cancel)

  default:
    decisionHandler(.allow)
  }
}

Message Handler

let webView = WKWebView()
webView.configuration.userContentController.add(PostcodeHandler(), name: "postcode")

let url = URL(string: "https://postcode.pocketlesson.io")!
webView.load(URLRequest(url: url))

class PostcodeHandler: NSObject, WKScriptMessageHandler {
  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    guard let data = message.body as? [String: Any] else { return }
    let address = data["address"] as? String // e.g. 서울 강남구 역삼로 180
    let zoneCode = data["zonecode"] as? String // e.g. 06248
  }
}

React Native

URL Scheme

const parseQueryParams = () => {
  const search = path.split('?')[1]
  if (!search) {
    return {}
  }

  let params: Record<string, string> = {}

  const items = search.split('&')
  items.forEach((item) => {
    const [key, value] = item.split('=')
    params[key] = decodeURIComponent(value)
  })
  return params
}

const PostcodeSearchScreen = () => (
  <WebView
    originWhitelist={['https://*', 'http://*', 'postcode://*']}
    source={{ uri: 'https://postcode.pocketlesson.io' }}
    startInLoadingState={true}
    onShouldStartLoadWithRequest={(request) => {
      if (request.url.startsWith('postcode://')) {
        const data = parseQueryParams(request.url)

        console.log(data?.address) // e.g. 서울 강남구 역삼로 180
        console.log(data?.zonecode) // e.g. 06248
        return false
      }
      return true
    }}
  />
)

라이선스

이 소스코드 저장소에 속한 코드는 MIT 라이선스를 따릅니다. 다음 우편번호 서비스와 관련한 소유권과 저작권은 카카오에 있습니다.

로딩 인디케이터의 애니메이션은 react-native-web의 것을 사용했습니다.

daumpostcode's People

Contributors

devxoul avatar junhoyeo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

seob sh-lee2

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.