메타마스크 지갑 연결

최지수·2023년 9월 24일
post-thumbnail

🦊메타마스크란?

메타마스크란 이더리움(ETH) 등 가상자산(암호화폐)을 보관, 송금, 관리할 수 있는 지갑으로 구글 웹브라우저에서 플러그인 방식으로 사용되는 크롬 확장 프로그램이다.

메타마스크가 필요한 이유

가상자산 거래소 간 거래 시 메타마스크를 이용할 필요는 없다. 가상자산 거래소에 생성된 지갑으로 직접 가상자산을 이동시킬 수 있기 때문이다. 최근 활성화되고 있는 디파이나 nft등 다양한 형태의 서비스를 이용하고자 하는 경우 블록체인 상에서 활용이 자유로운 지갑이 있어야 하는 경우가 대부분이기에 메타마스크가 필요한 것이다.

👛메타마스크 지갑 연결

1. 패키지 설치

  • npm i ethers => ethers 모듈 설치
  • import { ethers } from 'ethers' => 설치 후 import ethers

2. connectWallet 함수 만들기

  • 메타마스크는 브라우저에 설치되어 window.ethereum 명령어를 통해 데이터를 전달한다.
  • 먼저 window.ethereum이 정의되어 있는지 확인하며 메타마스크가 설치되어 있는지 확인한다.
  • 만약 window.ethereum가 undefined가 아니라면 사용자의 브라우저에 메타마스크가 설치되었다는 것을 의미한다.
  • 메타마스크가 설치되어 있으면 getMetamaskData 함수를 호출하여 연결 정보를 가져오고 isConnected 상태를 설정한다.

  • getMetamaskData 함수는 메타마스크로부터 필요한 데이터를 가져오는데 사용된다. getProvider, getSigner, getWalletData 함수를 호출하여 연결된 지갑의 공급자, 서명자, 지갑 데이터를 가져온다.

  • 만약 window.ethereum가 undefined라면 사용자의 브라우저에 메타마스크가 설치되어 있지 않다는 것을 의미하므로 알림창이 뜨고 메타마스크 다운로드 페이지로 이동한다.

3. Provider 설정

블록체인 네트워크와 상호작용하기 위해서는 RPC 표준을 사용해야 한다.
이는 이더리움 네트워크에서 정한 표준이며, Provider는 이더리움 네트워크와 상호작용하기 위한 RPC 표준을 사용하기 편리하게 만들어 인터페이스를 제공한다.

  • ethers 모듈에서 제공하는 Web3Provider를 통해 메타마스크에서 제공하는 인터페이스를 저장할 수 있다.

4. Signer 저장

블록체인 네트워크에 메시지와 트랜잭션을 보낼 때 사용자는 지갑의 개인키를 통해 서명을 하여 같이 보낸다. 그리고 그 서명을 통해 네트워크 내부의 사용자 지갑 상태를 변경한다. 서명은 사용자의 개인키로 진행된다.

  • 'eth_requestAccounts' 메서드를 사용하여 메타마스크로부터 사용자의 계정에 대한 권한을 요청한다. 그리고 공급자로부터 서명자를 가져오고 서명자를 상태 변수에 설정하고 반환한다.

5. 지갑 정보 요청(주소/네트워크/잔액)

메타마스크로 요청을 보내서 현재 사용자의 지갑 주소와 연결된 네트워크 ID, 현재 보유 중인 코인 잔액 데이터를 얻어볼 수 있다.

  • signer.getAddress() => 지갑 주소(address)
  • signer.getBalance() => 현재 잔액(balance)
  • signer.getChainId() => 네트워크 ID

순서대로 현재 잔액, 네트워크 ID, 지갑 주소를 확인할 수 있다.


이제 실제로 메타마스크 지갑을 연결해보자!

1. connectWallet 버튼 클릭

지갑 연결 버튼을 클릭하면 메타마스크 설치가 되어 있지 않으면 알림창이 뜨고 다운로드 페이지로 이동한다.

다운로드 버튼을 클릭하여 메타마스크를 설치한다.

2. 지갑 생성

설치가 완료가 되면 새 지갑을 생성하거나 기존 지갑을 가져올 수 있는 시작하기가 뜬다.
만약 기존 지갑이 있다면 기존 지갑 가져오기 버튼을 클릭하여

본인이 보관해 놓은 비밀 복구 구문을 입력하여 지갑을 가져온다.

만약 지갑이 없다면 새 지갑 생성하기 버튼을 클릭하여 비밀번호를 생성한다.

이렇게 하면 지갑 생성에 성공한다. 여기서 알려주는 내용을 참고하여 비밀 복구 구문이 유출되지 않게 잘 보관한다.

3. 지갑 연결

지갑 생성이 완료가 되면 현재 사이트와 메타마스크를 연결한다.
계정과 사이트가 맞게 잘 연결이 되어 있는지 확인을 하고 연결 버튼을 클릭한다.

생성과 연결을 모두 마친 후 내 지갑에서 모든 정보를 확인 할 수 있다.

profile
오늘보다 내일 더 성장하는 개발자🌱

0개의 댓글