geth | Part_9 웹으로 블록체인 데이터 가져오기 1
본문 바로가기

IT/블록체인

geth | Part_9 웹으로 블록체인 데이터 가져오기 1


웹에서 Javascript | web3.JS를 사용하여 

블록체인에 접근하기









앞선 포스팅에서 WAMP를 설치 했었는데


이보다 더 간단하게 할 수 있는 방법을 찾아


다른 방법을 사용하려고 합니다!







제가 했던 소스들과 버전들이 몇달 전 것들이라


바껴서 실행이 안될 가능성이 있기 때문에


저 또한 처음부터 


하나하나 해 나가다가 


중간에 오류가 발생하


방향을, 소스를 고쳐가며 합니다.




제 생각에는 차근차근 따라 하신다면


무리없이 원활하게 잘 되리라 생각합니다.








우선


먼저 저희는 npm을 사용 할 것이기에


npm이 깔려 있는지부터 확인해줍니다.








만약 버전이 낮으신 분들은


npm update를 하셔서


진행하시면 됩니다.










깔려있지 않다면


아래에 접속하여 다운로드를 받으세요.


https://nodejs.org/en/









그다음


제가 WAMP대신 사용한다던 서버를 깝니다.


npm install live-server -g


http-server를 아시는 분들은 비슷하다고 생각하시면 됩니다.


만약 호스팅 중인 파일이 저장이 되면 


자동으로 리로드를 하여 번거로움을 없애줍니다.










이 서버를 실행하는 방법은 


원하는 폴더 루트에 들어가


cmd창에서 live-server를 입력해 주시면 


아래와 같이 간단히 실행이 됩니다.




Ready for chnages가 뜨고 가만히 있다면 


잘 실행 된 겁니다


아래의 Change detected ~~ 는 


파일을 저장 했을 시, 감지하여 이를 리로드 시켜줍니다.







그리고 bower을 설치해 줍니다.


npm install -g bower






여기서 git도 필요할겁니다 (아마?)


그러므로 git도 설치해 줍시다.


https://git-scm.com/



깃 설치 중에 이러한 창이 뜰텐데


가운데 옵션을 선택해 주시면 됩니다.


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


* 접속이 안되시는 분들은 rpcaddr0.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>








이 외에도 자잘한 에러가 뜰 수 있는데,


구글링을 하시면 쉽게 해결 하실 수 있으실 겁니다.


만약 모르겠다 싶으시면


아래에 댓글을 남겨 주시면 


답변해 드리겠습니다.







다음 포스팅은


unlockaccount를 통한 계정의 언락,


sendtransaction 으로 트랜잭션 발생,


트랜잭션 안에 데이터 저장까지 


해보도록 하겠습니다.







감사합니다.








ㆍgeth | Part_9 웹으로 블록체인 데이터 가져오기 1

geth | Part_8 웹 구동을 위해 간단한 apache 서버 설치 (bitnami wamp)

geth | Part_7 로컬 PC 윈도우에 블록체인 네트워크 구성하기

geth | Part_6 번외편_제네시스 블록 (genesis.json 파일) 설정 옵션

geth | Part_5 번외편_geth 실행 시, 옵션

geth | Part_4 빠르고 쉽게 원하는 데이터를 블록체인에 저장하기 2

geth | Part_3 빠르고 쉽게 원하는 데이터를 블록체인에 저장하기 1

geth | Part_2 누구나 쉽고 빠르게 이더리움 블록체인 구성하기

geth | Part_1 윈도우에서 리눅스 실행하기

geth | 서론 ( geth 프라이빗 블록체인 멀티노드 구성 )






  • [PPP 코인 소개]
    페이파이는 최초의 탈중앙화 기업 회계 플랫폼으로써, 재정 데이터에 대한 실시간 분석을 제공하여
    신용 리스크 알고리즘의 100% 정확도를 제공합니다.
    분석은 단일 원장 방식을 사용하여 기업의 지난 재무 데이터까지 모두 고려하여 안전하게 보관하고,
    투자자, 은행, 대출 기관이 신용 리스크를 측정하는 방법을 바꾸면서, 블록체인 기반의 회계 생태계를 새로이 창조할 것입니다.
    1) 홈페이지 : https://www.paypie.com/
    2) 홈페이지 : www.trebit.com
    3) 공지사항 : https://www.trebit.com/cs/anonymous/notice.do

  • Sakura 2019.12.23 17:55 댓글주소 수정/삭제 댓글쓰기

    강의글 올려주셔서 감사해요 !
    근데 하다가 중간에 오류가 생겼는데.. bower install web3 입력시
    bn.js패키지를 찾지못한다고 뜨네요 ㅠㅠ

    bower web3#* cached https://github.com/ethereum/ethereum.js.git#1.2.4
    bower web3#* validate 1.2.4 against https://github.com/ethereum/ethereum.js.git#*
    bower bn.js#>=4.11.6 ENOTFOUND Package bn.js not found