본문 바로가기

리액트47

타입스크립트의 타입 타입스크립트의 타입 : 을 사용해서 자바스크립트 코드에 타입을 정의하는 방식을 타입표기(Type Annotation)이라고 한다. String let str: string = 'hi'; Number let store: number = 123412342; // number 타입이 너무 길때는 구분을 위해서 _를 넣을수 있다. let store_1: number = 123_4123_42; Boolean let isLoggedIn: boolean = false; Array let arr: number[] = [1,2,3]; let arr: Array = [1,2,3]; Tuple 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다. 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 생.. 2022. 10. 11.
Next에 Chakra 설치와 사용법 Next에 차크라 세팅 npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 Next에 차크라 세팅 // pages/_app.js import { ChakraProvider } from '@chakra-ui/react' function MyApp({ Component, pageProps }) { return ( ) } export default MyApp 컴포넌트에 차크라 세팅 // pages/_app.js import { ChakraProvider } from '@chakra-ui/react' // 1. Import the extendTheme function import { extendTheme } from '@c.. 2022. 7. 31.
[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.
[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.
[220518] 판매페이지 작성하기 구현하려는 기능 onSaleAnimalTokenArray 인덱스 값을 넣었을때 몇번째인지(=tokenId) 값을 알려줌 getAnimalTokenPrice tokenId를 입력하면 가격을 알려줌 (Wei 기준) animalTypes 인덱스 값을 넣었을때 뽑은 카드가 몇번인지 알려줌. animalTokenPrices 뽑은 카드 번호를 입력하면 얼마인지 알려줌. (중복값이 나오는 경우는 어떻게 나오지) 코드 구현 sale-animal.tsx import React, { FC, useEffect, useState } from "react"; import { Grid } from "@chakra-ui/react"; import { IMyAnimalCard } from "../components/MyAnimal.. 2022. 5. 18.
[220518] 최적화를 위한 리팩토링하기 MintAnimalToken.tsx // SPDX-License-Identifier: MIT pragma solidity ^0.8.0; import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol"; import "SaleAnimalToken.sol"; // MintAnimalToken이 SaleAnimalToken보다 먼저 생성되므로 // 자동적으로 가져올 수 없으니 임의로 import 해주기 contract MintAnimalToken is ERC721Enumerable { constructor() ERC721("h662Animals", "HAS") {} SaleAnimalToken public saleAnimalToken;.. 2022. 5. 18.
[220518] 판매 버튼 만들기 입력창에 가격을 입력하고 Sell 버튼을 누르면 가격이 등록되게 만들기 MyAnimalCard.tsx import { Box, Button, Input, InputGroup, InputRightAddon, Text, } from "@chakra-ui/react"; import React, { ChangeEvent, FC, useState } from "react"; import { saleAnimalTokenContract, web3 } from "../web3Config"; import AnimalCard from "./AnimalCard"; export interface IMyAnimalCard { animalTokenId: string; animalType: string; animalPrice: s.. 2022. 5. 18.
[220518] 민팅했었던 주소로 접속하기 내가 자꾸 까먹어서 작성하는 글 리믹스를 껐다가 다시 켜면 다시 처음부터 진행해야하는데, 민팅을 진행했던 예전 작업으로 돌아가고 싶을때는 예전 주소를 찾아와 진행하면 된다. // 개별적으로 적어놓은 주소 const mintAnimalTokenAddress = "민팅했던 주소"; export const saleAnimalTokenAddress = "판매등록했던 주소"; CONTRACT > MintAnimalToken / SaleAnimalToken 해당하는 목록 선택 At Address에 해당하는 주소를 입력하고, At Address를 클릭하면 개체가 생성된다. 2022. 5. 18.

티스토리툴바