Meteor로 Dapp 만들기 - Ethereum web3 Package 설치하고 잔고(Balance) 구하기.

먼저, 편의상 Chrome용 ethereum wallet plugin인 Metamask(https://metamask.io)를 설치하고 개인지갑을 생성할 것을 권장한다.
Meteor는 그 자체로 브라우저용 javascript와 서버용 node.js를 같이 운용하는 Full-Stack Platform이라서 기존 npm을 사용할 수도 있지만 계정/인증과 같이 client/server를 동시에 개발해야 하는 경우는 Meteor의 자체 package시스템을 사용하는게 편하다.
https://atmospherejs.com 에서 필요한 패키지를 검색해보자.

ethereum 이라고 일단 넣어보자.
아마도 이렇게 나올 것이다.

Package이름은 namespace:packename 형식인데 패키지명 중복을 방지하기 위해 namespace로 구분한다.
멋지게도 ethereum에서 공식 제작한 패키지가 있다!
검색 결과에서 ethereum을 클릭하거나 https://atmospherejs.com/ethereum 로 이동하자.

괜찮은 패키지들이 꽤 있다. 이것들을 전부 설치하면 Mist와 같은 (심지어 UI 스타일까지도!) 앱을 만드는 것도 어렵지 않다.

하지만, 학습이 목적이므로 https://atmospherejs.com/ethereum/web3 이 패키지를 설치한다.

설치는 역시 터미널이나 커맨드라인에서

meteor add ethereum:web3

하는 것이 전부. Meteor가 작동하고 있든 아니든 상관은 없다.
이전 글(https://steemit.com/dapp/@acidsound/meteor-dapp)에서 처럼 meteor project가 있는 경로에서 meteor 혹은 meteor run을 실행하고 있다면 브라우저에서 http://localhost:3000 열고 빈 곳에 마우스 오른쪽 버튼+검사하기(Inspect)로 크롬 디버거를 열자.

console 탭을 클릭하여 선택한 후 콘솔창에 web3라고 쳐서 web3 패키지 설치를 확인해보자.

MetaMask 설치 여부에 따라 다르게 보일 수 있다.

왼쪽이 Metamask 설치, 오른쪽이 미설치인 화면이다.
Metamask를 설치한 경우 Provider와 전역변수인 web3까지 모두 설정이 되있다.
궁금한게 한 트럭이지만 열기가 식기전에 어서 가능성을 보자.
Console에서 다음과 같이 입력하자.

web3.eth.coinbase

지갑 설정이 되있는 상태라면 현재 자신의 지갑 주소가 보일 것이다.

0xA73FE81797931957F193Ea8e3f6C915b1a950b08 실제 내 지갑 주소다. 어딘가에 복사해서 기록해 놓으셔도 좋다. 시험삼아 ether를 전송하거나 할 수 있다. 단, 돌려드릴 수 있을지는 보장을 못하겠다. :)

여기까지 아주 만족스럽다. 그럼 coinbase를 알면 무엇을 할 수 있을까? 당연히 잔고(balance)확인을 할 수 있다.

web3.eth.get까지 쳐보니 자동완성이 이렇게 나온다.
getBalance가 보인다. 한번 쳐보고 enter.

getBalance는 function임을 알 수 있다. 그렇다면 실행해보자.

web3.eth.getBalance()

invalid address라고 오류를 보여준다. 그렇다면 주소를 넣어주자. web3.eth.coinbase를 인자로 넣어서 다시.

web3.eth.getBalance(web3.eth.coinbase)

어라? 오류가 난다. 내용을 읽어보면 Metamask Web3 객체는 callback이 없는 동기화 호출을 지원하지 않는다라고 한다.
지원을 한다고 해도 당연히 비동기로 해야한다. 맞게 바꿔보자.

web3.eth.getBalance(web3.eth.coinbase, (error,result)=>console.log(error,result))

console.log로 error와 result를 표시해보았다. 오류는 없으니 error는 null이 나왔고 result는 Bignumber라는 객체가 나왔다.
javascript는 정수 표현 한계가 있으니 당연히 조단위가 넘는 큰 금액을 표현할 수 있는 무언가가 필요하다.
아무생각없이 web3.big까지 Console에서 입력해보았다.

toBigNumber라는 함수가 있다!
그 외에도 web3.to까지 입력해보니

toWei같은 것도 보인다.

시험해 보자.

web3.toBigNumber(10000)
> 

같은 BigNumber 객체이다.
그럼, 이걸 특정 변수로 받아서 BigNumber 객체에 무엇이 있나 살펴보자.

bigNumber = web3.toBigNumber(10000)
bigNumber.

큰 자릿수의 숫자 계산을 위한 함수들이 가득하다.

마찬가지로 . 뒤에 to를 타이프해본다.

toNumber, toString, toFormat 같은 것이 눈에 확 들어온다.
궁금하니까 실행해보자.

bigNumber.toNumber()
10000
bigNumber.toString()
"10000"
bigNumber.toFormat()
"10,000"

숫자형으로 문자형으로 3자리수 끊어서 포멧팅까지 종류별로 보여준다.

이제까지 해본 걸 정리해서 아래와 같이 구현해보자.

1. 지갑 주소를 구한다.
2. 지갑 주소로 잔고를 구한다.
3. 잔고를 구한 값을 식별 가능한 형태로 전환한다.
   코드는 간단. toFormat을 사용해 현재 잔고를 3자리 숫자 , 구분하여 얻어와보자.

web3.eth.getBalance(web3.eth.coinbase, (error,result)=>console.log(
  error, result.toFormat()
));

현재 해당 지갑의 잔고는 6ETH인데 숫자가 큰 것을 보면 Wei (1ETH=1000000000000000000Wei) 단위로 표시하는 걸 알 수 있다.

이것만으로도 이미 Ethereum wallet을 만든 것이나 다름없다! 적은 코드지만 충분히 유용하다.
처음 접하는 도구에 대한 흥미를 갖고자 메뉴얼을 찾기보단 js와 chrome debugger를 충분히 활용하여 동물적(?)인 감각으로 가지고 놀아봤다. 뭔가 나도 할 수 있다라는 자신감과 자극이 되길 바래본다.

다음엔 이것들을 가지고 조금 더 Meteor 자체에 집중하여 web으로 표현하는 코드를 다뤄보도록 하자.