All Articles

리액트 네이티브에서 steem-js 사용하기

React Native에서 steem-js 라이브러리를 설치하여 사용하는 방법입니다.

React Native에는 standard node modules이 포함되어 있지 않습니다. 그래서 제가 안내하는 방법으로 설치해야 React Native에서 steem-js 사용이 가능합니다.


* * *

React Native 프로젝트 생성과 steem-js 설치


React Native 프로젝트를 생성하고, steem-js를 설치한다.

$ react-native init rn_steemit_app
$ cd rn_steemit_app
$ npm i --save steem
$ react-native run-ios

Expo 에서는 RNRandomBytes 라이브러리 설치하는 것이 복잡하고 어려워, react-native-cliReact Native 프로젝트를 생성하였습니다.



참고로 React Native에서 steem-js를 사용하려고 하면, 다음과 같이 에러가 발생한다.

The package at “node_modules/steem/lib/auth/memo.js” attempted to import the Node standard library module “assert”. It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo


* * *

해결 방법


react-native-randombytes 설치

react-native-crypto 모듈에 필요한 react-native-randombyte 모듈을 설치한다.

$ npm i --save react-native-randombytes
$ react-native link react-native-randombytes

rn-nodeify 설치

rn-nodeify 모듈은 React Native에서 node core modules 와 npm module을 사용할 수 있게 해준다.

$ npm i rn-nodeify --save-dev

package.json 파일에 다음을 추가한다.

"scripts": {
  "postinstall": "rn-nodeify --install fs,dgram,process,path,console,crypto,vm,stream,buffer,events,assert --hack"
}


npm 모듈을 재설치한다.

$ npm install


rn-nodeify 모듈을 설치하면 자동으로 shim.js 파일이 생성된다.

index.js 파일 맨 상단에 import './shim';을 추가한다.

마지막으로 shim.js 파일 맨 아래에 다음을 추가한다.

if (require('./package.json').dependencies['react-native-crypto']) {
    const algos = require('browserify-sign/algos')
    if (!algos.sha256) {
        algos.sha256 = {
        "sign": "ecdsa",
        "hash": "sha256",
        "id": new Buffer("")
        }
    }

    if (typeof window === 'object') {
        const wCrypto = window.crypto = window.crypto || {}
        wCrypto.getRandomValues = wCrypto.getRandomValues || getRandomValues
    }

    const crypto = require('crypto')
    const randomBytes = crypto.randomBytes
    crypto.randomBytes = function (size, cb) {
        if (cb) return randomBytes.apply(crypto, arguments)

        const arr = new Buffer(size)
        getRandomValues(arr)
        return arr
    }

    crypto.getRandomValues = crypto.getRandomValues || getRandomValues

    function getRandomValues (arr) {
        // console.warn('WARNING: generating insecure psuedorandom number')
        for (var i = 0; i < arr.length; i++) {
        arr[i] = Math.random() * 256 | 0
        }

        return arr
    }
}

참고: https://stackoverflow.com/questions/45301900/howto-patch-shim-crypto-getrandomvalues-for-react-native


아래는 스팀잇에서 계정 정보를 조회한 결과 화면.


* * *

저는 React Native 스팀잇 앱을 개발해보고 싶어요. 만약 개발한다면 인스타그램 같은 앱이 좋겠습니다. 비슷한 앱으로 steepshot앱이 있지만, 제 안드로이드폰에서는 사진 업로드에서 오류가 납니다. ㅠㅠ

그리고 원사마님께서는 Flutter 스팀잇앱을 개발한다고 하였으니, ⌈원사마님의 [dartlang] rpc2.0 통신으로 스팀 API 호출해보기⌋. 다양한 플랫폼의 스팀잇앱이 개발되길 기대해봅니다.

여기까지 읽어주셔서 감사합니다.


Sponsored ( Powered by dclick )

dclick-imagead

Published 3 Jan 2019

안피곤의 블로그입니다.