나는 ERC-20 토큰과 React dApp를 처음부터 만들었다 – 완전한 Web3 분석

Source: Dev.to

내가 만든 것

HarambeeCoin (HBC)은 맞춤형 ERC‑20 토큰입니다. 이 dApp를 통해 다음을 할 수 있습니다:

• MetaMask 연결
• 잔액 확인
• 토큰 전송
• 전체 거래 내역 보기 (보낸 거래와 받은 거래)

스마트 계약

OpenZeppelin 없이 처음부터 HarambeeCoin을 직접 작성하여 모든 코드를 이해하려고 했습니다. 핵심은 표준 ERC‑20 함수에 더해 mint(소유자 전용)와 burn(보유자 누구나) 커스텀 함수를 포함합니다.

function transfer(address to, uint256 amount) public returns (bool) {
    require(balanceOf[msg.sender] >= amount, "Insufficient balance");
    balanceOf[msg.sender] -= amount;
    balanceOf[to] += amount;
    emit Transfer(msg.sender, to, amount);
    return true;
}

Hardhat으로 테스트하기

여섯 개의 테스트가 핵심 경로를 커버합니다. 예시 테스트:

it("Should transfer tokens between accounts", async function () {
    await harambeeCoin.transfer(addr1.address, 1000);
    expect(await harambeeCoin.balanceOf(addr1.address)).to.equal(1000);
});

모두 통과합니다. 테스트를 먼저 진행함으로써 실제 네트워크에 배포하기 전에 잔액 검증 버그를 잡을 수 있었습니다.

React와 블록체인 연결하기

ethers.js v6가 연결을 담당합니다. 아래 함수가 전체 Web3 레이어를 설정합니다:

import { ethers } from "ethers";

async function initWeb3() {
  const provider = new ethers.BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();
  const contractInstance = new ethers.Contract(CONTRACT_ADDRESS, ABI, signer);
  return { provider, signer, contractInstance };
}

contractInstance는 일반 JavaScript 객체처럼 동작합니다—메서드를 호출하고 await으로 결과를 기다립니다.

이벤트를 통한 거래 내역

모든 ERC‑20 전송은 Transfer 이벤트를 발생시킵니다. ethers.js를 사용하면 필터를 통해 과거 이벤트를 조회할 수 있습니다:

const sentFilter = contract.filters.Transfer(account, null);
const receivedFilter = contract.filters.Transfer(null, account);
const sentEvents = await contract.queryFilter(sentFilter, 0, "latest");
const receivedEvents = await contract.queryFilter(receivedFilter, 0, "latest");

이를 통해 백엔드 없이 전체 내역을 제공할 수 있으며, 블록체인 자체가 데이터베이스 역할을 합니다.

문제점

• MetaMask 캐시 – Hardhat 노드를 재시작하면 MetaMask가 여전히 이전 체인에 연결된 것으로 인식할 수 있습니다. 노드 재시작 후 MetaMask 설정에서 Localhost 네트워크를 삭제하고 다시 추가하세요.
• 체인 ID – Hardhat은 기본값이 31337이며 1337이 아닙니다. MetaMask를 설정하기 전에 노드 출력에서 체인 ID를 확인하세요.
• ENS 해석 – 로컬 네트워크에서는 ENS 조회가 실패합니다. 붙여넣는 주소가 0x로 시작하고 42자리 16진수 문자열인지 확인하세요.

앞으로 할 일

• Sepolia 테스트넷에 배포
• 누구나 HBC를 받을 수 있는 토큰 파우셋 추가
• NFT 민팅 기능 확장
• HBC 토큰을 활용한 DAO 투표 구현

사용해 보기

GitHub: