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-cli 로 React 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 모듈을 설치한다.

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

rn-nodeify 설치

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

1	$ npm i rn-nodeify --save-dev

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

1
2
3

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

npm 모듈을 재설치한다.

1	$ 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 호출해보기⌋.
다양한 플랫폼의 스팀잇앱이 개발되길 기대해봅니다.

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

코딩, 독서, 여행, 영화, 맛집

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

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

해결 방법

react-native-randombytes 설치

rn-nodeify 설치