NFT Dapp 개발 연습 #5(프론트엔드 세팅2)

- web3 라이브러리를 설치하기 위해 frontend 디렉토리로 이동 후 npm i web3 web3-utils 명령어를 입력한다.

  web3는 간단하게 프론트엔드에서 스마트 컨트랙트를 불러오기 위한 라이브러리라고 생각하면 된다.

 

- 설치가 완료 되었으면 frontend 디렉토리에 디렉토리를 하나 만들고 index.ts 파일을 하나 생성해 주고 아래 코드를

  입력해 준다.

 

- 입력후 리믹스에 들어가 ABI 코드를 받아올 것이다. 예를 들어 saleSlimeToken의 ABI를 받아오기 위해서는 아래 그림과 같이 컴파일러 탭의 컨트랙트에서 원하는 컨트랙트를 선택한 후 ABI를 누르면 코드를 복사할 수 있다.

mint 컨트랙트도 마찬가지로 작성해준다.

 

 

- 다음으로 Address를 가져와야 한다. 환경을 Injected Web3로 설정하면 메타마스크 로그인 창이 뜬다.

 

 

 

- 로그인 후 폴리곤 테스트넷을 들어간다. 폴리곤 테스트넷은 아래와 같이 설정한 후 네트워크를 추가하면 된다.

 

 

 

- 테스트넷 코인을 얻는 방법은 링크에서 주소를 입력한 후 submit을 하면 1 MATIC을 테스트넷 지갑으로 보내준다.

 

- 폴리곤을 얻었으면 mint 컨트랙트를 Deploy 해준다. 배포를 완료하면 Deployed Contracts에 올라오게 되는데

  이는 실제 테스트넷에 올라간 스마트 컨트랙트임을 의미한다. 

 

- 이후 sale 컨트랙트도 배포해 준다. 입력 값은 mint를 배포하고 난 주소를 입력하면 된다.

 

- 배포가 완료되면 index.ts에 mint와 sale 주소를 받는 상수를 선언하고 컨트랙트 주소를 입력해주고

  web3를 import한다.

 

 

- contracts 폴더를 src 하위 디렉토리로 옮겨주고, report-app-env.d.ts를 확인한다.

  이 파일은 메타마스크를 리액트에서 인식할 수 있게 타입을 적어주는 스크립트이다. 아마 자동으로 생성되어

  있을 것이니 걱정은 안해도 된다.

 

 

- index.ts를 마저 작성해 준다.

 

- 실행하기 전에 프론트엔드에서 결과를 확인하기위해 App.tsx를 수정해준다.

 

- 실행 후 메타마스크 로그인을 요구 하는지, F12를 눌러 console에 주소 로그가 남았는지 확인하면 된다.