가나슈 실행 -> 우측 상단 톱니바퀴 모양 클릭 -> SERVER 탭 선택 -> PORT NUMBER를 메타마스크에 나와있는 Localhost 포트번호로 변경 후 우측 상단 RESTART 클릭
우측 열쇠 모양 클릭 -> 메타마스크 내 입력에 필요한 PRIVATE KEY 준비
메타마스크 아이콘 클릭 -> 상단 빨간 네모 클릭 -> Localhost 선택
파란 동그라미 아이콘 클릭 -> 계정 가져오기 선택
준비했던 가나슈의 PRIVATE KEY를 복붙 후 가져오기 클릭
메타마스크 화면에 100 ETH 확인, 연결 완료!
- 송금하기
메타마스크 열어서 보내기 클릭
가나슈에서 등록한 ADDRESS가 아닌 다른 ADDRESS 선택 하여 복사
보내기(Send to) 화면 인풋 박스에 붙여넣기 정상적인 주소가 들어가면 아래 중 두번째 스크린 샷처럼 화면 출력 됨 금액 설정하여 다음 클릭 ※ 송금 요청 시 공개키를 요구하지 않는 이유 * keccak256()을 사용하여 개인키를 생성하고 그 개인키로 공개키까지 생성하는데, 공개키만 알면 개인키는 알 수 없기 때문
확인 클릭
송금 처리가 완료되면 가나슈와 메타마스크에 입력했던 금액만큼의 ETH가 변경 됨, 거래 완료 (메타마스크 업데이트 살짝 느림)
- 거래 내역 확인
아래와 같이 송금 시 적었던 금액만큼의 ETH의 변동 사항이 보이며, 사용 중인 0번 INDEX의 TX COUNT(거래 횟수)가 1로 증가
TRANSACTIONS : 전체 거래 내역과 상세 내역 확인 가능
BLOCKS : GAS 소비량, TRANSACTION 횟수 등 확인 가능
트러플 코딩 실습
- 트러플이란?
솔리디티 코딩
솔리디티 컴파일
솔리디티 배포 // deploy.js
web3를 활용하여 프론트엔드 구성
* 이전에 해왔던 위의 작업들을 간소화해주는, DApp을 만들기위한 프레임워크
- 설치 및 환경 설정
npm instlal -g truffle // 전역으로 설치
truffle init // 개발 환경 구축, 폴더 및 파일 자동 생성 자동 생성되는 폴더 및 파일 설명 ↓ * contracts : 솔리디티 코드 작성 공간 * migrations : deploy 메서드가 사용되는 공간, 배포 * test : TDD 코드 작성 공간 * truffle-config.js : truffle 관련 환경 설정 파일
truffle-config.js 파일 내용 수정 // 44~48번째줄 주석 해제 후 port를 가나슈 포트 번호로 수정
truffle create contract HelloToken // truffle 명령어로 파일 생성 * truffle create [폴더명] [파일명] // 폴더명 내 파일명으로 생성
truffle compile // 컴파일
truffle migrate // 배포
migrations 폴더에 2_helloToken.js 파일 생성 후 1_initial_migration 파일 내용 복붙 후 내용 수정 * 파일명 규칙 : [숫자]_ [파일명]
truffle create test hello_token.js // test 폴더 내 hello_token.js 파일 생성, 해당 파일에 테스트 코드 작성
const HelloToken = artifacts.require("HelloToken");
contract("HelloToken", () => {
it("hello function call2", async () = >{
let instance = await HelloToken.deployed();
let result = await instance.hello();
console.log(`result : `,result);
return result;
});
});
truffle test // 테스트, 콘솔 로그 출력 확인
hello_token.js 파일에 에러 코드 추가
contract("HelloToken", () => {
it("hello function call2", async () => {
let instance = await HelloToken.deployed();
let result = await instance.hell(); // 에러 부분, hello >> hell
console.log('HelloToken result : ', result);
return result;
});
});
truffle test // 다시 테스트, 콘솔 로그 출력 확인 ※ contract가 여러개라도 truffle test 명령어 1번 입력으로 한 번에 전부 테스트 가능
트러플에서의 리액트(React) 사용법
truffle unbox react // 리액트 자동 세팅 * truffle init의 폴더 구성에서 client 폴더가 추가로 생성 됨 * client 폴더는 react 프레임워크가 설치 된 공간 // create-react-app = cra가 설치 된 공간 * truffle unbox next // next.js 자동 세팅※ 설치 완료 시 터미널에 표기되는 명령어 목록
cd client
npm run start // 실행
에러 발생 // 솔리디티 컴파일과 배포가 완료되어야 함
truffle-config.js 파일 내용 수정 // 수정 전 (아래) * 8번째 줄 networks: { } 안에 아래 내용 추가
development: {
host: "127.0.0.1", // Localhost (default: none)
port: 7545, // Standard Ethereum port (default: none)
network_id: "*", // Any network (default: none)
},
* 수정 후 (아래) ※ 포트 번호는 가나슈 포트 번호로 수정
cd ..
truffle complie // 솔리디티 컴파일 /client/src/contracts 폴더 내 SimpleStorage.json 파일 자동 생성 // 여기서 위 에러 해결 됨
truffle migrate // 솔리디티 배포
cd client
npm run start // 재실행 아래와 같이 MetaMask Notification 화면이 열리며, 확인 버튼을 클릭하면 거래가 완료 되어 ETH가 줄어듬html 화면에서도 아래 빨간 네모 부분이 0에서 5로 변경 됨
