체인의정석

✅ "use client"란?"use client"는 Next.js 13 이상에서 도입된 새로운 지시어로,그 파일(또는 컴포넌트)이 **클라이언트 컴포넌트(Client Component)**임을 명시하는 선언입니다.🔍 왜 생겼을까?Next.js 13부터는 app/ 디렉터리에서 기본적으로 모든 컴포넌트가 **서버 컴포넌트(Server Component)**로 간주됩니다.서버 컴포넌트는 HTML만 렌더링하고, 브라우저에서 JS 실행은 안 됩니다.따라서 useState, useEffect, useContext, window 등 클라이언트 전용 API를 쓸 수 없습니다.이런 클라이언트 전용 기능을 쓰려면 파일 상단에 👇"use client"이렇게 명시해줘야 클라이언트 컴포넌트로 바뀝니다. 💡 예를 들어....

Next.js에서 자주 마주치는 Hydration Error는 **SSR(Server-Side Rendering)**과 CSR(Client-Side Rendering) 사이의 차이 때문에 발생🔍 Hydration이란?Next.js는 서버에서 HTML을 먼저 렌더링한 후, 클라이언트에서 React가 해당 HTML에 이벤트 핸들러와 상태를 붙이는 과정을 "Hydration"이라고함⚠️ Hydration Error란?서버에서 렌더링된 HTML과 클라이언트에서 렌더링되는 결과가 다를 때 발생하는 오류예를 들어:const [count, setCount] = useState(Math.random());이 코드는 서버와 클라이트에서 Math.random()의 결과가 다르기 때문에, 두 버전의 DOM이 달라지고, h..

1. 관리자 페이지 기본 템플릿다운로드 순서1. 템플릿https://tailadmin.com/download Download Free Tailwind Admin Template - TailAdminDownload TailAdmin Now Select your preferred option below to start Download and Kickstart your journey.tailadmin.com2. 버전 조정npm install react@18.2.0 react-dom@18.2.0npm install3. 실행 npm run dev2. Next.js의 페이지 라우팅 (관리자 페이지 추가 및 제거)Next.js의 App Router는 아래 우선순위 규칙에 따라 라우팅을 결정합니다:1️⃣ app/pag..

계정추상화를 이용한 코드를 3번째 짜면서 이제 좀 익숙해졌기에 잊지 않기 위해서 여기에 핵심 내용들을 다시 정리해둔다.구현 전에 체크해야할 사항들먼저 계정추상화의 현재 최신 버전인 0.7.0과 0.6.0 은 userOp의 구성요소가 다르다. 0.7.0이 userOp를 더 간소화 시켰기에 가스비가 더 효율적이지만 0.6.0으로 구현된 프로젝트들도 많기 때문에 버전을 항상 체크해야한다. "@account-abstraction/contracts": "^0.6.0",해당 모듈을 사용하면 된다. 해당 코드는 eip 4337을 제안한 팀에서 만들다 보니 교과서처럼 보고 쓸 수 있다.또한 각 버전별로 호환되는 오픈제플린 버전이 필요한데 0.6.0 버전의경우 "@openzeppelin/contracts": "^4.9...

VRF(Verifiable Random Function)는 검증 가능한 랜덤 함수로, 블록체인 환경에서 안전하고 예측 불가능한 난수를 생성하는 데 사용됩니다. VRF의 주요 특징은 다음과 같습니다:예측 불가능성: 입력값과 비밀키를 모르는 사람은 출력을 예측할 수 없습니다.검증 가능성: 공개키를 사용하여 출력의 정당성을 검증할 수 있습니다.일관성: 동일한 입력과 비밀키에 대해 항상 같은 출력을 생성합니다.@kenshi.io/node-ecvrf 모듈은 Node.js 환경에서 VRF 기능을 구현한 라이브러리입니다. 이 모듈의 주요 함수들은 다음과 같습니다:prove(secretKey, message): 주어진 비밀키와 메시지를 사용하여 VRF 증명을 생성합니다.verify(publicKey, message, ..

txhash로 부터 데이터를 뽑아낼 때에는 다음과 같이 뽑아내면 된다.const getTxDataFromHash = async (provider, txhash) => { const txReceipt = await provider.getTransactionReceipt(txhash); const res = {}; res.blockNumber = Number(txReceipt.blockNumber); res.gasUsed = Number(txReceipt.gasUsed); const blockTimestamp = await provider.getBlock(Number(txReceipt.blockNumber)); res.blockTimestamp = blockTimestamp.timestamp; ..

만약 mysql 데이터베이스에 시간을 UTC기준으로 시간을 넣거나, 블록체인의 blocktimestamp를 통해서 UTC시간을 뽑아내고 db에 넣고 싶을때는 아래 코드를 사용하면 된다.function getCurrentUTCDate() { const date = new Date(); return formatUTCDateToCustom(date);}function getNextUTCDate() { const date = new Date(); date.setUTCDate(date.getUTCDate() + 1); return formatUTCDateToCustom(date);}function formatUTCDateToCustom(date) { const pad = (num) => String(n..

node.js에서 mysql2를 사용하여 상호작용 하는 코드는 다음과 같다.const mysql = require('mysql2');const { logger } = require('./logger');require("dotenv").config();const MYSQL_HOST = process.env.MYSQL_HOST const MYSQL_PORT = process.env.MYSQL_PORTconst MYSQL_DATABASE = process.env.MYSQL_DATABASE const MYSQL_USER = process.env.MYSQL_USERconst MYSQL_PASSWORD = process.env.MYSQL_PASSWORD// Promisify the connection.query m..