MetaMask

MetaMask는 암호화폐 및 NFT 지갑이다.
dApp에서 MetaMask SDK 및 API를 사용하여 다양한 기능을 이용할 수 있다.

MetaMask가 연동되어 있는 브라우저에서 콘솔로 window.ethereum을 찍으면 뜨는걸 확인할 수 있다

MetaMask SDK 설치

MetaMask SDK를 설치하면, dApp와 MetaMask 브라우저 확장자 및 MetaMask Mobile를 안전하고, 안정적이고 끊김 없이 연동해준다.

npm i @metamask/sdk-react

SDK를 설치한 후, index.js 스크립트 파일에 import 해준다.

import { MetaMaskProvider } from '@metamask/sdk-react';

root 컴포넌트를 MetaMaskProvider로 감싸주고, 옵션을 설정해준다.

• index.js > <MetaMaskProvider><App /></MetaMaskProvider>
  

MetaMask SDK 사용

React 컴포넌트에 useSDK hook를 사용해준다.

const { sdk, connected, connecting, provider, chainId } = useSDK();

• sdk: MetaMask 연결 및 동작을 가능하게 해주는 Main SDK 객체
• connected: dApp이 MetaMask에 연결되어 있는지 나타내는 Boolean 값
• connecting: 연결 중인지 나타내는 Boolean 값
• provider: Ethereum 블록체인과의 로우 레벨 상호작용에 사용할 수 있는 provider 객체
• chainId: 현재 연결된 블록체인의 체인 ID

토큰 주고 받기

메타마스크에서 토큰을 지갑 주소간 주고 받을 수 있다
transfer 받을 사람의 지갑 주소를 알아야한다
받을 때는 보낸 상대의 스마트컨트랙트 주소와 token symbol을 알아야한다

---

Remix

The Native IDE for Web3 Development.
https://remix.ethereum.org/

스마트컨트랙트 생성 방법

컴파일을 통해 Solidity 코드에서 Ethereum 에서 실행할 수 있는 코드로 변환해준다

SOLIDITY COMPILER > Auto compile 활성화

DEPLOY & RUN TRANSACTIONS > Remix VM (Shanghai) 가상 블록체인으로, 새로고침하면서 사라지는 계정과 연동된다(테스트용!)

• files > connect to local host > remixd installation
  npm install -g @remix-project/remixd

• vscode > contracts 폴더 > remixd -s . --remix-ide https://remix.ethereum.org

  • vscode를 remix ide와 연동시켜준다
  • 스마트컨트랙트만 작업할 계획이기 때문에 contracts 폴더와 연동한다

• MyFirstContract.sol 파일 생성 - 하나의 파일에 컨트랙트가 여러 개 들어갈 수 있지만, 이 프로젝트에서는 한 파일당 한 컨트랙트로 진행함

• SPDX-License-Identifier pragma solidity ^0.8.23; 설정

• solidity 는 변수의 타입을 명시해줘야 한다

다른 스마트컨트랙트 실행 방법

• 코드가 동일해야한다 (코드를 알아야한다)
• 배포된 컨트랙트 주소를 At Address 에 넣어주고 실행하면, 다른 사람이 만들어놓은 스마트컨트랙트의 함수를 불러오고 실행할 수 있다

---

ERC-20

✨ ERC-20: Ethereum Request for Comment 20
이더리움에서 사용하는 토큰 표준 인터페이스

• 최소단위(데시멀) Wei, 최대단위 Ether(10^18 wei)

⚡️EIP20: Ethereum Improvement Proposal 20
이더리움 커뮤니티에게 정보를 제공하거나 이더리움 프로토콜에서 변경되거나 추가된 내용을 공유하는 설계 문서.

• 이더리움 블록체인상에서 ERC-20 토큰의 표준 인터페이스

Inheritance

스마트 컨트랙트는 주로 상속을 통해 사용되며, 토큰을 발행할 때에도 ERC-20을 재사용해서 기본적인 표준을 적용하고 _name, _symbol 등 매개변수를 선택적으로 추가할 수 있다.

• is : 부모에 구현되어 있는 기능을 받아와서 자식에 사용하겠다는 의미
  contract MintToken is ERC20

• constructor : 배포되는 시점에 한 번만 실행되는 생성자

  • visibility internal: 부모와 상속받은 자식만 사용할 수 있음
  • msg.sender: Solidity에서 사용되는 전역 변수로, 해당 ERC-20 컨트랙트를 배포한 주소를 의미한다.
  • initialSupply: wei 단위로 발행해야 한다.
    • 수식 -> initialSupply * 10 ** 18
    • 일관성과 표준화를 위해 ether의 가장 작은 단위인 wei를 사용한다

---

React

소스맵 제거

생성되는 이유: create-react-app으로 React 프로젝트를 빌드하여 배포하는 경우, 기본적으로 webpack에 의해 번들링 된 파일과 해당 파일에 대응되는 sourcemap이 생성됩니다.
제거해야 하는 이유:
1. 내부 코드가 노출됩니다.
2. 빌드 시 메모리 부족(OOM) 이슈가 발생할 수 있습니다.
(출처)

• .env 파일에 GENERATE_SOURCEMAP=false 한 줄 추가해준다