OpenSea Clone Coding Project

프로젝트 소개

이번에 진행한 프로젝트는 NFT를 직접 생성(Minting)하고, NFT를 사고 팔 수 있는 NFT Marketplace인 Opensea를 클론코딩해보는 프로젝트입니다. 팀원은 저를 포함해 3명이 진행했고, 기간은 팀 구성을 포함해 총 6일간 진행되었습니다.

프로젝트 GitHub 링크
https://github.com/codestates/beb-03-GroundY

컨트랙트 주소(Ropsten 테스트넷 이용)
https://ropsten.etherscan.io/address/0xb66df44befEdc0Cc63CD80F9F08EFC99CB9451fe

기능 소개

이름 그대로 NFT Marketplace를 구현하기 위해서는 실제 NFT를 거래할 수 있는 기능이 필요하겠지만, 저희 팀은 제한된 시간내에서 거래 기능까지 구현하기는 어렵다고 생각했습니다. 따라서 저희 팀은 프로젝트에서 필수적으로 요구되는 지갑연결과 NFT 목록을 불러오고 전송하는 기능을 우선적으로 구현하는 것에 목표를 두고, 추가로 이용자가 NFT를 Minting하는 기능을 구현했습니다. 기능 구현을 우선 목표로 두어 CSS부분은 완성되지 못한 부분들이 있습니다. 아래 소개하는 내용은 모두 이상없이 작동하는 기능들입니다.

지갑 연결

네비게이션 바 컴포넌트에 지갑 연결 기능을 넣어 메타마스크와 연결이 가능하도록 했습니다. 이 기능 구현을 위해 web3.js 모듈을 사용했습니다.

import { useState, useEffect } from "react";
import Web3 from 'web3';

 const [web3, setWeb3] = useState();
  const [account, setAccount] = useState();
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const connectWallet = async () => {
	const accounts = await window.ethereum.request({
	  method: 'eth_requestAccounts'
	});

	setAccount(accounts[0]);
	setIsLoggedIn(true);
  }

  useEffect(() => {
    if (window.ethereum !== undefined) {
      try {
        const web3Obj = new Web3(window.ethereum);
        setWeb3(web3Obj);
      } catch (err) {
        console.log(err);
      }
    }
  }, []);

보유 NFT 조회 및 전송

화면 상단에서 연결된 자신의 지갑 주소를 확인 할 수 있고,
View your GroundY NFT 버튼을 클릭해 해당 지갑 주소가 보유한 Ground Y NFT를 확인하거나,
다른 컨트랙트 주소를 입력해 해당 주소로 생성한 보유 NFT를 확인할 수 있습니다.
보유중인 NFT의 이름과 속성들을 확인가능하며, 다른 지갑주소로 전송할 수 있습니다.

NFT 생성

NFT로 만들고 싶은 이미지를 로컬에서 업로드하면, IPFS에 업로드되고 이 주소를 다시 받아 아래 MintForm에 입력되는 내용들과 함께 JSON 문서화 해서 TokenURI를 생성했습니다. 이 과정에서 ipfs-http-clien모듈을 사용했습니다.

진행 과정

팀원 셋이 하나의 프로젝트를 진행하며 포지션을 나누기가 애매하다고 생각해서, 각자 페이지를 나눠서 작업하는 방향으로 진행했습니다.

팀장님: Minting 기능을 추가한 Mint 페이지 구현
팀원1님: 보유한 NFT를 확인하고, 전송이 가능한 TokenList 페이지 구현
팀원2(본인): 프로젝트 및 팀원 소개를 위한 Home 페이지 구현

물론 각 페이지 구현은 필수적으로 분담하고, 이외에 필요한 기능이나 컴포넌트들이 필요할 경우 추가 구현했습니다.

그 동안 부트캠프 과정 중에 혼자 작업하거나 페어와 둘이서 작업하는 경우가 많아서 브랜치를 나누어 작업하는 일이 없었는데, 이번에는 세 명이서 각자의 레포지토리로 포크해와서 브랜치를 나눠 작업했습니다. 각자 작업한 결과물은 메인 프로젝트 레포지토리의 dev 레포지토리에 Pull Request를 했고, 매일 진행한 코드리뷰 시간에 서로의 코드에 관해 대화를 나눈 뒤 Merge를 진행해 최대한 코드 충돌이 일어나는 것을 방지했습니다.

느낀 점

부트캠프 과정 중에 페어프로그래밍이 아닌 팀을 구성해 진행해보는 첫 팀 프로젝트로 프로젝트 진행 자체에서도 배울 점이 많았습니다.

먼저, 이번 프로젝트를 진행하면서 팀장님의 주도로 Github를 이용해 협업하는 방법을 익혔습니다.
그동안 Github를 사용하며, 레포지토리를 Fork, Clone, Commit, Push, Pull 정도의 한정적인 기능만 사용해왔는데, 이번 프로젝트를 통해서 협업을 위한 Github 사용을 배웠습니다. 각자 할 일을 일정에 맞춰서 Task를 이슈로 만들어 작업을 하는 과정이 이전에 진행하던 방식이 아니라, 조금은 적응하는 시간이 필요했지만, 익숙해지면 프로젝트내에서 각자의 진행상황이나 전체 진행상황을 파악하는 데 도움이 될 것이라고 느꼈습니다. GitHub를 조금 더 공부하고 익숙해지는 데 시간을 들여봐야겠습니다.

팀원분들이 작성한 코드를 보고 배우는 점들도 많았습니다. 매일 아침 각자 하루에 진행할 내용을 공유하고 저녁에 리뷰 및 Push 및 Merge를 하며, 팀원분들의 코드를 보게 되었는데, 팀원분들이 작성한 코드 뿐만 아니라 에러 해결과정도 들을 수 있어서 배우는 것들이 많았습니다. 그 과정에서 제가 부족하다는 생각이 많이 들었고, 생각보다 많은 시간이 팀원분들의 작업내용을 이해하는 데 사용되기도 했습니다.

팀원분들과의 커뮤니케이션도 중요하다고 느꼈습니다. 첫 프로젝트라 걱정이 많았는데, 다들 긍정적인 분들이고, 마음이 잘 맞아서 즐겁게 프로젝트를 진행할 수 있었습니다. 팀장님은 기존에 알고 있던 내용을 모두가 알기 쉽게 공유해주셔서 모두가 발전할 수 있는 방향으로 이끌어주셨고, 다른 팀원분 또한 맡은 작업 뿐만 아니라 사용성 개선을 위한 개발을 하고 공유해주셔서 서로 도움을 많이 줄 수 있는 팀 프로젝트였습니다. 아직 제가 다른 분들께 많은 도움을 드리지 못해서 아쉬운 점이 많았지만, 그만큼 많이 배워서 나눠야겠다는 생각이 드는 프로젝트였습니다.