develop custom_top_html:no
default debug random = 1 / type = READ / detected = READ / doc_Srl = 10399375

안녕하세요.

쌩광부입니다.

 

저의 강좌는 오랜시간의 노력과 열정의 결과물입니다.

내용이 길고 지루하더라도, 강좌 내용에 관심없으셔도 "좋아요" 한방 눌러주시면 좋겠습니다.

그럼 더 열심히 강좌를 쓸 수 있겠죠. ^^

 

이번 시간에는 본격적으로 RN 앱에서 니모닉 지갑 주소를 만들어 보겠습니다.

먼저 기존 #4, #5번 강좌 꼭 보셔야 하고요.

 

#6. 니모닉 지갑 생성

 

1. 필요한 패키지 설치

 

지난 강좌에서 설명한 ethers.js 패키지를 설치하지 않았다면

C:\Users\YOUR_USERNAME\topwallet> npm install --save [email protected]

 

그리고 로딩 스플레시 화면을 구현하기 위해 react-native-loading-spinner-overlay 패키지를 설치합니다.

C:\Users\YOUR_USERNAME\topwallet> npm install --save react-native-loading-spinner-overlay

 

이 패키지에 대한 자세한 사항은 아래 링크에서 확인하세요.

https://github.com/joinspontaneous/react-native-loading-spinner-overlay

 

2. addwallet.js 파일을 수정합니다.

 

전체 소스는 아래 링크에서 확인하시고요.

https://github.com/topmining/topwallet/blob/master/src/screen/addwallet.js

이번 강좌 부터는 git의 소스를 같이 보시면서 글을 읽으시면 좋겠네요. ^^

 

import { View, Text, Button, StyleSheet, AsyncStorage, Alert } from 'react-native';

Button, StyleSheet, AsyncStorage, Alert 컨포넌트를 사용하기 위해 import를 해줍니다.

 

import { HDNode, utils, Wallet } from 'ethers';

지갑 주소를 생성하기 위해 ethers 패키지에서 필요한 컨포넌트들을 import합니다.

 

import LoadingSpinner from 'react-native-loading-spinner-overlay';

로딩 스플레시 화면을 구현하기 위해 위 패키지를 import 합니다.

 

componentWillMount 함수를 추가합니다.

componentWillMount() {

  this.setState({

    loading: false,

    showResult: false});

}

화면이 시작할때 loading, showResult State를 설정합니다.

componentWillMount 함수에 대해서는 예전 강좌에서 설명했었는데요.

컨포넌트가 시작되기 직전에 실행되는 함수입니다.

 

여기서 잠깐! State란 무엇인가?

State는 컨포넌트에서 사용되는 상태값입니다.

#3 강좌에서 Props에 대해서 설명했었는데요.

그 Props와 비슷하게 컨포넌트에 지정된 고유한 오브젝트인데요.

Props는 속성값이라고 말할 수 있으며 State는 상태값 입니다.

Props는 해당 컨포넌트를 호출할 때 지정하는 값이라고 보시면 되고

State는 해당 컨포넌트 안에서 필요에 의해 여러 가지 상태를 지정하게 됩니다.

State를 설정하기 위해서는 setState 함수를 사용합니다.

그리고 Key:Value 방식으로 지정합니다.

State에 설정된 값을 가져오기 위해서는

this.state.KeyName1, this.state.KeyName2 이렇게 합니다.

또는

const { KeyName1, KeyName2 } = this.state;

만약 State에 지정하지 않은 키를 불러온다면 RN은 오류를 발생시킵니다.

자세한 사항은 아래 링크에서 확인하세요.

https://facebook.github.io/react-native/docs/state

https://facebook.github.io/react-native/docs/props

 

<Button onPress={() => this.generateNewWallet()} title="만들기"/>

만들기 버튼을 추가하고 눌렀을 경우 generateNewWallet 함수를 호출합니다.

 

<LoadingSpinner visible={this.state.loading} textContent="새로운 지갑을 생성하고 있습니다." textStyle={styles.loadingText}/>

지갑 주소를 만들때 상당히 많은 시간이 소요되므로 로딩창을 표시하기 위해 LoadingSpinner 컨포넌트를 추가합니다.

visible={this.state.loading} Props를 보면 loading 상태에 때라서 보이거나 숨기도록 지정한 것이고요.

아래 설명에 보면 지갑을 만들기 직전 loading을 true로 설정하고 지갑 생성이 완료되면 다시 false로 지정합니다.

 

{this.renderNewWallet()}

새로운 지갑이 생성된 경우 지갑에 대한 정보를 표시합니다.

위와 같이 특정 항수를 { }안에 넣게 되면 그것이 화면에 출력된다고 보시면 됩니다.

물론 함수를 사용하지 않고 바로 코딩해도 되나 소스가 복잡해지기 때문에 분리했다고 보시면 되겠네요.

renderNewWallet 함수에서는 State에 설정된 지갑 주소가 있는 경우 State에서 지갑에 대한 내용을 가져와 출력하는 코딩이 되어 있습니다.

 

<Button onPress={() => this.saveWallet()} title="저장하기"/>

지갑이 생성된 경우 이것을 저장하기위해 버튼을 만들고 눌렸을 경우 saveWallet 함수를 호출하도록 지정합니다.

 

generateNewWallet 함수에서는 #4 강좌에서 설명한대로 ether.js 패키지를 이용해 지갑주소를 만들고 생성된 지갑 정보를 State에 설정합니다.

 

this.setState({loading: true});

지갑 생성 직전에 로딩 화면을 표시합니다.

 

setTimeout(() => {  ....  }, 500);

이 구문이 없다면 로딩창이 표시되지 않는데요.

State를 변경하면 그 즉시 표시되는 것이 아닌 다음 랜더링 타임이 되어야만 화면에 그려지기 때문에 일정 시간을 지연 시킨 이후에 다음 처리합니다.

 

const mnemonic = HDNode.entropyToMnemonic(utils.randomBytes(16));

니모닉 단어문을 만들고요.

 

const wallet = Wallet.fromMnemonic(mnemonic);

그 니모닉 단어문으로 새로운 지갑을 생성합니다.

 

saveWallet 함수에서는 생성된 지갑을 파일에 저장합니다.

저장하는 방법에 대해서는 #5 강좌에 설명되어 있습니다.

 

const key = 'Wallet:' + address.toLowerCase();

const value = address + ':' + privateKey + ':' + mnemonic;

우리는 저장을 위해 간단하게 키는 Wallet:0x1234.. 이런식으로 만들고

값은 0x1234...:0x1234...:Abcdef 이렇게 지정하겠습니다.

즉 ':' 으로 구분하여 저장하면 나중에 불러오기가 편하겠죠.

toLowerCase는 소문자로 변환하는 것인데요.

지갑 주소의 경우 내부 처리에서는 대소문자를 구분하지 않기 때문에 키값은 소문자로만 처리합니다.

그래야만 차후에 중복 저장되는 오류를 방지할 수 있겠죠. ^^

 

여기서 잠깐!

AsyncStorage는 보안이 좋지 않습니다.

그렇기 때문에 상용 프로그램에서 위와 같이 별도의 암호화 없이 저장하는 것은 바람직하지 않습니다.

차후 시간이 된다면 암호화에 대한 부분도 추가로 설명하도록 하겠습니다.

 

Alert.alert(null, '지갑을 저장할 수 없습니다.', [ {text: '확인'}, ], { cancelable: true });

만약 저장에 실패한 경우 팝업창으로 에러 메시지를 표시합니다.

이런 경우는 거의 없다고 볼 수 있으나 용량이 부족하거나 스마트폰에 문제가 있는 경우겠네요. ^^

 

this.props.navigation.pop();

지갑이 정상적으로 저장된 경우 이전 화면으로 돌아갑니다.

 

const styles = StyleSheet.create({

기존까지는 각각의 컨포넌트에 style 속성에 직접 스타일을 지정했는데요.

StyleSheet.create 함수를 이용해 스타일을 만들고 컨포넌트에서는 style={styles.resultText} 이런식으로 지정할 수 있습니다.

반복되는 스타일은 이렇게 별도로 지정해 놓으면 편리하게 사용할 수 있습니다.

 

3. mywallet.js 파일을 수정합니다.

 

지갑을 생성했으면 조회가 가능해야겠지요.

이번 시간에는 간략하게 생성된 지갑 주소만 화면에 표시해보도록 하겠습니다.

 

전체 소스는 아래 링크에서 확인하시고요.

https://github.com/topmining/topwallet/blob/master/src/screen/mywallet.js

 

import { View, Text, Button, AsyncStorage } from 'react-native';

AsyncStorage를 추가해 줬고요.

 

import { NavigationEvents } from 'react-navigation';

NavigationEvents를 사용하기 위해 import 합니다.

NavigationEvents는 해당 페이지에 다시 돌아왔을 경우 어떤 처리를 하기 위해서 필요합니다.

 

this.setState({

  addressList: []

})

주소 리스트를 담을 State를 설정하고요.

일단 주소가 하나도 없기 때문에 [] 빈배열로 설정합니다.

 

<NavigationEvents onDidFocus={() => this.refreshWallet()} />

render함수 안에 NavigationEvents 컨포넌트를 추가하고 이 화면이 포커스를 얻었을때 refreshWallet 함수를 실행하도록 설정합니다.

즉, AddWalletScreen에 갔다가 다시 MyWalletScreen으로 돌아온 경우 지갑이 새로 생겼는지를 확인하기 위함이죠.

 

refreshWallet 함수에서는 AsyncStorage를 이용해 저장된 지갑 주소들을 불러오고 addressList를 설정합니다.

 

const strs = key.split(':');

우리가 저장할 때 ':'으로 구분해서 저장했기 때문에 ':'으로 다시 분리하는 과정이고요.

그럼 strs[0]에는 'Wallet'이라는 글자가 있을거고

strs[1]에는 실제 지갑 주소가 저장되어 있겠죠.

 

renderWalletList 에서는 State에 저장된 지갑 리스트를 화면에 출력합니다.

 

let addresUi = [];

지갑 리스트 컨포넌트를 저장할 변수를 지정합니다.

 

addressUi.push(

  <Text>{address}</Text>

);

Text 컨포넌트를 addressUi에 추가합니다.

생성한 지갑수 만큼 반복되겠죠.

 

위와 같이 코딩하고 RN을 실행하면

C:\Users\YOUR_USERNAME\topwallet> react-native run-android

 

AddWallet.png

 

짜잔~~~~

드디어 지갑을 만들고 지갑 주소를 표시할 수 있게 되었네요.

 

저의 모든 강좌를 보시려면 블로그를 방문해주세요.

https://www.ddengle.com/@TopMining


[알림: 이 게시글은 관리자에 의해 ''에서 '개발'로 이동되었습니다]
18,284

쌩광부님의 서명

profile

이더소셜(ESN) 채굴풀 (Pool fee 0.5%)

https://esn.topmining.co.kr

칼리스토(CLO) 채굴풀 (Pool fee 0.5%)

https://clo.topmining.co.kr

메타버스(ETP) 채굴풀 (Pool fee 0.5%)

https://etp.topmining.co.kr

 

디스코드 https://discord.gg/sjwKhaS

페이스북 https://www.facebook.com/topmining.co.kr

트위터 https://twitter.com/TopMining

Atachment
첨부 '1'
댓글 11
  • ?
    존버중 2018.12.02 14:30
    저한테는 어려운 내용이지만 좋은 글 감사합니다. ^^
  • ?
    nadana 2018.12.02 14:37
    이제 강좌 3번을 따라갔는데...
    4번5번을 빨리 끝내야 겠네요
  • profile
    김재현 2018.12.02 14:55
    시간들여 강좌열어주셔서 감사랍니다. (잘 모르지만)
  • profile
    ddengle BOT 2018.12.02 14:55
    @김재현
    김재현님 축하합니다. 4 보너스 캐시에 당첨되셨습니다.!!
  • profile
    Up&Right 2018.12.02 17:08
    좋은 정보 감사합니다.
    참고할께요^^
  • profile
    매번 좋은강좌 감사드립니다.
  • profile
    young69 2018.12.02 18:26
    개발에 열정을 쏱고계시는 광부님 진심 수고 많으싶니다 ^^
  • ?
    AppA 2018.12.03 08:50
    좋은 내용 고맙습니다~~
  • profile
    ddengle BOT 2018.12.03 08:50
    @AppA
    AppA님 축하합니다. 5 보너스 캐시에 당첨되셨습니다.!!
  • profile
    이cheon000 2018.12.04 00:14
    수고 많으셨습니다. 질문은 지갑을 생성을 했으니, 다음단계로 내 지갑에 토큰을 다른 사람 지갑에 보내려면 어떻게 해야 하나요?
  • profile
    쌩광부 2018.12.04 00:23
    @이cheon000
    그 부분은 앞으로 2~3번의 강좌 이후에나 나올 내용입니다.
    답답하셔도 기다려 주시면 좋겠네요. ^^

List of Articles
번호 분류 제목 추천 수 조회 수 글쓴이 날짜
공지 탑마이닝 쌩광부님 땡글운영위 합류 12 file 25 5889
땡글운영위
2019.07.03
공지 땡글 회원 / ESN 홀더분들을 위한 땡글인의 밤 공지 38 file 6 9346
ESN홍보
2019.06.20
공지 [Air Drop 이벤트] 게시판을 신설합니다 29 file 2 54498
땡글운영위원회
2019.05.17
1471 개발 업비트 호가창 멈춤 (api) api로 트레이딩하는 사람입니다. 오늘 새벽 4시 30분 경에 업비트 호가창이 멈췄는데요. 호가창이 멈췄는데 그 가격을 보고 주문하면 또 체결은 정상적으로 되어 버려서 손해를 봤네요 ㅠ 이번에 저는 이더리움이랑 ... 5 844
비락식
2018.12.08
1470 질문 알트제작중 지갑오류 문제 질문...     안녕하세요...   litecoin 8.7.4 버전을 포킹하여 수정제작을 해보고있사옵니다..   월렛 gui 까지 모두 코딩이 완료되었으나..   월렛을 실행을 하게되면 out of sync로 나타나며,, 연동이안되는거같은데요   이... 7 file 484
shinpok
2018.12.05
1469 질문 이더리움 코인이안보내집니다 ㅜ           안녕하세요 이더리움 연구중입니다. 테스트넷 패리티로 블록쌓고 동기화까지잘되었습니다. 코인전송받기 테스트중인데 코인받는건 테스트넷 수도꼭지로 잘받아집니다. 받은코인을 메타마스크로 보내려고하... 5 457
피로
2018.12.05
1468 질문 소규모 사무실에서 코인 개발하고 인계하고 개발자가 연락이 안됩니다 그나마 코인러인 저에거 문의를 하길래 아는게 트레이딩 인데;;   일단 ,   비트코인 소스로 코인 개발하고, cpu마이닝 까지는 한다고 합니다. GPU마이닝 환경은 안만들어 주고요..   그래서, 탐색기 explorer 있는지... 7 1027
쿠키맨
2018.12.05
1467 개발 해킹 불가능한 거래소 idea   로그인 자체가 없고 거래소는 그냥 TV처럼 거래기록만 방송하는 겁니다 거래소 서버는 항상 off-line 으로 동작하니까 해킹 자체가 불가능! 단 문자메시지로 매도,매수주문받고 시간상0.1초라도 최초 제일 빨리 도... 18 937
내가총대멘다
2018.12.04
1466 [강좌] 이더소셜 PHP API 서버 만들기 #1. 기본 설계 안녕하세요. 쌩광부입니다.   이더소셜 PHP API 서버 만들기 강좌를 시작하도록 하겠습니다. 이번 시간에는 실제 프로그래밍에 앞서 기본적인 구조에 대해서 설명하도록 하겠습니다.      프롤로그에서 얘기한대로 저... 16 file 23 2397
쌩광부
2018.12.03
1465 개발 트레이딩 봇 만들고 있습니다. 2월쯤에 이쪽에 글올리고, 한동안 구현 못하고 있다가, 최근에 한달정도 달리고 있습니다.   오늘 낮 데이터로 백테스트해보니 이렇게 나오네요. 분봉기준이고요. 저 와중에 안잃어서.. 올려봅니다.   어제쯤해서 실... 6 file 1040
jaypark
2018.12.03
1464 개발 블록체인 개발자가 꿈인 백수입니다. 안녕하세요, 개발자를 꿈꾸는 백수입니다. 블록체인 관련 회사에 입사하고 싶고 제가 직접 코인을 개발하고 싶은데요, 저는 현재 C++를 공부중에 있습니다. 네임스페이스 부분 하고있네요..ㅋㅋ 갓난아기 태어나기전 ... 13 1 2420
railgun0
2018.12.03
[강좌] 쌩광부의 모바일 지갑 만들기 #6. 니모닉 지갑 생성 안녕하세요. 쌩광부입니다.   저의 강좌는 오랜시간의 노력과 열정의 결과물입니다. 내용이 길고 지루하더라도, 강좌 내용에 관심없으셔도 &quot;좋아요&quot; 한방 눌러주시면 좋겠습니다. 그럼 더 열심히 강좌를 쓸 수 있겠죠... 11 file 17 1514
쌩광부
2018.12.02
1462 개발 이오스 기반 로또 싸이트 지난 8월에 고수님들께 이것저것 물어보았는데 드디어 완성하고 서버에 올렸습니다.   www.weshareluck.io   이오스 기반으로 만들어보았습니다. (이오스가 전송수수료가 없어서.....ㅎ)   도움 주신분들 감사합니다.... 5 899
친절한냥이
2018.12.01
1461 ProgPOW 그것이 알고싶다? 안녕하세요. 쌩광부입니다.   요즘 ProgPOW 이야기가 많이 나오고 있는데요. 도대체 ProgPOW가 뭔지 제가 좀 찾아봤습니다.   ProgPOW : A programmatic (dynamic) Proof-of-Work 프로그래밍 (동적인)  작업증명   최... 31 20 2131
쌩광부
2018.12.01
1460 [nadana]왕초보의 쌩광부님 지갑(3강) 따라하기 아~~~ 드디어 @쌩광부 님의 모바일 지갑 3강의 내용을 아래와 같이 해 냈습니다. ^^ 많은 우여곡절이 있었지만 지금까지 이것이 왜 안되었는지 함께 공유하고자 글을 올립니다.   1. 쌩광부님의 글을 그대로 복사하고... 9 file 10 612
nadana
2018.11.30
1459 질문 모네로 데몬 연동중에, 자꾸 코인이 없어집니다. 모네로 데몬을 연구 중입니다. 모네로는 빌드 할것도 없이 그냥 압축파일을 받아서 실행하는 형태로 되어있어서 편하네요.   그런데, 모네로 코인을 받으면 조금 있다가 다 사라집니다. (balance = 0) 도저히 이해가 ... 3 376
비폭력무저항
2018.11.30
1458 질문 업비트 rsi 계산 방법 질문있습니다. 현재 파이썬으로 하고 있구요    rsi를 계산해서 지정한 rsi에 알림이 오게 하려고 하는데요    rsi공식을 제가 찾을 수 있는걸로 다 사용해봤는데 다 다르더라구요      기준일 (14일)1004luciferAU(평균상승) / AD(... 2 1238
digidigi
2018.11.30
1457 개발 node js 사용 하시는분들 .. 모두 업데이트 하셨나요. ( 해킹 관련)       며칠 째 뗑글에서는 주의보가 안나오는거 같아서 제가 올리네요.    며칠전에 nodejs 패키지 사용하는쪽에서 많이 쓰이는 모듈에 코인 해킹 모듈이 들어가있다고 주의보가 떳습니다.    저 같은 경우 vuejs 로 ... 2 file 2 2659
진주
2018.11.29
1456 스케일링 문제를 비탈릭에게만 맡길 수 없다! 암호화폐 가격이 어디가 바닥인지 모르게 계속 하락하고 있으니 과연, 이게 다시 상승장으로 돌아설 날이 있을까 걱정하는 분들이 많습니다. 한편으로 이런 걱정은 블록체인이나 암호화폐를 제대로 하는 활용한 킬러... 18 file 23 1685
atomrigs
2018.11.28
1455 질문 프라이빗 블록체인 개발 업체인데.. 큰일이 생겼습니다 구매 해주시는 업체 담당자님께서 좀 추천도 다른 곳에 해주시고   저희껏도 결정적으로 판매할 수 있게 도와주셨는데   따로 인사를 살짝 말씀하시는거 같습니다(흘리시긴했지만)   이런 경우엔 어찌..해야되나요? ... 8 1126
딥러닝은개뿔
2018.11.27
1454 질문 우분투 빌드 에러 부탁드립니다.     안녕하세요.   우분투 빌드 에러 부탁드립니다.     구글에서는 openssl 호환성에 문제를 다루고 있어서.. (해외)   우분투 16.04 로 설치해보고 했지만, 바뀌지 않습니다.   종속성은 다 설치 했는데, 빌드 에러... 5 file 412
항시대기
2018.11.27
1453 질문 리플 테스트넷 블록 탐색기 사이트가 있나요?   리플 입출금 들여다 보고 있는데, https://developers.ripple.com/xrp-test-net-faucet.html 에 수도꼭지가 있더라구요.   이 테스트를 블록 탐색기에서 확인해 보고 싶은데 사이트를 못 찾겠네요.   혹시 아시는 ... 2 729
이힛
2018.11.26
1452 질문 [Python] Dataframe 계산된 행까지만 계산하는 코드 관련 문의드립니다. from pandas import Series, DataFrame   raw_data = {'': ['2018-01-01  12:00:00 AM', '2018-01-02  12:00:00 AM', '2018-01-03  12:00:00 AM', '2018-01-04  12:00:00 AM'],             'drop': [None, 1, None, ... 1 347
축당첨
2018.11.25
Board Pagination Prev 1 ... 6 7 8 9 10 11 12 13 14 15 ... 84 Next
/ 84