NFT를 거래할 수 있는 조그마한 Market을 만들어 보려고 한다 일단, 시작에 앞서 파일 및 폴더 환경설정부터 하면서 천천히 진행하려 한다 0. TS 설치 npm list -g npm i -g typescript ts-node 이전에 TS를 사용한 적이 없거나 컴퓨터를 교체하여서 window를 재설치 혹은 새로 깔았다면 전역에 ts를 설치해 주자 1. React (with.TS) yarn create react-app front --template typescript cd front yarn add web3 axios @metamask/providers @metamask/providers : TS환경에서 React내 window.ethereum의 자료형을 TS Compiler가 인지하지 못하기에 위와..

express/contracts내 Vote.sol 파일 작성 // SPDX-License-Identifier: MIT pragma solidity ^0.8.18; contract Vote { string[] public candidateList; mapping(string => uint) public votesReceived; event Voted(string candidate, uint votes); constructor(string[] memory _candidateNames) { candidateList = _candidateNames; } function validCandidate(string memory candidate) private view returns (bool) { for (uint ..

최근에 작성한 이전 게시물에서 Truffle을 이용하여 MetaMask와 React 환경의 Front를 연결했다 이번에는 거기에 Express 환경까지 연결하여 Axios 통신을 이용해 보도록 한다 먼저 Express환경을 설치할 폴더를 만들어서 다음 명령어를 실행한다 npm init -y 이후 필요한 라이브러리를 설치해 준다 npm i express cors truffle web3 truffle 라이브러리가 설치되었다면, 그 환경에 맞게 다음 명령어로 기본 설정을 해줘야 한다 npx truffle init 이 명령어가 정상적으로 작동했다면 3개의 폴더 1개의 js 파일이 생성된다 contracts Smart Contract 코드 작성 폴더이다. Solidity언어로 작성한 코드를 여기에 작성하면 된다고..

Web3 라이브러리를 사용하기 앞서서 metamask에서 기본적으로 제공해 주는 객체 사용법! ethereum 객체 사용 시 요청 방식 metaMask 객체 console.log(window.ethereum); metaMask 연결 확인 if(window.ethereum){ const isConnected = window.ethereum.isConnected(); console.log("JS 읽자 마자 isConnected : ", isConnected); } 이벤트 등록 connect : 연결됐을 때 if (window.ethereum) { const isConnected = window.ethereum.isConnected(); console.log("JS Onload isConnected : ", ..

ganache 테스트용 로컬 이더리움 네트워크 테스트 목적으로 로컬에 설치해서 사용할 수 있는 일종의 간이 블록체인 ganache의 장점 Geth 등 보다 빠른 속도 별 다른 세팅 없이 바로 테스트가 가능 기본으로 10개의 계정이 생성되며 각 계정에 100 Coin씩 지급 서버연결 시에 어느 정도의 계정의 수와 Coin량을 조절할 수 있다 단점 채굴을 해도 보상이 없다 외부의 네트워크 피어로 연결이 안 된다 서버종료 시 모든 데이터가 삭제된다 ganache Install npm i -g ganache-cli Ubuntu 환경에서 node.js가 설치가 되어 있어야 한다 cli : Commend Line Interface ganache-cli 실행 npx ganache-cli # ganache-cli ga..

request 방식 정의 const request = axios.create({ method: "POST", baseURL: "http://localhost:8080", // metamask 네트워크에 설정한 주소와 port 번호 header: { "content-type": "application/json", }, }); 계정 생성 request({ data: { id: 50, jsonrpc: "2.0", method: "personal_newAccount", params: [e.target["new-pw"].value], // 계정 생성하면서 설정할 비밀번호 입력할 input창의 value }, }); 지갑정보 보기 계정들 중 클릭 한 계정 정보 보기 const walletListElem = docu..