Blockchain/Project

[Project] Web2.0 Blockchain Community

beeimp 2022. 7. 3. 19:38

Web2.0 Blockchain Community

팀명 - SevenDAO

팀 구성 및 나의 역할

팀원 구성 - 4명

  • Front-end : 2명
  • Back-end : 2명

나의 역할

  • 팀장 역할 수행
    • 프로젝트 일정 관리
  • Front-end 포지션
    • 게시글 및 댓글 쓰기 및 조회
    • 마이페이지
  • Front-end, Backend, Blackchain 전체 기능 연동 및 테스트
  • 프로젝트 배포

프로젝트 목표

  • 인센티브 기반 커뮤니티를 구현
  • 인센티브 시스템의 동작 원리를 이해하고, 서버기반 지갑 서비스를 구현
  • Web2.0 기반 커뮤니티 사이트의 아키텍처를 이해
  • ERC-20 스마트 컨트랙트 이해 및 새로운 형태의 함수 구현

프로젝트 기간

프로젝트 일정

  • 2022년 6월 20일 ~ 7월 1일 ( 약 2주 )

프로젝트 기간

회의

  • 시간 - 매일 오후 5시
  • 장소 - 디스코드 또는 줌 소회의실
  • 내용
    • 작성한 코드 리뷰 및 Git Merge 진행
    • 팀원 간의 추후 개발 일정 공유

아이디어

  • UrClass 버전 스팀잇
  • 토큰 관련해서는 거래소 방식 사용
  • 새로운 창작물
  • 인센티브
    • 기본 - 회원가입, 로그인, 게시글 작성, 댓글 작성
    • 추가 - 조회수
  • 게시글 NFT화
  • 데이터의 무결성 보장

구현 내용 및 범위

인센티브 기반 커뮤니티

  • 니모닉 월렛 개발
  • Express를 사용한 라우팅 분기
  • DB 연동

커뮤니티 토큰 발행 - 로그인을 하거나 글을 작성할 때, 댓글을 작성 보상

  • 서버용 account 생성
    • 가스비를 위해 만든 account에 코인(1ETH) 전송
  • 로컬 테스트넷 또는 테스트넷에 컨트랙트 배포 및 연동
  • 로그인, 글 또는 댓글 작성 시 ERC-20 토큰 보상에 대한 트랜잭션 전송

스마트 컨트랙트와 연결된 트랜잭션을 모니터링

  • ganache 실행 & ERC20 스마트 컨트랙트 배포
  • Web3를 localhost에 연결 & 블록 조회
    • getBlockNumber 등 블록조회 메소드를 이용해 블록 데이터 요청getTransaction 과 같이 트랜잭션 조회 메소드를 이용해 블록 데이터 내의 트랜잭션 데이터 요청
    • Database 연결 & 테이블 생성
  • 트랜잭션 데이터를 데이터베이스에 기록
  • crontab, pm2 등을 이용해 데몬을 주기적으로 실행
  • Advanced
    • 최근에 조회한 블록 이후부터 최신 블록까지의 범위만 데이터를 요청
    • 관련이 있는 트랜잭션만 데이터베이스에 기록

ERC-20 토큰으로 ERC-721 구매하기

  • ERC20 민팅에 approve 추가하기

기본 기능

  • 게시글 작성
    • 로그인 확인
    • 제목, 카테고리, 콘텐츠 입력
    • IPFS에서 저장
    • ERC-721에 IPFS 주소 등록
  • 게시글 조회
    • 게시글 작성자, 제목, 콘텐츠, 게시 날짜, 썸네일 사진 포함
    • 5개씩 페이징
  • 댓글 작성
    • 댓글 내용 입력 후 전송
  • 댓글 조회
    • 댓글 작성자, 댓글 내용, 게시 날짜 포함
  • 로그인
    • 사용자명과 비밀번호 입력
    • JWT 인증방식
  • 회원가입
    • 사용자명, 이메일, 비밀번호, 비밀번호 확인 입력
    • JWT 인증방식
    • 기본적인 유효성 검사
  • 디비 연동
    • MongoDB 연동
    • CRUD

주요 기능

  • SDAO 인센티브
    • 회원가입 - 10 SDAO
    • 로그인 - 5 SDAO
    • 글쓰기 - 3 SDAO
    • 댓글 - 1 SDAO
  • SDAO(ERC20 TOKEN) 입출금하기 및 선물하기
    • 입금하기
      • 사용자 입금 주소 및 QR코드 생성
    • 출금하기
      • 지갑주소와 보낼 토큰 개수를 입력
      • 10 SDAO 수수료 발생
    • 선물하기
      • 사용자명과 보낼 토큰 개수를 입력
      • 5 SDAO 수수료 발생
  • ERC721 게시글 업로드 및 조회
    • IPFS를 통한 JSON 형태로 게시글 업로드
    • ERC721에 IPFS URI 업로드

추가 기능

  • 회원가입 기능이 있는 클라이언트 개발
  • Ropsten 네트워크에서 컨트랙트 배포하고 사용

도전과제

  • NFT기반 DEX
  • MultiSig
  • 투표 시스템
  • Web3.0 Convert

기술스택

Blockchain

  • language - Solidity
  • Core - Ethereum
  • Network - Ropsten testnet, Local testnet
  • Tools - Remix ****Truffle, Ganache

Back-end

  • language - JavaScript
  • Core - Express.js
  • DB - MongoDB

Front-end

  • language - TypeScript
  • Core - Next.js, React.js
  • 상태관리 - Redux
  • Style - SCSS, Emotion, mui
  • API - Axios
  • 협업관련 - eslint, prettier

개발 결과물

게시글 조회

https://github.com/beeimp/beb-04-second-SevenDAO/raw/main/assets/20220701_162306_image.gif

  1. 사용자는 메인페이지에 접속한다.
  2. 클라이언트는 서버에 게시글 정보를 요청한다.
  3. 서버는 DB에 저장된 게시글 n개를 응답한다.
  4. 클라이언트는 n개의 데이터를 응답받은 후 화면에 출력한다.
  5. 스크롤의 마지막 부분에 도달했을 때 2,3,4 과정을 반복하며, 데이터를 받지 못하는 경우 END 처리한다.

게시글 상세 조회

https://github.com/beeimp/beb-04-second-SevenDAO/raw/main/assets/20220701_162603_image.gif

  1. 사용자는 게시글 중 하나를 클릭한다.
  2. 클라이언트는 사용자가 클릭한 게시글 id를 통해 서버에 게시글 상세 정보를 요청한다.
  3. 서버는 게시글 id를 통해 DB에서 게시글을 조회하여 응답한다.
  4. 클라이언트는 응답한 게시글 정보를 사용자에게 보여준다.

게시글 검색

https://github.com/beeimp/beb-04-second-SevenDAO/raw/main/assets/20220701_162628_image.gif

  1. 사용자는 검색 버튼을 클릭 후 검색 키워드를 입력한다.
  2. 클라이언트는 검색 키워드를 포함하여 서버에게 검색하는 게시글들을 요청한다.
  3. 서버는 요청 받은 검색 키워드를 통해 디비에서 검색 게시글을 필터링하여 클라이언트에 응답한다.
  4. 클라이언트는 응답받은 검색 게시글을 화면에 표시한다.

회원가입

https://github.com/beeimp/beb-04-second-SevenDAO/raw/main/assets/20220701_162628_image.gif

  1. 사용자는 회원가입 버튼을 클릭한다.
  2. 사용자는 폼을 작성하여 회원가입 버튼을 클릭한다.
  3. 클라이언트는 회원 정보를 서버에 인증 요청한다.
  4. 서버는 회원정보를 DB에 저장한다.
  5. 서버는 회원정보를 통해 private key를 생성 후 사용자 지갑을 발급하여 DB에 저장한다.
  6. 서버는 JWT로 클라이언트에 응답한다.
  7. 클라이언트는 쿠키에 JWT를 저장하고 로그인에 성공하여 메인 페이지를 표시한다.
  8. 회원가입에 대한 SDAO 토큰 보상을 마이페이지에서으로 확인할 수 있다.

로그인

https://github.com/beeimp/beb-04-second-SevenDAO/raw/main/assets/20220701_162641_image.gif

  1. 사용자는 로그인 버튼을 클릭한다.
  2. 사용자는 아이디/패스워드를 입력하여 로그인하기 버튼을 클릭한다.
  3. 클라이언트는 아이디/패스워드에 대한 유효성 검사 후 사용자 계정 정보를 서버에게 인증 요청을 보낸다.
  4. 서버는 아이디/패스워드에 대한 유효성 검사 후 성공 시 JWT를 생성하여 응답한다.
  5. 클라이언트는 JWT를 쿠기에 저장하고 메인 페이지로 이동한다.
  6. 일일 최초 로그인 시 SDAO 토큰이 보상으로 주어진다.

게시글 작성

https://github.com/beeimp/beb-04-second-SevenDAO/raw/main/assets/20220701_162715_image.gif

  1. 사용자는 게시글 작성 페이지를 클릭한다.
  2. 사용자는 게시글 폼에 맞춰 게시글을 작성하여 완료 버튼을 클릭한다.
  3. 클라이언트는 작성된 게시글 폼을 서버에 게시글 POST 요청한다.
  4. 서버는 게시글 폼을 DB에 저장하고 IPFS에 JSON 형태의 파일로 저장한다.
  5. 서버는 ERC-721을 통해 글에대한 JSON 파일을 블록체인 네트워크에 등록한다.
  6. 서버는 성공 또는 실패 메세지를 응답한다.
    • 사용자는 성공 시 SDAO 토큰을 보상 받는다.
  7. 클라이언트에서는 메인 페이지 또는 검색 페이지에서 확인 가능하다.

댓글 작성

https://github.com/beeimp/beb-04-second-SevenDAO/raw/main/assets/20220701_163658_image.gif

  1. 사용자는 해당 게시글 상세페이지 하단에 표시된 댓글 입력란에 작성 후 작성 버튼을 클릭한다.
  2. 클라이언트는 작성한 댓글의 게시글 Id와 댓글 정보를 서버에 댓글 POST 요청한다.
  3. 서버는 댓글을 DB에 저장하고 성공 또는 실패 메세지를 응답한다.
  4. 댓글 작성에 성공하면 SDAO 토큰을 보상받는다.

마이페이지 ( 토큰 입출금 및 선물하기 )

https://github.com/beeimp/beb-04-second-SevenDAO/raw/main/assets/20220701_162836_image.gif

  1. 사용자는 로그인 후 마이페이지로 이동 가능하다.
  2. 마이페이지는 사용자명, 이메일, 지갑주소, 보유 토큰 수량을 확인할 수 있다.
  3. 마이페이지는 입출금 기능이 포함되어 있으며, 버튼을 클릭하면 입출금 창이 표시된다.
  4. 입출금 창에서 입금 부분에서는 사용자의 입금 주소 및 QR코드를 제공한다.
  5. 입출금 창에서 출금 부분에서는 출금하기와 선물하기 기능을 제공한다.
  6. 출금하기에서 외부 주소와 토큰 개수를 입력하게 되면 출금 토큰 개수와 함께 수수료가 지불된다.
  7. 클라이언트가 요청한 출금하기에 따라 서버는 JWT로 사용자를 인증하고 토큰을 받는 주소로 전송한다.
    1. 가스비는 수수료에 포함되어 있어 따로 사용자에게 지불 요청하지 않는다.
  8. 만약, 주소가 SDAO 사이트에 소속된 사용자의 주소라면 선물하기 기능을 이용해야한다.
  9. 선물하기는 주소 대신 사용자명을 입력하고, 보내는 토큰 개수와 함께 출금하기보다 저렴한 수수료가 지불된다.
  10. 출금하기 또는 선물하기 후 마이페이지에서 남은 토큰 개수를 확인할 수 있다.

게시글 검색

  1. 사용자는 게시글 검색 버튼 후 검색 키워드를 입력 후 Enter를 입력한다.
  2. 추가적으로 최근 검색어가 표시되며 클릭하여 바로 검색 또는 삭제할 수 있다.

프로젝트 진행 중 발생한 이슈

1일차 - 2022.6.20.

  • 지갑 생성 위치
  • 회원가입 시 2가지 → 3가지
    • username
    • email
    • password

2일차 - 2022.6.21.

  • NEXT api로 서버 개발 후 Vercel 배포 문제
  • DB 위치 - 로컬, 아틀라스

3일차 - 2022.6.22.

  • cors 오류
  • JS → TS 변환 어려움

4일차 - 2022.6.23.

  • 텍스트 편집기 선택에 어려움
    • development 모드 오류 수정 못함
  • getStaticProps 오류
  • web3 이더 단위 오류
    • web3.utils
  • 실제 이더 기반일 경우 가스비가 많이 소모되니까
  • 디비 초기화
    • 최대용량 1기가
    • 방안 - 추후 어느정도 완성되면 초기화 진행
  • 게시글, 댓글 작성시 체인에 올리기
  • 게시글에 대한 댓글 조회

5일차 - 2022.6.24.

  • 토큰 배분 유틸화
  • 서버에 저장되어 있는 개인 지갑에 가스비 지출 어려움
    • 가스비를 낼 이더가 없다.
    • 유저가 개인 지갑으로 출금 요청할때 서버의 유저 개인 지갑에 이더가 없기 때문
    • 업로드 → 체인 → 디비
  • 게시글을 체인에 올리기
    • 글 JSON → IPFS → ERC721로 올리기
  • Owner 파산 문제
    • 출금시 수수료 때감
      • 수수료 많이!

6일차 - 2022.6.27.

  • 컨트랙트에 Post할 때, 토큰 받는 것까지 저장할 때 20초 정도 소요됨
    • 토큰 → 거래소처럼
    • 게시글 → 모두 체인(IPFS 등)

7일차 - 2022.6.28

  • 입출금시 수수료 문제
    • 서버 DB에 저장된 토큰 개수 + 체인에 저장된 토큰
      • 외부 사용자 - 10개씩 소모
      • 내부 사용자 - 5개씩 소모
    • 회원가입 10개
    • 로그인 5개
    • 글쓰기 3개
    • 댓글 1개
  • JWT 만료 후 자동 로그아웃
  • 파일사이즈 문제
    • IPFS에 최대 용량
  • 출금하기에서 멀티 민트

8일차 - 2022.6.29.

  • 토큰 출금 이슈
    • 가스비
  • 토큰 입력 이슈
    • 무조건 문자열로 처리하기
  • 깃 병합 이슈

9일차 - 2022.6.30.

  • 오류 발생시 롤백 안됨
  • 서버 DB에서 토큰 전체 발행 개수 확인하지 않음
  • 무한 스크롤 구현
  • Next/image url 이슈
  • Client와 Server 병합 문제

회고

초기 목표(시작하게된 목표)

  • 프로젝트에 대한 목표
    • 위에서 언급했기 때문에 생략
  • 팀장으로써 목표
    • 프로젝트 진행 중 팀원 간의 충돌을 최소화하기 위한 적절한 기획
    • 기간 내 최대한의 효율을 위해 팀원들의 역량에 맞는 포지션 및 역할 분배
    • 코드 충돌을 최소화하기 위해 회의 시간에 커밋 진행
    • 프로젝트에서 발생하는 이슈를 정리하고 해결
  • 개인 목표
    • Front-end 모든 기능 구현
    • 각 일정에 맞춰 기능 및 디버깅
    • 완성된 프로젝트 배포

현실(실제 어떤 원인에 의해 문제가 발생했고 해결했는가?)

  • 적절한 기획의 중요성
    • 문제 - 기존 기획 3일을 1일로 단축하여 초기 충분한 소통이 부족하여 구체적인 개발 범위가 난해해졌습니다.
    • 원인 - 기획 단계를 다른 팀원분들이 어렵고 힘들어 하는 것 같아 단축했습니다.
    • 해결 - 프로젝트의 절반에 해당하는 1주차 금요일에 팀원들이 생각하는 프로젝트 목표 및 범위를 통일하고 추후 일정에 대해 논의하여 계획했던 부분까지 개발을 완료할 수 있었습니다.
  • 프로젝트 일정에 따른 역할 분배의 중요성
    • 문제 - 프로젝트 일정을 세부적으로 나누지 않아 일정한 작업이 이루어지지 못했습니다.
    • 원인 - 프로젝트에서 구현되는 기능별로 개발이 얼마나 걸릴지 생각하지 못했습니다.
    • 해결 - 깃헙 칸반보드를 이용했고, 일일 1회 진행했던 회의를 2회 진행하면서 진행 상황 공유 및 개인 구현 일정을 공유했습니다.
  • 팀원간의 갈등
    • 문제 - 일부 팀원이 프로젝트 진행에 대해 의문을 가졌지만 그대로 진행하면서 사기를 저하시킨 것 같습니다.
    • 원인 - 프로젝트를 처음 진행하는 팀원들에게 저는 당연하다고 생각하는 내용들을 자세히 설명하지 않고 진행했습니다.
    • 해결 - 이 부분에 대한 문제를 저는 늦게 알아차렸고, 팀원 분들이 자연스럽게 이해하시면서 해결되었습니다.
  • 충돌을 피하려다 작업 증가
    • 문제 - 서버의 역할을 클라이언트에서 수행하면서 작업량이 증가했습니다.
    • 원인 - 다른 포지션의 팀원에게 필요한 API를 요청했지만 충분한 설득이 부족했습니다.
    • 해결 - 팀원 간의 충돌을 일으키고 싶지 않아 클라이언트에서 할 수 있는 작업이기에 제가 조금 더 시간을 투자하면 된다는 생각으로 맡아 진행했습니다. (그러나 이는 좋은 방법이 아니었음을 깨달았습니다.)

후기(지속, 개선, 포기할 것은 무엇인가, 아쉬운점)

  • 지속 - 진행 중 발생한 이슈 정리
    • 내용 - 프로젝트 진행하는 동안 저를 포함한 팀원들에게 발생한 이슈를 정리하면서 진행했습니다.
    • 지속하려는 이유 - 발생한 이슈에 대해 같이 고민해볼 수 있었고, 프로젝트 일정 관리와 이슈를 해결하면서 많은 도움이 되었습니다.
  • 개선 - 충돌을 피하는 것만이 답이 아니다
    • 내용 - 위에서도 한번 언급했는데, 충돌을 회피하려다 작업량이 증가했습니다.
    • 개선하려는 이유 - 저 혼자 작업량을 해결하면 된다고 생각했는데, 같은 포지션의 팀원까지 작업량이 증가하는 현상이 발생했습니다. 충돌을 피하지 말고 적절한 설득을 통해 개선이 필요함을 느꼈습니다.
  • 포기 - 도전 과제를 진행하지 못함
    • 내용 - 추가적인 도전 과제를 구현하지 못했습니다.
    • 포기한 이유 - 추가적으로 기능을 구현하는 것보다 프로젝트의 완성도를 높이기 위해 추가하지 못했습니다. 기회가 된다면 꼭 개발해보고 싶어 삭제하지는 않았습니다.
  • 아쉬운점 - 마무리의 중요성
    • 내용 - 프로젝트 문서, 배포가 제대로 이루어지지 않았습니다.
    • 아쉬운 이유 - 프로젝트 개발 단계까지 프로젝트 일정에 맞춰 잘 진행되었습니다. 그러나 디버깅과 배포, 프로젝트 문서화를 일정에 포함하지 않아 추가적으로 시간을 소모해야했습니다. 추후 진행하는 프로젝트에서는 이 부분을 일정에 반드시 포함하여 소중한 시간을 적절히 사용할 예정입니다.

링크