BlockChain>Truffle

YU YU·2021년 10월 13일
0

경일_BlockChain

목록 보기
19/24

1. 메타마스크

1-1.용어

-공개키(주소키) : 20자리 가지고 있는 키
-암호키(개인키)

1-2. 계정

1-3. 메타마스크 가입 및 설정하기

  • 개인이 보관함, 온라인에 보관함.
  • 시드키(seedkey) 12자리 텍스트(지갑을 잃어버릴 경우 백업을 위한 용도)
  • 크롬 확장 프로그램
  • react devtool





나는 까먹을 거 같아서 12345678 로 하였다ㅡ.

어짜피 나는 이더를 안넣을거니까 공개하도록 하겠다 ㅋㅋㅋㅋㅋ


이거 순서대로 배포하는데 힘들었다.


크롬에서 편하게 쓰려면 확장프로그램엠서 핀설정을 해주면 된다.ㅣ

1-4. ganache 설치


저번 시간에는 ganache-cli만 사용했는데 이제 윈도우에 설치하겠다. 여기서 DOWNLOAD를 누른다. 시간이 조금 걸릴수도 있다. 설치 파일을 열면 다음과 같은 화면이 나온다.

install을 누른다.


continue를 누른다.

다 설치가 되었다. 여기서 quickStart를 누르면 실행이 된다.

1-4. 메타마스크와 가나슈 연결

1-4-1. 메타마스크(여우모양 아이콘)를 누른다.

1-4-2. localhost를 누르고 맞춤형 RPC를 선택한다.

1-4-3. 네트워크를 작성한다.

가나시에서 정보를 참고하여 참고한다.

그러면 네트워크 이름 및 이름 RPC URL을 입력한다.

여기서 체인 ID에 5777을 입력해주니까 1337을 입려갛라고 해서 체인 ID에 1377을 입력해주었다.

1-4-4. 계정연결


계정 가져오기를 클릭한다.

그러면 이렇게 비공개키 문자열을 붙여넣으라고 나온다.
그러면 가나슈로 간다.

위와 같이 Accounts를 클릭하고 열쇠모양을 누른다.

PRIVATE KEY의 내용을 복사해서 붙여넣어준다.
그러면 가져오기 버튼이 활성화가 될 것이다. '가져오기'를 눌러준다.

그럼 다음과 같이 100ETH가 들어가있을 것이다.

1-4-5. 송금하기


보내기 버튼을 누른다.

추가한 계정 말고 다른 가나슈 계정을 넣어보자.
넣으면 화면이 다음과 같이 바뀔것이다.

나는 이렇게 넣어서 보내보도록 하겠다.

다음과 같이 거래 정보를 담은 화면이 뜬다.

🤔왜 공개키를 요구하지 않나요?
공개키를 만드는 과정
1.keccak256()으로 개인키를 생성한다.
2.개인키를 가지고 공개키를 생성한다. ->개인키를 가지고 있으면 공개키도 알 수 있지만, 공개키만 알면 개인키는 알 수 없다.


다 되어도 금방 변하지 않는다.
기다리면 화면 오른쪽 아래에 조그만한 창이 뜬다.

그 후에 변한다.

거래가 완료가 되었다.

1-4-6. 송금 정보 확인하기


다음과 같이 원래 계정엔 70ETH로 바뀌고, 보냈던 주소는 30ETH를 받아서 130ETH가 되었다. 그리고 원래 계정에는 스마트 컨트랙트 계정에는 TX COUNT, 즉 거래가 몇번 일어났는지에 대한 정보가 담긴다. 올라간 것을 확인할 수 있다.
Transactions 탭에 가보면 거래 정보를 볼 수 있다.

BLOCKS탭에 가보면 가스가 얼마나 소비되었는지 정보도 알 수 있다.


2. Truffle

2-1. 개념

Dapp을 만들기 위한 프레임워크
원래 어제까지 DApp을 배포하는 과정은 다음과 같았다.

  1. 솔리디티 코딩하고 컴파일을 해야한다.
  2. 솔리디티를 배포한다. deploy.js <-transaction address
  3. web3를 활용하여 프론트앤드를 만든다.

위의 코딩을 간소화하는 프레임워크가 truffle이다.

2-2. 환경설정

디렉토리 구조가 있는 개발 환경
디렉토리를 만드는 과정이 필요하다.
터미널에 다음과 같이 입력해준다. (이미 저번 시간에 truffle을 전역으로 깔았기에 가능하다)
npx truffle init(원래는 truffle init인데 나는 npx를 입력해야지만 작동이 되서😂)

그러면 위와 같이 3개의 폴더가 생긴다.

  1. contracts 솔리디티를 작성하는 공간
  2. migrations ->deploy 메소드가 사용되는 공간
    데몬에게 배포하는 행위를 하는 공간
  3. test
    tdd 코드를 작성하는 공간
  4. truffle-config.js
    truffle에 관련된 환경설정 파일이다.설정값만 있다.

    각 폴더 안에는 기본적인 파일이 있는데, truffle-config.js빼고는 건들지 말자. 위의 3가지 작업을 자동적으로 해주는 코드들이다.

2-3. 작업

2-3-1. Contract 작성

truffle create contract HelloToken이라는 명령어를 입력해준다. 이는 contract를 만드는 명령어이다.

  • HelloToken.sol
pragma solidity >=0.4.22 <0.9.0;

contract HelloToken {
  constructor() public {
  }

  function helo() public view returns(string memory){
      return "hello";
  }
}

위와 같이 입력해준다.

2-3-2. Compile 작업

npx truffle compile을 해준다. 그러면 src폴더에 simplecontract가 없다고 오류가 뜰 것이다. 이를 수정해주기 위해 먼저 네트워크 설정을 바꿔준다.

  • truffle-config.js

    44번째 줄에서 development설정을 위와 같이 주석을 풀고 가나슈의 포트번호를 써준다.
    컴파일을 한다.
    npx truffle compile


    그러면 위와 같이 build라는 폴더가 생기고, 그 안에 constracts라는 폴더가 생긴다. 그리고 그 안에 json파일이 두개 생김을 알 수 있다. 이는 저번 시간에 컴파일할 때 생기는 abi와 bin의 내용을 담고있는 파일들이다.

    abi의 내용은 metadata에 담기고,
    bin의 내용은 bitecode에 담겼음을 알 수 있다.

2-3-3. 배포하기

그리고 migrations폴더에 새로운 파일을 하나 생성한다.
그리고 이름을 다음과 같이 숫자_contract이름.js로 정해준다. 파일명을 이렇게 짓는 것은 통용되는 규칙이라고 한다.
1_initial_migration.js의 파일을 열어보자.

위와 같이 되어있음을 확인해볼 수 있다. 이 내용을 전부 복사해서 2_helloToken.js에 붙여넣어주자. 그리고 Migrations이라고 써진 내용만 contract의 이름인 HelloToken으로 바꿔주자.


그런 다음 터미널에 다음과 같이 입력하자.
npx truffle migrate
배포를 하는 명령어이다.

그러면 이와 같이 뜨는 것을 알 수 있다. 체인이 된다.

작동이 됨을 알 수 있다.
그리고 이로 인해서 트랜잭션이 일어남을 가나슈를 통해 알 수 있다.

2-3-4. Test 코드 작성

그 다음으로 테스트를 한 번 해보자. 터미널에 다음과 같이 입력한다.
npx truffle create test HelloToken

그러면 test 폴더 안에 다음과 같은 HelloToken파일이 생긴다.

const HelloToken = artifacts.require("HelloToken");

/*
 * uncomment accounts to access the test accounts made available by the
 * Ethereum client
 * See docs: https://www.trufflesuite.com/docs/truffle/testing/writing-tests-in-javascript
 */
contract("HelloToken", function (/* accounts */) {
  //console.log('should assert true');
  //function async aa(){};
  //aa();
  it("should assert true", async function () {
    await HelloToken.deployed();
    return assert.isTrue(true);
  });
});

여기서 

it("should assert true", async function () {
...
}

의 내용은 원래 

console.log('should assert true');
  function async aa(){...};
  aa();

의 내용과 같다. 먼저 "should assert true"를 콘솔에 찍고나서 콜백함수를 실행시키는 것이다. 저번 시간에 코드가 프로미스 객체를 반환함을 알 수 있었다. 그래서 비동기 함수인 async를 써준다.
다음과 같이 바꾸어준다. 

const HelloToken = artifacts.require("HelloToken");

contract("HelloToken", function (/* accounts */) {
  
  it("should assert true", async function () {
    let instance = await HelloToken.deployed();
    let result = await instance.helo();
    console.log(`consolelog:`,result);
    return result;
  });
});

이 코드를 실행하려면 다음과 같은 명령어를 터미널에 입력한다.
npx truffle test

그러면 다음곽 ㅏㅌ이ㅏ 잘 실행이 되었음을 확인할 수 있다.

그래서 이러한 코드를 여러개 만들어서 실행하면서 하는 것이 test 주도 개발이다. 

const HelloToken = artifacts.require("HelloToken");

contract("HelloToken", function (/* accounts */) {

  it("should assert true", async function () {
    let instance = await HelloToken.deployed();
    let result = instance.helo();
    console.log(`consolelog:`,result);
    // return assert.isTrue(true);
    return result;
  });
});

contract("HelloToken2", function (/* accounts */) {
 
  it("hello token2", async function () {
    let instance = await HelloToken.deployed();
    let result = instance.hello();
    console.log(`consolelog:`,result);
    // return assert.isTrue(true);
    return result;
  });
});

일부러 하나는 오류가 나게 만들었다.

그러면 다음과 같이 하나는 passing이 되고 하나는 failing이 됨을 알 수 있다.

contract 파일 2개도 되나요? 된다

2-3-6. 2개의 contract만들기

npx truffle create contract hello

  • hello.sol
// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;

contract hello {
  constructor() public {
  }
    function bye() public view returns(string memory){
      return "bye";
  }
}
  • 함수가 잘 실행되는지 알 수 있다.

3. 명령어 정리

과정 정리
1. 솔리디티 파일 생성
truffle create contract [파일명]
2. 솔리디티 파일 컴파일하기
truffle compile
build/contracts [파일명].json 생성되는 것 확인
3. 마이그레이션 코드 작성하기
migrations 폴더 안에서 파일 생성
파일명의 규칙은 [숫자]_[파일명].js
truffle migrate
4. 테스트 작업
테스트 파일 생성하기
truffle create test [파일명]
이후 코드 작성하기
truffle test를 통해 테스트 결과를 확인할 수 있다.

4. React 연동하기

4-1. React와 트러플 연동해서 깔기

새로운 폴더를 하나 만들어준다.
터미널으로 그 폴더 안에 들어가서 다음과 같은 명령어를 입력한다.
truffle unbox react


Y를 누르고 엔터를 누르면 진행이 된다.

작업이 완료가 되면 터미널엔 다음과 같이 뜬다.

그러면 아까와는 다르게 client폴더가 생긴 것을 알 수 있다. 한 번 기본 폴더들의 내용을 확인해보도록 하겠다.

4-2. 작업하기

cd client
터미널에 위와 같이 써서 client 폴더 안으로 이동을 한다.
이 상태에서 다음과 같은 명령어를 입력하여 React를 실행을 해보겠다.
npm run start

그러면 다음과 같이 오류가 난다. 왜냐하면 컴파일도 안했고, 배포도 안했기때문에 그런것이다.

4-2-1. truffle-config.js 파일 수정

아까와 같이 바꿔준다.

4-2-2. solidity 컴파일하기

npx truffle compile
React와 연관이 없을 때에는 build폴더 안에 생성이 되었지만 이제는 컴파일한 결과물이 src/contracts 폴더 안에 생겨난다.

여기서 SimpleStorage.json파일이 생성이 되었음을 확인할 수 있다.

4-2-3. 배포 진행하기

npx truffle migrate

가스가 소모되었음을 알 수 있다.

4-2-4.react 실행하기

npm run start를 입력하자. 그리고 크롬에 들어가서 localhost:3000을 주소창에 검색하면 다음과 같이 메타마스크가 작동을 한다.

다음을 누른다.

연결을 누른다.

그러면 다음과 같이 거래가 된다.

이 창이 뜨면 거래가 완료되었다는 것이다. 22confirmed이 아닌 다른 수가 뜰 것이다.


거래가 성사되어서 5가 뜸을 알 수 있다.

unbox next하면 next도 된다.

profile
YU YU
코딩 재밌어요!
이전 포스트

solidity>투표앱 만들기(기본 원리)

다음 포스트

BlockChain>ERC-20 토큰 만들기

0개의 댓글