체인의정석

ThunkTunk는 지연된 작업을 수행하는 코드를 의미하는 프로그래밍 용어.지금 로직을 실행하는 대신 나중에 해당 작업을 수행하는 데 사용할 수 있는 함수 본문이나 코드를 작성 할 수 있다.Redux의 경우 Thunk는 Redux 스토어 및 dispatch, get state메서드와 상호 작용할 수 있는 논리를 내장한 함수를 작성하는 패턴 만약 redux 앱에서 비동기 로직을 작성하게 된다면 thunk를 사용하는 것이 표준이다. (동기에서도 사용가능하긴 함)const thunkFunction = (dispatch, getState) => { // logic here that can dispatch actions or read state}store.dispatch(thunkFunction)thunk 함수..

createEntitiy Adapter의 경우 미리 준비된 reducer (함수들)을 탑재하고 있는 객체이다.addOne / addMany: add new items to the stateupsertOne / upsertMany: add new items or update existing onesupdateOne / updateMany: update existing items by supplying partial valuesremoveOne / removeMany: remove items based on IDssetAll: replace all existing items위와 같이 state를 바꿔 줄 수 있는 reducers들을 내장하고 있다.https://ko.redux.js.org/tutorials/..

Redux 구조Redux는 데이터가 한 방향으로만 흐르는 flux 아키텍처에 따라 설계되었다.Store : Redux에서 모든 Store라 불리는 객체 안에 저장 됨Action, Dispatch : Redux에서는 Action이 일어나면 Dispatch를 하는데 어떤 일이 발생했을 시 Dispatch(송신)을 해서 State를 업데이트 한다.Dispatch된 Action을 받는 부분이 Reducer 이다.Reducer는 현재 State와 받은 Action에 대응해 새로운 State를 반환하는 함수이다.Reducer가 새로운 State를 반환함으로써 Store안의 State가 업데이트 된다.Redux toolkit 기본 예제https://redux.js.org/introduction/getting-sta..

인계를 받을 코드가 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..