ethers.js, Web3Provider와 JsonProvider의 차이점 및 사용법 정리

ethers.js

- 이더리움 블록체인과 상호작용 하기 위한 javascript 라이브러리

- 가볍고 모듈화가 되어있어 Node.js 브라우저 환경에서 모두 사용 가능하다.

- Provider, Signer, Contract 등 유틸리티를 제공하여 블록체인 애플리캐이션 개발을 단순화할 수 있다.

- DApp 개발 시 Ethereum 네트워크와 상호작용하려면 ethers.js 라이브러리의 Provider를 사용해야 한다. 

---

Provider의 개념과 역할

- Provider는 이더리움 네트워크와 데이터를 교환화기 위한 인터페이스이다.

• 역할: 네트워크 상태 조회, 블록 정보 가져오기, 트랜잭션 확인 등
• 서명이나 전송은 직접 처리하지 않는다.
• ethers.js에서 여러 종류의 Provider를 지원하며, 가장 일반적으로 사용되는 두 가지가 Web3Provider와 JsonRpcProvider이다.

 

---

Web3Provider

new ethers.providers.Web3Provider

 

• 브라우저 환경에서 사용되는 Ethereum 지갑(MetaMask 등)의 window.ethereum 객체를 래핑하여 네트워크와 상호작용할 수 있게 도와주는 Provider이다.
• Web3지갑이 제공하는 JSON-RPC 인터페이스를 통해 네트워크와 통신한다.
• 사용자의 서명 및 트랜잭션 전송을 지갑이 처리한다.

---

특징

• 사용자 지갑과 연동
  • 브라우저 지갑을 통해 사용자의 계정 정보를 가져오거나, 트랜잭션에 서명할 수 있다.
  • 사용자는 트랜잭션을 전송하기 전에 MetaMask팝업을 통해 직접 승인 한다.
• 네트워크 설정
  • 지갑에서 선택된 네트워크를 사용한다.
    • ex) MetaMask에서 Rinkeby 네트워크로 설정하면, Web3Provider도 동일한 네트워크를 사용한다.
• 사용 사례
  • 사용자의 지갑을 통해 트랜잭션을 서명하거나, 지갑 주소를 가져오는 작업을 실행한다.
  • 사용자가 메타마스크와 같은 지갑을 사용할 때 적합하다.

---

생성 및 사용 방법

import { ethers } from "ethers";

// 브라우저의 Ethereum 객체(MetaMask 등)를 사용해 Web3Provider 생성
const provider = new ethers.providers.Web3Provider(window.ethereum);

// 사용자의 지갑과 연결된 계정 가져오기
const signer = provider.getSigner();
const address = await signer.getAddress();
console.log("사용자 주소:", address);

// 트랜잭션 서명 및 전송
const tx = await signer.sendTransaction({
    to: "0xRecipientAddress",
    value: ethers.utils.parseEther("0.1"),
});
console.log("트랜잭션 전송:", tx.hash);

장점

- 사용자 지갑을 통해 트랜잭션을 쉽게 서명할 수 있다.

- 사용자가 네트워크를 직접 선택하고 관리할 수 있다.

 

단점

- MetaMask와 같은 브라우저 지갑이 설치되어 있어야만 사용할 수 있다.

- 지갑 팝업에서 사용자가 직접 서명을 승인해야 하기 때문에 자동화 작업에는 적합하지 않다.

---

JsonRpcProvider

new ethers.providers.JsonRpcProvider

동작방식

• JsonRpcProvider는 특정 RPC URL을 사용해 네트워크와 직접 통신한다.
• Infura, Alchemy, 또는 개인 노드를 통해서 네트워크에 연결한다.

---

특징

• 직접 RPC url 설정
  • 특정 RPC 엔드포인트를 통해 네트워크에 직접 연결한다.
  • MetaMask와 같은 브라우저 지갑 없이도 사용할 수 있다.
• 사용 사례
  • 네트워크 데이터를 읽는 작업 (ex: 계정 잔액 조회, 블록 정보 가져오기)
  • 트랜잭션 서명은 프론트엔드에서 직접 수행할 수 없으므로, 보통 데이터 조회 용도로 사용

---

생성 및 사용 방법

import { ethers } from "ethers";

// RPC 서버 URL을 사용해 JsonRpcProvider 생성
const provider = new ethers.providers.JsonRpcProvider("https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID");

// 최신 블록 번호 가져오기
const blockNumber = await provider.getBlockNumber();
console.log("최신 블록 번호:", blockNumber);

// 특정 주소의 잔액 가져오기
const balance = await provider.getBalance("0xYourAddress");
console.log("잔액:", ethers.utils.formatEther(balance));

장점

- MetaMask가 설치되어 있지 않아도 사용할 수 있다.

- 네트워크 데이터를 읽는 작업에 적합하며, 빠르고 효율적이다.

 

단점

- 트랜잭션을 서명하거나 사용자의 계정을 가져오는 작업은 수행할 수 없다.

- RPC url(API 키 포함)이 노출되면 악용될 위험이 있다.

---

Web3Provider와 JsonRpcProvider 차이점

특징	Web3Provider	JsonRpcProvider
지갑 연동	사용자의 브라우저 지갑(MetaMask 등)과 연동	지갑 없이 RPC 서버와 직접 통신
트랜잭션 서명	사용자 지갑에서 직접 서명 요청	서명 작업 불가능 (백엔드 또는 별도 서명 필요)
네트워크 설정	MetaMask의 네트워크 설정을 따름	개발자가 지정한 RPC URL 사용
사용 사례	지갑에서 자동 관리	네트워크 데이터 읽기 (잔액, 블록 정보 등)
의존성	트랜잭션 서명, 사용자의 계정 정보 조회	별도 의존성 없음 (RPC 서버만 필요)

 

---

상황에 맞는 Provider 선택 기준

1. Web3Provider를 사용하는 경우 - 사용자의 서명이 필요한 작업

- MetaMask와 같은 브라우저 지갑이 설치되어 있는 사용자를 대상으로 하는 DApp

- 사용자가 트랜잭션을 직접 서명해야하는 경우 *ex) 토큰 전송 및 NFT 구매

---

2. JsonRpcProvider를 사용하는 경우 - 데이터를 읽기만 하는 작업

- 사용자가 MetaMask를 설치하지 않아도 데이터를 읽을 수 있는 기능이 필요할 때

- 네트워크 정보를 조회하거나 블록체인 상태를 보여주는 애플리케이션 *ex) 토큰 가격 조회 및 특정 주소의 잔액 또는 트랜잭션 기록 표시