개발자를위한 메타 마스크 : DAPP를 연결하는 방법?

메타 마스크 및 DAPP 개발에서의 역할 이해

Metamask 는 널리 사용되는 암호 화폐 지갑으로 사용자가 웹 브라우저를 통해 이더 리움 블록 체인 과 직접 상호 작용할 수 있습니다. 개발자의 경우 DAPPS (Decentralized Applications) 테스트 및 배포를위한 중요한 도구 역할을합니다. 지갑뿐만 아니라 Ethereum JavaScript API 의 제공 업체로서 DAPPS가 이더 리움 네트워크와 통신 할 수있게합니다.

DAPP를 구축하거나 연결할 때 메타 마스크가 제공자를 브라우저 환경에 주입하는 방법을 이해하는 것이 필수적입니다. 이 주입 된 제공자는 개발자에게 web3.eth.getAccounts () , web3.eth.sendTransaction () 등과 같은 함수에 액세스 할 수 있도록합니다. 사용자 권한을 요청하고 트랜잭션 서명을 처리 할 수있는 능력으로 인해 메타 마스크는 블록 체인 상호 작용과 관련된 프론트 엔드 개발에 필수 불가능합니다.

개발 환경 설정

DAPP를 메타 마스크에 연결하기 전에 개발 스택이 web3.js 또는 ethers.js 와 같은 JavaScript 기반 Ethereum 라이브러리를 지원하는지 확인하십시오. 이 라이브러리는 일반적으로 Metamask의 Ethereum 제공 업체와 인터페이스하는 데 사용됩니다.

• NPM : npm install web3
• 또는 기본 HTML/JS 설정에서 작동하는 경우 CDN 링크를 사용하십시오.

로컬 개발 서버가 실행 중인지 확인하십시오. Vite , Webpack Dev Server 및 VS Code의 Live Server 와 같은 도구는 적합한 옵션입니다. DAPP는 메타 마스크가 올바르게 감지하고 상호 작용할 수 있도록 HTTP 또는 HTTP를 통해 제공되어야합니다.

브라우저에서 메타 마스크 감지

메타 마스크는 이더 리움 객체를 브라우저의 전역 창 객체에 주입합니다. 이 개체를 검사하여 그 존재를 확인할 수 있습니다.

 if (typeof window.ethereum !== 'undefined') { console.log('MetaMask is installed!'); } else { console.log('Please install MetaMask to use this dApp.'); }

이 감지 단계는 지원되지 않는 브라우저에서 Metamask 기능을 호출 할 때 오류를 방지하기 때문에 중요합니다. 감지되면 사용자로부터 계정 액세스를 요청할 수 있습니다.

메타 마스크에서 계정 액세스 요청

사용자의 지갑과 상호 작용하려면 먼저 이더 리움 계정에 액세스 할 수있는 권한을 얻어야합니다. 이것은 일반적으로 ethereum.request ({method : 'eth_requestaccounts'}) 메소드를 사용하여 수행됩니다.

 const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); console.log('Connected account:', accounts[0]);

이렇게하면 Metamask에서 팝업이 발생하여 사용자에게 계정에 대한 액세스 권한을 부여 할 수 있습니다. 승인되면 DAPP는 사용자 지갑과 관련된 다양한 공개 주소를받습니다. 거부되면 약속이 거부되며 UI에서 이것을 우아하게 처리해야합니다.

이 요청은 버튼을 클릭하는 것과 같은 사용자 조치에 의해 트리거되어야한다는 점에 유의해야합니다. 브라우저는 보안상의 이유로 사용자가 시작하지 않은 요청을 차단합니다.

web3.js 또는 ethers.js를 사용하여 연결

메타 마스크를 감지하고 계정 액세스를 얻은 후에는 주입 된 제공자를 사용하여 Web3 인스턴스를 초기화 할 수 있습니다.

 const web3 = new Web3(window.ethereum);

또는 Ethers.js를 사용하면 다음 패턴을 사용하여 연결할 수 있습니다.

 const provider = new ethers.providers.Web3Provider(window.ethereum); const signer = provider.getSigner();

이러한 인스턴스를 사용하면 DAPP가 계약 데이터 읽기, 거래 전송 및 이벤트 듣기와 같은 다양한 작업을 수행 할 수 있습니다. 이벤트 리스너를 추가하여 항상 체인 변경 및 계정 변경을 처리하십시오.

 window.ethereum.on('chainChanged', (chainId) => { window.location.reload(); }); Window.Ethereum.on ( 'AccountsChanged', (계정) => { // 계정 변경을 처리합니다 });

거래 및 사용자 상호 작용 처리

연결이 설정되면 이제 DAPP가 트랜잭션을 보낼 수 있습니다. 다음은 web3.js를 사용하여 ETH를 보내는 예입니다.

 const transactionParameters = { to: '0x...', // Recipient address from: accounts[0], // Sender address value: Web3.utils.toHex(Web3.utils.toWei('0.1', 'ether')), }; 노력하다 { const txhash = await Window.Ethereum.request ({{

method: 'eth_sendTransaction', params: [transactionParameters],
 }); Console.log ( 'Transaction Hash :', txhash); } catch (오류) { console.error ( '트랜잭션 실패 :', 오류); }

Ethers.js를 사용하면 프로세스가 약간 다르게 보입니다.

 const tx = await signer.sendTransaction({ to: '0x...', value: ethers.utils.parseEther('0.1'), }); await tx.wait(); console.log('Transaction mined:', tx.hash);

로드 상태, 성공 메시지 및 오류 처리를 포함하여 이러한 작업 중에 사용자에게 항상 피드백을 제공하십시오.

자주 묻는 질문

Q : Metamask를 모바일 DAPP에 연결할 수 있습니까? 예, WalletConnect 프로토콜을 사용하여 Metamask Mobile을 통합 할 수 있습니다. 이를 통해 DAPP는 QR 코드 스캔 또는 딥 링크를 통해 메타 마스크와 통신 할 수 있습니다.

Q : 메타 마스크가 계정 액세스 권한을 부여하지 않으면 어떻게해야합니까? 버튼 클릭과 같은 사용자 제스처에 의해 요청이 시작되었는지 확인하십시오. 또한 메타 마스크가 잠금 해제되어 적어도 하나의 계정이 생성되었는지 확인하십시오.

Q : 실제 자금없이 메타 마스크로 DAPP를 테스트하려면 어떻게해야합니까? Rinkeby , Goerli 또는 Sepolia testnets를 사용하십시오. 메타 마스크 내 네트워크를 전환하고 수도꼭지에서 테스트 ETH를 요청하여 실제 상호 작용을 시뮬레이션 할 수 있습니다.

Q : 프로그래밍 방식으로 메타 마스크와 연결을 끊을 수 있습니까? 메타 마스크는 프로그래밍 방식의 연결을 지원하지 않습니다. 그러나 앱의 상태를 지우고 사용자에게 수동으로 다시 연결하라는 메시지를 표시 할 수 있습니다.