1. 개발 환경 구축

1. 설치

npx hardhat

• Create a JavaScript project
• Set project root
• Do you want to add a .gitignore?: y
• Do you want to install this sample project’s dependencies with npm (hardhat @nomicfoundation/hardhat-toolbox)?: y

2. 컴파일

• 코드 변경이 일어난 후에는 compile을 해줘야 함
• 컴파일이 되면 /artifacts/에 컴파일 된 파일이 생성됨
  • 예) /contracts/Greeting.sol → compile → /artifacts/contrats/Greeting 관련 컴파일 된 파일들 생성됨

npx hardhat compile

3. 테스트

npx hardhat test

4. 실행

yarn hardhat node

2. front 개발 환경 구축

• hardhat 프로젝트 폴더에 생성

1. react 프로젝트 생성

npx create-react-app@latest frontend

2. Web3 기능을 React에서 사용할 수 있도록 하기 위한 여러 패키지 설치

• /frontend/package.json의 dependencies에 아래 목록 추가 후 npm install 또는 yarn 으로 패키지 설치

  "@web3-react/core": "^6.1.9",
  "@web3-react/injected-connector": "^6.0.7",
  "ethers": "5.5.2",
  "styled-components": "5.3.3"
  

3. Web3 기능을 Context로서 사용 가능하도록 /frontend/utils/provider.js 추가 및 /frontend/index.js에 import하여 <App /> 을 <Web3ReactProvider> 로 래핑

1. /frontend/utils/provider.js 생성 및 코드 입력

   import { Web3Provider } from '@ethersproject/providers';
   
   export function getProvider(provider) {
     const web3Provider = new Web3Provider(provider);
     web3Provider.pollingInterval = 1000;
     return web3Provider;
   }
   

2. index.js에 import 코드 추가 및 App 컴포넌트를 Web3ReactProvider 컴포넌트로 래핑 및 getLibrary 속성에 생성한 provider 함수 연결

   import { Web3ReactProvider } from '@web3-react/core';
   import { getProvider } from './utils/provider';
   

   <Web3ReactProvider getLibrary={getProvider}>
     <App />
   </Web3ReactProvider>