두번째 프로젝트 시작!
이번에 주어진 주제는 커뮤니티 사이트 제작이다. 물론 블록체인 부트캠프니 일반 커뮤니티가 아닌 인센티브 기반 블록체인 커뮤니티를 만드는 것이다. 즉, 로그인을 하거나 글과 댓글 작성 등의 활동으로 커뮤니티에서 사용 가능한 토큰을 획득하고 해당 토큰을 이용해 NFT를 거래하는 걸 구현하는 것이 목표이다.
우선 프로젝트를 시작하기 전에 지난 첫 프로젝트였던 OpenSea 클론 코딩을 통해 너무 많은 걸 목표로 하면 기본도 놓친다는 것을 절실하게 깨달았기에 팀원들과 목표를 좀 더 구체화하고 세분화하기로 했다.
팀원들과 회의를 거쳐 나온 목표들
일단 달성하지 못한 것은 취소선을 그어놨다ㅠㅠ.
그래도 고무적인 것은 1차 목표는 모두 달성!!
1. 1차 목표(이것만은 꼭 구현하자)
- Front-end
1) 회원가입, 로그인, 로그아웃 등 user관리
2) 커뮤니티 게시판(글쓰기, 댓글작성)
3) NFT 거래
- Back-end
1) 회원가입
2) 로그인
3) 커뮤니티 글 등록
4) 커뮤니티 댓글 등록
5) NFT 거래
6) 위 정보들 DB에서 관리
- Daemon
1) 토큰 전송, NFT 거래시 발생하는 트랜잭션들 관리
- Contract
1) 커뮤니티에서 사용될 토큰 개발
2) 커뮤니티에서 거래될 NFT 개발
2. 2차 목표(시간 남으면 추가할 것들)
- 가나슈가 아닌 테스트넷에서 개발하기
추천 비추천 추가하여 커뮤니티 인기글같은거 모아서 메인페이지 만들기글, 댓글 삭제거래중 NFT 검색기능session이나 token으로 로그인 상태 유지AWS 사용해서 배포Docker 컨테이너 활용해보기
3. 3차 목표(도전 과제!)
여기는 코드스테이츠에서 제공해준 도전과제로 2차까지 마무리하면 시도해보기로 했다.
NFT DEX 제작 - NFT 기반 DEX제작MultiSig - 서버계정이 실행하는 커뮤니티의 함수 실행권한을 투표를 통한 실행으로투표 시스템 - 유저끼리 시스템을 변경할 수 있도록 제안하는 시스템을 구현Web3.0 Convert - 중앙화된 구조를 DAO가 토큰의 컨트랙트를 움직일 수 있도록, 모든 계정이 자신의 주소로 작동할 수 있도록 변경
프로젝트 구조
Client (페이지로 기술)
1) 회원가입 페이지
2) 로그인 페이지
3) 커뮤니티 페이지
3-1) 글쓰기
3-2) 글 내용 및 댓글쓰기
4) 거래 페이지
4-1) NFT 판매
5) 유저간 토큰 전송
Server (API로 기술)
이것도 기능별로 API 라우팅을 정리하고 싶었는데 시간이 부족해 하지못했다..
- /exchange/getposts - (get) 거래중인 nft글 불러오기
- /exchange/registerpost - (post) nft거래글 등록
- /exchange/buyNFT - (post) nft 구매 요청
- /exchange/transferNFT - (post) nft 거래시 daemon이 토큰지급 완료 확인하면 nft지급해달라고 요청하는 API
- /signup - (post) 회원가입 요청시 기존 유저인지와 닉네임 중복 체크한 후 비밀번호 암호화하여 등록
- /login - (post) 로그인 요청시 db와 비교하여 응답
- /newcontent - (post) 새 게시물 등록
- / - (get) 글 목록 보여주기
- / - (put) 조회수 증가
- /newcomment - (post) 새 댓글
- /content/:id - (get) 댓글 목록 불러오기
- /recordTx - (post) 토큰 전송이나 nft approve, 전송시 발생하는 트랜잭션 DB에 기록
- /reward - (post) 로그인, 글 & 댓글 작성시 보상을 주는 API
MongoDB(Collection 별로)
- signuptables - 회원가입시 유저 정보 저장
- communitytables - 커뮤니티 글 정보 저장
- commenttables - 커뮤니티 댓글 정보 저장
- exchangeposts - nft 거래글 정보 저장
- tradetables - nft 구매 발생시 거래 상태 및 진행 정보 저장
- transactions - 토큰 전송, nft 승인, 전송 시 발생하는 트랜잭션들 기록
- users - 유저에게 보상을 지급하기 위해 관리자 주소 개인키 등 저장
Daemon
기본적인 역할은 서버가 트랜잭션 발생시 db에 status:"pending" 으로 기록한 transaction들을 감시한다. 해당 트랜잭션이 완료되어 블록에 담긴 경우 getTransacion을 통해 정보를 가져와 업데이트하고 상태를 complete로 변경. 완료된 Type이 buyNFT(토큰 전송), transferNFT(NFT전송)일 경우 그에 맞는 추가작업 서버나 DB에 요청.
Contract
HotPotToken(ERC20)
- 주소 : 0x019A351B33D2e7a5124065a7738b3423482864D9, ABI는 깃허브에
HotNFT(ERC721)
- 주소 : 0xCc1108f7c353e5d12DfdeD369ec21C46570afd6D, ABI는 깃허브에
내가 맡은 기능들
이번에는 2주짜리 프로젝트라 저번보다 규모가 커서 이것저것 설명하기보단
내가 구현한 기능들과 사용했던 것들에 대해 적어놓았다.
담당 파트는 그때마다 팀원들끼리 유기적으로 작업하여 정확하지는 않지만 대략적으로 적어보았다.
담당한 부분들 : nft 거래관련 기능 전반, 회원가입, 로그인, 로그아웃, 트랜잭션 처리, 데몬 감시 등
사용 된 스택 및 언어
- JS, CSS, Solidity
- React, Redux, MongoDB, mongoose, Express, Web3, PM2, Styled, crypto-js
회원가입 및 로그인, 로그아웃
클라이언트에서 서버로 회원가입 요청을 보내고 몽고db에 새로 기록되어 로그인까지 마치는 장면이다.
평소에 해보고 싶었던 네이버 클론코딩을 회원가입창에서나마 해보았다.
중간에 상태처리 오류로 상위 컴포넌트에서 받아온 지갑주소 반영이 늦게되어 회원가입 버튼을 2번 눌러야 address가 반영된다ㅜ
회원가입시 기입된 정보들 중 비밀번호는 임의로 생성된 salt와 SHA256을 이용해 암호화하여 저장된다.
NFT 거래
거래되는 것은 기존 사용자들에게 민팅된 NFT들로
기본적으로 NFT 거래는 아래 과정으로 이루어진다.
1. 소유자가 판매글을 올림 (관리자에게 approve)
2. 구매자가 올라온 거래글 중 원하는 NFT를 구매요청(토큰 전송)
3. 데몬이 트랜잭션 감시하다 정상적으로 토큰이 지급된 것을 확인하면 서버에 NFT 지급 요청
4. 서버가 approve 받은 해당 NFT를 구매자에게 전달
5. 데몬이 NFT 정상지급까지 확인하면 거래 완료
시작하기 전에 구분하기 쉽게 거래 관련 DB를 비우고 시작하였다
1. 소유자가 판매글을 올림 (관리자에게 approve)
내가 소유한 NFT를 불러와 판매등록(관리자에게 approve)하여 해당 transaction이 db에 기록되는 장면
approve 트랜잭션이 완료된걸 확인하여 거래글이 db에 추가되었다. 중간에 데몬이 감시하는 장면이 섞여있는데 이는 뒤에 데몬부분으로 미뤄놓겠다.
2. 구매자가 올라온 거래글 중 원하는 NFT를 구매요청(토큰 전송)
방금 올린 판매글을 다른 계정에서 구매요청하는 장면이다.
구매요청 및 토큰 지급 트랜잭션 발생시 거래상태가 판매글에서는 거래중으로 변하며
새로 거래에 대한 기록이 생성되어 토큰지급 트랜잭션, nft지급 트랜잭션 등을 데몬이 감시하기 시작한다.
3. 데몬이 트랜잭션 감시하다 정상적으로 토큰이 지급된 것을 확인하면 서버에 NFT 지급 요청
데몬이 pending 상태인 트랜잭션들을 감시하다 buyNFT 타입이 완료된 것을 확인하면 서버에 승인받은 NFT를 지급해 줄 것을 요청한다.
4. 서버가 approve 받은 해당 NFT를 구매자에게 전달
데몬에게 /exchange/transferNFT로 요청받은 서버가 해당 NFTtoken 전달 트랜잭션을 생성
5. 데몬이 NFT 정상지급까지 확인하면 거래 완료
마지막으로 NFT까지 지급완료된 것을 확인하면 모든 거래가 종료
종료 후 DB상태
거래글 Collection
거래기록 Collection
트랜잭션 Collection
데몬 감시 및 트랜잭션 처리
데몬은 기본적으로 1분마다 재시작되어 pending상태인 트랜잭션들을 추적한다.
해당 트랜잭션이 완료되면 상태를 complete로 바꾸어 더이상 추적하지 않으며,
완료된 타입이 buyNFT인 경우에는 구매자가 토큰지급을 완료했으므로 서버에 NFT를 지급하도록 추가작업을 수행하며,
transferNFT가 완료된 경우에는 모든 거래가 끝났으므로 거래 관련 DB에 거래가 끝났음을 알린다.
위 스샷은 PM2를 활용한 daemon이 트랜잭션들을 감시하고 기록하는 장면이다.
이번 프로젝트를 뒤돌아보며
프로젝트를 통해 배운점
저번 첫 프로젝트는 기간도 짧았고 여러명이 같이 코딩하는 경험도 낯설어서 어버버하다 끝난 감이 없지 않았다. 하지만 이번에는 기간도 2주로 늘어서 좋은 팀원과 교류할 기회도 많았고 저번 실수했던 것들을 발판삼아 발전할 수 있어서 기분 좋은 프로젝트였던 것 같다. 기본 목표로 했던 것들도 어느정도 구현했고 MongoDB, redux, styled나 pm2처럼 새로 배우고 적용해본 기술들도 많아 좋은 경험을 많이 쌓을 수 있었다.
Problem
프로젝트 경험이 많지 않다보니 여러 난관들이 많았지만 그 중 제일 크게 느꼈던 문제는 git을 다루는게 서투르다는 것이었다. branch를 dev와 feature별로 나누어 구현하고 그때그때 머지하고 싶었는데 이것도 한두번 하다가 두루뭉실하게 되어버렸고, 기본중에 기본인 gitignore마저도 최상단에 둬야하는걸 깜빡하고 내부 기능별로 나눠둔 client, server등에 각각 넣어놓아 처음엔 작동하지 않았다.
Try
사용자가 보유한 NFT들을 매번 컨트랙트에서 불러오려니 로딩이 굉장히 길었다. 차라리 DB에 이에 관한 정보들을 보관하고 사이트 내에서 거래가 일어날 때 db를 업데이트 해주거나 외부에서 변경했을 경우 이를 주기적으로 daemon등을 통해 업데이트 해주어 불러오는 것이 더 쾌적한 사용환경이 되지 않았을까 싶다.
Code & Git Repository
GitHub
인센티브 기반 커뮤니티 제작 - 팀 마라탕
