Web3는 확실히 여기에 있습니다. 비트코인, 이더리움, 솔라나 등 수많은 네트워크가 빠르게 성장하고 있으며 모든 앱이 그 위에 구축되고 있습니다.

JavaScript 개발자이고 Web3에 발을 담그고 싶다면 첫 번째 단계는 Metamask를 설치하는 것입니다. 여기에서 Metamask가 브라우저에 삽입하는 window.ethereum 개체에서 사용할 수 있는 API 메서드 중 하나를 사용할 수 있습니다.

모든 Web3 프로젝트는 일반적으로 지갑 연결로 시작됩니다. Web3에서 지갑은 사용자 계정과 비슷하지만 Gmail, Instagram, TikTok과 같은 중앙 집중식 서비스의 계정과 달리 지갑은 분산 네트워크 자체의 핵심 부분입니다. Metamask는 프록시 역할을 하여 네트워크와 더 쉽게 상호 작용하고 지갑 생성과 같은 작업을 수행할 수 있도록 해줍니다. 지갑을 만드는 다른 방법도 있지만 메타마스크가 가장 일반적입니다.

이를 염두에 두고 사용자가 지갑을 연결할 수 있는 웹 애플리케이션을 구축해 보겠습니다.

전제 조건

브라우저에 Metamask 확장 프로그램을 설치하거나 모바일 장치에 해당 앱을 다운로드해야 합니다. 두 옵션 모두 작동합니다.

도표

웹 애플리케이션의 흐름을 개략적으로 설명하는 다음 다이어그램을 살펴보겠습니다.

논리

논리는 간단하며 다음 단계로 구분됩니다.

• 메타마스크가 설치되지 않은 경우: 메타마스크 다운로드 링크를 표시합니다.

이것은 간단합니다. Metamask가 설치되면 window.ethereum 객체를 주입합니다. 이 개체가 없으면 메타마스크가 설치되지 않았거나 활성화되지 않았다고 가정할 수 있습니다.

• 지갑이 연결되지 않은 경우:지갑을 연결하는 버튼을 표시합니다.

window.ethereum을 사용할 수 있는 경우 사용자가 지갑을 연결할 수 있도록 "연결" 버튼을 표시할 수 있습니다.

• 지갑이 연결된 경우: 지갑 주소를 표시합니다.

window.ethereum이 제공하는 주요 방법 중 하나는 다음과 같은 계정을 요청하는 데 사용할 수 있는 요청입니다.

   const accounts = await window.ethereum?.request({
     method: "eth_requestAccounts",
     params: [],
   });

   setAddress(accounts[0]);

이는 사용자에게 지갑 액세스를 요청하는 메시지를 표시합니다. 권한을 부여하면 메서드는 계정 배열을 반환합니다. 작업을 단순화하기 위해 첫 번째 계정을 가져와서 주소를 표시하겠습니다.

데모

메타마스크를 설치하지 않고 데모를 열면 다음과 같은 내용이 표시됩니다.

메타마스크를 설치하면 "연결" 버튼이 표시됩니다. 클릭하면 Metamask에서 연결할 계정을 선택하라는 메시지가 표시됩니다. 시각적 예를 보려면 다음 GIF를 확인하세요.

최종 상태에 지갑 주소가 어떻게 표시되는지 확인하세요. 이 데모는 매우 간단하지만 모든 Web3 애플리케이션에는 연결된 지갑이 필요합니다. Web3 통합을 단순화하는 RainbowKit 및 WAGMI와 같은 훌륭한 라이브러리가 있습니다. 하지만 이 데모에서는 동일한 결과를 얻기 위해 일반 Metamask API 메서드를 사용하고 있습니다. 물론 사용자가 액세스를 거부하거나 여러 계정을 가지고 있는 경우 어떻게 되는지 등 제가 아직 처리하지 못한 극단적인 경우가 많이 있습니다. 이는 발생할 수 있는 다양한 시나리오의 몇 가지 예일 뿐입니다.

암호

GitHub에서 전체 코드를 찾을 수 있습니다.

"use client";

import { MetaMaskInpageProvider } from "@metamask/providers";

import { useState, useEffect } from "react";

declare global {
  interface Window {
    ethereum?: MetaMaskInpageProvider;
  }
}

function Button(props: { connectWalletHandler: () => void; address: string }) {
  const styles = {
    display: "inline-block",
    padding: "20px 40px",
    border: "5px solid black",
    fontSize: 24,
    cursor: "pointer",
  };

  if (props.address) {
    const shortAddress = `${props.address.slice(0, 7)}...${props.address.slice(
      -5
    )}`;
    return 
Wallet: {shortAddress}
;
  }

  if (window.ethereum) {
    return (
      

        Connect wallet
      
    );
  }

  return (
    
      Install Metamask
    
  );
}

export default function Page() {
  const [clientSide, setClientSide] = useState(false);
  const [address, setAddress] = useState("");

  const connectWalletHandler = async () => {
    const accounts = await window.ethereum?.request({
      method: "eth_requestAccounts",
      params: [],
    });

    if (!Array.isArray(accounts) || !accounts.length) {
      return;
    }

    setAddress(accounts[0]);
  };

  useEffect(() => {
    setClientSide(true);
  }, []);

  if (!clientSide) {
    return >;
  }

  return (
    

      
    
  );
}

결론

이것은 매우 기본적인 데모였으며 대부분의 코드는 표준 React입니다. 실제로 Web3와 관련된 유일한 줄은 다음과 같습니다.

await window.ethereum?.request({
  method: "eth_requestAccounts",
  params: [],
});

메타마스크에 대한 대안이 있으며, 이러한 지갑은 API와 상호작용하기 위해 window.ethereum과 유사한 객체도 주입합니다.

앞서 언급한 것과 같이 Web3 통합에 필요한 대부분의 상용구를 처리하고 비즈니스 및 UI 로직에 집중할 수 있는 라이브러리를 언제든지 선택할 수 있습니다.

Web3는 아무데도 가지 않을 것이며 결국에는 이를 프로젝트 중 하나에 포함해야 할 것입니다. 당신이 암호화폐 매니아가 될 수도 있다는 걸 누가 알겠습니까! 만약 그렇다면, 이것이 여러분의 여정을 시작하는 방법입니다.

모래밭

• 데모
• 코드베이스