[TIL] Part4 - DAY63 Project - NextJS, 출석체크 기능 추가

박동우·2023년 6월 23일

블록체인 스쿨 3기

목록 보기
59/72

[TIL] 2023-06-23 DAY63


Project

GIT 주소
https://github.com/dowoo303/SOLIDITY
https://github.com/dowoo303/hardhat


오늘 배운것들

  1. NextJS 시작

각종 팁

  1. 프론트에서 메타마스크 사용안하는 기능들은 컨트랙트 함수 호출시에 msg.sender 안들어간다.

회고

  1. NextJS+ts 조합으로 프로젝트 진행 추천
    https://nextjs.org/




💻 Solidity 코딩

✅ NextJS

기본 프로세스
웹페이지 접속 -> 컨텐츠 요청 -> 렌더링이 완료된 리소스 전달

CSR(react 등)
렌더링 후 페이지 생성
단점: 초기 로딩 속도가 느림, 검색엔진최적화(SEO)에 적합하지않음(검색엔진 입장에서는 빈 HTML로 인식하기 때문)

SSR(NextJS 등)
서버에서 일정 부분 렌더링 후 페이지 생성

시작

설치법: https://nextjs.org/docs/pages/api-reference/create-next-app
npx create-next-app@latest 0623
npm run dev
page.tsx에 작업 -> 이미지 띄워보기



💻 Project

출석체크도 트랜잭션이였네... 함수호출이 아니라 트잭을 쏴야하는거였음.
-> view나 pure가 안붙었으면 다 트잭쏘는 거라는거 명심하자.

출석 포인트 가져오기 함수(getAttendancePoint)에서 왜 계속 안되나 했더니 컨트랙트 쪽에 msg.sender 문제였다. 내 메타마스크로 눌렀어도 지갑주소는 0x00..으로 뜨네??
아마 이중매핑일경우 생기는 문제가 아닐까 추측 .
-> 아님(그런이유면 위의 attendance 함수도 msg.sender에서 문제가 발생했어야하는데 얘는 잘 갔다)
-> 그렇다면? 트잭을 쏘는거는 메타마스크가 관여하지만 단순히 함수를 call하는 것은 메타마스크가 관여하지않기 때문에 msg.sender을 쓸일이 없어서 생긴 문제일 수 있다.
-> 그래서 msg.sender 대신 매개변수로 넣어주고 js에서는 account를 넣어주는걸로 해결했다.

transfer는 무사히 해결완료 !
다만 항상 넣어야 하는 매개변수 갯수와 종류 제대로 확인하자.

profile
HELLO!

0개의 댓글