Ethers v6를 사용해보기

Onion·2025년 9월 12일
블록체인

프로젝트

목록 보기
1/1

시작하기에 앞서...

이번 포스팅 내용은 Ethers 학습을 목적으로 간단히 진행한 프로젝트입니다.
2025 K-PaaS 공모전을 진행하면서 DID와 관련한 내용을 다루게 되었고 프론트 개발 과정 중에서 Ethers의 이해와 활용에 대한 이해도를 높이기 위해 진행하게 되었습니다.

DID의 직접적인 활용보다는 Ethers 사용과 학습에 중점을 두고 있습니다!

Ethers가 뭔데?

이더리움과 상호작용하는 라이브러리!

Ethers 공식 문서
https://docs.ethers.org/v6/

ethers.js 라이브러리는 Ethereum 블록체인 및 EVM(ecosystem)과 상호작용할 수 있게 해주는 완전하고 컴팩트한 라이브러리입니다. JavaScript/TypeScript에서 이더리움과 안전하게 상호작용할 수 있게 도와주는 기능을 합니다.
다시 말해, ethers.js 라이브러리는 Ethereum 블록체인 및 EVM(ecosystem)과 상호작용할 수 있게 해주는 라이브러리입니다.

  • 지갑 연결
  • 트랜잭션 전송
  • 스마트 계약 실행
  • 블록체인 데이터 조회 등

때문에 DApp, 지갑, 기타 블록체인 읽기/쓰기 작업용으로 자주 쓰이고 있습니다.

그럼 이더리움은 뭐야?

https://ethereum.org/ko/what-is-ethereum/

이더리움은 탈중앙화된 스마트 계약 플랫폼이자 블록체인 네트워크입니다.
간단하게는 개발 시 블록체인을 활용할 수 있도록 환경 제공을 비롯한 다양한 기능을 포함하는 '플랫폼'입니다.

Ethers는 어떻게 동작해?

Ethers v6의 공식 문서의 내용에 따르면 아래의 순서에 따라 동작합니다.

  1. Provider 연결
  2. Signer 획득
  3. Contract 연결(Optional)
  4. 읽기/쓰기 작업 실행

이때 Ethers의 동작 과정에 사용되는 용어에 대한 설명은 다음과 같습니다.

  • Provider: 블록체인과 연결, 읽기 작업 수행 (getBalance, getBlockNumber, etc.)
  • Signer: 사용자의 개인 키를 보유, 트랜잭션에 서명함
  • Contract: 스마트 계약 객체, ABI + 주소로 생성됨
  • Utils: formatEther, parseUnits, keccak256, toUtf8Bytes 등 유틸 함수
  • Wallet: 로컬 키페어를 가진 지갑 객체 (ex. new Wallet(privateKey))

그럼 Ethers를 사용해 어떤 프로젝트를 할 수 있어?

구상한 프로젝트 주제

이번 주제에서 메인으로 고려해야 할 것은 아래의 두 가지였습니다.

  • Ethers.js의 주요 기능: 스마트컨트랙트 연결, 지갑 연결, 송금, 블록/트랜잭션 조회 등
  • 프론트엔드와의 상호작용: 버튼, 폼, 상태관리, 뷰 업데이트

따라서 위 내용을 같이 고려했을 때 '지갑 연결 + 잔액 조회 + 송금 DApp'을 주제로 결정했습니다.

개발 환경

개발환경은 다음과 같습니다.

  • Node: ≥ 18 (LTS 권장)
  • 패키지 매니저: npm 또는 pnpm
  • 프레임워크: Next.js 14 (App Router)
  • 언어: TypeScript
  • UI: 기본 스타일
  • Web3: ethers@^6
  • 지갑: MetaMask

메타마스크 설치

이번 프로젝트의 지갑으로는 메타마스크를 사용하기 때문에, 프로젝트 개발 전에 미리 설치를 해야 합니다.

메타마스크가 뭐야?

메타마스크는 사용자가 블록체인 애플리케이션뿐만 아니라 디지털 신원과 디지털 자산에 안전하게 접근할 수 있도록 지원하는 자기 수탁형 암호화폐 지갑 앱입니다.
사용자는 MetaMask를 통해 Web3 상의 분산형 애플리케이션(디앱)과 상호작용하고, 암호화폐 포트폴리오를 관리하며, NFT를 민팅하는 등 다양한 기능을 이용할 수 있습니다. 또한, 안전한 로그인, 키 저장소, 토큰 지갑 등의 기능을 제공합니다.

출처: https://metamask.io/ko/download

다시 말해, 이더리움(Ethereum) 및 이더리움 기반 블록체인 네트워크(예: Polygon, BNB Smart Chain 등)에 연결된 디지털 암호화폐 지갑을 말합니다.

메타마스크 설치는 어떻게 해?

메타마스크는 웹 브라우저에서 설치해서 사용하거나 모바일 앱으로 사용 가능합니다.
메타마스크를 사용할 수 있는 웹 브라우저는 Chrome, Firefox, Brave, Microsoft Edge이며, 저는 크롬에서 진행했습니다.

크롬에서 메타마스크 설치를 위해서는 크롬 확장프로그램으로 설치하면 되며, 아래 링크를 통해 설치가 가능합니다.
https://chromewebstore.google.com/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?utm_source=chatgpt.com
설치 후 회원가입을 하면 되는데, 과정이 간단하므로 메타마스크에서 제시하는대로만 회원가입 하면 됩니다.

‼️추후 개발 서버를 열어서 테스트 할 때, 메타마스크가 설치된 크롬에서 열어야 테스트가 정상적으로 동작합니다.‼️

프로젝트 설치

프로젝트 기본 환경 설치를 우선 진행했습니다.
저는 /K-PaaS/ 폴더 아래에 이번 프로젝트의 폴더를 생성하고자 했습니다.

이를 위해 우선 /K-Paas/ 폴더를 기준으로 cmd를 열고, 아래의 명령어를 순차적으로 진행했습니다.
1) 'dapp-wallet'이라는 이름의 프로젝트 생성

# 프로젝트 생성
npx create-next-app@latest dapp-wallet --ts --eslint

2) 생성한 프로젝트 폴더로 이동

cd dapp-wallet

3) ethers 라이브러리 다운로드

# web3 라이브러리
npm i ethers

4) 환경 옵션 설정

  • Tailwind CSS 사용 X
  • /src/ 디렉토리 사용
  • App Router 사용
  • Turbopack 사용 X → 기존의 webpack 사용
  • alias 사용 X

파일 구조

이번 프로젝트의 디렉토리 구조는 다음과 같습니다.

dapp-wallet/
├─ src/
│  ├─ app/
│  │  ├─ layout.tsx
│  │  └─ page.tsx
│  ├─ components/
│  │  ├─ ConnectButton.tsx
│  │  ├─ AccountPanel.tsx
│  │  └─ SendEthForm.tsx
│  ├─ lib/
│  │  └─ ethereum.ts
│  └─ styles/
│     └─ globals.css
├─ .env.local            # (옵션) 별도 RPC 사용 시
├─ package.json
└─ tsconfig.json

※ 기본 동작은 MetaMask의 BrowserProvider 하나로 충분합니다. (읽기/쓰기 모두 가능)
퍼블릭 RPC를 따로 쓰고 싶다면 .env.local에 키를 넣고 JsonRpcProvider를 보조로 붙여도 됩니다.

코드 작성

tsconfig.json 수정

앞서 디렉토리를 설치할 때 /src/ 디렉토리를 사용한다고 설정을 했기 때문에, tsconfig.json에 아래의 코드를 추가해야 합니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

깃허브 코드

https://github.com/onion-0/Wallet-DApp.git

profile
Onion
눈물이 나도 코드를 계속 까보는 양파

0개의 댓글