| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- vue기초
- git rebase
- 티스토리챌린지
- Vue.js
- 계정추상화
- rust 기초
- 러스트 기초 학습
- multicall
- erc4337 contract
- 스마트컨트렉트 함수이름 중복 호출
- ethers
- 러스트 기초
- ethers v6
- 체인의정석
- 머신러닝기초
- 오블완
- ethers websocket
- 컨트렉트 배포 자동화
- 스마트 컨트렉트 함수이름 중복
- 러스트기초
- SBT표준
- erc4337
- 스마트컨트렉트 예약어 함수이름 중복
- ethers type
- 스마트컨트렉트테스트
- ambiguous function description
- ethers typescript
- 컨트렉트 동일한 함수이름 호출
- Vue
- chainlink 설명
- Today
- Total
체인의정석
Metamask + Next.js 적용해서 프론트 페이지 만들어보기 본문
*튜토리얼을 진행한 repo
https://github.com/hyunkicho/reactMetamask
GitHub - hyunkicho/reactMetamask: basic template for react and metamask
basic 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 정도만 알고 있으면 금방 익힐 수 있다.
https://nextjs.org/learn/react-foundations/building-ui-with-components
React Foundations: Building UI with Components | Next.js
Learn how to build composable UI with React Components.
nextjs.org
- Chapter 7 까지는 react에 대한 설명 (정말 잘나와있음)
실습 코드
https://github.com/hyunkicho/reactMetamask/tree/main/react-sample
- Chapter 8 부터는 next 설명
실습 코드
https://github.com/hyunkicho/reactMetamask/tree/main/next-sample
reactMetamask/react-sample at main · hyunkicho/reactMetamask
basic template for react and metamask. Contribute to hyunkicho/reactMetamask development by creating an account on GitHub.
github.com
2. 메타마스크 연동해보기아래 예제 학습
https://metamask.io/news/developers/how-to-implement-metamask-sdk-with-nextjs/
How to Implement MetaMask SDK with Nextjs | MetaMask News
Learn how to integrate a 'Connect Wallet' button with MetaMask in Next.js. This tutorial covers setup, MetaMask SDK usage, and UI creation with ShadcnUI for blockchain interaction.
metamask.io
3. rainbow wallet로 만들기 예제 (rainbow+wagmi+next)
https://www.rainbowkit.com/ko/docs/installation
설치 — RainbowKit
RainbowKit으로 시작하고 실행하기
www.rainbowkit.com
4. git hub pages에 배포하기
https://velog.io/@pj9211/Next.js-Github-Pages%EC%97%90-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0
Next.js Github Pages에 배포하기
리액트로 만든 프로젝트를 Github Pages에 배포해본 경험은 많지만 실제로 Next.js로 배포해본 경험은 거의 전무하다.일단 Next.js로 배포하기 위해선 React보다 더 설정해줘야 할 것이 많다. 그러다보니
velog.io
'개발 > frontend' 카테고리의 다른 글
| Next.js Hydration 에러 처리 (Rainbow Wallet 사용 시 적용 필요) (0) | 2025.04.02 |
|---|---|
| [React+Next+typescript+rainbow wallet] 관리자 페이지 만들고 rainbow wallet 붙이기 (블록체인 앱 관리자 페이지 만들기) (0) | 2025.03.27 |
| 텔레그램 봇 기본 틀 만들어 보기 (기본 템플릿, 깃허브 소스코드 및 사용방법 포함, javascript & typescript) (0) | 2023.07.29 |
| React 시작해보기 - Tic Tac Toe 튜토리얼 프로젝트로 기초 다져보기 (0) | 2023.07.22 |
| React 시작해보기 - 튜토리얼 사이트에서 기초 특징 빠르게 익히기 (0) | 2023.07.15 |
