안녕하세요.
쌩광부입니다.
저의 강좌는 오랜시간의 노력과 열정의 결과물입니다.
내용이 길고 지루하더라도, 강좌 내용에 관심없으셔도 "좋아요" 한방 눌러주시면 좋겠습니다.
그럼 더 열심히 강좌를 쓸 수 있겠죠. ^^
이번 시간에는 본격적으로 RN 앱에서 니모닉 지갑 주소를 만들어 보겠습니다.
먼저 기존 #4, #5번 강좌 꼭 보셔야 하고요.
#6. 니모닉 지갑 생성
1. 필요한 패키지 설치
지난 강좌에서 설명한 ethers.js 패키지를 설치하지 않았다면
C:\Users\YOUR_USERNAME\topwallet> npm install --save ethers@3.0.29
그리고 로딩 스플레시 화면을 구현하기 위해 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
짜잔~~~~
드디어 지갑을 만들고 지갑 주소를 표시할 수 있게 되었네요.
저의 모든 강좌를 보시려면 블로그를 방문해주세요.
https://www.ddengle.com/@TopMining
