Web3 최신 기능 완벽 가이드

Web3의 최신 기능들을 초급 개발자도 쉽게 이해할 수 있도록 설명합니다. ethers.js를 활용한 실전 예제로 블록체인 개발의 기초를 배워보세요.

---

---

들어가며

이 글에서는 Web3 최신 기능 완벽 가이드에 대해 상세히 알아보겠습니다. 총 10가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Wallet_연결하기
2. 잔액_조회하기
3. 트랜잭션_전송하기
4. 스마트_컨트랙트_읽기
5. 스마트_컨트랙트_쓰기
6. 이벤트_리스닝하기
7. 네트워크_정보_가져오기
8. 가스비_추정하기
9. ENS_도메인_조회하기
10. 트랜잭션_상세정보_조회

---

1. Wallet 연결하기

개요

사용자의 MetaMask 지갑을 웹사이트에 연결하는 기본 기능입니다. Web3 개발의 첫 단계입니다.

코드 예제

import { BrowserProvider } from 'ethers';

async function connectWallet() {
  const provider = new BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();
  const address = await signer.getAddress();
  console.log('Connected:', address);
  return address;
}

설명

ethers v6의 BrowserProvider를 사용해 MetaMask와 연결하고, 사용자의 지갑 주소를 가져옵니다.

---

2. 잔액 조회하기

개요

특정 지갑 주소의 이더리움 잔액을 조회하는 방법입니다. Wei 단위를 Ether로 변환합니다.

코드 예제

import { BrowserProvider, formatEther } from 'ethers';

async function getBalance(address) {
  const provider = new BrowserProvider(window.ethereum);
  const balance = await provider.getBalance(address);
  const etherBalance = formatEther(balance);
  console.log(`Balance: ${etherBalance} ETH`);
  return etherBalance;
}

설명

getBalance로 Wei 단위 잔액을 가져오고, formatEther로 읽기 쉬운 ETH 단위로 변환합니다.

---

3. 트랜잭션 전송하기

개요

한 지갑에서 다른 지갑으로 이더리움을 전송하는 기본 트랜잭션입니다.

코드 예제

import { BrowserProvider, parseEther } from 'ethers';

async function sendTransaction(to, amount) {
  const provider = new BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();
  const tx = await signer.sendTransaction({
    to: to,
    value: parseEther(amount)
  });
  await tx.wait();
  return tx.hash;
}

설명

parseEther로 ETH를 Wei로 변환하고, sendTransaction으로 전송합니다. wait()로 트랜잭션 완료를 기다립니다.

---

4. 스마트 컨트랙트 읽기

개요

배포된 스마트 컨트랙트의 데이터를 읽어오는 방법입니다. ERC20 토큰의 이름을 조회합니다.

코드 예제

import { BrowserProvider, Contract } from 'ethers';

const abi = ['function name() view returns (string)'];
async function readContract(contractAddress) {
  const provider = new BrowserProvider(window.ethereum);
  const contract = new Contract(contractAddress, abi, provider);
  const name = await contract.name();
  console.log('Token name:', name);
  return name;
}

설명

Contract 객체를 생성하고 ABI를 통해 스마트 컨트랙트의 함수를 호출합니다. view 함수는 가스비가 없습니다.

---

5. 스마트 컨트랙트 쓰기

개요

스마트 컨트랙트의 상태를 변경하는 트랜잭션을 전송합니다. ERC20 토큰 전송 예제입니다.

코드 예제

import { BrowserProvider, Contract, parseUnits } from 'ethers';

const abi = ['function transfer(address to, uint amount)'];
async function writeContract(contractAddr, to, amount) {
  const provider = new BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();
  const contract = new Contract(contractAddr, abi, signer);
  const tx = await contract.transfer(to, parseUnits(amount, 18));
  await tx.wait();
  return tx.hash;
}

설명

signer를 사용해 상태 변경 함수를 호출합니다. parseUnits로 토큰 단위를 변환하고 가스비를 지불합니다.

---

6. 이벤트 리스닝하기

개요

스마트 컨트랙트에서 발생하는 이벤트를 실시간으로 감지합니다. Transfer 이벤트 모니터링 예제입니다.

코드 예제

import { BrowserProvider, Contract } from 'ethers';

const abi = ['event Transfer(address indexed from, address indexed to, uint amount)'];
async function listenEvents(contractAddress) {
  const provider = new BrowserProvider(window.ethereum);
  const contract = new Contract(contractAddress, abi, provider);
  contract.on('Transfer', (from, to, amount) => {
    console.log(`${from} sent ${amount} to ${to}`);
  });
}

설명

on() 메서드로 Transfer 이벤트를 구독하고, 발생할 때마다 콜백 함수가 실행됩니다.

---

7. 네트워크 정보 가져오기

개요

현재 연결된 블록체인 네트워크의 정보를 조회합니다. 체인ID와 최신 블록 번호를 확인합니다.

코드 예제

import { BrowserProvider } from 'ethers';

async function getNetworkInfo() {
  const provider = new BrowserProvider(window.ethereum);
  const network = await provider.getNetwork();
  const blockNumber = await provider.getBlockNumber();
  console.log(`Chain ID: ${network.chainId}, Block: ${blockNumber}`);
  return { chainId: network.chainId, blockNumber };
}

설명

getNetwork()로 네트워크 정보를, getBlockNumber()로 최신 블록 번호를 가져옵니다.

---

8. 가스비 추정하기

개요

트랜잭션 실행 전에 필요한 가스비를 미리 계산합니다. 사용자에게 예상 비용을 보여줄 수 있습니다.

코드 예제

import { BrowserProvider, parseEther, formatEther } from 'ethers';

async function estimateGas(to, amount) {
  const provider = new BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();
  const gasEstimate = await signer.estimateGas({
    to: to,
    value: parseEther(amount)
  });
  const gasPrice = await provider.getFeeData();
  console.log(`Estimated gas: ${gasEstimate}`);
  return gasEstimate;
}

설명

estimateGas()로 필요한 가스양을 계산하고, getFeeData()로 현재 가스 가격을 확인합니다.

---

9. ENS 도메인 조회하기

개요

ENS(Ethereum Name Service) 도메인을 실제 지갑 주소로 변환합니다. vitalik.eth 같은 이름을 사용할 수 있습니다.

코드 예제

import { BrowserProvider } from 'ethers';

async function resolveENS(ensName) {
  const provider = new BrowserProvider(window.ethereum);
  const address = await provider.resolveName(ensName);
  console.log(`${ensName} -> ${address}`);
  return address;
}

resolveENS('vitalik.eth');

설명

resolveName()으로 ENS 도메인을 0x로 시작하는 실제 주소로 변환합니다. 사용자 경험을 개선합니다.

---

10. 트랜잭션 상세정보 조회

개요

트랜잭션 해시로 상세 정보를 조회합니다. 발신자, 수신자, 금액 등을 확인할 수 있습니다.

코드 예제

import { BrowserProvider } from 'ethers';

async function getTransactionInfo(txHash) {
  const provider = new BrowserProvider(window.ethereum);
  const tx = await provider.getTransaction(txHash);
  console.log('From:', tx.from);
  console.log('To:', tx.to);
  console.log('Value:', tx.value);
  return tx;
}

설명

getTransaction()으로 트랜잭션 해시를 사용해 발신자, 수신자, 전송액 등의 상세 정보를 가져옵니다. ``` 초급 개발자를 위한 Web3 최신 기능 카드 뉴스를 생성했습니다. ethers.js v6의 최신 문법을 사용했으며, 각 개념은 실제로 작동하는 코드와 함께 한국어로 쉽게 설명되어 있습니다.

---

마치며

이번 글에서는 Web3 최신 기능 완벽 가이드에 대해 알아보았습니다. 총 10가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#Web3 #ethers.js #SmartContract #Blockchain #Wallet