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

2020. 9. 6. 10:31

웹에서 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

* 접속이 안되시는 분들은 rpcaddr을 0.0.0.0으로 해주시면 됩니다.

그리고 아래 소스를 그대로 html파일로 복사 붙여넣기 하셔서

방금 만든 폴더 안에 만들어 줍니다.

<!DOCTYPE html>

<head>

<title>go-ethereum 블록체인 실습</title>

</head>

<body>

<h1>Private Blockchain Network</h1>

<hr>

<h2>Accounts</h2>

</div>

<h2>Etherbase Account</h2>

</div>

<h2>Balance of Coinbase Account</h2>

</div>

<h2>Mined block Number</h2>

</div>

</body>

</html>

// 우선 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>태그 안의

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

베리베리 라즈베리