본문 바로가기
블록체인 및 경제/솔리디티

14. web3.js 와 자바스크립트를 활용하여 (이더잔액조회) 지갑 만들기

by kimsfamily 2020. 11. 16.

1. 스마트 계약의 시작, 리믹스 도구 사용해보기

2. 솔리디티 개발환경 구성

3. 스마트컨트랙트 작성 후 배포하기

4. openzeppelin 사용하여 ERC20 토큰 만들기

5. Ropsten 테스트넷에 ERC20토큰 배포하기

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

7. 솔리디티 기초, 리믹스로 컨트랙트 작성하기

8. 솔리디티 기본문법 (변수, 데이터타입, 구조체)

9. 솔리디티 배열, 맵핑

10. 솔리디티 조건문, 반복문(if, else, for)

11. 솔리디티 암호화폐 지불(호텔룸 예약하기 프로그램)

12. 솔리디티 상속

13. 리믹스 솔리디티 6.0 버전 ERC20토큰 만들기

14. web3.js 와 자바스크립트를 활용하여 (이더잔액조회) 지갑 만들기

15. 솔리디티 컨트랙트 Web.js 활용하여 웹으로 보여주기

 


1. Web3.js 를 PC에 설치합니다.

제 경우는 npm명령어를 통해서 web3.js 라이브러리를 모두 설치하였습니다. 종종 설치가 잘 안되는 분들이 계시기때문에 마지막 pure js를 사용하셔도 됩니다.

(pure js) 아래 깃허브에서 web3.min.js 파일만 다운받습니다.

github.com/ethereum/web3.js/blob/1.x/dist/web3.min.js

 

web3.js 라이브러리를 npm으로 설치하신 분들은 node_modules/web3/dist/web3.min.js 파일을 확인할 수 있습니다.

 

 

2. Infura.io에서  Keys를 가져옵니다.

 

원래는 게스(Geth)라는 이더리움 노드를 실행해야 하는데, 조금 복잡하므로 이를 대신해줄 수 있는 Infura.io에서 제공하는 키를 사용하는겁니다.

 

참고

게스(Geth)는 "go-ethereum"(고 이더리움)의 약자로서, 프로그래밍 언어인 (Go)에서 구현된 전체 이더넷 노드를 실행하기 위한 다목적 명령 줄 도구이다. 명령행 부속 명령 및 옵션, Json-rpc 서버 및 대화식 콘솔의 세 가지 인터페이스를 제공한다.

 

 

3. index.html 파일을 생성하여 이더를 조회하는 웹페이지를 만듭니다.

소스는 아래와 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./node_modules/web3/dist/web3.min.js"></script>
    <script type="text/javascript">
        window.addEventListener('load', function () {
            if (typeof web3 !== 'undefined') {
                console.log('Web3 Detected! ' + web3.currentProvider.constructor.name)
                window.web3 = new Web3(web3.currentProvider);
            } else {
                console.log('No Web3 Detected... using HTTP Provider')
                window.web3 = new Web3(new Web3.providers.HttpProvider("https://ropsten.infura.io/v3/7abae76b3c194ad88d53aae12a391048"));
            }
        })
        function getBalance() {
            var address, wei, balance
            address = document.getElementById("address").value
            try {
                web3.eth.getBalance(address, function (error, wei) {
                    if (!error) {
                        var balance = web3.utils.fromWei(wei, 'ether');
                        document.getElementById("output").innerHTML = balance + " ETH";
                    }
                });
            } catch (err) {
                document.getElementById("output").innerHTML = err;
            }
        }
    </script>
</head>
<body>
    <h1>ETH Balance Fetcher</h1>
    <p>Enter your Ethereum Address:</p>
    <input type="text" size="50" id="address" />
    <button type="button" onClick="getBalance();">Get Balance</button>
    <br />
    <br />
    <div id="output"></div>
</body>
</html>

 

수정이 필요한 부분은,

아래 두부분입니다.

첫번째는 web3.min.js 파일이 있는 경로를 지정해주셔야 합니다.

두번째는 infura.io에서 제공하는 키를 이곳에 넣으시면 됩니다.

<여기에서 ropsten, mainnet등 변경하시면 메인넷에 있는 이더리움을 조회하거나 테스트넷에 있는 이더리움을 조회할 수 있게 됩니다.>

 

한번 index.html 파일을 실행해봅니다.

메타마스크에 있는 계정주소를 조회해봅니다.

아래와 같이 메타마스크에 있는 계정(Ropsten)의 이더잔액이 동일하게 조회된걸 확인할 수 있습니다.

 

 

web3.js 사용법은 아래 메뉴얼을 통해서 확인할 수 있습니다.

web3js.readthedocs.io/en/v1.3.0/index.html

 

솔리디티를 통한 스마트컨트랙트 작성, 그리고 web3.js와의 연결. 이를 통해서 우리는 HTML,CSS,JAVASCRPT, 솔리디티를 활용한 다양한 블록체인 디앱을 만들 수 있게 되었습니다. 축하드립니다!!

 

이제는 하나씩 응용해서 나의것으로 만드는 일이 남아있네요!!

 

 

반응형

댓글0