[TIL] 2023-06-22 DAY62

---

Project

GIT 주소
https://github.com/dowoo303/SOLIDITY
https://github.com/dowoo303/hardhat

---

오늘 배운것들

각종 팁

회고

---

💻 Solidity 코딩

✅ typescript

1. npx create-react-app 0622 --template typescript : 0622 폴더에 typescript와 react설치

2. 테일윈드 설치
   npm install -D tailwindcss
npx tailwindcss init

3. tailwind.config.js에 붙여넣기

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. index.css에 붙여넣기

@tailwind base;
@tailwind components;
@tailwind utilities;

5. app.css와 logo.svg 삭제

FC와 같은 것들을 활용하는 이유는 타입을 자동으로 체크해주기 때문이다.

props: props를 할 때도 타입을 지정해줘야한다.(interface와 generics을 이용)
*제네릭(generics): 데이터 타입을 외부에서 지정해줌

🟥 코드

import { FC, useState } from "react";

export enum Color {
  Pink = "pink",
  Red = "red",
  Blue = "blue",
  Green = "green",
}

export interface BoxProps {
  color: Color;
  width: number;
  height?: number;
}

const Box: FC<BoxProps> = ({ color, width, height }) => {
  const [newWidth, setNewWidth] = useState(width);

  const onClickBox = () => {
    setNewWidth(newWidth + Math.random() * 100);
  };

  return (
    <div
      style={{
        backgroundColor: color,
        width: newWidth,
        height: height ? height : newWidth,
        margin: 40,
        transition: "1s",
      }}
      onClick={onClickBox}
    ></div>
  );
};

export default Box;

---

💻 Project

트랜잭션 추적

컨트랙트 안에서는 트랜잭션 추적이 불가능하다 ..
= 트랜잭션 검사 기능을 만들 수 없음
.. 클났는데?

대책

일단 간단한 출첵 기능이라도 만들어야겠다.
하나의 거대 컨트랙트 안에서 이중 mapping으로 각종 프로젝트들 컨트랙트 관리하고 각 지갑 주소를 넣어서 출첵 count가 나오도록 먼저 만들어봐야겠다.
그리고 그 count만큼 nft민팅시에 할인이 되는 코드부터 구성해보자.