체인의정석

이전 게시글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으로 끝이 나는 이름이면 다 오케이다. 그리고 ..

https://it-timehacker.tistory.com/439 React 시작해보기 - 튜토리얼 사이트에서 기초 특징 빠르게 익히기 그간 프론트 엔드를 사용할때는 그냥 ejs, html, bootstrap 등만 사용했었는데 이젠 프론트 엔드 프레임워크를 하나쯤은 써보고 싶었다. 몇년 전부터 미루고 미루다가 드디어 react를 시작해보기로 마 it-timehacker.tistory.com 지난 번에 기본적인 문법을 익혔으니 React를 간단하게 체험해 보기 위해서 tic tac toe를 한번 보려고 한다. 리액트 공식 홈페이지의 튜토리얼이다. https://react.dev/learn/tutorial-tic-tac-toe Tutorial: Tic-Tac-Toe – React The library fo..

그간 프론트 엔드를 사용할때는 그냥 ejs, html, bootstrap 등만 사용했었는데 이젠 프론트 엔드 프레임워크를 하나쯤은 써보고 싶었다. 몇년 전부터 미루고 미루다가 드디어 react를 시작해보기로 마음 먹었다! 튜토리얼 사이트 무언가를 처음 배울 때 나는 무조건 공식 홈페이지의 튜토리얼 사이트 부터 본다. https://react.dev/learn Quick Start – React The library for web and native user interfaces react.dev 내가 원래 배우고 익히는 속도가 느리긴 하지만 그냥 나는 내 속도대로 천천히 공부해야지 컴포넌트 일단 컴포넌트라는 유익한 것을 바로 알려주는데 이렇게 함수를 만들어서 태그를 명시하고 난 후 function MyBu..