[졸업 작품] 스스로 web3.js와 스마트 컨트랙트 연동하기

(2021.05.18 본인 네이버 블로그에서 작성한 글 옮겨옴)

 

 

*5월 초에 하던것 이제올림^^;*

 

 

<오늘의 할일>

1. Web3.js와 자바 스크립트를 활용한 간단 예제

[참고] https://kimsfamily.kr/333?category=903691

6. web3.js 와 자바스크립트를 활용한 간단한 예제

2. Web3.js 라이브러리 맛보기

[참고] [이더리움 dAPP 만들기] web3.js 라이브러리 맛보기 - YouTube

​

​

​

​

1과2를 하는 이유

: 기본적인 소스코드 이해, web3.js와 스마트 컨트랙트를 연동하는 방법과 과정 자세히 알기

​

​

---

​

1. Web3.js와 자바 스크립트를 활용한 간단 예제

​

github에서 이더리움 조회 및 전송기능 예제 소스를 다운받고

atom 에디터를 열어서 index_complete.html 파일을 열고 코드를 수정한다.

​

"http://localhost:7545" -> 기존에는 8545로 되어있는데

나는 윈도우용 ganache를 사용하기 때문에 7545로 변경한다.

​

그 후, 가나슈와 index_complete.html을 열면

연결 성공

노드 정보와 계정에 대한 잔액이 나온다.

​

​

​

​

그럼 이번에는 계정1에서 계정2로 이더 송금을 해보자.

이렇게 입력하고 Transger을 누르면

​

원래는 계정 모두 100 eth가 기본 제공.

가나슈에서 곧바로 이더가 송금되는 것을 확인할 수 있다.

​

---

그럼 이번에는 소스코드를 이해해보자.

​

index_conpleted.html 파일 에서 script 부분만 가져왔다.

<script>
		$( document ).ready(function() {
			console.log( "ready!" );

			if (typeof web3 !== 'undefined') {
				web3 = new Web3(web3.currentProvider);
			} else {
					// set the provider you want from Web3.providers
				web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));
			}
			web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));
			/* Get Node Info */
			web3.eth.getNodeInfo(function(error, result){
				if(error){
					console.log( "error" ,error);
				}
				else{
					console.log( "result",result );
					$('#NodeInfo').val(result);
				}
			});

			/*Get Balance */
			web3.eth.getAccounts(function(error, accounts) {
				if(error) {
					console.log(error);
				}
				$('#Account').val(accounts[0]);
				web3.eth.getBalance(accounts[0]).then(function(result){
					console.log( "Balance : " ,web3.utils.fromWei(result, 'ether'));
					$('#Balance').val(web3.utils.fromWei(result, 'ether'));
				});
			});

			$('#checkBalance').click(function() {
			    var _account = $('#Account').val();
				web3.eth.getBalance(_account).then(function(result){
					console.log( "Balance : " ,web3.utils.fromWei(result, 'ether'));
					$('#Balance').val(web3.utils.fromWei(result, 'ether'));
				});
			});


			/* Transfer */
			$('#Transfer').click(function() {
				$('#Tx').text('');
				var _from = $('#From').val();
			    var _to = $('#To').val();
				var _Amount = $('#Amount').val();
				var txnObject = {
					"from":_from,
					"to": _to,
					"value": web3.utils.toWei(_Amount,'ether'),
					// "gas": 21000,         (optional)
					// "gasPrice": 4500000,  (optional)
					// "data": 'For testing' (optional)
					// "nonce": 10           (optional)
				}

				web3.eth.sendTransaction(txnObject, function(error, result){
					if(error){
						console.log( "Transaction error" ,error);
					}
					else{
						var txn_hash = result; //Get transaction hash
						$('#Tx').text(txn_hash);
					}
				});

			});


		});

    </script>

 

​

12줄

 

<script src="js/web3.min.js"></script> : web3.min.js를 로드한다.

- web3.min.js : web3.js에 대해 간략하게 만든 라이브러리 파일.

web.js에 대한 다양한 함수가 포함.

​

사전에 web.js를 서버에 설치해야 하지만,

현재 예제에서는 web.min.js 파일만 있어도 무방함.

​

​

50줄) web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));

//http에서 동작하는 node에 연결하기 위해 HttpProvider 를 사용하여 web3 객체 생성

​

69줄) $('#Account').val(accounts[0]);

// 우선, $는 jQuery를 사용하겠다는 의미

// '#Account' : html 태그의 id 속성을 이용하여 Account라는 id를 가진 것을 선택

// 코드를 해석하면 -> id가 Account인 요소의 값을 accounts[0]으로 정한다.

 

70줄) web3.eth.getBalance(accounts[0]).then(function(result) { ... };

// id가 Balance인 요소의 값을 wei 단위에서 ether로 바꾸어서 조회한다.

// 여기서는 account[0]의 계정의 잔액을 조회할 수 있도록 되어있다.

 

76줄) $('#chechBalance').click(function() { ... }; -> Chech Balance 버튼

// id가 account인 요소를 가져와서 그 계정에 해당하는 잔액을 조회할 수 있도록 한다.

// 위에서와 같이 wei 단위를 ether로 바꾸어준다.

 

 

-jQuery : 자바 스크립트 프로그래밍을 단순화하여 간결한 코드로 많은 동작을 구현한다.

​

https://m.blog.naver.com/PostView.nhn?blogId=imirene_&logNo=220639336688&proxyReferer=https:%2F%2Fwww.google.com%2F

[JavaScript 기초] 20. jQuery의 개요

https://www.codingfactory.net/10765

jQuery / Method / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드

 

https://gongple.tistory.com/10

[Ethereum] - geth 명령어 및 채굴 (2)

 

(명령어 해석에 도움)

86줄) $('#Transfer').click(function() { ... }

// id가 From인 요소값(이더를 보내는 계정)과 id가 To인 요소값 (이더를 받는 계정), 그리고 id가 Amount인 요소값(보낼 이더 량)을 가져온다.

// Amount 값은 역시나 ether로 단위를 맞춰주고

// from, to, value값을 txnObject로 출력한다.

 

101줄) web3.eth.sendTransaction(txnObject, function(error, result){ ... }

// txnObject에 있는대로 from 계좌가 to 계좌에게 value 만큼의 이더를 보내겠다 라는 명령어이다.

// 근데 이때 에러가 나면 "Transaction error" 라는 로그를 보내고

// 에러가 안나고 정상적으로 동작하면 트랜젝션 발생으로 트랜젝션에 해당하는 해쉬가 생성되어 txn_hash에 담긴다.

// $('#Tx').text(txn_hash); -> id가 Tx인 요소 안의 내용인 txn_hash 값을 가져온다.