[연재] web3.js 로 데이터를 읽어보자.

web3.js 로 데이터를 읽어보자.

이번에는 Remix가 아닌 웹 브라우저에서 앞에서 등록한 스마트컨트렉트를 사용해보도록 하겠다.

시나리오는 다음과 같다.


  1. web3.js를 설치한다.
  2. 실행할 index.html, index.js를 생성한다.
  3. 브라우저에서 index.html을 호출한다.
  4. 콘솔에서 실행여부를 확인한다.


web3.js 설치

web3.js 에 대한 정의는 web3.js github사이트를 보면 다음과 같이 나온다.
 

This is the Ethereum compatible JavaScript API which implements the Generic JSON RPC spec. It's available on npm as a node module, for bower and component as an embeddable js and as a meteor.js package.


web3.js는 이더리움 JSON RPC를 구현한 자바스크립트 API라고 할 수 있겠다.

자 그러면 web3.js를 사용하여 앞에서 만든 스마트컨트렉트를 실행해보자.

제일 먼저 web3.js를 설치해야 한다.
설치에 관한 자세한 내용은 github 사이트를 보면 잘 나온다.

일단 디렉토리를 하나 만들고

mkdir web3js


여기서는 bower를 이용해서 설치하겠다.

cd web3js
bower install web3


bower_components 디렉토리를 열어 보면 web3와 crypto-js, bignumber.js가 보일 것이다. 제대로 설치된 것이다.


index.html, index.js 생성

이제 index.html, index.js 파일을 만들어보자.

물론 웹서버를 설치하고 웹 페이지를 만드는 것이 순서일 것이나, 여기서는 개념 잡는 것이 우선이므로, 웹 서버 없이 브라우저에서 직접 파일을 호출해서 사용하자.

index.html

<html lang="en">
<head>
    <script src="bower_components/web3/dist/web3.js" charset="utf-8"></script>
    <script src="index.js" charset="utf-8"></script>
</head>
<body>

</body>
</html>

소스코드는 워낙 간단하여 분석할 것이 없다. web3.js를 포함하는 것과 실행할 javascript인 index.js를 포함하는 것이 전부다.


index.js

(function() {
    web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
    var contract = web3.eth.contract(ABI_CODE).at(ADDRESS);

    var name = "이순신";
    var salary = contract.get(name);

    console.log(name,salary.toString(10));
})();

index.js도 마찬가지다.

스마트컨트렉트를 호출하여 "이순신"의 salary가 얼마인지 콘솔에 출력하는 것이 전부다.


여기서 스마트컨트렉트를 호출하는 부분을 보자. 호출하는 문법은 아래와 같다.

해당 스마트컨트렉트의 ABI_CODE와 ADDRESS 부분을 채워 넣으면  소스코드는 완성된다.

    var contract = web3.eth.contract(ABI_CODE).at(ADDRESS);

ADDRESS 에는  앞에서 저장한 스마트컨트렉트 주소를 의미한다.

즉 "0x156146db65637eb1f5d1052aeac809e0244216f2" 를 넣으면된다.

그 다음이 ABI인데, ABI란 Application Binary Interface의 약자로 런타임시 바이너리 코드와 상호작용하기 위한 인터페이스이다.

그러면 이 ABI 코드는 어디서 가져오는가?


자 다시 리믹스 프로그램으로 돌아가보자.



스마트 컨트렉트 컴파일 탭을 보면 Details라는 버튼이 있다 여길 클릭하면 아래와 같이 해당 컨트렉트에 대한 자세한 정보와 인터페이스들이 나온다.



하단에 보면 ABI 부분이 보일 것이다. 바로 옆에 있는 아이콘을 클릭하여 이 내용을 index.js 코드에 복사한다.


자 이제 index.js 전체 코드가 다음과 같을 것이다.

(function() {
    web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
    var contract = web3.eth.contract([{
            "constant": true,
            "inputs": [{
                "name": "name",
                "type": "string"
            }],
            "name": "get",
            "outputs": [{
                "name": "",
                "type": "uint256"
            }],
            "payable": false,
            "stateMutability": "view",
            "type": "function"
        },
        {
            "constant": false,
            "inputs": [{
                    "name": "name",
                    "type": "string"
                },
                {
                    "name": "amount",
                    "type": "uint256"
                }
            ],
            "name": "set",
            "outputs": [],
            "payable": false,
            "stateMutability": "nonpayable",
            "type": "function"
        }
    ]).at("0x156146db65637eb1f5d1052aeac809e0244216f2");

    var name = "이순신";
    var salary = contract.get(name);

    console.log(name,salary.toString(10));
})();


브라우저에서 index.html을 호출,콘솔 확인


웹 브라우저에서 index.html을 불러보자.


F12를 클릭하여 개발자 모드에서 콘솔을 선택해보자.

위 화면과 같이 이순신 2000 이라고 나오는가?

한가지 index.js에서

salary.toString(10)

부분에 대해 설명해보자

이더리움에서 다루는 숫자는 자바스크립트에서 일반적으로 다룰 수 있는 숫자값 범위를 넘어서기 때문에 web3.js에서는 내부적으로 bigNumber.js를 사용하여 숫자를 다룬다.

위 코드가 의미하는 바는 해당 숫자를 10진수로 변환해달라는 의미이다.