[BlockChain] web3.js ? ethers.js ?

Wonhyun Kwon·2023년 5월 15일
블록체인

BlockChain

목록 보기
1/1
post-thumbnail

1. web3.js 란?

  • Ethereum 네트워크와 상호 작용할 수 있도록 다양한 메소드를 제공하는 JavaScript 라이브러리이다.
  • 즉, Ethereum 의 '표준 API' 라고 보면 된다.

1-1. web3.js를 사용하는 이유는?

Ethereum 으로 dApp 을 만드는 방법은 다음과 같다.

  1. Solidity 언어로 Smart contract 를 개발하는 것.
  2. 블록체인과 상호 작용하는 클라이언트를 개발하는 것.

이 중 2번 방법을 위해 사용하는 라이브러리가 Web3.js 이다.

Ethereum 네트워크는 생태계에 참여하는 자를 일컫는 노드(node) 로 구성되어 있으며 노드 들은 JSON-RPC 형태로만 소통할 수 있다.
하지만 복잡한 JSON-RPC 형식에 맞춰 개발하는 것은 개발자에게 불편한 일이다.

// ex) json-rpc의 예시
{"jsonrpc":"2.0","method":"eth_sendTransaction","params":[{"from":"0xb60e8dd61c5d32be8058bb8eb970870f07233155","to":"0xd46e8dd67c5d32be8058bb8eb970870f07244567","gas":"0x76c0","gasPrice":"0x9184e72a000","value":"0x9184e72a","data":"0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675"}],"id":1}

따라서 Web3.js 를 통해 잘 알지 못하는 개발자들도 쉽고 편리하게 사용할 수 있게 도와주는 역할을 한다.

// ex) 위 복잡한 json-rpc 방식을 web3.js로 동일하게 구현한 예제
CryptoZombies.methods.createRandomZombie("Vitalik Nakamoto 🤔")
  .send({ from: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", gas: "3000000" })

1-2. 메타마스크(Metamask) ?

  • 메타마스크(Metamask) 는 사용자의 Ethereum 계정과 개인키를 안전하게 관리할 수 있게 도와주는 블록체인 플랫폼 서비스 중 하나다.
  • 대표적으로 크롬/파이어폭스 브라우저의 확장 프로그램 및 모바일 App을 지원한다.
  • 메타마스크 계정으로 web3.js를 사용하는 웹사이트와 상호 작용이 가능하다.

즉, Metamask 는 dApp 를 이용할 수 있도록 도와주는 대표적인 예이다.
그 이유는, Metamask 는 내부적으로 Infura 서버를 Web3 Provider 로 사용하기 때문이다.

Metamask 는 web3 라는 전역 JavaScript 객체 를 통해 브라우저에 Web3 Provider 를 주입한다.


1-3. Web3 Provider ?

  • Ethereum 의 Smart contract 와 상호 작용하기 위해 web3.js 라이브러리에서 Ethereum 네트워크를 제공하는 인터페이스이다.

그림 하나로 정리할 수 있다.
구조도

위 그림에서 보다시피, Web3 Provider 는 한마디로 '어떤 노드에 연결해서 정보를 주고받을 건지' 그 대상을 지정하는 역할을 한다.

즉, 클라이언트와 Ethereum 노드 간의 인터페이스 역할 을 한다.

주로 Ethereum 블록체인과 통신하여 Smart contract 를 배포 또는 실행하고, Transaction 을 서명하고 전송하는 등의 기능을 제공한다.

클라이언트는 Ethereum 노드에 대한 요청을 전달하고, Ethereum 노드는 그 결과를 클라이언트에게 반환한다.

🔎 사용예시

web3.js 를 사용하여 Smart contract 를 배포하거나, 또는 이더를 전송하는 등의 작업을 수행하려면 가장 먼저 해당 작업에 필요한 provider 설정해야 한다.

일반적으로 Ethereum 노드를 직업 운영하지 않는 경우에는 Infura 와 같은 Ethereum 인프라 제공업체를 사용하여 provider 를 설정해야 한다.

🔎 종류

web3.js 에선 크게 두 종류의 provider 를 제공한다.

  1. http, websocket, IPC 등 프로토콜 을 사용한 provier

    • Infura
      • HTTPProvider
      • WebsocketProvider
      • IPCProvider

  2. 브라우저 확장 프로그램에서 사용 가능한 InjectedProvider

    • Metamask
      • 크롬/파이어폭스 브라우저 Extention

🔎 Infura vs Metamask

  1. Infura

    • Infura 는 'Ethereum 인프라 제공업체' 로서 Ethereum 네트워크에 접근하기 위한 일반적인 provider 를 제공한다.
    • http 또는 websocket 과 같은 프로토콜을 이용하여 클라이언트의 요청과 Ethereum 노드로 부터의 결과를 반환한다.
    • 주로 Smart contract 배포, 트랜잭션 전송, 블록 정보 조회 등의 작업을 제공한다.

  2. Metamask

    • Metamask 는 Ethereum 블록체인과 상호 작용하기 위한 '브라우저 확장 프로그램' 으로서 '자체 Provider' 를 제공한다.
    • 가상지갑 기능과 dApp 실행 환경을 제공하는 것이 큰 특징이다.
    • 이를 위해 사용자의 개인 키를 안전하게 보호함으로서 가상지갑 을 관리하고, dApp 에 대한 권한 및 트랜잭션 서명을 처리하는 역할을 제공한다.
    • '브라우저' 환경에서 실행되기 때문에 InjectedProvider 라는 특정 유형의 provider 를 제공하여 클라이언트와 블록체인 간의 통신을 담당한다.

❗️ 결론적으로, Provider 의 대표적인 두 서비스는 실행 환경의 차이뿐 아니라 기능적인 차이도 존재한다.

2. ethers.js 란?

web3.js 와 마찬가지로 Ethereum 생태계와 상호 작용하기 위한 JavasScript 라이브러리 이다.

ether.js 와 web3.js 는 Ethereum 생태계와 상호 작용한다는 것은 동일하지만, 서로 다른 사용 목적과 구조를 지니고 있다.

🔎 차이점

  1. ethers.js
    • 주로 Smart contract 개발 및 상호 작용에 중점을 둔다.
    • Smart contract 의 배포 및 호출, 트랜잭션 생성 및 서명 등의 기능을 제공한다.
    • Ethereum 지갑 관리 기능을 제공한다.
  2. web3.js
    • ethers.js 에 비해 더 다양한 기능과 API를 제공한다.
    • Provider 설정, 계정 관리, Smart contract 상호 작용, 블록체인 정보 조회 등의 기능들이 있다.

❗️ 결론적으로, 일반적으로 ethers.js 는 Smart contract 개발에 더 중점을 둔 경우에 사용되며, web3.js는 dApp 개발이나 블록체인 네트워크와의 상호 작용이 더 필요한 경우에 사용된다.

profile
Wonhyun Kwon
모든 사용자가 만족하는 UI를 만드는 FE 개발자 권원현입니다.

0개의 댓글