[강의정리] D.P. 프론트엔드 작성하기

React.js

작성한 NFT, 스마트컨트랙트와 연결할 프론트엔드를 생성하기 위해 React.js를 활용한다.

chakraUI

react app을 위한 UI 라이브러리로 비교적 최근에 만들어졌으며, 쉬운 접근성을 가졌다.

//설치 명령어
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

1. 최상위파일에 프로바이더 작성

import { ChakraProvider } from "@chakra-ui/react";

ReactDOM.render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
  document.getElementById("root")

index.js 혹은 App.js의 최상위에 감싸도 동일하게 작동함

2. react-app-rewired 설치

react-app-rewired는 CRA로 생성한 프로젝트를 커스텀할 수 있도록 도와주는 디펜던시이다. yarn eject와 같은 명령어를 활용하여, 커스텀을 진행할 수 있으나 이 경우 CRA가 설정해주는 모든 기본설정을 직접 관리해야하며, 패키지를 추가할 때 다른 패키지와의 의존, 충돌 역시 직접 관리해야한다.

react-app-rewired는 제한적으로 커스텀하는 대신, CRA의 장점을 잃지 않기 위한 방법 중 하나다.

npm i react-app-rewired

yarn add react-app-rewired

그리고 package.json의 스크립트 명령어 실행 주체를 react-script에서 react-app-rewired로 변경해주면 된다.

//package.json 

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

3. config-overrides.js 파일 생성

프론트엔드 프로젝트 최상위 디렉토리에 config-overrides.js 파일을 생성하고 아래와 같이 코드를 작성했다.

module.exports = function override(config, env) {
  config.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto",
  });

  return config;
};

오류정리

뭐지?!

해법

yarn add react-dom@latest react@latest

디펜던시들의 버전이 변경되었다!

4. react-router-dom 설치

npm i react-router-dom

yarn add react-router-dom

react-router-dom을 설치하고, 라우팅을 위한 컴포넌트를 불러오면 된다.

import {BrowserRouter, Routes, Route} from "react-router-dom"

const App: FC = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />}/>
      </Routes>
    </BrowserRouter>
  )
};

MetaMask

디지털자산을 보유하는 방식으로는 다양한 경로가 있습니다.
1) 가상자산 거래소에서 생성되는 지갑에 보관하는 방법
2) 하드월렛 같은 물리적 보안을 갖춘 지갑에 넣어두는 방법
3) 웹 브라우저의 확장프로그램 등을 설치하여 이용자가 온라인상에서 직접 디지털자산 지갑을 생성하고 관리하는 방법


메타마스크란 이더리움(ETH) 등 가상자산(암호화폐)을 보관, 송금, 관리할 수 있는 지갑으로 구글 웹브라우저에서 플러그인 방식으로 사용되는 크롬 확장 프로그램입니다.


가상자산 거래소 간 거래 시 메타마스크를 이용할 필요는 없습니다. 가상자산 거래소에 생성된 지갑으로 직접 가상자산을 이동시킬 수 있기 때문인데요. 최근 활성화되고 있는 디파이나 nft 등 다양한 형태의 서비스를 이용하고자 하는 경우 블록체인 상에서 활용이 자유로운 지갑이 있어야 하는 경우가 대부분이기에 메타마스크가 필요한 것입니다.

1. 메타마스크 설치

---

2. 코인지갑 생성하기

생성된 단어
letter veteran demand kind time cave salon present device page strategy stone
(공개하면 모두의 지갑~)

생성완료!

---

3. 테스트용 폴리곤 네트워크 생성

오류

체인 ID가 틀렸다고 나옴.. 확인 해보니 URL이 404!

강좌에 나온 URL로 변경..ㅎ

성공!

Web3.js

web3는 프론트엔드에서 스마트컨트랙트를 읽어오기 위한 라이브러리다.

1. web3, web3-utils 설치

npm i web3 web3-utils

yarn add web3 web3-utils

2. contracts 디렉토리 및 index.ts 생성

index.ts에 코드 작성

AbiItem import - AbiItem은 Abi라는 스마트컨트랙트의 인터페이스의 타입이 정의된 문서

import { AbiItem } from "web3-utils"

const mintAnimalTokenAbi: AbiItem[];
const saleAnimalTokenAbi: AbiItem[];

두 abi값은 remix에서 복사해올 수 있음, 복사해서 할당 해주기.

쉽지 않다ㅎ

똑같이 두 토큰의 주소 값을 가져와야 하는데, 그러려면 배포가 필요하다.

배포를 눌렀더니 비용이 드는데, 문제는 아까 과거의 테스트 네트워크 url을 적은 바람에 테스트용 토큰이 발행되지 않는 문제가 발생했다.

sigh...

마무리

어렵

참고문서

인프런 디앱 프로젝트 - 프론트엔드 셋팅 1
스택오버플로우 - 오류 해결방법
업비트 투자자보호센터 - 메타마스크란 무엇인가?
Polygon - Network Endpoint