2. Web3.js를 사용해보자

이게 뭐죠

 

사실 위의 사진은 Web3.js 파일이다. 무슨일인지 모르겠으나 npm install web3가 설치가 안되고 module이 안보여서 구글링하여 Web3.js 파일을 찾아냈는데 모든 메소드를 남고있어서 그런가 양이 미쳤다.

 

1. 시작

우선은 기초로 돌아가서 Web3.js를 사용해보는 것이 목적이기에 인터넷에 널려있는 여러 함수를 사용해보기로 하였다.

먼저 html파일을 만들고, 대충 아는 태그들을 붙여서 지갑 주소를 받게 만든다.

클릭시 getETH() 함수가 실행되게 하고 이제 이 함수를 만들어보자

 

평소와 같이 script type="text/javascript"는 같지만 뒤에 web3.js 파일을 불러와서 해당 라이브러리를 쓰겠다고 선언

이제 화면이 새로고침될 때마다 이벤트 리스너를 실행시켜준다. Provider를 정의하기위해

Web3.js 에서 Provider가 중요한 이유는 처음에 말했듯, 이더리움에서 뭔가 처리를 하려면 어떤 노드와 통신할 건지 먼저 설정해야하는 것이 우선이기 때문에, 지금 web3가 정의되어있으면 그 이더 노드를 사용하고 아니면 infura로 연결시킨다.

 

보통 메타마스크나 다른 방법으로 Provider 정하면 좋긴한데, 지금은 빨리빨리 코드짜서 실행해보는게 중요해서 더 코드를 늘리지 않고자 infura를 사용한다.

 

2. 딴 길로 새기

이제 잠시 infura로 가서 임시로 막 사용할 네트워크를 받아준다.

여러 네트워크 중에 내 지갑 현황을 알고싶으니 Ethereum 메인넷 네트워크를 선택한다.

(주의 본인의 지갑과 다른 네트워크를 사용하면 당연히 정보를 가져올 수 없음)

 

3. 다시 코드 작성

역시 자바스크립트로 코드짜는 게 국밥이다

인터넷이 발달되어 구글에 'Web3.js 함수'라고 검색하면 다 나온다. 

저번 프로젝트에서도 내가 막혔던 부분인데 항상 balance 즉 이더리움 량은 wei로 통신되는 모습이다.

(1 ETH = 1,000,000,000,000,000,000 Wei[10^18])

 

 web3.eth.getBalance 함수로 해당 주소에 맞는 이더량을 가져온다.

 web3.util.fromWei 함수로 가져온 Wei를 ETH 단위로 바꿔준다.

 

4. 확인

물론 오류가 많이 나서 여러번의 디버깅 이후에 실행된 모습이다

 

메타마스크를 켜서 본인 이더량과 지갑주소를 확인한다.

 

메타마스크 실행한 모습

 

지갑 주소를 복붙해준다.

 

 

메타마스크에서는 생략되었던 소수점 5자리 아래의 모든 수량이 다 자세히 나온 모습이다.

 

5. 피드백

아까 말한 다른 네트워크를 쓰면 어떻게 될까?

Ethereum Mainnet

 

해당 지갑주소는 이더리움 메인네트워크이지만

 

여러 네트워크

Near 메인넷을 사용해보면

 

제대로 불러오지 못하는 모양이다.

 

지금까지 Web3.js 라이브러리를 사용하여 노드와 상호작용하여 지갑의 이더 정보를 받아오는 작업을 해보았다.

다음에는 이런 지갑, 돈 이 아니라 직접적인 명령을 호출하는 작업을 해보도록 하겠다.