BlockChain

ERC20 토큰을 개발하기 위해 쉘 명령어로 여러 작업들을 진행합니다. 

npx create-react-app erc20

npm i truffle

npx truffle init

1. npx create-react-app erc20 

cra 를 이용하여 erc20 개발을 위한 세팅을 진행합니다.

2. npx i truffle

로컬에서 테스트를 진행하기 위해 truffle을 다운받습니다.

3. npx truffle init 

truffle을 초기화합니다.

npx truffle init 을 진행하면 초기 세팅이 되는데 3개의 폴더가 생깁니다. 

3- 1. contracts 폴더 : 솔리디티 코드들을 작성한 sol 파일을 담아 놓을 폴더, 컴파일을 진행하면 build 라는 폴더가 생기고 컴파일된 파일들이 json 형태로 생성됩니다.

3-2. migrations 폴더 : 컨트랙트 배포를 진행할 js 코드 구문 작성

3-3. test 폴더 : 테스트 파일 작성 폴더.

4. truffle.config 

- 네트워크 속성과 솔리디티 컴파일 버전 정보 명시

5. 컴파일 

- contracts 폴더에 솔리디티 파일을 작성하고 

npx truffle compile

- .build 폴더가 생성되고 컴파일된 내용이 json 파일로 생성된다.

- 배포를 하거나 컴파일을 진행하면 json 파일의 내용이 변경된다. 

- 컴파일 -> 배포

npx truffle migrate

# remix로 배포하기

- 우리 로컬 디스크에 있는 파일의 내용을 요청으로 보내서 remix 환경에서 쉽게 배포를 진행할 수 있다. 

- 

npm i -g @remix-project/remixd
# 우리 디스크 폴더 경로의 파일들을 요청
remixd -s "터미널 상에서 어느 경로를 보낼지" --remix-ide "어디의 remix 페이지 경로에 보낼지"

remixd -s "./contracts" --remix-ide "https://remix.ethereum.org/"

remix -s . --remix-ide "https://remix.ethereum.org/"
# 페이지에서 요청을 받아주길 대기중인 상태

# remix 페이지에서 connect to localhost

위와 같은 설정을 한 후에 remix 에서 

상단의 실행환경을 metamask에 provider로 바꾸어주고 자신의 로컬 환경 ganache의 환경으로 바꾸어준다면 자신의 로컬 폴더 내에 있는 sol 파일들을 remix로 호출하여 배포를 편리하게 할 수 있다. 

ERC20 

- ERC20 Ethereum Request for Comments 약자 

- ERC20에서 20은 특정 제안의 번호를 매긴 것. 토큰의 생성이나 발행등의 규칙을 의미

- 코드의 내용이 작성되어있는 제안

- 숫자는 큰 의미 없고 제안의 식별의 숫자라고 보면 된다. 

오늘은 솔리디티툴인 REMIX와 OPEZEPELIN을 이용하여 ERC20 표준을 따르는 토큰을 만들어 보자! 

아주 쉽고도 간단하면 누구나 10초만에 코드를 만들 수 있다. 토큰을 만드는 것은 그렇게 어려운 행위가 아니며 이더리움과 여러 체인들에 많은 토큰들이 생겨 나고 있다. ERC20은 그중 EIP20에서 올라온 이더리움 개선 제안을 통해 현재는 STANDARD 즉 토큰 표준으로 사용되고 있다. 아래의 코드를 보고 간단하게 토큰을 개발하며 어떤 의미가 있는지 이해해 보자. 

// SPDX-License-Identifier: MIT
pragma solidity 0.8.16;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract SnowmenToken is ERC20 {
    uint256 private constant MAX_SUPPLY = 1_000_000_000 * 10 **18;
    constructor() ERC20("Snowmen","SNOW"){
        _mint(msg.sender, MAX_SUPPLY);
    }
}

1. 솔리디티 버젼을 설정한다.

2. 오픈제플린의 ERC20 토큰 표준라이브러리를 장착

3. SnowmenToken을 ERC20 표준을 상속받아서 만드는 컨트랙트 작성

총 공급량은 10억 개로 설정하고, constructor 생성자에 토큰의 이름인 Snowmen과 티커명인 SNOW를 써주고 민트를 사용하여 msg.sender 즉 민트주체가 총공급량을 소유하게 한다. 이때 민트는 토큰을 주조한다, 만든다 정도로 이해하면 좋다. 아래글에 NFT 민트에 대한 실사용 사례도 있다.

https://r-blockchain.tistory.com/18

이렇게 쉽게 이미 만들어진 라이브러리들과 토큰 표준을 이용하여 블록체인 네트워크 상에서 동작할 수 있는 스마트 컨트랙트 즉, 스마트한 계약을 작성함으로 우리가 만든 토큰들을 블록체인 네트워크 상에서 사용할 수 있다.  아래는 실제 ERC20 토큰표준의 EIP 개선제안으로 EIP 읽어주는 남자 세션에서 설명하겠다. 

https://eips.ethereum.org/EIPS/eip-20

목차. 
1. 동등연산자 (==, ===)로 문자열 비교
2. 문자열 크기 비교 (>. < 연산자)
3. 문자열에 어떤 문자열이 포함 되어 있는지 확인 : String.indexOf()
4. 문자열에 어떤 문자열이 포함 되어 있는지 확인 : String.includes()
5. 문자열이 어떤 문자열로 시작하거나 끝나는지 확인 : String.startsWith(), String.endsWith()

1. 동등 연산자 (==, ===) 문자열 비교

    1. == Equality 비교, === Identity 비교 
    2. == 비교하는 객체의 타입이 달라도, 형변환하여 값이 같은면 true를 리턴
    3. === 는 객체 타입이 같곡 값이 같을 때 true 리턴

2. 문자열 크기 비교 (>, < 연산자 )

    1. > , < 연산자에서 문자열의 크기 비교는 ASCII 코드로 결정.
    2. 문자열이 길어도 같은 위치 INDEX의 문자의 알파벳 순서가 작다면 문자열의 크기가 작다고 계산 
    3. 문자열 길이가 짧아서 INDEX에 문자가 없으면 더 작은 문자열 계산 

3. 문자열에 어떤 문자열이 포함되어 있는지 확인 : String.indeOf()

    1. str.indexOf(문자열) ! = -1 : 인자로 전달된  문자열이 안에 존재한다면 그 문자열이 위치한 Index를 리턴
    2. 존재하지 않는다면, -1 리턴. -1이 리턴되는지 여부로 문자열이 포함되었는지 판단.

4. 문자열에 어떤 문자열이 포함되었는지 확인 : String.includes()

    1. String.includes()를 이용하여 문자열에 어떤 문자열이 포함되었는지 확인 가능
    2. 인자로 전달된 문자열이 안에 존재한다면 true가 리턴, 존재하지 않는다면 false 리턴

5. 문자열이 어떤 문자열로 시작하거나 끝나는지 확인: String.startsWith(), Sting.endWith()

    1. startWith()는 문자열이 인자로 전달된 문자열로 시작할 때 true 리턴 endWith()는 그 반대.

아래글 참고

https://codechacha.com/ko/javascript-compare-strings/

오늘은 MultiCall에 대해 코드예제와 함께 정리해보겠다.

블록체인에서 MultiCall이란 한 번의 트랜잭션으로 여러 스마트 컨트랙트 함수를 호출하여 블록체인 네트워크에 효율적으로 처리할 수 있는 방법을 제공하는 것이다. 이와 같이 블록체인 지갑등에서 자신의 잔고를 확인하거나 체크하는 용도로 많이 쓰이고 있다. 아래 멀티콜 예제를 보면 하나하나 어떤 내용이 있는지 확인해보자.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

interface IERC20 {
    function balanceOf(address account) external view returns (uint256);
}

interface Multicall {
    function aggregate(
        call[] calldata calls
    ) external returns (uint256 blockNumber, bytes[] memory returnData);
}

struct call {
    address target;
    bytes callData;
}

contract UniswapMulticallExample {
    address public uniswapRouter;  // Uniswap Router contract address
    address[] public tokens;       // ERC-20 token addresses

    constructor(address _uniswapRouter, address[] memory _tokens) {
        uniswapRouter = _uniswapRouter;
        tokens = _tokens;
    }

    function getBalances(address user) external view returns (uint256[] memory balances) {
        balances = new uint256[](tokens.length);

        for (uint256 i = 0; i < tokens.length; i++) {
            // Encode the balanceOf function call for the ERC-20 token
            bytes memory data = abi.encodeWithSelector(IERC20(tokens[i]).balanceOf.selector, user);
            
            // Add the call to the Multicall data
            Multicall.call memory tokenBalanceCall = Multicall.call({
                target: tokens[i],
                callData: data
            });

            // Aggregate the results in a single call to Multicall
            (, bytes[] memory results) = Multicall(uniswapRouter).aggregate([tokenBalanceCall]);

            // Decode the result and store the balance
            balances[i] = abi.decode(results[0], (uint256));
        }

        return balances;
    }
}

• 코드 해석
  • SPDX-License-Identifier: 컨트랙트의 라이선스를 지정하는 부분
  • pragma solidity ^0.8.0;: Solidity 컴파일러 버전을 지정
  • IERC20 인터페이스: ERC-20 토큰 표준을 따르는 balanceOf 함수를 정의한 인터페이스
  • Multicall 인터페이스: aggregate 함수를 정의한 인터페이스로, 여러 호출을 집계하여 실행
  • function aggregate가 여러 call들을 집계하여 배열형태로 한 번에 처
  • call 구조체: 호출할 대상 주소와 호출할 데이터를 담는 구조체
  • UniswapMulticallExample 컨트랙트: ERC-20 토큰의 잔액을 가져오는 기능을 제공하는 컨트랙트
  • uniswapRouter 및 tokens 변수: Uniswap 라우터 주소와 ERC-20 토큰 주소 배열을 저장
  • constructor: 컨트랙트를 배포할 때 Uniswap 라우터 주소와 ERC-20 토큰 주소 배열을 초기화
  • getBalances 함수: 사용자의 주소를 받아와 각 ERC-20 토큰의 잔액을 조회하는 함수
  • for 루프: tokens 배열의 각 토큰에 대해 잔액을 조회
  • abi.encodeWithSelector: balanceOf 함수를 호출하기 위해 함수 시그니처와 사용자 주소를 인코딩
  • **Multicall**을 사용하여 여러 호출을 집계하고 결과를 얻음
  • abi.decode: 결과를 해석하여 해당 토큰의 잔액을 가져옴
  • return balances;: 각 토큰의 잔액을 반환
  • 부록
    • view 또는 pure 키워드를 사용하면 함수가 스마트 계약의 상태를 변경하지 않고 데이터를 읽기만 하는 데 사용됨을 나타냄. 이러한 함수는 외부로부터 호출되어도 블록체인의 상태를 변경하지 않으므로 가스 비용이 들지 않는다. 이러한 함수의 실행은 로컬 노드에서 처리되며, 블록체인 트랜잭션을 생성하지 않으므로 가스비용이 발생하지 않는다.
    • view 및 pure 함수는 블록체인의 무언가를 기록하거나 변경하지 않고 단순히 데이터를 반환하는 데 사용된다. 이 경우 getBalances 함수가 external view returns를 사용하기 때문에 블록체인 상태를 변경하지 않고 사용자의 잔액을 읽기만 하므로 호출 시 가스비용이 발생하지 않는다.

위와 같이 코드들의 함수를 살펴보면서 각각의 함수들이 어떠한 기능들을 하는지 알아보았다. 멀티콜의 경우 스왑을 하거나 나의 잔고를 모두 가져올 때 많이 사용될 것 같다는 생각이 들었다. 멀티콜 기능을 통해 다음에는 유니스왑 v2를 구현해 보도록 하겠다. 

1. 코인마켓캡 사이트

2. 어제 구현한 코인마켓캡 

3. 현재 클론 중인 웹사이트 

 오늘 특별하게 한 것도 없는데 시간이 빨리 간 느낌이었다. 오전엔 scroll 애니메이션을 짜는 것을 구현하였고, 9기 블록체인 발표를 본 이후에 어제 하던 클론 코딩을 진행하였다. 진척 사항은 많이 없었지만,  로고들의 이미지와 반응형 웹으로 구현하기 위한 고민을 하였다. 또한 코인마켓캡 로고 옆 버튼들에 드롭바를 주기 위해 고민하였다. 드로바를 이미 해보아서 어떤 식으로 구현할지는 알고 있었지만, 초반에 a 태그를 이용하여 구조를 짜서 시간을 많이 날려 먹었다. 또한 막상 flex 안에서 드롭바 구현과 마진 및 패딩을 줘 적절한 위치에 배치하는 것이 까다로운 부분이 있었다. 이러한 부분을 고민하였고, 이를 바탕으로 드로바를 구현하였다. 하지만, 아직 맨 위 header 부분의 flex와 드롭바에서 위치를 넘어가면 드롭바 내용이 사라지는 에러들이 있어 이 부분을 수정하여야 한다. 또한 hr 태그를 전체 flex 내부에 주니 전체 부분을 차지하는 것이 아닌 다른 영역들과 마찬가지로 잘리는 부분이 생겼다. 이 오류에 대해 고민해 보아서 고쳐야겠다. 아이템 부분엔 적절히 자산들을 배치하고, 인기 커뮤니 계정엔 애니메이션을 이용하여 세 가지 내용이 자연스럽게 이동하는 애니메이션을 주어야겠다. 또한 최종 암호화폐 자산 출력 부분은 암호화폐들을 객체에 담아두고 반복문을 이용하여 append 하여 주었는데, 이를 append 하는 부분에 표(td, th)를 이용하여 추가하여 각각의 객체들에 대한 정보를 가져가는 방식을 선택해야 할 것 같다.

1. 코인마켓캡 사이트

2. 어제 구현한 코인마켓캡 

3. 현재 클론 중인 웹사이트 

1. 코인마켓캡 홈페이지

2. 예상 레이아웃 구성도

3. 현재 구현된 상태

 경일게임 아카데미에서 공부한 지 6주 차 벌써 자바스크립트까지 끝나고 한 달이란 시간이 뚝딱 지나갔다. 짧은 시간이었지만, 한 달 만에 html, css, javascript 까지 공부하였고, 기본적인 스킬들은 모두 공부하였다. 이를 바탕으로 요번 주에 시험을 본결과.. 자바스크립트에선 어느 정도 이해도가 있었지만, html, css 구조를 짜는 부분에 있어서 아쉬운 부분이 많았다. 이를 보충하기 위해 오늘은 공부한 것들을 바탕으로 웹을 구현하는 연습을 하였다.

1. 코인마켓캡 홈페이지

2. 예상 레이아웃 구성도

레이아웃을 아래와 같이 나누어 각각의 html 요소들과 배치들을 하였다. 

3. 현재 구현된 상태

기본적인 레이아웃을 바탕으로 큰 틀을 구현하였다. 전반적으로 flex를 이용하여 사이즈를 조절할 수 있게하였다. 

가상자산추가 부분은 for문으로 div 들을 추가였는데 실제 코인마켓캡에는 여러 요소들을 추가하여야 하기 때문에 th, td를 추가하여 사용하여 표 형식으로 데이터를 추가할 예정이다. 또한 가운데 아이템에는 애니메이션 이동을 추가하여 세 가지 화면을 애니메이션 화 하는 작업을 진행할 예정이다.