다음 우편번호 서비스를 별도의 패키지 설치 없이도 네이티브 앱에서 쉽게 사용할 수 있습니다.
- 웹뷰를 사용해서 https://postcode.pocketlesson.io URL을 로드합니다.
- 로드된 웹뷰에서 주소를 선택하면
postcode://URL scheme과webkit.messageHandlers.postcode핸들러를 통해 메시지가 전달됩니다.
| 이름 | 설명 | 예시 |
|---|---|---|
| query | 검색어 (Optional) | 역삼로 180 |
콜백은 두 가지 방식으로 제공됩니다.
- URL Scheme
postcode://complete?<key>=<value>&...형태로 제공됩니다. - Message Handler
{key: value, ...}형태로 제공됩니다.
자세한 데이터는 다음 우편번호 서비스 문서를 참고해 주세요.
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) } }
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 } }
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의 것을 사용했습니다.