Cute Bow Tie Hearts Blinking Pink Pointer

Dapp 7

[typescript] NFT 토큰 민팅하는 dApp 간단히 구현하기

목차 - 디렉토리 구조 - 모듈 설치 및 기본 설정 - 구현 코드 - 결과 디렉토리 구조 모듈 설치 및 기본 설정 프론트 npx create-next-app@latest --typescript front npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 npm install web3 샤크라라는 라이브러리를 사용해서 이미 만들어져있는 리액트 컴포넌트를 사용해서 편하게 작업할 것임 백 mkdir truffle cd truffle truffle init cd contracts npm init npm i openzeppelin-solidity truffle.config.js에서 development 주석 해제 https:..

[스마트 컨트랙트] 물건 사고, 환불하는 dApp 간단히 구현

사과를 구매하고, 환불할 수 있는 아주아주 간단한 dApp을 구현해보겠다. 목차 - 디렉토리 구조 - truffle 백 - 프론트 - 메타마스크 연결 - 물건 사고, 환불해보기 디렉토리 구조 Truffle 배포하기 터미널 열고 npx ganache-cli 다른 터미널에 mkdir truffle cd truffle truffle init truffle/contracts/AppleShop.sol // SPDX-License-Identifier: MIT pragma solidity ^0.8.15; contract AppleShop{ mapping (address => uint) myApple; //address를 넣어주면 uint(정수)값이 튀어나온다. function buyApple() public paya..

[스마트 컨트랙트] 투표 dApp 만들어 보기

트러플을 활용해서 투표 기능이 있는 간단한 dApp 코드를 간단하게 작성하고 jest로 테스트 해보겠다. 목차 - sol코드 - jest코드 mkdir truffle cd truffle truffle init 터미널 새로열고 npx ganache-cli trffle-config.js development 부분 주석해제 truffle/contracts/Voting.sol // SPDX-License-Identifier: MIT pragma solidity ^0.8.15; contract Voting { string[] public candidateList; //배열 정의 mapping(string=>uint8) public votesReceived; // 키값에 string을 넣으면 uint8으로 valu..

[truffle, 스마트 컨트랙트] 토큰 생성해보기

mkdir truffle cd truffle truffle init contracts/SimpleStore.sol // SPDX-License-Identifier: MIT pragma solidity ^0.8.15; contract SimpleStore{ uint256 private value; address public owner; constructor(uint256 _value){ //배포됐을 때 생성 value=_value; owner = msg.sender; //스마트컨트랜트 발동한 사람의 주소 : 누구일까? 배포자의 공개키. } //contructor의 인스턴스는 CA 이전에 생성된다. function getAddress() public view returns (address){ return m..

[ truffle, 스마트 컨트랙트 ] 솔리디티 event 사용해서 dApp 간단하게 구현해보기

목차 - 솔리디티 event - dApp 구현 - 디렉토리구조 - 코드 구현 오늘은 솔리디티 event에 대해서 알아 보겠다. event 라는 것은 블록체인 네트워크의 블록에 특정값을 기록하는 것을 말한다. 예를들어서, 송금하기 라는 함수가 있다고 가정하였을때, 송금하기 버튼을 누르면, 누른 사람의 계좌와 금액이 이벤트로 출력이 되어서 블록체인 네트워크 안에 기록이 된다. 이렇게 로그를 사용하여, 블록에 각인시키는것은 일반적으로 string 이나 다른 값들을 스마트컨트랙에 저장하는것보다 효율적이다. 이전 글(바로가기)에 이어서 코드를 조금 수정하는 방향으로 event를 사용해서 dApp을 구현하겠다. 디렉토리 구조 이제 카운터만 되는... dApp 구현을 위한 코드를 작성해보겠다. 초기설정하기 터미널을 ..

[truffle, 스마트 컨트랙트] d App 간단하게 만들어보기

목차 - truffle로 컨트랙트 배포하기 - 디앱이란? - 프론트 구현하기 컨트랙트 배포하기 트러플로 Counter 만들어보겠다. - Truffle 파일 만들기 cd truffle npx truffle init Front : create-react-app front 프론트도 만들어주겠다. create-react-app front # 이번엔 geth 말고 가나슈를 사용하겠다. 그 이유? geth 상당히 귀찮음. 가나슈는 트랜잭션이 발동할 때마다 알아서 마이닝을 해서 블럭이 생성된다. 즉, 편하다~ 새로운 터미널을 열어서 npx ganache-cli # Private Keys (0) 0xf4513fb9b43f........................... 가장 첫번째 비밀키를 메타마스크에 등록해주겠다.(..

[truffle] 트러플 사용 방법 알아보기.

목차 - 트러플 설치 및, 설정 - 트러플 컨파일 - 트러플 배포 - 트러플 사용하기 이더리움 dapp을 작성하고 사용하려면 컴파일하고 네트워크에 배포하고 배포된 컨트랙트와 연결해야하는 과정을 거치게 된다. 대략 solc를 사용해서 컴파일, 컴파일 된 파일에서 ABI 정보를 가져와서 geth에서 배포하고, 후에 컨트랙트 주소를 저장해두고 후에 사용할 때 주소를 통해서 접근한다. 실제로 개발을 해보면 보통 복잡한 게 아니다. 그래서 이러한 걸 해결해주는 프레임워크가 있다. 바로 트러플[truffle]이다. 트러플은 컴파일, 배포, 디버그, 테스트 기능을 제공한다. 이제 사용법을 알아보자. 1. 트러플 설치 및 설정 npm install -g truffle 설치가 끝나면 truffle version 버전이 ..