기본세팅

1. 작업할 폴더 생성

2. 터미널에 입력  =>  truffle unbox react

// truffle unbox react 입력하면 생성되는 폴더 구조

3. 가나시 실행 후 메타마스크 연결

3-1 검색창에 metamask 입력 후 다운로드 - 계정 생성 / 암호 입력

// 이더리움 메인네 부분 누르면
// 맞춤형 RPC클릭
// 다음과 같이 입력 후 저장 클릭

3.2 검색창에 ganache 입력 후 다운로드 - ganache 들어간 후 QUICKSTART

//위에 노란색 버튼 클릭
// 노란색으로 칠해진 부분 복사
//동그라미 클릭후 계정가져오기 선택 후 비공개키 문자열 칸에 붙여넣기

4. 다시 비쥬얼 스튜디오로 돌아온 후 truffle-config.js 파일 내용 수정

// 변경 전
networks:{
   develop:{
      port:8545
   }
}

// 변경 후    ==>   metamask와 연결하는 ganache의 data로 수정한 것임.  
networks:{			// ganache의 rpc server HTTP://1270.0.0.1:7545
   development:{
      host:"127.0.0.1",
      port:7545,
      network_id:"*"
   },
   develop:{
      port:8545
   }
}

5. 터미널에 입력 => truffle compile / truffle migrate

• truffle compile => 기존의 contracts 폴더 안에 존재하는 솔리디티 파일을 컴파일함
  // client - src - contracts 폴더 안에 json파일 생성됨
  // 기존에 truffle 사용하지 않고 컴파일하고 배포할 때 생성되었던 abi와 bin파일의 내용이 합쳐져서 생성된 것.
• truffle migrate => 컴파일한 파일들을 배포하는 것
  // ganache와 연결하였기 때문에 배포하면서 gas(즉 수수료)가 발생하여 가나시를 확인해보면 이더가 줄어든 것을 확인 할 수 있음

6. client폴더에 들어간 후 리엑트 실행

6-1. 기존 작업공간 폴더의 가장 최상위 위치의 터미널에서 => cd client

6-2. client폴더에 들어가서 npm run start

‼ 오류 나는 경우 ‼
// pwd => /client 위치에서
1. npm install ~ node modules 설치해보기
2. node modules와 package-lock.json삭제 후 package.json에서 "dependencies"의 내용 지우고 다시 react /react-dom / react-scripts / web3 설치하기
// 나는 기존에 ganache와 metamask가 제대로 연결이 되지 않아서 오류가 났었음
3. ganache와 meatmask 제대로 연결되었는지도 확인
// 위의 작업들 하고 나서 다시 compile migrate하는데 이때에 client-src-contracts에 이전에 만들어진 json파일은 삭제해야함.

// 성공적으로 리엑트가 실행되면 최초에는 다음과 같은 화면이 나옴.

7. 이후에 필요에 맞게 contract 내용 변경하면 됨

// 중요!! 내용 변경 후 기존에 client-src-contracts폴더안에 있는 기존에 compile로 인해 존재하던 파일을 삭제하여야 다시 컴파일 할 때에 충돌이 발생하지 않음
// 중요 !! 리엑트와 컨트랙트 파일의 유연한 연결을 위해 @truffle/contract설치
// ==> npm install @truffle/contract // client 폴더 경로에서 설치해야함.
// @truffle/contract -> fetch나 axios같은 느낌으로 이해...

!! 새롭게 contract작성시 !!

스마트 컨트랙트 작성을 위한 기본 코드 작성된 파일 생성해줌.
1) truffle create contract testStore
// contracts폴더에 testStore.sol파일 생성.
2) truffle create migration testStore
// migration폴더에 배포를 위한 .js파일 생성.
// 위와 같이 새로운 contract파일을 만들거나 수정 변경 시에는 client-src-contract폴더에 있는 기존에 컴파일된 json파일을 지우고 다시 컴파일이랑 배포해야함.

//migration폴더에 새롭게 생성된 파일 내용 수정
// 위의 명령어로 파일 생성시 기본 코드
// 변경 전
module.exports = function(_deployer) {
  // Use deployer to state migration tasks.
};
// 변경 후
let testStore = artifacts.require('./testStore.sol');
module.exports = function(_deployer) {
  // Use deployer to state migration tasks.
  _deployer.deploy(testStore);
};
// testStore.sol은 contract폴더에 존재하는 파일명

3) App.js파일도 수정해야함 // 안그러면 오류남
// client - src - App.js파일 확인 후 삭제한 sol 파일을 불러오고 있지 않은지 등을 확인하고 내용 수정

!! 가나시 끄고 다시 킨 경우에도 컴파일이랑 배포 다시 해야함. !!