안녕하세요.
쌩광부입니다.
저의 강좌는 오랜시간의 노력과 열정의 결과물입니다.
내용이 길고 지루하더라도, 강좌 내용에 관심없으셔도 "좋아요" 한방 눌러주시면 좋겠습니다.
그럼 더 열심히 강좌를 쓸 수 있겠죠. ^^
지난 시간에는 지갑을 만드는 방법에 대해서 설명했었는데요.
이번 시간에는 기존 지갑을 불러오는 방법에 대하여 설명해 보도록 하겠습니다.
이번 강좌가 이해되지 않는다면 지난 강좌를 복습하는 센스가 필요하겠죠. ^^
#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
네~~ 오늘도 미션 컴플리트~~!!
수고하셨습니다.
저의 모든 강좌를 보시려면 블로그를 방문해주세요.
https://www.ddengle.com/@TopMining
