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

안녕하세요.

쌩광부입니다.

 

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

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

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

 

지난 시간에는 지갑을 만드는 방법에 대해서 설명했었는데요.

이번 시간에는 기존 지갑을 불러오는 방법에 대하여 설명해 보도록 하겠습니다.

이번 강좌가 이해되지 않는다면 지난 강좌를 복습하는 센스가 필요하겠죠. ^^

 

#7. 지갑 불러오기

 

1. importwallet.js 파일을 수정합니다.

 

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

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

 

import { View, Text, StyleSheet, AsyncStorage, TextInput, Button, Alert }

  from 'react-native';

지난 시간과 마찬가지로 StyleSheet, AsyncStorage, TextInput, Button, Alert 컨포넌트를 사용하기 위해 import를 해줍니다.

TextInput은 문자를 입력받기 위한 컨포넌트입니다.

 

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

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

 

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

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

 

componentWillMount 함수를 추가합니다.

componentWillMount() {

  this.setState({

    importValue: '',

    loading: false,

    showResult: false});

}

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

여기서 importValue는 입력된 값을 저장하기 위한 상태값입니다.

 

<TextInput style={styles.input} multiline={true} placeholder='프라이빗 키 또는 니모닉 단어'

  onChangeText={(text) => this.setState({importValue: text})}/>

유저가 입력한 문자값을 얻기위한 코딩입니다.

TextInput 컨포넌트에는 onChangeText Props가 있는데요.

이것은 문자가 입력되면 호출되는 함수입니다. 이 함수를 통해 어떤 문자가 입력되었는지 알 수 있겠죠. ^^

유저는 이곳에 Private Key 또는 니모닉 단어를 입력하겠죠.

 

<Button onPress={() => this.importWallet()} title="불러오기"/>

불러오기 버튼을 추가하고 눌렀을 경우 importWallet 함수를 호출합니다.

 

{this.renderImportedWallet()}

불러오기가 완료된 경우 지갑에 대한 정보를 표시합니다.

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

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

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

 

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

지갑을 정상적으로 불러온 경우 이것을 저장하기위해 버튼을 만들고 눌렸을 경우 saveWallet 함수를 호출하도록 지정합니다.

 

const { importValue } = this.state;

유저가 입력한 값을 가져오고요.

 

const regexp = /^[0-9a-fA-F]+$/;

이것은 Regular expression 인데요.

한글말로 하면 정규 표현식이라고 합니다.

어떤 단어들이 일정한 규칙으로 되어 있는지를 확인하기 위해 고안된 언어인데요.

입력한 값이 16진수(Hexdecimal)인지 확인하기 위해 사용합니다.

우리는 16진수로 된 Private Key를 식별할때 매우 유용합니다.

Regular expression에 대한 자세한 사항은 아래 링크를 참고하세요.

https://ko.wikipedia.org/wiki/%EC%A0%95%EA%B7%9C_%ED%91%9C%ED%98%84%EC%8B%9D

 

const isHex = importValue.substring(0, 2) === '0x' && importValue.length == 66

  && regexp.test(importValue.substring(2));

Private Key는 16진수이고 앞자리가 0x로 시작되고 66자리로 구성되어있습니다.

즉, 입력된 단어가 정해진 구조와 일치하면 바로 Private Key라는 거죠.

그게 아니면 니모닉 단어이고요. ^^

 

try {

  ...

} catch(error) {

  ...

}

만약 유저가 얼토당토않은 글자를 입력한 경우 에러가 발생될 수 있는데요.

에러가 발생되면 앱이 다운되기 때문에 사전에 에러를 검출하여 다운되는 것을 방지해야만 합니다.

이때 사용하는 것이 try catch 구문입니다. 이것은 자바 스크립트의 명령어인데요.

try 다음에 어떤 명령했는데 만약 에러가 나면 catch가 실행됩니다.

 

this.setState({loading: false, showResult: false});

Alert.alert(null, '잘못 입력하였습니다.', [ {text: '확인'}, ], { cancelable: true });

return;

에러가 난 경우 잘못 입력했다는 메시지와 함께 로딩을 중단 시키고 결과값을 표시하지 않도록 합니다.

그리고 함수를 중단(return)합니다. 

 

const mnemonic = isHex ? '' : importValue;

니모닉 단어가 있어야만 Private Key를 만드는데 Private Key로는 니모닉 단어를 알 수 없습니다.

그래서 유저가 Private Key를 입력한 경우 니모닉 단어는 없는 것으로 처리합니다.

 

자~~ 여기까지 설명이 완료되었고요.

나머지 부분은 이전 강좌와 모두 동일합니다.

 

마지막으로 앱을 실행해보면

 

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

 

ImportWallet.png

 

네~~ 오늘도 미션 컴플리트~~!!

수고하셨습니다.

 

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

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


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

쌩광부님의 서명

Attachment
첨부 '1'
댓글 9
default debug random = 0 / type = READ / detected = READ

List of Articles
번호 분류 제목 추천 수 조회 수 글쓴이 날짜
1800 개발 춤추는 철학자의 문제, 검증 게임 그리고 사이드 체인과 데이터 가용성 이 글은 지난 10월 15일 미디엄에 게시된 글을 땡글로 옮긴 것 입니다. 읽어보시고 많은 피드백 부탁드립니다.   원본글 : https://medium.com/onther-tech/%EC%B6%A4%EC%B6%94%EB%8A%94-%EC%B2... 4 file 21 1551
철학자
2018.10.15
1799 개발 ICO를 준비하고 있습니다. 안녕하세요. 얼마전 코인투펀(https://www.coin2fun.com)이라는 이더리움 로또 서비스를 만들었던 초밥매니아입니다.   제가 이더리움 복권을 스마트컨트랙트를 만든건 솔리디티에 대한 공부가 ... 28 file 21 5610
초밥매니아
2018.03.22
1798 개발 비트코인 결제 시스템 만들기 비트코인 결제 시스템을 만드는 튜토리얼입니다. 예전부터 이 글을 써야지 써야지 하다가 이제서야 글을 쓰게 됐네요^^  최대한 접근하기 쉽게 설명해보겠습니다.     1. 설계   일단 어떻게 만... 11 file 21 16938
초밥매니아
2017.08.14
1797 개발 [봇] 카톡 거래소 시세조회 및 알트코인 조회 봇입니다! 심심해서 조카랑 만들었습니다 ㅋㅋㅋㅋ   비상업적! 완전무룝니다   카톡 pc 버전 지원안됩니다!!           http://pf.kakao.com/_HyxhZxl   친구추가는 위 주소를 클릭하시거나 이미지에 표시... 29 file 21 6384
지우긩
2017.06.30
1796 개발 채굴기 관리 프로그램을 만들고 있습니다.   (혹시 광고 글이라고 생각되신다면 연락 주시면 장터로 옮기겠습니다)  처음엔 제 채굴기 관리가 필요해서 만들어볼까 했는데, 조금 생각해보니 이것도 좋은 시장이 될 수 있을 것 같아서 제... 45 file 21 8419
파이리
2017.06.06
1795 ProgPOW 그것이 알고싶다? 안녕하세요. 쌩광부입니다.   요즘 ProgPOW 이야기가 많이 나오고 있는데요. 도대체 ProgPOW가 뭔지 제가 좀 찾아봤습니다.   ProgPOW : A programmatic (dynamic) Proof-of-Work 프로그래밍 (동... 31 20 2247
쌩광부
2018.12.01
1794 개발 코인 오입금을 거래소에서 처리를 못해주는 이유., 거래소에서 코인 오입금 처리를 못해주는 이유를 적어보겠습니다. 거래소에는 무수히 많은 지갑이 있습니다. A코인 B코인 C코인 D 코인 등등... 이 코인지갑을 이용해서 출금을 콘트롤하는 방법... 28 20 10930
쌍둥아빠
2017.09.27
1793 개발 윈도우10 각종 기능 설정 도우미 배치파일 안녕하세요.   마이닝모니터 개발중에 알게된 이런저런 내용들중에 윈도우10의 업데이트 및 서비스 등등에 대한 것들을 정리해서 만들었는데  (사실 테스트한다고 자주밀다보니 ㅜㅜ 윈도우10의 ... 12 file 20 12662
남자별
2017.06.27
1792 개발 채굴기 재부팅 프로그램 업데이트 채굴기 이상이 발생시 재부팅하는 프로그램을 업데이트 했습니다. (기존 소개글: https://www.ddengle.com/index.php?mid=miningbitcoin_voted&amp;page=2&amp;document_srl=12274887)   프로그... 19 file 19 17073
망포동오리
2021.01.15
[강좌] 쌩광부의 모바일 지갑 만들기 #7. 지갑 불러오기 안녕하세요. 쌩광부입니다.   저의 강좌는 오랜시간의 노력과 열정의 결과물입니다. 내용이 길고 지루하더라도, 강좌 내용에 관심없으셔도 &quot;좋아요&quot; 한방 눌러주시면 좋겠습니다. 그럼 더 열심히... 9 file 19 1667
쌩광부
2018.12.09
1790 [강좌] 이더소셜 PHP API 서버 만들기 - 프롤로그 안녕하세요. 쌩광부 입니다.   제가 진행하고 있는 &quot;모바일 지갑 만들기&quot;를 완성하기 위해서는 API 서버가 필수적으로 필요하게 되는데요. 기존 API로는 부족한 것이 조금 있기 때문에 별도의 AP... 8 19 2970
쌩광부
2018.11.24
1789 개발 ... ... 6 19 5494
YouareTheGod
2018.01.12
1788 개발 땡글 앱 알파버전입니다. https://play.google.com/store/apps/details?id=com.ddengle.app 땡글 앱 알파버전입니다. 기능은 계속 추가됩니다. 강제 업데이트 요청드릴겁니다. ^^ 기능 1. 푸시 알림. 설정에 따라 댓글 및... 30 19 5361
쌍둥아빠
2017.11.24
1787 [강좌] 이더소셜 PHP API 서버 만들기 #2. 서버 환경 설정 안녕하세요. 쌩광부입니다.   이더소셜 PHP API 서버 만들기 2번째 강좌입니다. 이번 시간에는 코딩에 앞서 서버 환경 설정방법에 대하여 설명하도록 하겠습니다.   윈도우에서는 APM Setup을 이... 7 18 1910
쌩광부
2018.12.12
1786 [강좌] 쌩광부의 모바일 지갑 만들기 #6. 니모닉 지갑 생성 안녕하세요. 쌩광부입니다.   저의 강좌는 오랜시간의 노력과 열정의 결과물입니다. 내용이 길고 지루하더라도, 강좌 내용에 관심없으셔도 &quot;좋아요&quot; 한방 눌러주시면 좋겠습니다. 그럼 더 열심히... 11 file 18 2150
쌩광부
2018.12.02
1785 블록체인에서 쓰이는 스마트 컨트랙트란 어떤 기능일까? ETC_01         우리는 살면서 많은 계약을 하며 살아갑니다. 스마트폰을 하나 사더라도 여러 계약서에 서명을 해야 합니다. 계좌 만들 때, 보험 가입 할때, 자동차를 사거나 부동산을 매매할 때 이 모... 16 file 18 962
풀트리
2018.11.22
1784 개발 솔로풀 (SOLO POOL) 무료로 세팅해 드립니다.   솔로풀 운영하고 싶은데 못하시는분들, 채굴하고싶은 코인이 있는데 풀이 없어서 못하시는분들 연락주세요. 무료 세팅해드립니다.  광주광역시는 직접가서 세팅해드릴게요^^. 타지역은 서버설... 17 18 1508
JjangGa
2018.10.14
1783 개발 구글링으로 한땀한땀 만든 자동&수동계산챗봇       아직 거래소도 5개밖에 되질않고. 기능도 많이적지만 베이스는 잘닦아둔상태로. 기능들은 입맛대로 추가할수있을것같습니다.   구글링과 오픈챗으로 열심히 공부해서 만드는 중입니다   -... 12 file 18 3437
시범
2018.06.13
1782 개발 서울 이더리움 커뮤니티 해커톤 (Raiden, Maker, Gnosis, Aragon and Melonport와 함께) ​​​​   서울 이더리움 커뮤니티 해커톤 2018년 4월 20일 (금) 오후 2시 참가 신청 https://www.meetup.com/Seoul-Ethereum-Meetup/events/249423168/   블록체인과 암호화폐의 성공은 결국 이를 ... 7 file 18 3534
atomrigs
2018.04.05
1781 개발 ico 정보 보여주는 사이트 만들었습니다. http://www.icopick.net/   제가 만들었습니다.   아직 초기수준이라 부끄럽지만 이쁘게 봐주세요...   감사합니다...         ------------------------------------- 꼬리말 * 게시글 내용 삭... 38 18 3002
로텔
2018.01.29
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 92 Next
/ 92
default debug random = 0 / type = READ / detected = READ