react NFT application 서사 1장

뒤지게 힘..

NFT를 보여주는 dApp 개발을 위한 리액트 뼈대를 설정해보자

먼저, 터미널에서 다음의 명령어를 입력해 프로젝트를 생성하고, 프로젝트 폴더를 VSCode에 연다

npx create-react-app web3-practice
code web3-practice

먼저 web3를 npm에서 설치해보자

cd web3-practice
npm install web3
//쭉 하다보면 오류가 뒤지게 많이 나온다. 나는 이렇게 해결했다.
npm install eth-lib
npm install web3-eth-accounts
npm install stream-browserify
npm install crypto-browserify
npm install assert
npm install stream-http
npm install os-browerify
npm audit fix --force

다했으면 vscode에 app.js를 들여다 보자
코드를 작성해볼까?

이더리움 객체 가져오기 부분!
EIP-1139를 통해 지갑 소프트웨어는 웹 페이지에 자바스크립트 객체 형태로 window.ethereum 객체를 제공한다고 배웠다. 이 window.ethereum은 공급자 객체이기 때문에 web3.js를 사용할 수 있다.

import './App.css'; //css 부터 불러와주고~
import Web3 from 'web3'; //web3 끌고오고
import React from "react" //react 불러오고~
import { useState, useEffect } from "react"; //우선 여기까지

//다음은 app 함수 부분 드가자
//공급자 객체 연결은 처음 한번만 하면 되기 때문에 useEffect()를 사용해 컴포넌트가 처음 마운트 되었을 때 web3 객체를 연결하도록 한다

function App() {
		const [web3, setWeb3] = useState();
    useEffect(() => {
        if (typeof window.ethereum !== "undefined") {
        	//window.ethereum이 있다면
            try {
                const web = new Web3(window.ethereum);  
                // 새로운 web3 객체를 만든다
                setWeb3(web);
            } catch (err) {
                console.log(err);
            }
        }
    }, []);
}//함수 알록달록하게 어떻게 설정함?..

지갑을 연결하자

지갑을 연결하려면 버튼을 눌러야지?
Connect to Metamask 버튼을 만들고 클릭하면 메타마스크 지갑을 연결하도록 해주자

//...
return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>

      <button
                className="metaConnect"
                onClick={() => {
                    connectWallet();
                }}
            >
                connect to MetaMask
            </button>
    </div>
  );
}

connectWallet()은 메타마스크로 부터 계정을 연결하고 계정 주소를 상태로 저장한다.

window.ethereum.request({method: 'eth_requestAccounts'}) 는 메타마스크 지갑과 연결된 계정 정보를 받는 JSON-RPC Call API 이다.

그리고 연결된 계정 주소를 화면에 출력도 해보자

//...
<button
                className="metaConnect"
                onClick={() => {
                    connectWallet();
                }}
            >
                connect to MetaMask
            </button>
            <div className="userInfo">주소: {account}</div>  
            // 연결된 계정 주소를 화면에 출력합니다

    </div>
  );
}

자 이렇게 하면 된다. 말은 쉽다. 탈모약은 하나씩 집에 구비해두는 걸 추천한다.