리액트 웹사이트 이더리움 전송

import logo from './logo.svg';
import './App.css';
import Web3 from 'web3';
import { useEffect,useState } from 'react';

function App() {
  const [web3, setWeb3] = useState();
  const [account,setAccount] = useState('');
  const [hash , setHash] = useState('');
  const [fromAccount,setFromAccount] = useState('');
  const [toAccount,setToAccount] = useState('');
  const [ethValue,setEthValue] = useState('');

  useEffect(()=>{
      if(typeof window.ethereum !== "undefined"){
        try{
          const web = new Web3(window.ethereum);
          setWeb3(web);
        }catch(err){
          console.log(err);
        }
      }
  },[]);

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

     setAccount(accounts[0]);
  }

  const inputChangeFrom=(e)=>{
    setFromAccount(e.target.value);
  }

  const inputChangeTo=(e)=>{
    setToAccount(e.target.value);
  }

  const inputChangeEth=(e)=>{
    setEthValue(e.target.value);
  }

  const SendEth = async()=>{
       // using the promise
     await web3.eth.sendTransaction({
        from: fromAccount,
        to: toAccount,
        value: web3.utils.toWei(ethValue,'ether')
      })
      .then(function(receipt){
        console.log(receipt.blockHash);
        setHash(receipt.blockHash);
      });
  }



  return (
    <div className='App'>
      <button onClick={connectWallet} >지갑연결</button>
         <div>주소 : {account}</div>
         <br/>
         <input type="text"  onChange={inputChangeFrom} placeholder ="보낼주소"/>
         <br/>
         <input type="text" onChange={inputChangeTo}  placeholder ="받을주소"/>
         <br/>
         <input type="text" onChange={inputChangeEth}  placeholder ="eth"/>
         <br/>
         <button className="ethBtn" onClick={SendEth}>이더 전송</button>
         <br/>
         
         <br/>
         <div className='tran'>트랜잭션 : {hash}</div>
    </div>
         
   
  );
}

export default App;

현재 나의 PC 환경은 윈도우 10이며 크롬 브라우저를 사용중이다. 그리고 MongoDB 서버 또한 설치되어 있으며 NodeJS 개발환경도 구축되어있다. 하지만 내가 원하는건 바로 JavaScript 를 이용하여 React 프로젝트를 진행하는것이었다. 이를 위해서는 우선 javascript 와 nodejs 의 연동이 필요했고 그러기위해서는 크로스브라우징 및 접근성 문제를 해결해야했다. 여기서 말하는 크로스브라우징이란 우리가 흔히 알고있는 IE 뿐만아니라 Chrome , Safari 등등 수많은 브라우져와의 호환성을 말한다. 쉽게말해 각 브라우져마다 다르게 표현되는 화면구성등을 통일시켜주는 작업인데 이것또한 여간 귀찮은 일이 아닐수없다. 그렇기때문에 요즘엔 이러한 크로스브라우징문제를 해결할수있는 방법론으로써 "Metamask" 라는 개념이 널리 알려지고있는데 Metamask 는 위 사진처럼 마치 자물쇠 모양같은 아이콘을 가지고있으며 다른 말로는 "Web3 Protocols" 라고도 한다. 그렇다면 Web3 Protocols 이란 무엇일까? 간단하게 말해보자면 기존 인터넷 프로토콜 (HTTP/HTTPS) 을 대체 할 새로운 프로토콜로써 이름 그대로 3세대라고 말할수있겠다. 그럼 앞으로 metamask 를 통해 어떻게하면 쉽고 빠르게 react 프로젝트를 진행할수있는지 차근차근 살펴보도록하자.

 

먼저 웹서버(Apache) 에 접속후 해당 폴더안에 index.html 파일을 생성하도록 하자. 이때 주의할점은 반드시 확장자명을 html 로 해줘야한다는것이다. 만약 그렇지않으면 실행시 에러가 발생하므로 이점 유의하도록하자. 다음으로는 메타마스크를 설치하는데 아래 링크를 클릭하여 공식홈페이지로 이동하도록하자. https://metamask.io/ 공식홈페이지 메인화면 좌측 상단에 보이는 Download 버튼을 클릭하여 다운로드 페이지로 이동하도록하자. 그러면 자동으로 압축파일이 다운로드되는데 알집 또는 반디집을 이용하여 압축을 풀어주도록하자. 이제 본격적으로 메타마스크를 설치해보도록하자. 앞서 다운받은 zip 파일을 더블클릭하여 열어주면 되는데 참고로 필자는 64비트 운영체제를 사용중이므로 x64 버전을 선택하였다. 이어서 Next 버튼을 눌러 계속 진행하도록하자. 중간에 나오는 약관동의 절차에서는 모두 체크표시를 하고 Finish 버튼을 누르면 된다. 마지막으로 비밀번호를 입력하라고 나오는데 아무거나 입력해도 상관없으니 편한걸로 지정해두도록하자. 이렇게 모든 과정이 끝나면 바탕화면에 생긴 MetaMask 아이콘을 더블클릭하여 실행시키도록하자. 정상적으로 작동되면 우측 하단에 녹색불이 들어온다. 혹시라도 빨간색 불이 들어온다면 네트워크 연결상태를 확인해보거나 방화벽설정을 해제해주어야한다. 아무튼 제대로 되었다면 환영메시지가 뜰텐데 가볍게 무시하고 Connect 버튼을 누르도록하자. 잠시 기다리면 왼쪽 사이드바에 지갑주소가 표시될것이다. 이곳에 방금 발급받은 주소를 복사 붙여넣기 하도록하자. 자, 이제 거의 다왔다. 조금만 더 힘을내자. 이번에는 오른쪽 사이드바에 위치한 Add New Wallet 버튼을 눌러서 새지갑을 추가해줄 차례다. Name 에는 알아보기 쉬운 이름을 적어주고 Keystore file 에는 아까 메모장에 저장해둔 키값을 넣어주자. 물론 암호화폐 거래소 계정정보나 개인키 값을 넣어도 무방하다. 다만 나중에 복구하려면 귀찮아지므로 가급적이면 안전한곳에 따로 보관해두길 권장한다. 어쨌든 정보입력이 끝났으면 Create a new wallet 버튼을 누르고 마무리짓도록하자. 짜잔~ 드디어 완료되었다. 뭔가 복잡해보이지만 직접 해보면 별거아니다. 일단 한번 익숙해지면 정말 편리하다는걸 느낄수있을것이다. 지금부터는 테스트를위해 간단한 명령어 몇가지를 알아보도록하자. 먼저 가상화폐거래소 사이트에 접속하여 이더리움 코인을 구매하도록하자.