블록체인 TIL) Truffle,Ganache를 React에 연동하기 + React 오류 해결

- truffle을 VSCode에 연동 성공하면 아래와 같은 폴더 구성이 완료됨 

contracts파일, migrations 파일, test,  client(Frontend)로 구성된다. 

 

1. React에서 truffle을 사용해주기 위해 'truffle unbox react'를 사용해준다.

원래는 CRA(Create-React-App)을 통해 쉽게 React 프로젝트를 VSCode에서 구현할 수 있지만,

 

Contracts 안에서 SimpleStorage.sol에서 컨트랙트 파일 작성 

Migrations.sol은 삭제하면 안된다. 

 

2. Ganache 시작 

가나쉐를 설치해주고(SW 설치 필요) Quick start를 통해 테스트용 주소 작성

그리고 이걸 설치하기 전에 윈도우 내부에서 설정 오류가 발생했었는데, 

 

윈도우 설정 > 업데이트 기능에서 > 테스트용 앱 로드를 설정해주어야 가나쉐를 사용할 수 있다. 

 

 

 

3. truffle-config.js 파일 작성 

const path = require("path");

module.exports = {
  // See <http://truffleframework.com/docs/advanced/configuration>
  // to customize your Truffle configuration!
  contracts_build_directory: path.join(__dirname, "client/src/contracts"),
  networks: {
    development: {
      host:"127.0.0.1",
      port: 8545,
      network_id:"*",
    },
  },
  compilers:{
    solc:{
      version:"^0.7.0",
    },
  },
};

여기서 중요한 것이 compiler버전이다. 여기서 작성한 버전이 Migration.sol 버전과 SimpleStorage.sol 버전이 일치하지 않으면 오류가 발생한다. 

이렇게 나중에 배포할 때 오류가 발생한다. 컨트랙트 버전들을 통일해주고 나니 정상적으로 컴파일 & 배포가 되었다. 

 

 

그리고 ! 

나는 Brave 브라우저를 사용하는데, 왠지 모르겠지만 Metamask 지갑 연동이 잘 안된다. 

그래서 크롬 브라우저를 따로 열어서 localhost:3000으로 따로 확인을 해야 한다. 

 

 

 

 

 

4. React 오류 (Unhandled Rejection) 

 

이거는 Metamask 지갑 문제이다. 아마 네트워크 설정이 잘못 되어있어서 발생하는 오류이다. 

 

Ganache와 Truffle에 설정된 네트워크는 8545였는데, 나는 이전에 이더리움 메인넷으로 선택을 하니 위와 같은 오류가 발생했던 것이다. 그래서 네트워크를 Localhost 8545로 변경해주니 

정상적으로 React 페이지에서 실행되는 것을 확인할 수 있었다. 

 

 

 

* Truffle : 이더리움 개발 프레임워크 

5.0 이상의 Node.js 설치 필요 

npm을 통해 손쉽게 설치 가능 npm install (or i) -g truffle

- Truffle을 사용하는 이유는 solidity로 작성한 스마트컨트랙트의 컴파일, 컴파일한 스마트컨트랙트의 배포(migrate),배포한 스마트컨트랙트의 테스트(test) 파일을 사용하기 위함 

=> 결국은 스마트컨트랙트를 테스트하기 위해 truffle을 사용하는 것이다. 

* Ganache : 개발 편의를 위하여 test RPC를 손쉽게 구동시켜주는 어플리케이션 

어플리케이션을 실행하면 7545번 포트로 test RPC가 구동되며, 마이닝이 활성화 되어있기 때문에 바로 컨트랙트를 배포하거나 트랜잭션 실행할 수 있는 환경이 갖춰진다 (이번 작업에서는 8545로 설정) 

* RPC (Remote Procedure Call) 별도의 원격 제어를 위한 코딩 없이 다른 주소 공간에서 리모트의 함수나 프로시저를 실행할 수 있도록 프로세스 간의 통신을 하는 것. 위치에 상관없이 RPC를 사용하여 원하는 함수 실행 가능

Client/Server 구조를 기반으로 작동하며 각각의 클라이언트와 서버는 Remote Call을 하기 위한 프로시저에 대한 인터페이스를 통해 서로의 요청에 대한 이해를 할 수 있다. 

 

 

 

 

참고 https://medium.com/@devAsterisk/truffle%EA%B3%BC-ganache%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-evm-smart-contract%EC%9D%98-%EA%B5%AC%ED%98%84-%EB%B0%8F-%EB%B0%B0%ED%8F%AC-2526bb150daa