[truffle, 스마트 컨트랙트] d App 간단하게 만들어보기

 

 

목차

- truffle로 컨트랙트 배포하기

- 디앱이란?

- 프론트 구현하기

 

 

컨트랙트 배포하기

 

트러플로 Counter 만들어보겠다.

- Truffle 파일 만들기

cd truffle
npx truffle init

Front : create-react-app front
프론트도 만들어주겠다.

create-react-app front

# 이번엔 geth 말고 가나슈를 사용하겠다.

그 이유? geth 상당히 귀찮음. 가나슈는 트랜잭션이 발동할 때마다 알아서 마이닝을 해서 블럭이 생성된다. 즉, 편하다~

새로운 터미널을 열어서

 

npx ganache-cli

# Private Keys

(0) 0xf4513fb9b43f...........................

 

가장 첫번째 비밀키를 메타마스크에 등록해주겠다.(왜냐면 얘가 코인베이스기 때문에 이 계정에서 트랜잭션이 발생하는 게 디폴트임.)


# 메타 마스크

네트워크 추가 및 계정 추가 : 하는 방법은 예전 글에 있으니 참고 바람.

 

contract/Counter.sol 작성

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

contract Counter{
    uint256 private _count;

    function current() public view returns(uint256){
        return _count;
    } // private이기때문에 getter를 따로 만든거다.

    function increment() public{
        _count += 1;
    }

        function decrement() public{
        _count -= 1;
    }
}

 

truffle.config.js

 

development부분 주석 해제하여라.

 

migrations/2_deployCounter.js

 

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

module.exports = function (deployer) {
  deployer.deploy(Counter);
};

 

truffle compile

truffle migration ## 컴파일 안해주고 얘만 해주어도 자동 컴파일 됨ㅇㅇ

truffle migration --reset ##마이그레이션 다시 해주는 명령

마이그레이션을 마치면?

 

메타마스크 코인베이스 계정에서 가스비가 나간 것을 확인할 수 있다.(=트랜잭션이 발동되었다.)

 

컨트랙트를 확인해보자.

truffle console

 

> Counter

> Counter.deployed().then( (instance) => { it = instance })

> it.current()

<< BN : Bin Number의 약자다. >>

 

> it.increment() ##숫자증가

== it.current.call()

it.current()

words: 안에 숫자가 하나 증가한 걸 볼수 있다. increment계속하면 계속증가함! decrement하면 감소하겠죠?

 

 

truffle/test/counter.test.js

테스트를 위해 테스트 파일을 하나 만들어주겠다.

 

const Counter = artifacts.require('Counter');

describe('Counter Test', () => {
    let counter;
    it('Counter deploy', async () => {
        counter = await Counter.deployed();
        console.log(counter);
    });

    it('get current', async () => {
        console.log(await counter.current.call());
    });

    it(' increment', async () => {
        await counter.increment();
        console.log(await counter.current.call());
    });

    it(' decrement', async () => {
        await counter.decrement();
        const result = await counter.current.call();
        console.log(result.toNumber());
    });
});

//truffle test

 

truffle test

 

테스트 결과 이상없음!

 

 

이제 디앱을 구현해볼 것이다.

 

d App 이란?

 

디앱(DApp)또는 댑이란 Decentralizaed Applicaion의 약자로서, 이더리움, 큐텀, 이오스 같은 플랫폼 코인위에서 작동하는 탈중앙화 분산 애플리케이션을 말한다.

 

말은 어렵다. 간단하게 설명하자면, 지금껏 우리가 truffle을 사용해서 이더리움 환경에 배포한 컨트랙트를 그냥 사용자 눈에 보이게 구현하면 그게 디앱이다.

 

리액트를 사용해서 프론트에 구현해보겠다.

 

 

프론트에 구현하기

 

npm install web3

 

아까 만들어놓은 리액트 폴더에 구현할 것이고, 디렉토리는 다음과 같다.

 

먼저 components, contracts(truffle폴더 안에 contracts 복붙해옴), hooks 디렉토리를 생성해주자.

 

useWeb3.jsx

import React, { useEffect, useState } from 'react';
import Web3 from 'web3/dist/web3.min';

const useWeb3 = () => {
    const [account, setAccount] = useState(null);
    const [web3, setWeb3] = useState(null);

    useEffect(() => {
        (async () => {
            // console.log('Hello world useWeb3!');
            // 너 실행하는 브라우저에 메타마스크가 있니?

            if (!window.ethereum) return;

            const [address] = await window.ethereum.request({
                method: 'eth_requestAccounts',
            });

            setAccount(address);
            const web3 = new Web3(window.ethereum);
            setWeb3(web3);
            //메타마스크 연결 위한 코드.
            //별도로 메타마스크에 들어가서 네트워크 연결도 해주어야한다.
            
        })();
    }, []);

    return [web3, account];
};

export default useWeb3;

 

 

components/Counter.jsx

import React, { useEffect, useState } from "react";
import CounterContract from "../contracts/Counter.json";

// props.web3 props.account
const Counter = ({ web3, account }) => {
  const [count, setCount] = useState(0);
  const [deployed, setDeployed] = useState();

  const increment = async () => {
    const result = await deployed.methods.increment().send({
    //deployed << 배포된 객체 반환
      from: account,
    });

    if (!result) return;
    const current = await deployed.methods.current().call();
    setCount(current);
  };

  const decrement = async () => {
    const result = await deployed.methods.decrement().send({
      from: account,
    });
    if (!result) return;
    const current = await deployed.methods.current().call();
    setCount(current);
  };

  // Truffle 기준으로는 deployed로 CA정보....같은거 받아옴
  //new web3.eth.Contract() << 이더 객체에 abi. adress(ca) 이런거 나오겠지

  useEffect(() => {
    (async () => {
      if (deployed) return;

      const Deployed = new web3.eth.Contract(
        CounterContract.abi,
        "0xfDFa14BFD75A0aF883d7496330d924ef72dDb8F5"
      );
      //2가지의 인자값을 받을 수 있음 1.ABI 2. CA
      const count = await Deployed.methods.current().call();
      console.log(count);
      setCount(count);
      setDeployed(Deployed);
    })();
  }, []);
  return (
    <div>
      <h2>Counter{count}</h2>
      <button onClick={increment}>증가</button>
      <button onClick={decrement}>감소</button>
    </div>
  );
};

export default Counter;

 

 

App.jsx

import React from 'react';
import useWeb3 from './hooks/useWeb3';
import Counter from './components/Counter';

const App = () => {
    const [web3, account] = useWeb3(); //[null,null]
    console.log('hello world App');
    if (!account) return <div>메타마스크 연결하고 와라!</div>;
    return (
        <div>
            <span> Account : {account}</span>
            <div>Counter 나올 영역</div>
            <Counter web3={web3} account={account} />
        </div>
    );
};

export default App;

 

증가를 누르면?

 

우측에 이렇게 메타마스크 창이 뜬다.

확인을 눌러야 Count가 변한다.

(트랜잭션이기 때문)

 

확인을 눌러주니, 우측 하단에

 

이런 알림이 뜬다.

 

가나슈 코인베이스 계정으로 들어가보면

 

 

이렇게 열심히 트랜잭션이 발생한 내역을 볼 수 있다.

 

그 과정에서 가스비 트랜잭션 비 등등...이 빠져나가서 초기 금액인 100ETH보다 금액이 줄어들었음을 알 수 있다!

 

 

디앱 찍먹 끝