블록체인/WEB3 개발42 Hardhat으로 컨트랙트 개발 시작하기 Hardhat으로 컨트랙트 개발 시작하기evm 기반에서 작동하는 스마트 컨트랙트 개발을 위해 하드햇을 사용하고 있다. 컨트랙트 개발을 시작하는 과정을 한 번 정리해보기 초기에 해둬야 할 설정에 대해도 정리해보자. 1. Node.js 설치하기대부분의 Ethereum 라이브러리와 도구는 JavaScript로 작성되었으며 Hardhat도 마찬가지입니다. 그렇기 때문에 node.js 가 설치되어 있어야하며 이 과정은 아래 링크를 참고하면 된다.https://hardhat.org/tutorial/setting-up-the-environment Hardhat | Ethereum development environment for professionals by Nomic FoundationHardhat is an Et.. 2024. 5. 16. Klaytn IDE로 스마트 컨트랙트 배포하기 💡클레이튼 스마트 컨트랙트 배포하기 나는 지금까지 모든 프로젝트를 이더리움 체인에서만 했었다. 수수료가 비싸고 TPS가 낮다는 단점이 있지만 아무래도 가장 많이 사용하는 체인이기도 하고 POS로 전환 후 속도도 빨라지고 수수료도 인하된다면 이더리움의 경쟁력은 점점 더 좋아지지 않을까 생각했다. 그러던 와중 네 번째 프로젝트로 NFT 거래소를 다시 만들어보기로 했고, 이번 거래소 프로젝트는 이더리움 뿐만 아니라 다양한 체인을 모두 거래할 수 있게 만들어보기로했다. 클레이튼과 이더리움은 개념은 거의 비슷하지만 사용하는 툴/라이브러리/표준이 조금 달랐다. Remix IDE -> Klaytn IDE Metamask -> Kaikas Web3.js -> Caver.js ERC-20은 KIP7과 유사 ERC-721.. 2022. 10. 24. 오픈씨 NFT 거래소, 레이지 민팅(Lazy Minting) 그리고 와이번 프로토콜 (Wyvern Protocol) / 시포트 프로토콜 (Seaport Protocol) NFT 거래소 프로젝트를 재진행하면서 오픈씨가 어떻게 작동하는지 공부하는 시간을 가지고 있다. 오픈씨는 자체적으로 nft를 발행할 수 있는 서비스를 제공한다. 오픈씨에서 자체적으로 제공하는 민팅 툴을 사용해서 nft를 민팅하는 경우엔 ERC1155를 통해서 발행한다. ERC1155 아무래도 멀티 토큰을 지원하는 만큼 비용은 적게 들지만, 개별 토큰에 대한 자유도는 떨어진다는 단점이 있다. 오픈씨는 자체적으로 배포한 ERC721 컨트랙트의 nft들을 별도의 절차 없이 알아서 가져와 마켓에서 보여준다. 오픈씨에서 NFT를 발행하면 리스팅까지는 가스비가 발생하지 않는다. 가스비가 처음으로 부과되는 시점은 NFT 거래가 발생하는 순간이다. 그렇기 때문에, NFT를 발행하는 작가들이 부담하는 가스비는 생각보다 많.. 2022. 10. 21. 클레이튼 caver-js 지갑 연결하기 webpack error Kaikas 연결을 위해 caver-js 설치후 파일을 실행하니 아래와 같은 에러가 발생했다. can't resolve 'fs' in '/users/eunjaeyoon/desktop/project4/beb-cc3-project-04/client/node_modules/caver-js/packages/caver-ipfs/src' 이는 webpack 5 이상 버전부터 caver-js에서 호환성 에러가 있어 발생하는 에러라고 한다. 나는 다음과 같이 방법으로 이슈를 해결했다. rm package-lock.json rm -r node_modules npm install webpack@4.44.2 위와 같은 방법으로 webpack@4.44.2 를 설치 후, webpack.config.js 파일에 아래와 같이 코드.. 2022. 10. 19. Try building your app with 'next build' before starting the production server. Next.js error 💡 이슈 해결하기 더보기 Try building your app with 'next build' before starting the production server. NextJS 파일을 실행하려고 하니 위와 같은 에러가 계속 발생했다. 내가 해결한 방법은 아래와 같다. npm run build npm start or npm run dev npm run build 후 npm start 혹은 npm run build 후 npm run dev 명령어를 실행하면 정상적으로 작동되는 것을 확인할 수 있다. 2022. 9. 12. 리액트 부트스트랩 버튼 클릭시 사이트 전체 reloading, refreshing 되는거 막는 법, e.preventDefault() 💡e.preventDefault() 리액트 부트스트랩에서 제공하는 버튼을 사용하면 버튼 클릭시 자동으로 사이트 전체가 리프레싱 되는 경우가 있다. 이게 내 코드상 필요하지 않은 부분이었고 이를 막기 위해 event handler에 e.preventDefault를 사용하였다. import React from "react"; export default function App() { const onSubmit = (e) => { e.preventDefault(); console.log("refresh prevented"); }; return ( submit ); } 위는 그냥 예제코드이다. onSubmit 함수 안에 e.preventDefault() 만 추가해주면 끝! 2022. 8. 30. req.body가 undefined라면 express 미들웨어 body-parser 모듈을 확인하세요! 💡 Express 미들웨어 body-parser bodyParser 모듈 없이는 post, put 요청 메소드의 req.body를 읽어올 수 없다. body 데이터를 읽기 위해서는 이 모듈을 이용해야 한다. Parser란 가지고 있는 데이터를 내가 원하는 형태의 데이터로 가공하는 과정인 parsing을 수행하는 모듈 혹은 메소드를 일컫는 말이다. 원하는 형식에 맞춰서 해석하는 용도인데 bodyParser말고도 cookieParser, JSON.stringify 등 파서의 종류는 셀 수 없이 많다. 더보기 Contains key-value pairs of data submitted in the request body. By default, it is undefined, and is populated whe.. 2022. 8. 30. NFT 거래소를 위한 스마트 컨트랙트 개발 1. mintNFT function mintNFT(address recipient, string memory tokenURI) public onlyOwner returns (uint256) { _tokenIds.increment(); uint256 newItemId = _tokenIds.current(); _mint(recipient, newItemId); _setTokenURI(newItemId, tokenURI); return newItemId; } ✓ 제대로 작동하는지 확인 MintNFT 함수를 이용해 NFT를 민팅한다. 민팅한 NFT 잘 출력되는 거 확인. 2. listUserNFTs // owner가 보유하고 있는 NFT List function listUserNFTs(address owner).. 2022. 8. 10. ABI (Application Binary Interface) 💡ABI (Application Binary Interface) ABI는 Application Binary Interface의 약자로, 런타임 시 바이너리 코드와 상호작용하기 위한 인터페이스이다. ABI는 바이너리 형태로 되어있는 스마트 컨트랙트가 어떤 인터페이스를 가지고 있는지 알려주는 역할을 한다. ✓ ABI를 사용해 Contract ABI Call 하기 아래와 같이 Hello World 코드를 작성해보자. // SPDX-License-Identifier: MIT pragma solidity 0.8.7; contract HelloWorld{ function renderHelloWorld () public pure returns (string memory greeting){ greeting = "Hew.. 2022. 8. 4. 이더스캔 API(Etherscan API) 이용해보기 💡 Etherscan API 이더스캔에서도 Infura와 같은 이더리움 개발자에게 노드 환경을 제공하는 이더스캔 API를 제공한다. 그럼 아래 공식문서를 찬찬히 읽어보고 이더스캔API를 사용해보자. 이더스캔 API 공식문서 - https://docs.etherscan.io/ Introduction - Etherscan As a means to provide equitable access to blockchain data, we've developed the Etherscan Developer APIs to empower developers with direct access to Etherscan's block explorer data and services via GET/POST requests. doc.. 2022. 8. 3. 노드 RPC Call을 Infura를 통해 제어해보기 💡 노드 RPC Call을 Infura를 통해 제어해보기 Ganache를 이용해 로컬 네트워크 환경에 있는 스마트 컨트랙트를 Web3.js로 제어할 수 있다. 이 외에도 테스트넷 또는 메인넷에 있는 노드 RPC Call을 Infura라는 플랫폼을 통해 스마트 컨트랙트를 Web3.js로 제어할 수도 있다. 아래와 같이 진행하면 된다. 1. 먼저 Infura 프로젝트에서 ENDPOINTS를 ROPSTEN으로 설정한다. 2. Ropsten Network로 변경 후 Endpoints를 복사한다. 테스트를 위해 Remix를 통해 Ropsten Network에 Hello World를 배포한다. 3. 아래와 같이 ABI와 배포된 Contract Address를 복사해 다음과 같은 코드를 만든다. const expre.. 2022. 8. 3. 서버에서 Web3.js 라이브러리 사용하기 💡 서버에서 Web3.js 라이브러리 사용하기 - web3.js 공식문서 - web3.js 콘텐츠 레퍼런스 코드 ✓ 서버 구축하기 프로젝트를 위한 폴더 beb-sprint-web3js를 생성 후 터미널에서 npm init 명령어를 통해 노드 프로젝트를 시작한다. mkdir beb-sprint-web3js cd beb-sprint-web3js npm init npm을 통해 express와 web3를 설치한다. npm install express npm install web3 프로젝트에 Index.js 파일을 만들어 다음 내용을 입력한다. const express = require("express"); const app = express(); const port = 8080; app.get("/", (req.. 2022. 8. 2. 이전 1 2 3 4 다음
