Klaytn - web3.js를 caver.js로 변경하여 간단한 클레이튼 API 서버 개발하기(Mac M1)
이번 포스트는
Ethereum (6) - express와 web3-js를 사용하여 간단한 서버 구축하기 에서 구현한 web3.js 기반의 코드를 클레이튼에 맞게 변경하여 클레이튼 API를 만들어보는것이 목적이다.
이전 포스트에서 작성한 프로젝트는 여기 에서 다운받을 수 있다.
프로젝트를 만들어보기 전에 caver-js가 무엇인지 부터 알아보자.!
Caver-js?
caver.js는 Klaytn 노드와 상호작용할 수 있도록 하는 자바스크립트 API 라이브러리이며, 이더리움에서 디앱 개발자를 위해 지원하는 web3.js와 같은 역할을 하는 Klaytn 디앱 개발자 지원 라이브러리라고 보면 될 것 같다.
Caver-js특징
- HTTP 및 웹소켓을 통한 Klaytn의 JSON-RPC 클라이언트 API의 완전한 구현
- Klaytn 트랜잭션, 계정 및 계정 키 유형 지원
- Klaytn 네트워크에서 스마트 컨트랙트를 배포하고 실행하기위한 자바스크립트 스마트 컨트랙트 패키지
- Klaytn 계정 관리를 위한 인메모리 지갑
- 수수료 위임 지원
- Klaytn Wallet 키 형식 지원
- RLP에서 트랜잭션 오브젝트의 인코딩/디코딩
- 트랜잭션 객체의 서명
- web3-js 애플리케이션을 caver-js로 쉽게 포팅
Git 가져오기
vsCode는 Git 코드를 쉽게 가지고 올 수 있다. Clone Git Repository를 클릭하고
https://github.com/djLeeee/ether_web3_server
해당 Git주소를 입력한다.
그리고 폴더를 지정하면 끝.!
나는 해당 프로젝트로된 이름이 이미 있어서 -1이 붙어서 생성됬다.
우리는 web3.js를 사용하지 않을 것이기 때문에 package.json에 web3를 지워준다. 그리고 npm install을 실행한다.
설치가 완료 됬으면 web3 대신 사용할 caver.js를 설치한다.
npm install caver-js
설치가 다 됬으면 클레이튼 API 로 변경을 하기 위한 기초 세팅은 끝났다.! 다음은 caver.js 라이브러리를 사용하여 API를 만들어보자.!
Caver-js 라이브러리 연동
서버 구축이 완료되었으면 이제 Caver-js를 연동해보자. Caver-js는 여기에서 자세한 정보를 볼 수 있다. 해당 문서에서는 Caver-js가 어떤 정보들을 제공하는지에 대한 API문서이며 해당문서를 참고하여 원하는 모듈을 개발할 수 있다.
먼저 index.js에 web3.js를 연결했던 부분을 지우고 caver.js에 Bob testnet을 연결한다.
caver는 web3와 동일하게 getAccounts함수가 존재하지만 caver에서는 노드가 관리하는 계좌정보들을 불러오는 함수라고한다. 아래 사진과 같이 코드를 수정해보자.!
포스트맨으로 해당 정보를 조회해보면 아무런 결과도 받을 수 없다. 어떤 노드에 연결되는지 정확히 잘 모르겠지만 내가 연결한 노드에는 계좌정보가 없는 것 같다.
그러면 특정 계좌를 조회하는 API를 추가로 하나 만들어보자!. caver는 특정계좌를 조회할 수 있는 getAccount함수가 존재한다. 아래와같이 코드를 추가한다.
getAccount에 특정 계좌 주소를 담아 보내면 해당 주소에 대한 정보를 알 수 있다. 아래 사진은 포스트맨으로 특정 계좌를 조회했을때 나온 결과 화면이다.
자 다음은 클레이튼의 현재 가스비를 조회하는 gasPrice API를 만들어보자. 아래와 같이 코드를 추가한다.
포스트맨에 조회했을때 나온 결과는 다음과 같다.
클레이튼은 4월3일자로 가스비를30배나 올려버렸다. 올린 이유는 봇 때문인데, 클레이튼이 가스비가 너무 적어서 자전거래 봇들이 많아졌고, 이로인해 블록체인이 느려지고 컴플레인이 많아지게 되자, 클레이튼 개발자들은 가스비를 올리지않는 다른 방법을 써봤지만 해결을 할 수 없었고, 결국 가스비를 올림으로써 해결했다고 한다.
자 무튼 가스비가 조회된다.!
자 마지막으로 블록정보를 조회하는 getBlock API를 추가해보자!. 아래 코드를 추가하자.
포스트맨으로 조회하면 아래와 같은 결과를 볼 수 있다. 코드는 현재 제일 최신의 블록을 받도록 구현하였으며, latest로 적힌 부분에 블록 번호를 넣으면 해당 블록도 조회가 가능하다. 여기에서 자세한 정보를 볼 수 있다.
끝!!
마치며..
자 이로써 우리가 지난 포스트에서 Web3.js로 구현했던 간단한 API들을 Caver.js로 변경해보는 시간을 가져봤다.! Caver.js는 Web3.js를 기반으로 만들어져있기 때문에 함수 이름도 거의 비슷하고, 동작방식도 비슷한게 많아서 구현하는데 큰 어려움은 없었다. 라이브러리에는 오늘 사용하지 않은 많은 함수들이 있어서 여기서 끝내기에는 조금 아쉬웠지만.. 앞으로 많이쓸거같기에... , 그리고 지금은 간단한 API들만 조회해봤지만 클레이튼 체인에 배포되어있는 컨트랙트 또한 Caver.js로 가지고 와서 사용할 수 있다.!
자 간단한 서버를 구현했으니 다음에는 서버와 연동되는 프론트 앱을 구현해보려고한다. 프론트 앱은 truffle-react를 사용할것이고, truffle로 스마트 컨트랙트를 배포한 다음, 해당 스마트 컨트랙트를 Caver를 사용하여 호출하는 간단한 dapp을 만들어 보려고 한다.
이번 포스트에 사용한 코드 예제는 여기에 있다.