본문으로 건너뛰기
Change page

JavaScript API 라이브러리

웹 앱이 이더리움 블록체인과 상호 작용(예: 블록체인 데이터 읽기 및/또는 네트워크에 트랜잭션 전송)하려면 이더리움 노드에 연결해야 합니다.

이를 위해 모든 이더리움 클라이언트는 JSON-RPC 사양을 구현하므로, 애플리케이션이 의존할 수 있는 일관된 메서드 세트가 존재합니다.

JavaScript를 사용하여 이더리움 노드에 연결하려는 경우 바닐라 JavaScript를 사용할 수도 있지만, 생태계 내에는 이를 훨씬 쉽게 만들어주는 여러 편의 라이브러리가 존재합니다. 개발자는 이러한 라이브러리를 사용하여 이더리움과 상호 작용하는 JSON-RPC 요청을 (내부적으로) 초기화하는 직관적인 한 줄짜리 메서드를 작성할 수 있습니다.

머지 이후에는 노드를 실행하기 위해 실행 클라이언트와 합의 클라이언트라는 두 가지 연결된 이더리움 소프트웨어가 필요합니다. 노드에 실행 클라이언트와 합의 클라이언트가 모두 포함되어 있는지 확인하세요. 노드가 로컬 머신에 있지 않은 경우(예: 노드가 AWS 인스턴스에서 실행 중인 경우) 튜토리얼의 IP 주소를 그에 맞게 업데이트하세요. 자세한 내용은 노드 실행 페이지를 참조하세요.

전제 조건

JavaScript를 이해하는 것 외에도 이더리움 스택이더리움 클라이언트를 이해하면 도움이 될 수 있습니다.

라이브러리를 사용하는 이유

이러한 라이브러리는 이더리움 노드와 직접 상호 작용하는 복잡성을 대부분 추상화합니다. 또한 유틸리티 함수(예: ETH를 Gwei로 변환)를 제공하므로 개발자는 이더리움 클라이언트의 복잡성을 다루는 데 드는 시간을 줄이고 애플리케이션의 고유한 기능에 더 많은 시간을 집중할 수 있습니다.

라이브러리 기능

이더리움 노드에 연결

이러한 라이브러리는 프로바이더(provider)를 사용하여 JSON-RPC, Infura, Etherscan, Alchemy 또는 메타마스크를 통해 이더리움에 연결하고 데이터를 읽을 수 있게 해줍니다.

경고: Web3.js는 2025년 3월 4일에 보관(archive) 처리되었습니다. 공지사항 읽기 (opens in a new tab). 새로운 프로젝트의 경우 ethers.js (opens in a new tab) 또는 viem (opens in a new tab)과 같은 대체 라이브러리 사용을 고려하세요.

Ethers 예시

// BrowserProvider는 표준 Web3 공급자를 래핑하며, 이는
// 메타마스크가 각 페이지에 window.ethereum으로 주입하는 것입니다.
const provider = new ethers.BrowserProvider(window.ethereum)

// 메타마스크 플러그인은 또한 트랜잭션 서명을 허용하여
// 이더를 전송하고 블록체인 내의 상태를 변경하기 위해 지불할 수 있게 합니다.
// 이를 위해 계정 서명자가 필요합니다...
const signer = provider.getSigner()

Web3js 예시

설정이 완료되면 블록체인에 다음을 쿼리할 수 있습니다.

  • 블록 번호
  • 가스 추정치
  • 스마트 컨트랙트 이벤트
  • 네트워크 ID
  • 기타 등등...

지갑 기능

이러한 라이브러리는 지갑을 생성하고, 키를 관리하며, 트랜잭션에 서명하는 기능을 제공합니다.

다음은 Ethers의 예시입니다.

전체 문서 읽기 (opens in a new tab)

설정이 완료되면 다음을 수행할 수 있습니다.

  • 계정 생성
  • 트랜잭션 전송
  • 트랜잭션 서명
  • 기타 등등...

스마트 컨트랙트 함수와 상호 작용

JavaScript 클라이언트 라이브러리를 사용하면 애플리케이션이 컴파일된 컨트랙트의 애플리케이션 바이너리 인터페이스(ABI)를 읽어 스마트 컨트랙트 함수를 호출할 수 있습니다.

ABI는 기본적으로 컨트랙트의 함수를 JSON 형식으로 설명하며, 이를 일반적인 JavaScript 객체처럼 사용할 수 있게 해줍니다.

따라서 다음 Solidity 컨트랙트는:

다음과 같은 JSON 결과를 생성합니다.

이는 다음을 수행할 수 있음을 의미합니다.

  • 스마트 컨트랙트에 트랜잭션을 전송하고 해당 메서드 실행
  • EVM에서 실행될 때 메서드 실행에 소요되는 가스를 추정하기 위해 호출
  • 컨트랙트 배포
  • 기타 등등...

유틸리티 함수

유틸리티 함수는 이더리움 기반 개발을 조금 더 쉽게 만들어주는 유용한 단축 기능을 제공합니다.

ETH 값은 기본적으로 Wei 단위입니다. 1 ETH = 1,000,000,000,000,000,000 Wei이므로, 매우 큰 숫자를 다루게 됩니다! web3.utils.toWei는 이더를 Wei로 변환해 줍니다.

그리고 Ethers에서는 다음과 같습니다.

// 계정의 잔액 가져오기 (주소 또는 ENS 이름으로)
balance = await provider.getBalance("ethers.eth")
// { BigNumber: "2337132817842795605" }

// 종종 사용자를 위해 출력을 포맷해야 할 필요가 있습니다.
// 사용자는 (Wei 대신) 이더로 값을 보는 것을 선호합니다.
ethers.utils.formatEther(balance)
// '2.337132817842795605'

사용 가능한 라이브러리

Web3.js - 이더리움 JavaScript API.

Ethers.js - JavaScript 및 TypeScript로 작성된 완전한 이더리움 지갑 구현 및 유틸리티.

The Graph - 이더리움 및 IPFS 데이터를 인덱싱하고 GraphQL을 사용하여 쿼리하기 위한 프로토콜.

Alchemy SDK - 향상된 API를 제공하는 Ethers.js 래퍼(Wrapper).

viem - 이더리움을 위한 TypeScript 인터페이스.

Codex - 수십 개의 체인에 걸친 실시간의 풍부한 블록체인 데이터 API.

Drift - 캐싱, 훅(hooks), 테스트 모의 객체(mocks)가 내장된 TypeScript 메타 라이브러리.

더 읽을거리

도움이 된 커뮤니티 리소스를 알고 계신가요? 이 페이지를 편집하여 추가해 주세요!

튜토리얼: 이더리움의 JavaScript API 및 웹소켓(WebSockets)

  • 웹소켓 사용하기 – Alchemy와 함께 웹소켓을 사용하여 이더리움 이벤트를 구독하고 실시간 JSON-RPC 요청을 수행하는 방법입니다.