웹에서 Javascript | web3.JS를 사용하여
블록체인에 접근하기
앞선 포스팅에서 WAMP를 설치 했었는데
이보다 더 간단하게 할 수 있는 방법을 찾아
다른 방법을 사용하려고 합니다!
제가 했던 소스들과 버전들이 몇달 전 것들이라
바껴서 실행이 안될 가능성이 있기 때문에
저 또한 처음부터
하나하나 해 나가다가
중간에 오류가 발생하면
방향을, 소스를 고쳐가며 합니다.
제 생각에는 차근차근 따라 하신다면
무리없이 원활하게 잘 되리라 생각합니다.
우선
먼저 저희는 npm을 사용 할 것이기에
npm이 깔려 있는지부터 확인해줍니다.
만약 버전이 낮으신 분들은
npm update를 하셔서
진행하시면 됩니다.
깔려있지 않다면
아래에 접속하여 다운로드를 받으세요.
그다음
제가 WAMP대신 사용한다던 서버를 깝니다.
npm install live-server -g
http-server를 아시는 분들은 비슷하다고 생각하시면 됩니다.
만약 호스팅 중인 파일이 저장이 되면
자동으로 리로드를 하여 번거로움을 없애줍니다.
이 서버를 실행하는 방법은
원하는 폴더 루트에 들어가
cmd창에서 live-server를 입력해 주시면
아래와 같이 간단히 실행이 됩니다.
Ready for chnages가 뜨고 가만히 있다면
잘 실행 된 겁니다
아래의 Change detected ~~ 는
파일을 저장 했을 시, 감지하여 이를 리로드 시켜줍니다.
그리고 bower을 설치해 줍니다.
npm install -g bower
여기서 git도 필요할겁니다 (아마?)
그러므로 git도 설치해 줍시다.
깃 설치 중에 이러한 창이 뜰텐데
가운데 옵션을 선택해 주시면 됩니다.
1. git을 설치하면 함께 설치되는 git bash에서만 git을 사용할 경우
2. git을 윈도우의 cmd창에서도 사용할 경우 - 자동으로 환경변수 추가
3. unix 명령어까지도 사용할 경우
나머지는 기본값으로 셋팅해 주시면 됩니다.
이제 저희가 html파일을 생성할
폴더를 하나 만들어 그 위치에 들어가서
bower install web3를 터미널에 입력해
web3.js를 사용하기 위해 설치합니다.
* 파일경로\bower_components\web3\dist에
web3.js파일이 존재합니다. ( 추후 재언급 )
* 원래 npm으로 npm install web3를 사용해 깔았었는데,
자잘한 오류들이 너무 많이 떠 bower로 바꾸었습니다.
bower_components 폴더 안에 보시면
example도 있으니 한번 훑어 보시기 바랍니다.
이제 기본적인 셋팅은 다 끝났습니다.
블록체인을 실행해 주셔야 접근이 가능하며
실행옵션을 아래와 같이 주시고 실행 해 주시기 바랍니다.
geth --datadir "블록체인 데이터 저장 디렉토리" --rpc --rpcaddr 127.0.0.1 --rpcport "8545" --networkid 15 --rpccorsdomain "*" console
* 접속이 안되시는 분들은 rpcaddr을 0.0.0.0으로 해주시면 됩니다.
그리고 아래 소스를 그대로 html파일로 복사 붙여넣기 하셔서
방금 만든 폴더 안에 만들어 줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- web3.js를 사용하기 위해 bower를 통해 설치한 web3.js 경로를 추가해 줍니다. -->
<script type="text/javascript" src="../bower_components/web3/dist/web3.js"></script>
<title>go-ethereum 블록체인 실습</title>
</head>
<body>
<!-- 저희가 만든 geth 블록체인의 데이터를 들고 오겠습니다. -->
<h1>Private Blockchain Network</h1>
<hr>
<!-- 계정목록을 들고 옵니다. -->
<div style="background-color:azure">
<h2>Accounts</h2>
<p id = "accounts"></p>
</div>
<!-- 채굴시 이더(wei)가 들어가는 이더(코인)베이스 계정입니다. -->
<div style="background-color:aquamarine">
<h2>Etherbase Account</h2>
<p id = "etherbase"></p>
</div>
<!-- 코인베이스의 이더량(wei)를 확인합니다. -->
<div style="background-color:bisque">
<h2>Balance of Coinbase Account</h2>
<p id = "getbal"></p>
</div>
<!-- 현재까지 채굴 된 블록의 갯수를 나타냅니다. -->
<div style="background-color:aliceblue">
<h2>Mined block Number</h2>
<p id = "mined"></p>
</div>
</body>
</html>
<script>
// 우선 web3를 사용하기위해 선언해줍니다.
var web3 = new Web3();
//geth 실행시, localhost / rpcport번호로 지정해 주었던 8545번으로 설정해 줍니다.
web3.setProvider(new Web3.providers.HttpProvider('http://localhost:8545'));
/* 명령어 창에서 eth.accounts[0] 이런식으로 사용했듯이
* web3를 앞에 붙여 web3.eth.accounts[0] 이렇게 간단히
* 사용 할 수 있으나, callback 함수는 추가적인 사용법이 필요합니다.
*/
// 모든 계정을 불러와 출력합니다.
for(i=0; i<web3.eth.accounts.length;i++){
document.getElementById("accounts").append( web3.eth.accounts[i] + "\n");
}
// 코인베이스 계정을 들고와 출력합니다.
document.getElementById("etherbase").append("coinbase Account : " + web3.eth.coinbase + "\n");
// 코인베이스의 이더량을 출력합니다.
document.getElementById("getbal").append("balance of coinbase : " + web3.eth.getBalance(web3.eth.coinbase) + "\n");
// 현재까지 채굴 된 블록의 갯수를 나타냅니다. 추가적인 사용법이 있습니다.
web3.eth.getBlockNumber(
function(a,blocknum){
document.getElementById("mined").append(blocknum);
}
);
// 또한 이렇게 사용 할 수도 있습니다.
// (async ()=> {await web3.eth.getBlockNumber(console.log) })()
// web3에 대한 무수히 많은 정보가 들어 있습니다.
// 개발자도구 ( 윈도우는 F12 )에 들어가셔서 콘솔창에서 확인 하실 수 있습니다.
console.log(web3);
</script>
주저리주저리 주석을 장황하게 달아
길어 보이는데
정말 간단한 소스입니다.
주석을 자세히 달아놓아
따로 설명은 하지 않겠습니다.
위 파일과 같이
bower을 통해 web3.js를 다운받았고,
소스파일을 긁어 html파일에 넣었으며
제네시스 파일 및 geth 실행옵션 등등 잘 셋팅 하여
블록체인 네트워크를 실행중이고
live-server를 파일 경로에서 실행 하셨다면
아래와 같은 화면을 보실 수 있으실 겁니다.
Accounts
모든 계정 리스트
Etherbase Account
이더베이스 계정
Balance of Coinbase Account
이더베이스의 이더량
Mined block Number
현재까지 채굴된 블록의 수
만약 위 조건을 다 만족하여 실행을 하였는데도
위의 화면이 아닌 아래와 같은 화면만 뜬다면
개발자도구의 console창을 확인해 보시면
에러의 이유를 알 수 있습니다.
예를 들어
위와같은 화면은
web3.js파일을 찾을 수 없고,
그로인해 Web3를 정의 할 수 없다고 합니다.
따라서 경로 문제이기 때문에
<head>태그 안의
<script type="text/javascript" src="../bower_components/web3/dist/web3.js"></script>
web3.js 파일의 경로를
아래와 같이
절대경로로 설정해 주시면 됩니다.
<script type="text/javascript" src="C:\Users\taegyu\Desktop\ttttest\bower_components\web3\dist/web3.js">
</script>
이 외에도 자잘한 에러가 뜰 수 있는데,
구글링을 하시면 쉽게 해결 하실 수 있으실 겁니다.
'IT > 블록체인' 카테고리의 다른 글
| geth | Part_8 웹 구동을 위해 간단한 apache 서버 설치 (bitnami wamp) (0) | 2020.09.05 |
|---|---|
| geth | Part_7 로컬 PC 윈도우에 블록체인 네트워크 구성하기 (0) | 2020.09.03 |
| geth | Part_6 번외편_제네시스 블록 (genesis.json 파일) 설정 옵션 (0) | 2020.09.02 |
| geth | Part_5 번외편_geth 실행 시, 옵션 (0) | 2020.09.01 |
| geth | Part_4 빠르고 쉽게 원하는 데이터를 블록체인에 저장하기 2 (0) | 2020.08.31 |
