어제는 테스트망에 Web3와 ABI를 이용해서 접근하는 방법을 알아봤습니다. 이어서 오늘은 로컬에 설치되어 있는 Geth 노드로 가상 사설 네트워크를 구축하고 여기에 Web3.js를 이용하여 접근하는 방법을 알아보도록 하겠습니다.
아마도 이 방법이 실제 지갑 프로그램을 만들 수 있는 방법이겠지요.
일단 Geth를 이용하여 사설 네트워크를 구축합니다.
사설 네트워크 구축 관련해서는 아래 게시물을 확인하시고 Geth 프로그램을 실행해 주시면 됩니다.
이더리움 DApp Web3로 접근하기
이번에는 이더리움 테스트망에 콘트랙트를 생성하고 Web3와 ABI 인터페이스를 이용해서 접근해 보도록 하겠습니다. Rinkeby 테스트망을 이용하도록 하겠습니다. [참조] Web3.js는 DApp에 접근하기
uoops7coin.tistory.com
Geth 관련 준비가 되면 Geth 사설 네트워크를 시작합니다. 사실 Geth만 준비가 되면 추가적으로 할 것이 없습니다.
geth.exe --nodiscover --identity "etherPrivate" --datadir "C:\Program Files\Geth\mydata" --rpc --rpccorsdomain "*" --networkid 88 --rpcapi "admin,db,eth,net,web3,debug,miner,shh,txpool,personal" console
이번에는 MetaMask를 사용하지 않습니다. 아래와 같이 HTML 파일을 하나 만듭니다. HTTP 서버에서 실행해도 되지만 로컬에서 파일로 직접 실행해도 상관이 없습니다.
[HTML 파일 내용]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>사설 네트워크로 Web3.js 접근</title>
</head>
<script src="https://cdn.rawgit.com/ethereum/web3.js/develop/dist/web3.js"></script>
// 이 부분은 Web2.js를 참조하도록 선언하는 부분입니다.
<body>
* 계정 주소: <span id="account_addr"></span><br>
* 보유 코인 수량: <span id="account_balance"></span><br><br>
* 수신 주소: <input id="to_addr" type="text" style="width: 400px;" value="0x67bb275399af1746055d1cfd841a195d1d2f6936"><br>
* 보낼 코인 수: <input id="to_count" type="text" style="width: 100px;"><br><br>
* 수신인 코인 수: <span id="to_balance"></span><br>
* TXID: <span id="to_txid"></span><br><br>
<button onclick="send()">전송</button>
<button onclick="location.reload();">확인</button>
// 위 부분들은 화면에 그리는 부분이구요. 브라우저에서 파일을 열면 아래와 같은 화면이 됩니다.
<script>
// 여기가 스크립트 시작 부분이구요.
var Web3 = require("web3");
var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
// web3 인터페이스를 선언하는 부분입니다. Port는 자신이 설정한 포트를 사용하시면 됩니다.
var sender_addr;
var balance_wei;
var balance_eth;
var to_addr = "0x67bb275399af1746055d1cfd841a195d1d2f6936";
// 각 변수 선언이구요, 수신 받을 주소는 임의로 일단 선언해 뒀습니다.
// 화면이 열릴 때 수행합니다.
getAccount();
function getAccount() {
web3.eth.getAccounts(function(err,r){
document.getElementById('account_addr').innerHTML = r[0];
sender_addr = r[0];
to_addr = r[1];
// getAccounts 함수를 호출하여 첫 번째 사용자와 두 번째 사용자의 계정 주소를 가져오고
getBalance(sender_addr);
getBalanceTo(to_addr);
// 발신자와 수신자의 현재 보유 수량 정보를 가져와 표시해 줍니다.
unlockAccount();
// 발신자가 코인을 보낼 수 있도록 권한을 득합니다.
});
}
// unlockAccount 함수로 발신자가 코인 발송이 가능하게 하는 함수입니다.
function unlockAccount() {
web3.personal.unlockAccount(sender_addr.toString(), "1", function(err,r){
console.log(r);
});
}
// getBalance 함수를 호출하여 발신자의 코인 보유 수량을 확인합니다.
function getBalance(sender_addr) {
web3.eth.getBalance(sender_addr, function(err, r) {
balance_wei = r;
balance_eth = web3.fromWei(balance_wei, "ether");
document.getElementById('account_balance').innerHTML = balance_eth;
console.log(balance_eth);
});
}
// getBalance 함수를 호출하여 수신자의 코인 보유 수량을 확인합니다.
function getBalanceTo(to_addr) {
web3.eth.getBalance(to_addr, function(err, r) {
balance_wei = r;
balance_eth = web3.fromWei(balance_wei, "ether");
document.getElementById('to_balance').innerHTML = balance_eth;
console.log(balance_eth);
});
}
// 코인 전송을 클릭하면 코인을 전송합니다.
function send() {
var tmp_to_addr = document.getElementById('to_addr').value;
if (tmp_to_addr == "") {
tmp_to_addr = to_addr;
}
var tmp_send_count = document.getElementById('to_count').value;
if (tmp_send_count == "") {
alert("수량을 입력하세요");
}
// 발송 시 단위를 ETHER 단위로 변경합니다.
tmp_send_count = web3.toWei(tmp_send_count, "ether");
// 발신자로부터 수신자에게 지정된 코인을 전송합니다.
web3.eth.sendTransaction({
from: sender_addr,
to: tmp_to_addr,
value: tmp_send_count
}, function(error, hash){
getBalanceTo(tmp_to_addr);
document.getElementById('to_txid').innerHTML = hash;
console.log(hash);
});
}
</script>
</body>수행을 해 보겠습니다. 코인 수량을 입력 후 [전송]을 클릭합니다.
그러면 트랜잭션이 일어나고 그 값을 얻을 수 있습니다.
채굴이 진행되지 않고 있기 때문에 Geth는 처리 준비 상태가 됩니다.
Geth 콘솔에 채굴 시작 명령을 입력합니다.
> miner.start(1)
그러면 채굴이 시작되고 트랜잭션이 처리됩니다. 잠시 기다렸다가 채굴을 중지합니다.
> miner.stop()
[확인]을 클릭하면 현재 코인 전송 상태가 변경됩니다.
[참조] 소스는 아래 링크를 클릭하세요.
https://github.com/uoops7/erc20/blob/master/web1.html
uoops7/erc20
Contribute to uoops7/erc20 development by creating an account on GitHub.
github.com
'블록체인 개발' 카테고리의 다른 글
| 사설 네트워크에 Web3.js로 계정 생성하기 (0) | 2020.11.23 |
|---|---|
| 이더리움 DApp Web3로 접근하기 (0) | 2020.11.23 |
| Geth 사설 네트워크 MetaMask 전송 오류 처리하기 (0) | 2020.11.23 |
| 이더리움 DApp 만들기 (2) | 2020.11.23 |
| 이더리움 ERC20 토큰 만들기 2/2 (0) | 2020.11.23 |
최근댓글