1. Buildspace : Intro to web3 -- build a web3 version of Twitter:

https://app.buildspace.so/projects/CO02cf0f1c-f996-4f50-9669-cf945ca3fb0b

buildspace

이 코스는 web3 페이지를 만든다. 그런데 그냥 만드는게 아니고

(1)이더리움 컨트랙트를 작성/ 테스트하고(run)

(2)컨트랙트를 온체인에 배포하고(deploy)

(3)프론트만들기- 아까 배포한 온체인을 적용해서 프론트만들기

이런 구조로 이루어져있다.

 

이렇게 웹3 앱과, 이더리움 스마트컨트랙트를 배포하는 절차를

Shipping이라고 한다.

 

(1)스마트컨트랙 작성: 서버코드 짜는것과 비슷하게 로직을 짠다

(2)컨트랙트 온체인에 배포: 원칙적으로는 모두가 배포된 스마트컨트랙에 접속하고, run할수 있게됨.

(3)클라 웹사이트만들기: 실제로 유저들이 활동하고 스마트컨트랙과 상호작용하는 단

 

강의를 따라 렛츠고

---

 

필요한 툴:

Hardhat, VSCode, replit (레플릿 진짜 편하다 진짜!! 코테 공부할때도 편했는데 js는 배포까지 해줌) 

 

1. Hardhat 

local Ethereum network를 쉽게 가동(spin up)하게 도와줌

-로컬 이더리움 네트워크 돌릴때(run) 씀

-테스트넷 이더리움도 줌

-테스트 어카운트도 줌-테스트넷 배포도 도와줌(deploy)

디테일한 장점 (로그도 쓰게 도와줌)

 

이제 npx hardhat run scripts/run.js  돌리면 자동으로 모르는 지갑이 뭔가 실행해줄건데 그게 다 하드햇 계정임

hre.ethers. 계열 코드도 다 하드햇에서지원함

컴파일시 hre 

 

2.VSCode

컴파일/빌드/디플로이는 하드햇으로해도

결국 편집기가 필요하다

 

3.Replit 

프론트 편집/배포 도와줌 그저 갓갓

 

4.Alchemy

gives us a simple way to deploy to the real Ethereum blockchain.

hardhat.config.js 에 알케미 API URL과 배포할 지갑 프라이빗키를 제공해야함

 

5. 이더스캔, 테스트넷

https://rinkeby.etherscan.io/

그냥 이더스캔에서 테스트넷으로 바꿔도 잘 검색이안되는데 아예여기서 하면 잘됨

 

 

---

 

주로 하는것

-프론트에 메마 연결확인 및 연결

-컨트랙트 Deploy시 프론트 연결단 변경

•   contractAddress in App.js바꾸기
•   ABI 변경 : artifacts 파일의 json 파일 복사해서 replit의 src/utils/WavePortal.json에 붙여넣기

-컨트랙트에 데이터 읽기

-컨트랙트에 데이터 쓰기

-컨트랙트에 funding

-돈보내기(트랜젝션)

-랜덤 만들기

-쿨타임 만들기

 

다 완성된 예제 코드

https://gist.github.com/adilanchian/93fbd2e06b3b5d3acb99b5723cebd925

 

솔리디티 개념

constructor

emit

require

 

 

js 개념

useEffect

 

---

전체코드