지나가던 컴공생

- 이제 메인 페이지를 작성할 것이다. 우선 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을 감싸주기..

- 저번에 이어 구매 컨트랙트를 작성해 볼 것이다. - payable을 붙여야 MATIC을 거래할 수 있는 메소드를 사용할 수 있다(폴리곤 네트워크). - safeTransferFrom(보내는사람, 받는사람, 무엇을 보낼것인가) 와 같이 사용한다. - 코드 작성을 완료하였으면 테스트를 해보자. - 우선 판매 컨트랙트 테스트와 똑같이 mint 컨트랙트를 deploy해서 나온 주소를 sale 컨트랙트에 붙여서 deploy한다. - 이후 mintSlimeToken을 하나 발행해 주고 - sale 컨트랙트의 주소를 복사하여 mint 컨트랙트의 setApprovalForAll의 operator에 입력하고 approved를 true로 하여 판매 승인을 하고 - 1번토큰의 가격을 10으로 설정하여 판매 등록을 한다...

- 판매 기능 스마트컨트랙트를 작성하기 위한 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..

- 지금가지의 화면 구현은 클래스로 리액트 컴포넌트를 만들고, 리액트 부트스트랩으로 화면 요소를 구성하였다. (js + html + css 등) - 그렇다면 화면에서 어떻게 이더리움에 배포된 컨트랙트와 상호작용을 할까? 바로 자바스크립트의 web3 라이브러리가 연결고리이다. - 트러플 리액트 박스의 역할이 개발에 필요한 모듈들도 패키지로 제공해 주지만, 추가로 이러한 연결고리들을 함수로 구현해 놓은 것을 제공하는 것이다. - 우리는 메타마스크를 통해서 이더리움의 트랜잭션을 보내는데 이것을 "Injected web3" 라고한다. app은 어느 이더리움 네트워크에 연결하는지에 대한 설정 근거를 가지고 있지 않다. 이 설정을 메타마스크에서 하는것이다. - 트러플에서 컴파일한 결과물 즉, json 형태의 파일(..

- 리액트는 컴포넌트 상태(start)로 내부 상태를 관리한다. 만약 컴포넌트의 state를 변경하면(setState) 다시 렌더링된다. (이벤트 -> state 변경 -> 렌더링) - 우선 홈페이지를 귀여운 도지로 조금 꾸며보았다. 부트스트랩 버전에 따라서 사용법이 상이하므로 독스를 참고 바란다. 필자는 5버전 이상을 사용하였다. docs : https://getbootstrap.com/docs/5.0/forms/overview/ - CoinFlip.js에 컴포넌트 상태 코드를 넣어주자. // 컴포넌트 상태 state = { web3: null, accounts: null, contract: null, value: 0, checked: 0, // radio button houseBalance: 0, s..

- 사실 여기서부터는 버전 이슈때문에 인프런 강의와는 달라져서 강의와 다소 상이할 수 있다. - 이제 화면을 본격적으로 구성해 볼 것이다. 우선 동전의 앞, 뒤, 그리고 unknown 이미지를 public 폴더에 넣어준다. 그리고 src에 CoinFlip.js, src/css에 style.css 파일을 생성해준다. 우선 CoinFlip.js 파일을 작성하자 # CoinFlip.js import React, {Component} from "react"; import {Container, Row, Col, Panel, Image} from 'react-bootstrap'; import "./css/bootstrap.min.css"; import "./css/style.css"; class CoinFlip e..

- 이 Dapp의 화면을 구성하기 위해서 리액트의 부트스트랩을 사용할 것이다. 화면구성에 대한 대략적인 그림은 다음과 같다. - 프로젝트의 구조이다. public 폴더안에 index.html이 메인 홈페이지를 담당하는 html코드이고, src에 index.js가 리액트 관련 코드이다. - 아래는 화면을 구성하는 코드의 예이다. - 이제 react-bootstrap 모듈을 설치하자. 설치는 client 디렉토리에서 npm install react-bootstrap 명령어를 통해 설치할 수 있다. 이후 client/src 디렉토리에 bootstrap의 css와 fonts 파일들을 복사한다(링크). 다음으로 App.js를 약간 수정해준다. #App.js import React, { Component } fro..