지나가던 컴공생

- 이제 메인 페이지를 작성할 것이다. 우선 public 밑에 이미지 디렉토리를 하나 만들어 준다. - App 에서 account를 사용하기위해 - main을 수정해 준다. - mint 버튼을 눌렀을 때 mint를 할 수 있도록 하는 기능을 구현할 것이다. 우선 프론드 기초를 짜고 - 이제 버튼을 onClick을 했을 경우 실행되는 onClickMint 함수를 짜볼 것이다. import React, { FC, useState, } from "react"; import { Box, Text, Flex, Button } from '@chakra-ui/react'; import { mintSlimeTokenContract } from "../web3Config"; // 타입스크립트는 Props의 타입을 모두 ..

- web3 라이브러리를 설치하기 위해 frontend 디렉토리로 이동 후 npm i web3 web3-utils 명령어를 입력한다. web3는 간단하게 프론트엔드에서 스마트 컨트랙트를 불러오기 위한 라이브러리라고 생각하면 된다. - 설치가 완료 되었으면 frontend 디렉토리에 디렉토리를 하나 만들고 index.ts 파일을 하나 생성해 주고 아래 코드를 입력해 준다. - 입력후 리믹스에 들어가 ABI 코드를 받아올 것이다. 예를 들어 saleSlimeToken의 ABI를 받아오기 위해서는 아래 그림과 같이 컴파일러 탭의 컨트랙트에서 원하는 컨트랙트를 선택한 후 ABI를 누르면 코드를 복사할 수 있다. mint 컨트랙트도 마찬가지로 작성해준다. - 다음으로 Address를 가져와야 한다. 환경을 Inj..

- 프론트엔드를 세팅하기 위해 web3.js 용 boilerplate를 설치할 것이다(링크). - 링크의 깃 코드 주소를 복사하여 클론하고 받아온 디렉토리를 frontend로 이름을 바꾼다. 터미널에서 frontend로 디렉토리를 옮기고 npm install을 하면 프론트엔드 구현에 필요한 dependency를 설치할 수 있다. 설치 완료 후 npm run start로 잘 작동되는지 테스트를 해보자. - 작동을 확인했으면 chakra 홈페이지로 이동하여 create react app을 클릭하자. installation의 코드를 복사하여 설치한다. - Provider Setup의 밑줄친 부분만 복사하여 index.tsx에 붙여넣어 import해준다. - 이후 CharkraProvider로 App을 감싸주기..

- 판매 기능 스마트컨트랙트를 작성하기 위한 SaleSlimeToken.sol을 만든다. - 제대로 작동하는지 테스트를 해보자. 우선 MintSlimeToken을 deploy한 다음 주소를 복사한다. - 복사한 주소를 sale 컨트랙트에 입력하고 deploy를 하면 saleSlimeToken 컨트랙트가 생성된 것을 볼 수 있다. ref) https://www.inflearn.com/course/%EB%94%94%EC%95%B1-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/dashboard

- NFT를 만들거나 가상화폐를 만드는 행위를 Minting이라고 한다. - 이전 프로젝트에서는 Solidity로 스마트컨트 컨트랙트를 직접 작성하였는데, 이번에는 OpenZeppelin을 사용하여 좀 더 쉽게 작성해 볼 것이다. - 프론트 앤드는 React를 사용할 것이고 UI는 chakra를 사용할 것이다. Solidity와 React를 연결할 때에는 js의 Web3 라이브러리를 사용할 것이다. IDE는 vscode를 사용할 것이다. - 우선 contracts 디렉토리를 하나 만들고 OepnZeppelin을 설치해 준다(node.js 필요). npm i @openzeppelin/contracts - 그리고 remix를 설치해준다(링크). npm install -g @remix-project/remix..