# React-native 에서 klip-sdk 를 이용할 수 있을까요?

**URL:** <https://devforum.kaia.io/t/react-native-klip-sdk/459>\
**Category:** Klip (아카이브)\
**Created:** [11월 2, 2020, 10:07오전 UTC](https://devforum.kaia.io/t/react-native-klip-sdk/459 "2020-11-02T10:07:58Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![reinforcement](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@reinforcement](https://devforum.kaia.io/u/reinforcement)\
**Post date:** [11월 2, 2020, 10:07오전 UTC](https://devforum.kaia.io/t/react-native-klip-sdk/459/1 "2020-11-02T10:07:58Z")

</div>

react-native 에서 klip-sdk 를 이용할 수 있을까요?  
(javascript는 지원한다고 돼 있습니다만…)

혹 가능하다면 간단한 예시 공유를 부탁드립니다.

감사합니다.

---

<div class="post-metadata">

**Author:** ![\_albert](https://yyz1.discourse-cdn.com/flex035/user_avatar/devforum.kaia.io/_albert/32/60_2.png) [@\_albert](https://devforum.kaia.io/u/_albert)\
**Post date:** [11월 2, 2020, 11:19오전 UTC](https://devforum.kaia.io/t/react-native-klip-sdk/459/2 "2020-11-02T11:19:37Z")

</div>

안녕하세요.

react-native가 공식 지원 항목에는 없지만, 내부 데모앱 제작 시 동작에 문제 없음을 확인하였습니다. 사용법은 react와 차이가 없다고 보시면 되겠습니다.

간단한 예제는 정리하여 다시 코멘트 드리겠습니다.

---

<div class="post-metadata">

**Author:** ![elliot](https://yyz1.discourse-cdn.com/flex035/user_avatar/devforum.kaia.io/elliot/32/67_2.png) [@elliot](https://devforum.kaia.io/u/elliot)\
**Post date:** [11월 3, 2020, 1:27오전 UTC](https://devforum.kaia.io/t/react-native-klip-sdk/459/3 "2020-11-03T01:27:36Z")

</div>

안녕하세요! 추가로 답변을 드려보자면, react-native에서 사용할 시 클립으로 넘어가는 request부분은 브라우저랑 작동이 달라 커스텀하게 Linking등을 사용하셔야 하지만 나머지 부분들은 klip-sdk를 사용할 수 있습니다. 아래는 auth request를 보내는 예시입니다.

```javascript
import { Linking } from "react-native";
import { prepare, request, getResult } from 'klip-sdk'

const bappName = 'my app'
const successLink = 'myApp://...'
const failLink = 'myApp://...'

let requestKey

const prepareAuthRequest = async () => {
  const res = await prepare.auth({ bappName, successLink, failLink })
  if (res.err) {
  // 에러 처리
  } else if (res.request_key) {
    requestKey = res.request_key
  }
}

const sendRequest = () => {
  Linking.openURL(`kakaotalk://klipwallet/open?url=https://klipwallet.com/?target=a2a?request_key=${requestKey}`) // 안드로이드 환경에서는 intent 사용을 더 추천드립니다 ex) intent://klipwallet/open?url=https://klipwallet.com/?target=/a2a?request_key=9892...4aeb#Intent;scheme=kakaotalk;package=com.kakao.talk;end
}

const getRequestResult = async () => {
  const res = await getResult(requestKey)
  // do something with res
}

```

---

<div class="post-metadata">

**Author:** ![reinforcement](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@reinforcement](https://devforum.kaia.io/u/reinforcement)\
**Post date:** [11월 10, 2020, 1:34오전 UTC](https://devforum.kaia.io/t/react-native-klip-sdk/459/4 "2020-11-10T01:34:57Z")

</div>

감사합니다.

말씀주신대로 적용을 했는데,  
아이폰에서 runtime시 klip-sdk 내부에서 아래와 같은 이유로 에러가 발생합니다.

\<\< 아래 \>\>

**2020-11-10 10:27:55.270005+0900 MyApp[3044:742625] [javascript] TypeError: undefined is not an object (evaluating ‘(t||window.navigator.userAgent).toString’)**

**2020-11-10 10:27:55.277528+0900 MyApp[3044:742621] [native] Unhandled JS Exception: TypeError: undefined is not an object (evaluating ‘(t||window.navigator.userAgent).toString’)**

**2020-11-10 10:27:55.278899+0900 MyApp[3044:742621] \*\*\* Terminating app due to uncaught exception ‘RCTFatalException: Unhandled JS Exception: TypeError: undefined is not an object (evaluating ‘(t||window.navigator.userAgent).toString’)’, reason: 'Unhandled JS Exception: TypeError: undefined is not an object (evaluating ‘(t||window.navigator.userAgent).toString’), stack:**

\<\< 아래 끝. \>\>

userAgent 관련 내용이고 아마도 web을 지원하는 부분인 것 같은데,  
가능한 방법이 있는지 문의드립니다.

감사합니다.

---

<div class="post-metadata">

**Author:** ![elliot](https://yyz1.discourse-cdn.com/flex035/user_avatar/devforum.kaia.io/elliot/32/67_2.png) [@elliot](https://devforum.kaia.io/u/elliot)\
**Post date:** [11월 11, 2020, 1:44오전 UTC](https://devforum.kaia.io/t/react-native-klip-sdk/459/5 "2020-11-11T01:44:22Z")

</div>

> [@reinforcement](#):
>
> javascript] TypeError: undefined is not an object (evaluating ‘(t||window.navigator.userAgent).toString

혹시 짜놓으신 코드를 좀 볼 수 있을까요?

---

<div class="post-metadata">

**Author:** ![reinforcement](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@reinforcement](https://devforum.kaia.io/u/reinforcement)\
**Post date:** [11월 11, 2020, 1:52오전 UTC](https://devforum.kaia.io/t/react-native-klip-sdk/459/6 "2020-11-11T01:52:55Z")

</div>

저 위에 공유주신 내용을 그대로 호출해본 것 외에는 없습니다.  
코드는 다음과 같습니다.

로그인 여부를 체크한 후 klip 연동하는 코드입니다.

npm install, pod install, 그리고 xcode로 build & 아이폰에서 구동.  
참고로 당연하게도 klip code 적용 전에는 정상동작합니다.

\<\< 다음 \>\>

import { Linking } from “react-native”;  
import { prepare, request, getResult, getCardList } from “klip-sdk”

// ~~~  
// ~~~

AsyncStorage.getItem(“loggedInUser”)  
.then(function (result) {  
if (result) {  
userInfo = JSON.parse(result);  
// token  
return AsyncStorage.getItem(“loggedInJWT”);  
}  
}).then(function() {  
let bappName = ‘AppName’  
let successLink = null;  
let failLink = null;

```
    let requestKey;

    const prepareAuthRequest = async () => {
      const res = await prepare.auth({ bappName, successLink, failLink })
      if (res.err) {
        // 에러 처리
        console.log(err)
      } else if (res.request_key) {
        requestKey = res.request_key
        console.log('Request Key : ' + requestKey);
      }
    }
    
    const sendRequest = () => {
      Linking.openURL(`kakaotalk://klipwallet/open?url=https://klipwallet.com/?target=a2a?request_key=${requestKey}`) // 안드로이드 환경에서는 intent 사용을 더 추천드립니다 ex) intent://klipwallet/open?url=https://klipwallet.com/?target=/a2a?request_key=9892...4aeb#Intent;scheme=kakaotalk;package=com.kakao.talk;end
    }
    
    const getRequestResult = async () => {
      const res = await getResult(requestKey)
      // do something with res
    }
  })
  .catch(function (err) {

```

\<\< 다음 끝. \>\>

그럼 회신 부탁드립니다.

---

<div class="post-metadata">

**Author:** ![reinforcement](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@reinforcement](https://devforum.kaia.io/u/reinforcement)\
**Post date:** [11월 13, 2020, 5:12오전 UTC](https://devforum.kaia.io/t/react-native-klip-sdk/459/7 "2020-11-13T05:12:37Z")

</div>

react-native에서 확인이 됐는지 알 수 있을런지요?

---

<div class="post-metadata">

**Author:** ![reinforcement](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@reinforcement](https://devforum.kaia.io/u/reinforcement)\
**Post date:** [11월 16, 2020, 1:23오전 UTC](https://devforum.kaia.io/t/react-native-klip-sdk/459/8 "2020-11-16T01:23:41Z")

</div>

@elliot, @_albert

안녕하세요.  
혹시 제가 문의드린 내용에 대해서 진행 상황 공유가 가능하신지요?

감사합니다.

---

<div class="post-metadata">

**Author:** ![elliot](https://yyz1.discourse-cdn.com/flex035/user_avatar/devforum.kaia.io/elliot/32/67_2.png) [@elliot](https://devforum.kaia.io/u/elliot)\
**Post date:** [11월 16, 2020, 4:49오전 UTC](https://devforum.kaia.io/t/react-native-klip-sdk/459/9 "2020-11-16T04:49:03Z")

</div>

> [@reinforcement](#):
>
> **javascript] TypeError: undefined is not an object (evaluating ‘(t||window.navigator.userAgent).toString’)**

보니깐 klip sdk에서 내부적으로 사용하고있는 daumtools 라이브러리에서 RN을 지원하지 않는 것 같네요. 그렇다면 혹시 [https://docs.klipwallet.com/rest-api/rest-api-a2a](https://docs.klipwallet.com/rest-api/rest-api-a2a) 여기 참고하셔서 (axios 등을 활용하셔서) rest api 호출로 바꾸어 보시면 어떨까요?

---

<div class="post-metadata">

**Author:** ![reinforcement](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@reinforcement](https://devforum.kaia.io/u/reinforcement)\
**Post date:** [11월 26, 2020, 6:55오전 UTC](https://devforum.kaia.io/t/react-native-klip-sdk/459/10 "2020-11-26T06:55:50Z")

</div>

답글이 좀 늦었습니다.

RN으로 간단하게 처리를 해보려고 했던터라,  
정 안되면 그렇게 해보려고 했었습니다.

말씀주신 내용대로 진행해서 현재는 기능과 동작, 서비스 적용 flow 등 필요한 기능은 다 구현하여 처리 완료했습니다.  
(여담입니다만 deep link를 호출하면 할수록 klip의 화면이 stack처럼 쌓입니다. ^^ 문제는 아니지만 자주 부르면 많이 쌓여서… 사용자가 하나씩 걷어내거나 ^^; 카카오톡 앱을 죽이고 다시 시작해야 하는… ^^;)

감사합니다.