[CloneCoding] OpenSea 클론 코딩

프로젝트

프로젝트 내용 : OpenSea CloneCoding

기술 스택 : 

• 언어 : JavaScript
• 프론트엔드 : React
• 버전 관리 : Git, GitHub

프로젝트 목표 :

OpenSea라는 대표적인 NFT 거래 플랫폼의 구조를 파악하면서 프론트와 백엔드 그리고 스마트 컨트랙트가 어떻게 상호작용 하는가를 배우고, 구현하면서 기존 웹 페이지에서 스마트 컨트랙트가 어떻게 동작하는지 학습하기 위함입니다.

 

팀

팀 이름 : Seanapse

팀 멤버 : 김블록* 이체인 유비트 송노드

팀 역할 :

• 김블록 : CreatePage
• 이체인 : MainPage
• 유비트 : MyPage
• 송노드 : DetailPage

 

프로젝트 설계

OpenSea와 똑같은 구조로 구현하면 좋겠지만 첫날은 설계, 마지막 날은 발표 및 블로깅 시간을 포함해 4일이라는 개발 기간이 주어져서 프로젝트를 간소화하기로 합니다.

 

OpenSea Structure

Seanapse Structure

 

기존 OpenSea는 서버에서 블록체인 네트워크에서 얻은 데이터나 사용자 정보를 DB에 저장해 사용자에게 정보를 빠르게 제공합니다. 하지만 이번 프로젝트는 짧은 시간 안에 구현해야 하기에 웹 페이지에서 직접 블록체인 네트워크에 데이터를 받아 오는 구조로 제작합니다.

 

프로젝트 구현

프로젝트는 Main, Create, My, Detail 이렇게 총 4개의 페이지로 구성합니다.

 

Main

기존 OpenSea의 메인 페이지는 다양한 컬렉션이나 카테고리를 소개합니다. 본 프로젝트에는 이렇게 다양한 부분을 구현하지 못해 기존 페이지의 기능이 필요가 없으며, 전체적인 NFT를 리스팅 하는 페이지가 따로 없어 Main 페이지에서 이를 구현하기로 합니다.

Main 페이지 프로토타입

페이지는 크게 Header와 Home 2개의 컴포넌트로 나눴습니다.

 

Header는 Logo와 Menu로 나눴습니다. Logo는 OpenSea로고를 사용하고 누르면 Home으로 이동하도록 했으며, Menu에는 create, mypage로 이동하는 링크와 지갑 연결을 넣었습니다.

 

Home은 뿌려주는 NFT 컴포넌트를 나타내는 역할만 제작했습니다. Flex를 사용해 순서대로 배치하고 줄 바꿈을 적용합니다. 또한 블록체인 네트워크에서 직접 데이터를 받기 때문에 느린 속도를 생각해 로딩을 구현했습니다.

 

실제 구현 화면

Create

Create 화면은 이미지와 데이터를 자동으로 업로드해 json파일을 만들고 사용자의 주소로 NFT를 생성해 줍니다. tokenURI는 pinata aip를 사용하여 만들고 연결된 지갑을 통해 mintNFT를 합니다.

CreatePage 프로토타입

실제 구현 화면

 

Mypage

Mypage는 연결된 지갑의 주소에 해당하는 NFT를 볼 수 있습니다.

MyPage 프로토타입

 

실제 구현 화면

 

Detail

Detail은 NFT를 클릭하면 해당 NFT의 정보를 출력합니다. Main페이지와 MyPage에서 이동이 가능합니다.

DetailPage 프로토탑입

실제 구현 화면

회고

처음에는 Web3를 사용하려 했지만 react-create-app의 5버전 이상에 Nodejs Polyfill이 포함되지 않는 등 여러 문제를 만났습니다. 이에 필요한 패키지들을 설치하고 config-overrides.js파일 작성과 package.json 수정을 통해 작동이 가능했습니다. 하지만 깔끔하게 해결되지 않아 Web3 대신 ethers를 사용하기로 하였습니다. 두 패키지 모두 비슷하게 작동하기에 비교적 쉽게 배울 수 있었고, 프로젝트를 수행할 수 있었습니다.

 

기존 저의 코딩 방식은 주먹구구식으로 짜는 경향이 있었습니다. 이는 어떻게 작성하고 구성하는 것이 모두가 보기 쉽게 작성이 가능한지 신경 쓰지 않았기 때문입니다. 이번 프로젝트를 수행하면서 팀원들과 같이 프로젝트의 구조와 규칙을 정해 진행하면서 보다 체계적이고 깔끔하게 코딩을 진행할 수 있었습니다.

 

React를 배운 지 얼마 되지 않아 찾고, 배우는데 많은 시간을 사용했습니다. 때문에 자주 오류가 생겼는데, 팀원들의 도움으로 오류를 해결할 수 있었고, 다양한 기능과 패키지, 사용법 등을 배웠습니다. 짧은 시간 동안 팀 프로젝트를 진행했지만 좋은 팀원들 덕분에 재밌게 작업할 수 있었고, 많이 배울 수 있었습니다.

 

참고 사이트

OpenSea 링크: https://opensea.io/

OpenSea, the largest NFT marketplace