분류 전체보기280 메타마스크를 뭄바이 테스트 서버와 연결하기 / 테스트 코인 받기 메타마스크에 접속 후, 보기/숨기기 클릭 테스트 네트워크 켜기 네트워크로 돌아가 네트워크 추가 클릭 https://faucet.polygon.technology/ 뭄바이 테스트 네트워크 사이트에 들어가면 각각에 해당하는 정보가 있다. 보면서 입력 nft 등록을 지원하는 폴리곤 MATIC토큰 사이트 https://faucet.polygon.technology/ 한국어로 번역하면 수도꼭진데.. 그냥 지원 사이트라고 하겠음. nft 등록할때 발생하는 소량의 MATIC을 지원해준다. 자신의 지갑 주소를 복사한 후, Wallet Address에 등록하면 지원코인을 줌. 현재 스무번째 시도중인데 연결이 안됨. 뭐지.. 2022. 5. 17. [220517] 리액트와 메타마스크 연결하기 web3, web3-utils 설치 $ npm i web web3-utils web3 import 하기 CONTRACT에서 saleAnimalToken, mintAnimalToken을 선택해서 각각 ABI를 복사해 아래 코드에 붙여넣는다. import {AbiItem } from 'web3-utils'; // 인터페이스가 정의된 파일 const mintAnmimalTokenAbi: AbiItem[] = 복사한 Abi 붙여넣기; const saleAnmimalTokenAbi: AbiItem[] = 복사한 Abi 붙여넣기; web3로 로그인 ENVIRONMENT를 Injected Web3로 연결하면, 메타마스크로 자동 연결이 되면서 연결상태로 바뀐다. 리액트에게 ethereum 오브젝트를 인식시키는 코드 r.. 2022. 5. 17. [220517] frontend 설치 / chakra-ui boilerplate web3 실행을 보조해주는 boilerplate를 git으로 다운받아 npm install로 설치 https://github.com/h662/web3-boilerplate git clone https://github.com/h662/web3-boilerplate.git chakra-ui 설치 https://chakra-ui.com/guides/getting-started/cra-guide chakra-ui 공식 홈페이지에 들어가면 다음과 같은 화면이 보인다. 나는 리액트를 사용하므로 리액트를 선택하고, npm을 사용하므로 npm 코드를 복사함. // 설치 코드 $ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 frame.. 2022. 5. 17. AWS EC2 인스턴스 생성, ssh key.pem으로 서버 접속하기 AWS에 먼저 가입해야 다음 과정을 할 수 있다. ( https://aws.amazon.com/ko/ ) 1) 솔루션 구축 -> 버츄얼머신 런치하기 클릭 2) 인스턴스 시작 - 이름 생성 3) 사용할 어플리케이션 선택 (우분투) 난 우분투환경이 편해서 우분투를 선택했다. AMI는 22.04버젼을 골랐고, 프리 티어 사용 가능한걸 선택하면 된다. 4) 인스턴스 유형 고르기 시간당 요금이 나가므로 잘 보고 선택하자. ( 내가 선택한 요금은 인스턴스 하나당 750시간 무료. ) 보통은 이렇게 2개를 생성해서 필요할때마다 켜서 사용하고 사용하지 않을때는 끈다고 함다. 5) 키페어 선택 원하는 키 페어 이름을 작성하고 생성하기를 누르면 자동적으로 내 서버에 대한 키를 만들어준다 잃어버리면 재생성이나 찾기 기능을 .. 2022. 5. 16. [220516] nft 구매기능 만들기 SaleAnimalToken.sol // SPDX-License-Identifier: MIT -> 라이센스 pragma solidity ^0.8.0; // 컴파일러 명시 import "MintAnimalToken.sol"; contract SaleAnimalToken { MintAnimalToken public mintAnimalTokenAddress; constructor (address _mintAnimalTokenAddress) { mintAnimalTokenAddress = MintAnimalToken(_mintAnimalTokenAddress); } mapping(uint256 => uint256) public animalTokenPrices; uint256[] public onSaleAnima.. 2022. 5. 16. [220516] nft 판매등록하기 / 오픈제플린, 솔리디티 SaleAnimalToken.sol // SPDX-License-Identifier: MIT -> 라이센스 pragma solidity ^0.8.0; // 컴파일러 명시 import "MintAnimalToken.sol"; contract SaleAnimalToken { // mintAnimal을 디플로이하면 나오는 주소값을 저장함 MintAnimalToken public mintAnimalTokenAddress; constructor (address _mintAnimalTokenAddress) { mintAnimalTokenAddress = MintAnimalToken(_mintAnimalTokenAddress); } // 가격을 관리하는 매핑 mapping(uint256 => uint256) publ.. 2022. 5. 16. [220516] 민팅에 type을 랜덤으로 생성하기 MintAnimalToken.js // SPDX-License-Identifier: MIT pragma solidity ^0.8.0; import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol"; contract MintAnimalToken is ERC721Enumerable { constructor() ERC721("h662Animals", "HAS") {} mapping(uint256 => uint256) public animalTypes; // 앞에있는 uint256 = animalTokenId // 뒤에있는 uint256 = animalTypes // 즉, animalTokenId를 입력하면 animalTypes이 나오.. 2022. 5. 16. [220516] Remix와 연결해서 민팅하는 방법 / 오픈제플린, 솔리디티 민팅하는법 솔리디티(Solidity) : 이더리움 등 블록체인 플랫폼에서 스마트 계약 작성과 구현에 사용되는 계약 지향 프로그래밍 언어 차크라(Chakra) : Microsoft가 자체적으로 사용하고 있던 JavaScript 엔진. 오픈제플린(oz) : 솔리디티 기반의 스마트 컨트렉트를 개발하는 표준 프레임워크. truffle과 유사하지만, truffle 보다 기능이 다양함. // 제플린 설치 $ npm i @openzeppelin/contracts // remix 라이브러리 설치 $ npm install -g @remix-project/remixd // remix 실행 $ remixd -s . --remix-ide https://remix.ethereum.org // remix 삭제 $ npm unin.. 2022. 5. 16. [220510] Next.js란? Next.js란? : 리액트 라이브러리의 프레임워크 라이브러리 단순활용이 가능한 도구들의 집합. 직접 들어서 사용하고 제어한다는 느낌이 강함. 프레임워크 소프트웨어의 특정한 문제를 해결하기위해 상호협력하는 클래스와 인터페이스의 집합. 안에 들어가서 사용한다는 느낌이 강함. 사용하는 패턴이 정해져있고 벗어날 수 없다. Next.js의 장점 1. SSR이 가능하다. SSR (Server-Side Rendering) 데이터를 먼저 받고 컴포넌트와 함께 한꺼번에 실행해서 hmtl을 그려냄. 브라우저-프론트-백 통신방법 -> 싱글페이지 어플리케이션 x CSR (Client Side Rendering) 컴포넌트를 먼저 실행하고, 데이터를 나중에 받아서 넣어야할 데이터만 바꿔넣는 방법. 단점 : 검색봇(SEO)에 걸.. 2022. 5. 13. [220506] 미들웨어) redux-saga redux-saga란? redux-saga는 redux-thunk 다음으로 가장 많이 사용되는 라이브러리다. redux-thunk는 함수를 디스패치 할 수 있게 해주는 미들웨어였다. redux-saga는 액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용한다. redux-saga는 redux-thunk로 못하는 다양한 작업들을 처리 할 수 있다. 비동기 작업을 할 때 기존 요청을 취소 처리 할 수 있다 특정 액션이 발생했을 때 이에 따라 다른 액션이 디스패치되게끔 하거나, 자바스크립트 코드를 실행 할 수 있다. 웹소켓을 사용하는 경우 Channel 이라는 기능을 사용하여 더욱 효율적으로 코드를 관리 할 수 있다. API 요청이 실패했을 때 재요청하는 작업을 할 수.. 2022. 5. 11. 이전 1 ··· 11 12 13 14 15 16 17 ··· 28 다음
