Web2.0 Blockchain Community
Github 주소
Notion 페이지 는 너굴맨이 먹어버림..🐻
프로젝트 진행 과정
주요 기술스택
- Client - React
- DB - MySQL (sequelize)
- Server - Nodejs, Express, Web3.js, ipfs
- ganache
- daemon
2주간 두번째 프로젝트를 진행하였다.
팀 배정이 끝난 이후 가장 어렵고 중요한 팀 이름 짓기를 성공적으로 마무리하였다.
첫번째 프로젝트때는 사다리 타기를 제안했었기에 이번에는 눈 앞에 보이는 사물을 이야기하고 서로 합치기로했다.
망고랑 맥주가 합쳐져서 Mangobeer🥭 가 되었다.
이번 프로젝트 주제는 인센티브 기반 커뮤니티 로 사용자가 한 행동에 대한 보상으로 토큰을 지급하고,
발급된 토큰으로 사용자들끼리의 토큰이코토미 생태계를 만들어나가는 것이었다.
아래와 같은 기능을 하도록 하는 프로젝트를 만들어내기로 하였다.
- 사용자의 행위 : 회원가입-로그인 / 글 쓰기, 댓글 작성 (TOKEN 지급)
- 토큰 이코토미 : TOKEN을 이용한 NFT 거래 기능, TOKEN 전송 기능
이해를 돕기위해 현재 나와있는 서비스를 예로 들자면 스팀잇, 톡큰, 아하 와 유사하다고 볼 수 있다.
이 프로젝트를 성공적으로 수행하는데 있어서 핵심은 사용자 계정 관리를 도와주는 서버 개발 부분이었지 않을까 생각한다.
우선 프론트부분은 팀원분께서 진행해주셨는데 와이어프레임부터해서 뚝딱 만들어와주셨다.
1주차에 회원가입, 로그인, 글 쓰기, 댓글 쓰기 를 가능한 게시판 페이지 를 구현해냈다.
그 이후로는 daemon / erc20 / erc721 으로 파트를 나누어서 진행을 하였다.
진행 도중 발생한 문제점
엄청 많이 마주쳤다...
가장 기억에 남았던 문제중 하나를 뽑자면
NFT를 민팅하기 위해서 업로드된 이미지를 통해 ipfs로 cid 값을 갖고 url로 변환해주는 과정에서 이미지를 서버쪽으로 넘겨주는 과정에서 base64 string으로 자동으로 인코딩되는 문제였다.
1) 이미지 path 만 넘겨받아서 child_process 모듈을 사용해서 cid 값을 얻는 방법이면 될 것이라고 생각했다.
function get_cid(){
const cid = execSync(`ipfs add --quieter --pin=false${img_path}`).toString().replace(/\n/g, "")
execSync(`ipfs files cp /ipfs/${cid}` + ` "` + `${img_name}` + `"`)
return cid
}하지만 이미짜여진 react 코드에서 img 에서 패스만 넘겨받을수 있는 방법을 찾아보다가 포기했다.
결국,
https://github.com/ipfs/js-ipfs/issues/3924 참고하여 해결되었다.
import { fromString } from 'uint8arrays/from-string'
//....
async function get_cid_withIpfs(nfturl){
var matches =nfturl.match(/^data:.+\/(.+);base64,(.*)$/);
var ext = matches[1];
var base64_data = matches[2];
const data = fromString(base64_data, 'base64');
const {cid} = await client.add(data);
const ipfsLink = "https://ipfs.io/ipfs/" +cid;
console.log(ipfsLink);
return ipfsLink;
}프로젝트 동작 화면
회고
Keep
Problem
Try
화이팅
