솔리디티26 [220714] 스마트 컨트랙트 구현하기 - 3) 이벤트 (프런트 / 백) [ 프런트 ] 매번 새로 생기는 트러플 네트워크 id 확인 $ truffle migration --reset 가끔 트러플이 꺼져서 재배포를 할경우 간혹 이렇게 networks에 네트워크 id가 두개가 생겨있을 수 있다. 트러플을 새로 켤때 네트워크 id가 새로 생성되어서 그런거니까 고유 id값을 확인해서 아닌걸 지우면 된다. $ truffle console $ web3.eth.net.getId() CA 데이터가 자동갱신 되도록 만들기 저번 블로그 글에서 CA값을 json파일에서 찾아서 직접 붙여넣었다. const Deployed = new web3.eth.Contract( CounterContract.abi, "0xE538196bCb40F7cc12E3e041D24A9b04FA3A16A8" ); 하지만 트.. 2022. 7. 17. [220713] 스마트 컨트랙트 구현하기 - 2) 백엔드에서 요청보내기 React로 프런트 구조 짜기 트랜잭션을 일으키려면 개인키(privateKey)가 필요하다. 하지만 프런트에서 직접적으로 개인키를 사용하기엔 보안이 위험하다. 집적적으로 사용하지 않기 위해 메타마스크(월렛)를 사용해 서명 처리를 할 것이다. 따라서 화면 -> 메타마스크 -> 이더리움 네트워크 이렇게 거쳐가도록 구성을 짤 것이다. React로 메타마스크와 web3 연결하기 메타마스크와 연결해서 계정 정보를 가져오고 web3를 연결하는 코드를 작성한다. // react/src/hooks/useWeb3/jsx import React,{useEffect, useState} from 'react' import Web3 from "web3/dist/web3.min" const useWeb3 = () => { con.. 2022. 7. 14. [220713] 스마트 컨트랙트 구현하기 - 1) 트러플로 구현하기 개발환경 설치&세팅하기 // truffle 설치&세팅 $ npm init -y $ mkdir truffle $ cd truffle $ npm install -g truffle $ npx truffle init // react를 사용하는 front 디렉토리 만들기 $ npx create-react-app front // ganache 네트워크 실행 $ ganache-cli // 없을경우는 설치해주자 npm install ganache-cli 메타마스크에 ganache 네트워크 생성해서 계정 불러오기 트러플로 사용할 코드 작성하기 // truffle/contracts/Counter.sol // SPDX-License-Identifier: MIT pragma solidity ^0.8.15; contract C.. 2022. 7. 13. [220712] 트러플로 스마트 컨트랙트 만들기 트러플 설치하기 install을 한 후에 잘 설치되었으면 truffle version의 결과가 나온다. $ npm init -y // 편한대로 둘 중에 하나 골라서 설치 $ npm install truffle $ npm install -g truffle (전역설치) $ truffle version // 이게 안되면 아래코드 사용 $ npx truffle version //트러플이 전역설정이 안 되어있어서 npx를 사용하는것 메타마스크에 ganache 네트워크 생성해서 계정 불러오기 트러플 세팅하기 $ npx truffle init 코드를 작성하면 트러플로 개발환경을 만들어주는데, 다음과 같은 파일과 디렉토리가 생성된다. 여기서 트러플을 사용하는 목적이 솔리디티 코드 작성과 배포관리라는 것을 알 수 있다... 2022. 7. 12. 크립토좀비) 챕터3 개념 이더리움 네트워크에 컨트랙트를 배포하고나면 절대로 컨트랙트는 변하지 않는다. 컨트랙트를 소유하기 : OpenZeppelin의 Ownable 컨트랙트 컨트랙트가 생성되면 컨트랙트의 생성자가 owner에 컨트랙트를 배포한 사람을 대입함 특정한 함수들에 대해 오직 소유자만 접근하도록 onlyOwner 제어자 추가함 새로운 소유자에게 해당 컨트랙트의 소유권을 옮길 수 있도록 함. 생성자 - 컨트랙트와 동일한 이름을 가진, 생략할 수 있다. 함수가 실행될 때 한번만 실행된다. contract Ownable { address public owner; event OwnershipTransferred(address indexed previousOwner, address indexed newOwner); // 생성자 f.. 2022. 7. 6. 크립토좀비) 챕터2 개념과 sol 0.8.15버전으로 개선한 코드 mapping & address 이더의 잔액을 가진 계정들로 이루어딘 이더리움 블록체인. 각 계정은 계좌번호와 같은 주소를 가지고 있음 ( 계정을 가르키는 고유 식별자 ) 주소는 특정 유저나 스마트 컨트랙트가 소유한다. 구조화된 데이트를 저장하는 방법으로 key-value(키-값)으로 짝지어진 저장소라 할 수 있다. // 금융 앱용으로, 유저의 계좌 잔액을 보유하는 uint를 저장한다: // key가 address, value가 uint mapping (address => uint) public accountBalance; // 혹은 userID로 유저 이름을 저장/검색하는 데 매핑을 쓸 수도 있다 // key라 uint, value가 string mapping (uint => string) userId.. 2022. 5. 31. 크립토좀비로 솔리디티 기초 알기 - 챕터1 / sol 0.8.15버전으로 개선한 코드 컨트랙트(contract) 생성 이더리움 어플리케이션의 기본적인 구성요소로 솔리디티는 이걸 위해 만들어짐모든 변수와 함수는 반드시 어느 한 컨트랙트에 속해있음. 컨트랙트 내에서 상태변수를 선언할 수 있고, 이는 컨트랙트 저장소에 영구적으로 저장된다. contract HelloWorld { pragma solidity ^0.8.15; } 상태 변수 타입스크립트처럼 변수의 상태를 작성해줘야한다. 상태변수는 컨트랙트 저장소에 영구적으로 저장됨 = 이더리움 블록체인에 기록됨 uint thisIsNumber = 100; uint dnaModulus = 10 ** thisIsNumber; string thisIsStr = 'hello'; 새 구조체(struct) 생성 복잡한 자료형 객체를 생성한다고 생각하면 된다... 2022. 5. 31. [220518] 구매기능 만들기 SaleAnimalCard.tsx import { Box, Button, Text } from "@chakra-ui/react"; import React, { FC, useEffect, useState } from "react"; import { mintAnimalTokenContract, saleAnimalTokenContract, web3, } from "../web3Config"; import AnimalCard from "./AnimalCard"; interface SaleAnimalCardProps { animalType: string; animalPrice: string; animalTokenId: string; account: string; getOnSaleAnimalTokens: () =>.. 2022. 5. 18. [220518] 판매자 정보 가져오기 SaleAnimalCard.tsx import { Box, Button, Text } from "@chakra-ui/react"; import React, { FC, useEffect, useState } from "react"; import { mintAnimalTokenContract, web3 } from "../web3Config"; import AnimalCard from "./AnimalCard"; interface SaleAnimalCardProps { animalType: string; animalPrice: string; animalTokenId: string; // 계정을 확인하기 위해 필요한 정보 account: string; // 계정을 확인하기 위해 필요한 정보 } const Sa.. 2022. 5. 18. [220518] 구매 버튼 만들기 components/SaleAnimalCard.tsx 생성 현재 판매중인 이미지와 텍스트를 가져오는 코드 import { Box, Button, Text } from "@chakra-ui/react"; import React, { FC } from "react"; import { web3 } from "../web3Config"; import AnimalCard from "./AnimalCard"; interface SaleAnimalCardProps { animalType: string; animalPrice: string; } const SaleAnimalCard: FC = ({ animalType, animalPrice, }) => { return ( {web3.utils.fromWei(animal.. 2022. 5. 18. 이전 1 2 3 다음
