[회고록] 첫번째 프로젝트(Opensea) 시작

 

첫번째 프로젝트를 진행하게 되었습니다. 목표는 Opensea 클론이고, 모든 기능을 다 넣기에는 시간도 우리의 지식도 부족하므로, 제한적인 기능을 Bare-Minimum으로 두고, 추가 기능은 Advanced, Nightmare로 관리하기로 합니다. 

프로젝트 : Opensea Clone
스택 : Express, React, IPFS, MySQL, Solidity
기간 : 1주일

 

 

1. 기본 기능 논의

Opensea는 NFT(ERC-721) 거래 플랫폼입니다. NFT 민팅과 거래 트랜잭션이 발생해야 하고, 현재 해당 컨트랙트에서 발행된 NFT 토큰들을 모두 출력해서 보여줄 수 있어야 합니다. 기본적인 틀은 이렇지만 추가적으로 포함되는 스택들이 꽤 많습니다.

 

 

가장 최소한의 기능 구현을 1차적인 목표로 설정합니다.

 

리액트로 작성한 웹 페이지(프론트 엔드 단)에서 MetaMask 지갑과 연결하는 작업이 우선되어야 합니다.

지갑을 연결한 후 컨트랙트에서 발행된 NFT 정보들을 서버로 부터 받아와서 프론트로 뿌려주는 작업이 진행됩니다.

마지막으로 사용자가 컨트랙트를 사용해 NFT 민팅을 하는 작업까지 진행되어야 합니다.

 

기본적인 구상

 

문제발생

CRA로 리액트 앱을 시작하고 web3를 설치하는데 Polyfill 관련 에러가 발생합니다. CRA 버전이 달라서 발생하는 에러로 package.json 파일을 수정해주고 해결합니다. 다른 블로그를 참조했습니다.

 

NFT민팅 할 때 들어가는 TokenURI에 넣을 메타데이터를 정리하는 API를 따로 쓰는 내용이 나옵니다. MSA(Micro Service Architecture) 개념으로 메타데이터를 생산하는 API서버를 헤로쿠로 배포하고, 프론트에서 NFT 발행 관련 정보를 받아 저장하고, 이 데이터를 메타데이터로 변경한 후 민팅에 활용한다는 개념입니다.

 

헤로쿠 API에서 메타데이터를 저장해야 하는데, 이 때 DB와 연결해서 봐야 하는지 개념이 헷갈립니다. 전체적인 기능을 구현하는 것을 우선적인 목표로 두고, 민팅할 때 포함되는 attributes를 최소한으로 가져가자고 팀원들과 얘기를 하고 헤로쿠 API 기능은 일단 제외합니다. 차후 Nightmare 단계에서 재구성 할 계획을 잡습니다.

 

2. 서버, 클라이언트 제작

서버는 Express를, 클라이언트는 React로 구현을 시작합니다. 프론트 단에서 사용자가 로컬에서 입력하는 파일들은 IPFS로 저장한 후 해시값을 받아와 메타데이터로 저장합니다. 모듈은 IPFS-API를 사용합니다.

메타데이터에 들어가는 데이터는 {name, description, file_URL}로 잡고, 데이터베이스 스키마를 작성합니다. IPFS 모듈을 테스트하고, 프론트 엔드 UI 제작 및 state관리 그리고 서버에서 주기적으로 이더리움 ropsten 테스트넷 네트워크로 컨트랙트로 발행된 NFT정보를 가져와 DB에 적재 합니다.

사용자는 카테고리별, 이름별 특정 NFT를 조회하고 sort 할 수 있는 기능을 구현합니다.