체인의정석

인계를 받을 코드가 Redux위주로 작성되어 있어서 정리를 하였다.Redux에 대한 기초지식이 없는 상황에서 빠르게 기본틀을 살펴보는것을 목적으로 지피티에게 기본 예제를 생성해서 분석해보았다.0. REDUX 기초 개념=> 여러 페이지에서 공통적으로 사용되는 저장소 같은 개념, 1. Store (저장소)앱의 전체 상태(state)를 담고 있는 객체입니다.하나의 애플리케이션에는 하나의 Store만 존재합니다.2. Action (행동)상태를 어떻게 바꿀 것인지를 설명하는 객체입니다.필수 속성: type (문자열){ type: "INCREMENT" }3. Reducer (감소기)기존 상태(state)와 action을 받아서, 새로운 상태를 반환하는 순수 함수입니다.상태의 변화는 여기에서 정의됩니다.functio..

1. JWT 저장 위치JWT는 로컬 스토리지, 세션 스토리지에 사용이 가능한데 세션 스토리지에 사용하는 것이 주기가 더 짧음개발자 도구의 Applicaion에 들어가면 세션 스토리지에 발급된 jwt를 확인할 수 있다.2. 로그인시 JWT 발급백엔드에 JWT에 대한 검증 로직 및 각 API에서 JWT의 role을 보고 처리하는 로직을 만들어 준다.그러나 프론트엔드에서도 jwt의 기간이 만료되거나 유효한 형태인지 정도의 체크는 해주고 유효하지 않을 경우 로그인 화면으로 보내서 jwt를 재발급을 요청하는 과정이 필요하다.interface JWTHeader { alg: string; typ: string;}interface JWTPayload { wallet_address: string; ..

이전 게시글https://it-timehacker.tistory.com/537 [React+Next+typescript+rainbow wallet] 관리자 페이지 만들고 rainbow wallet 붙이기 (블록체인 앱 관리자 페이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.tait-timehacker.tistory.com위의 게시글을 통해 기본 설치를 한 후메타마스크를 이용..

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

*튜토리얼을 진행한 repohttps://github.com/hyunkicho/reactMetamask GitHub - hyunkicho/reactMetamask: basic template for react and metamaskbasic template for react and metamask. Contribute to hyunkicho/reactMetamask development by creating an account on GitHub.github.com* 학습 순서는 React 복습, Next.js 학습, Metamask + Next.js 적용으로 진행1. React & Next.js해당 공식 사이트에서 진행 - html, css, Javascript 정도만 알고 있으면 금방 익힐 수 있다.h..

요즘 우리 팀에서는 텔레그램 봇을 통해 다양한 DAPP 관리나 모니터링 등을 하고 있다. 보아하니 매우 유용하게 사용이 가능할거 같다는 판단이 들어 이에 따라 나도 한번 텔레그램 봇을 학습해보려고 한다. * 일단 해당 내용의 경우 아래 깃허브 브랜치에 만들어 두었다. https://github.com/hyunkicho/telegrambot/tree/demo/telegrambot 1. 텔레그램에서 bot father 계정 찾고 봇 계정 만들기 먼저 텔레그램 아이디로 봇 파더 계정에게 말을 걸어서 계정을 할당받아야 한다. /start 로 말을 걸면 각 종 명령어들이 나온다. /newbot 명령어로 새로운 봇을 만들도록 시키게 되면 이름을 만들라고 시키는데 bot으로 끝이 나는 이름이면 다 오케이다. 그리고 ..