체인의정석

✅ "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..

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

만약 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..

코드를 서버에 올리게 되면서 logger에 대한 경로나 환경변수 분리 등을 정리해봤다.먼저 로그를 남기는 경우 winston과 winston-daily-rotate-file을 사용하였다. "winston": "^3.17.0", "winston-daily-rotate-file": "^5.0.0",이렇게 2개를 이용하면 로그 레벨 설정과 파일 관리가 편리하였다.winston 사용방법은 아래에 정리를 따로 해둔것이 있다.https://it-timehacker.tistory.com/524 winston으로 백엔드 로그 관리하기여태까지 로그 관리의 경우 log4.js로 이미 진행중인 백엔드에 온보딩하여 남긴 경험밖에 없었는데, 따로 이벤트 봇을 만들게 되어 여기서 winston으로 로그 ..

어떤 행을 수정할 때 키 값으로만 접근하도록 기본값이 설정되어 있는 에러이다.이를 해결하기 위해서는 mysql workbench의 설정값을 바꿔주거나 Settings 먼저 누르고맨 닡에 SafeUpdates를 해제해 주면 된다.아니라면 일회성으로는set sql_safe_updates=0;명령어를 실행시켜 주면 된다.