[truffle ganache react] 리액트와 연결하기

 

webStorm 옵흔 

 

1. 새 폴더 생성 "webConnect" 

 

2. truffle 시작하기  (나중에 알게 되었지만 truffle init은 필요하지 않았다. unbox react에서 모두 실행됨)

$truffle init 

- > truffle 이 성공적으로 시작되면 아래와 같은 폴더들이 생긴다. 

 

 

3. contracts 폴더 안 새 파일 "simpleStorage" 생성 및 코드 작성 

contracts 안에 이미 생성되어 있는 Migrations.sol 파일은 삭제하면 안됨 

 

작성 코드 

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.21 <0.7.0;

contract SimpleStorage {
    uint storedData;

    event Change(string message, uint newVal);

    function set(uint x) public {
        storedData = x;
        emit Change("set",x);
    }

    function get() public view returns (uint) {
        return storedData;
    }
}

 

 

4. Ganache 시작하기 

$ ganache 

-> 테스트용 공개/비공개키가 10개씩 나온다. 

 

 

5. truffle로 컴파일하기

$ truffle compile

-> biuld 폴더가 생긴다. 

 

 

6. 배포 전 필요한 migrations 세팅해주기

migrations 폴더 안에 "2_simple-storage.js" 파일 생성 및 코드 작성 

let simpleStorage = artifacts.require("simpleStorage");

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

 

 

7. 배포하기 

$ truffle migrate 

 

Error
> Something went wrong while attempting to connect to the network. Check your network configuration.
ProviderError: 
Could not connect to your Ethereum client with the following parameters:
    - host       > 127.0.0.1
    - port       > 7545
    - network_id > 5777
Please check that your Ethereum client:
    - is running
    - is accepting RPC connections (i.e., "--rpc" option is used in geth)
    - is accessible over the network
    - is properly configured in your Truffle configuration file (truffle-config.js)

-> 해결 법 : truffle-config.js에서 networks의 development 주석을 풀어주기

 

다시 truffle migrate 진행 

-> 가나슈 블록체인 상에 배포가 잘 됨 ! 트랜잭션 hash, 사용된 가스비 등등 정보가 쭉 나온다 .

 

 

 

8. react 연결하기 

react, web3, truffle 모두를 엮는 (?) 느낌 

$ truffle unbox react 

-> Procceed anyway?  Y

-> 나머지 모든 건 N로 했다. 

 

=> webConnect 폴더 안, client 폴더가 생겼다. -> react - frontEnd쪽 

 

 

 

9. react 실행하기 

client로 이동해서 시작하기 

$ cd client
$ npm run start 

 

Error
Module not found: Can't resolve './contracts/SimpleStorage.json' in '/Users/seyeonoh/Documents/BlockChain_NFT/webConnect/client/src'

해결법 : build 안의 contracts 폴더 전체를 복사 -> client - src 안에 붙여넣기 후 다시 npm run start 

 

또 Error 
Unhandled Rejection (Error): This contract object doesn't have address set yet, please set an address first.

해결법 : react 화면이 띄워진 브라우저의 지갑을 localhost로 바꾸기 

이렇게 해도 해결이 안되면 아래에 다른 해결법!!

 

 

다시 npm run start를 하면 👇👇

연결 성공! 브라우저에 위와 같은 페이지가 나온다. 

 

 

 

ERROR 

다음날 다시 ganache 서버 돌리고 npm run start를 하니 위의 Unhandled Rejection : address 가 아직 안정해졌다는 오류가 또 떴다. 브라우저 metaMask 주소를 가나슈의 테스트용 지갑으로 가져와서 localhost까지 했는데 계속 같은 오류가 뜸 

해결법 : App.js에 instance.options.address를 수기로 적어주기 

      const instance = new web3.eth.Contract(
        SimpleStorageContract.abi,
        deployedNetwork && deployedNetwork.address,
      );
      instance.options.address = "0x795699295aF50596d80b99D75b314f5c7483A84f";  // 요기 추가