[1013] Truffle 트러플 개발환경에서 작업하기 - with. ganache & Meta mask & react

- 1교시 -

 

🔅 메타마스크란?

- 개인의 계정의 주소값을 저장해서

  이더리움과 이더리움 토큰을 쉽고 안전하게 보관할 수 있게 해주는 프로그램.

- 핫월렛이라고도 함.

- 시드키라는것이 존재함. (비번 잃어버렸을 때 2차 비번같은 느낌. 백업용)

- 크롬에서 다운받을 수 있는 확장프로그램

 

 

❕ 용어 정리 

주소
    - 공개(주소)키 : 20 자리로 표현되는 키값
    - 암호(개인)키

계정
    - 공개키와 암호키 둘다 가지고 있는 상태
    - EOA / 컨트랙트 계정으로 나뉜다.
      	EOA : 이더 / 스마트 컨트랙트 트랜잭션을 보낼 수 있는 계정
        컨트랙트 계정 : 솔리디티 언어를 배포한 계정 (우리가 컨트랙트를 생성해서 보냈던 얘)
        deploy.{
        }.send{
        	from: '1ox398f89423fd95'
        } -> 요런거 들어있으면 그게 컨트랙트 계정

지갑
    -계정을 총괄하는 공간

 

 

 

 

이런 느낌

 

 

 

 

 

---

- 2교시 -

 

메타마스크 설치

https://metamask.io/

MetaMask - A crypto wallet & gateway to blockchain apps

 

가나쉬 설치

https://www.trufflesuite.com/ganache

Ganache | Truffle Suite

 

 

🔹🔹🔹

 

메타마스크를 처음에 설치하고 비밀번호를 생성하면, 기본적으로 account1이라는 계정이 존재함.

 

 

 

 

계정을 눌러서 네트워크를 테스트넷으로 바꾼 다음,

가상의 이더리움을 받아볼 수 있음.

 

구매

🔽

포시트(수도꼭지) 테스트

Ropsten용 포시트에서 Ether 얻기

"Ether 얻기"클릭

🔽

request 1ether from faucet 클릭

🔽

밑에 transaction이 생기면 성공

 

 

 

 

🔹 보통의 개발 단계는

1. 가나쉬로 코드 작성 (로컬에서 돌려보고)

2. 테스트넷으로 테스트

3. 메인넷에 올리기 (실제 이더 소요)

 

 

❕ 가나쉬 실행

가나쉬를 열면 10개의 계정이 생성됨.

각각의 계정에는 공개키 (주소)가 들어있음. 옆에 열쇠 누르면 비밀키 나옴

 

 

* 메타마스크는 어떤값을 요구할까요?

 

✅ 개인키를 넣게 되어있음

why 개인키만 요구?

- 개인키 : keccak256()을 가지고 개인키를 생성 / 개인키를 가지고 공개키를 생성.

  즉,  개인키만 가지면 공개키를 알 수 있음 

 

 

❕ 계정 생성하기

"가나쉬" 계정이 생성됨!

 

계정만 만들어놓고 주소값을 넣지 않은 상태!

여기다가 주소값을 넣어줘야 이더가 뜰 것임~

 

1. 주소값 넣기

2. 내가 넣은 주소가 어떤 네트워크에 있는 주소인지도 명시를 해줘야 함 (= url 주소 필요)

우리는 localhost 에서 작업해야 하므로 "맞춤형 rpc"를 눌러서 가나쉬 url 주소 넣어줘야 함!

 

 

❕ 네트워크 명시하기

         

                     🔼 맞춤형 rpc 클릭                                                                 🔼네트워크 이름 아무거나 적고,

                                                                                                                    rpc url은 우리가 가나쉬로 생성한 url

                                                                                                                    체인 id도 적어주기 (그냥 메타마스크에서 적으라는대로 하면됨)

 

 

 

❕ 주소값 넣기

 

계정 가져오기 누르면 개인키를 입력하는 화면이 나옴! 거기에 가나쉬에서 생성된 개인키를 복사해서 넣어주면 됨~

그러면 100 이더가 생김!!!

 

 

✅✅ 가나쉬랑 메타마스크가 연결된 것! ✅✅

 

 

---

- 3교시 -

 

🔅 truffle이란?

 

- Dapp을 만들기 위한 프레임워크입니다.

- 앱을 만들 때 복잡한 중간과정을 날려줍니다.

 

어제 만든 투표앱을 예시로 생각해보면,

1. 솔리디티로 코딩한다.

2. 코딩한 것을 컴파일 한다.

3. 컴파일한 내용을 배포한다. (deploy.js 실행 -> transaction 발생된 address 가져와서)

4. web3 ( 여기에 transaction address 넣어주는.. )를 활용하여 프론트앤드를 만든다.

 

이러한 작업을 간소화해주는게 truffle! 

 

 

🔅 트러플 작업환경 만들기

npm install -g truffle

truffle init

 

❕ 폴더 세개가 생성됨! (+ truffle-config.js 파일)

1. contracts -> 솔리디티 코드 작성하는 공간

2. migrations -> deploy 매서드가 사용되는 공간. 데몬에게 배포하는 행위를 하는 공간

3. test -> TDD 코드를 작성하는 공간

4. truffle-config.js -> truffle 관련된 환경설정 파일. 
구동할때 필요한 세팅 해줄 수 있음. 처음엔 대부분 주석 되어있음

 

----------------------------세팅 완료-----------------------------

 

 

🔅 배포하기

 

 

❕ 간단한 solidity 코드를 작성해보자

 

1.  컨트랙트 파일 생성하기
 a. 직접 입력
 b. 
 > truffle create contract HelloToken : HelloToken.sol 파일 생성됨
 	- 또한 > truffle create [폴더명] [파일명] 해주면 해당 폴더 안에 파일 생성됨!
    	ex) truffle create test HelloToken 해주면 test > hello_token.js 생김

🔽 해주면

 

요렇게 기본 구조가 셋팅된 컨트랙트 파일이 생성됨~

 

이 상태에서 함수를 입력해주면 됨미당.

 

contracts > HelloToken.sol 코드 작성 

// 간단히 helloworld 를 리턴해주는 함수를 작성해봅니다

pragma solidity >=0.4.22 <0.9.0;

contract HelloToken {
  constructor() public {
  }
  
  function hello() public view returns(string memory){
    return "hello";
  }
}

 

현재 상태에서 데몬에 배포를 해야 하는데,

우리가 이 코드를 어느 주소에 배포할 것인지 정해주지 않았음.

가나쉬에 할건지, 테스트넷에 할건지, 메인넷에 할건지 좌표를 정해줘야 함.

 

 

❕ 네트워크 환경설정하기 - truffle-config.js 

// 내가 어느 네트워크를 쓸것인가는 development 부분에 설정되어있음

이부분 주석 풀어주면 됨
⬇
development: {
     host: "127.0.0.1",     // Localhost (default: none)
     port: 7545,            // Standard Ethereum port (default: none)
     network_id: "*",       // Any network (default: none)
    },
    
// 우리가 가나쉬 앱으로 실행한 포트번호로 바꿔줘야 함 = port: 7545

 

 

 

 

❕ 컴파일 하기

- 작성한 코드를 컴파일해준다

> truffle compile

-> build 폴더가 생성됨. 이 안에는 abi 폴더가 들어가 있음
bin 폴더도 생기지만 얘네는 다른데에 꽁꽁 숨겨져있음

 

 

 

 

❕ 배포 하기

- migrations 폴더에 어떤 파일을 배포할 것인지 설정을 해줘야 함.

- 파일 생성 : 작성 규칙 ▶ [숫자]_[파일명]  ex) 2_helloToken.js

- 코드 작성

// HelloToken.sole 파일을 가져와서 HelloToken 이라는 변수에 담겠다.
const HelloToken = artifacts.require("HelloToken"); // .sole확장자 생략

module.exports = function (deployer) {
  deployer.deploy(HelloToken); //가져온 파일을 배포한다는 뜻
};

// 그냥 기본으로 생성되어있는 initial_migration.js 파일 그대로 복붙해서
// 이름만 바꿔주면 됨

- 배포 명령어 입력

> truffle migration

 

배포하자

가스가격이랑 블록 갯수 이런거 뜨고 이더도 빠져있음. 가나쉬 로그에도 보면 배포된거 알수있음

 

 

 

🔅 TDD 작업방식 실습해보기

*TDD란?

기획 -> 테스트코드 만들기-> 개발코드 만들기 의 작업방식을 말한다

 

❕ test 코드 입력해보기

터미널로 파일 생성! > truffle create test HelloToken 

( 근데 보니깐 test 폴더안에는 파일명에 대문자를 쓸 수 없나보다.. 생성된 파일명 보니까 hello_token.js 라고 되어있음)

이런 파일이 생성됨! 기본 구조가 생성되어있는 상태~

위 코드를 주석하고 새로 작성해보자

 

 

hello_token.js 코드작성 >

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

contract("HelloToken",()=>{
  it("Hello function call",async ()=>{ // it: 실행해볼게, " ":이런 메세지를 띄우고,()=>: 요함수를
  // 근데 컨트랙트를 가져올때 대부분 다 프로미스 객체로 반환을 받았음. 즉 비동기로 받은것임
  // 따라서 async await 구문 추가
  
    // web3에서 abi , bytecode 얘네로 써준 코드를 한줄로 함축한것임
    let instance = await HelloToken.deployed() // 배포된 얘 (HelloToken)를 instance 변수에 담고
    let result = instance.hello() //위 코드로 접근 가능해졌으니
    							//instance안에서 바로 함수명을 출력해서 쓰면 됨.
    console.log(`이 아이는 콘솔로그`, result)
    return result;
    //원래는 그냥 result = true; 던져주면 된다고 함.
  })
})

 

 

 

❕ 실행 명령어

truffle test

 

 

 

 

 

---

 

- 4교시 -

🔅 truffle 에서 react 사용하기

 

❕ 새로운 폴더 만들기 ( root 폴더를 빈폴더로 만든다는 뜻 )

- 명령어 실행

> truffle unbox react

 

- 해주면 client 폴더가 새로 생성됨! 

  client : react 프레임워크가 설치된 공간임. (create-react-app: cra 가 설치된 것과 같은 공간으로 보임)

  web3도 구현되어있는 형태! ( 근데 이게 다 class 형으로 구현되어있어서 함수형으로 바꿔서 사용할것임 )

 

❕ command

# Commands:

  Compile:              truffle compile
  Migrate:              truffle migrate
  Test contracts:       truffle test
  Test dapp:            cd client && npm test
  Run dev server:       cd client && npm run start
  Build for production: cd client && npm run build

 

❕ 실행해보기

> npm  run start

error가 발생할것임!

Module not found: Can't resolve './contracts/SimpleStorage.json' 
in 'C:\Users\82102\OneDrive\1013_2\client\src

why? 

-> 현재 이 파일에서는 솔리디티 코드 컴파일과 배포가 진행되지 않은 상태이기 때문임.

 

 

❕ 설정해주기

 

1. 어떤 데몬을 돌릴것인가? 

- 내가 어느 곳에다가 요청을 보낼것인지를 정해줘야 함

- truffle-config.json 코드 수정

networks: {
    development: {
      host: "127.0.0.1",     // Localhost (default: none)
      port: 7545,            // Standard Ethereum port (default: none)
      network_id: "*",       // Any network (default: none)
     },
    develop: {
      port: 8545
    }
  }

 

 

 

2. solidity 파일 컴파일 하기

> truffle compile

(파일 하나든 두개든 세개든 한번에 다 컴파일 해줌)

원래는 컴파일 하면 build 라는 폴더가 생겼었음.

그런데 여기서는 컴파일해도 build 폴더가 생기지 않고 

client > src > contracts 폴더가 생겨남~ 

같은건데 그냥 디렉토리가 바뀐것임

 

 

 

3. 데몬에다가 배포하기

> truffle migrate

배포가 진행되면 이더가 조금 빠질것임 -> 이 부분 확인하기

 

 

 

4. 리액트 실행

> cd client && npm run start

 

---------------------------------

 

*** 화면에 the stored value is : 5 가 떠야함 

 

 

 

 

 

** test 코드 실행 반복 연습 해볼것 **