React와 Web3의 만남-1

맥북 새로 사고 이것저것 세팅하느라(+노느라) 시간을 많이 잡아 먹어서
주말 동안 빠르게 빠르게 해봅시당!!! (일도 해야 하는데.. 열일해라 350만원)

React기반 NTF dApp 개발

React 기반이므로 우선 프로젝트를 생성해야겠지?

npx create-react-app <프로젝트명>
code <프로젝트명>

web3를 사용하므로 npm install web3를 해주면 되는데
여기서 에러가 진짜 눈물나게 난다

모듈이 없다고 해서 시키는대로 npm install 블라블라를 해줘도
안된다고 빼액빼액 거리면서 절대 안 되었고

난 그저 눈물을 흘리며 소파에 가서 드러누워 버렸다

✅해결 방법✅

eth-lib
web3
web3-eth-accounts
stream-browserify
crypto-browserify
assert
stream-http
os-browserify

위에 것들을 모두 npm install 해주면 된다,,,

이더리움 객체 가져오기

import {useState} from 'react';
import Web3 from '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);
            }
        }
    }, []);
}

EIP-1139를 통해 지갑 소프트웨어는 웹페이지에 자바스크립트 객체 형태로
window.ethereum 객체 제공 (공급자 객체이므로 web3.js 사용 가능)

공급자 객체 연결은 한 번만 해주면 되므로 useEffect()로
컴포넌트가 처음 마운트되었을 때 web3 객체를 연결하도록 함

지갑 연결하기

	const [account, setAccount] = useState('');
	// ...

	const connectWallet = async () => {
        accounts = await window.ethereum.request({
            method: "eth_requestAccounts",
        });

        setAccount(accounts[0]);
    };

connectWallect()
: 메타마스크로부터 계정을 연결하고, 계정 주소를 상태로 저장

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

✅JSON-RPC✅

JSON RPC는 웹 클라이언트에서 웹 서버에게 데이터 요쳥을 위해 XMLHttpRequest 사용하는 것과 같은 개념

웹에서 클라이언트가 XMLHttpRequest라는 정해진 형식에 맞춰서 서버에 데이터 요청
이더리움에서는 클라이언트가 JSON RPC라는 정해진 형식에 맞춰서 이더리움 노드에 데이터 요청

버튼을 하나 만들어서 onClick 발생 시, connectWallet()이 실행되도록 하자

npm start에서 에러 안 나오고 실행될 때, 나 울 뻔

버튼을 누르면 메타마스크 지갑에서 연결한 계정을 선택하도록 팝업창이 나오고
계정을 연결하면 주소가 나온다

🦊메타마스크 지갑 연결 끝!🦊