[Project] Opensea NFT 거래소 클론코딩

-__-·2022년 6월 17일
8
post-thumbnail

[Project] BEB 프로젝트 #1 회고

⛵ 프로젝트 명 'CloseSea'

'CloseSea'는 NFT 가격의 지속적인 하락으로 인해 Open된 Sea를 Close로 문을 잠시 닫는다는🚫 의미입니다
(저희팀은 NFT 붐이 다시 올거라 믿습니다)

'CloseSea' 웹 페이지는
간단한 기능을 가진 Opensea Clone 사이트로
자신이 소유중인 NFT를 조회하고 상대방에게 NFT를 전송할 수 있습니다


🚦 프로젝트 팀 구성 & 역할 분담

프로젝트 기간 (6/13 ~ 6/17)

  • Front-end 👉 (내가 담당한 역할 😎)
    리액트를 이용한 web3 웹페이지 개발 및 CSS 작업
  • Back-end
    Opensea Api 를 통해 정보 받아오는 작업
  • Smart Contract
    ERC-721 기반 NFT 발행, 조회, 전송을 위한 컨트랙트 개발 및 배포

💻 기능 소개

  • Explore 👉 실제 Opensea에서 Api를 받아와서 판매되고 있는 NFT를 인기순으로 조회
  • Stats 👉 실제 Opensea Stats 화면으로 이동
  • Resources 👉 실제 Opensea Resources 화면으로 이동
  • Trade 👉 자신이 소유중인 NFT를 조회 할 수 있고 다른사람에게 전송 할 수 있습니다
  • Wallet 👉 홈페이지와 MetaMask 지갑과 연결 할 수 있습니다

Wallet

웹페이지와 MetaMask 지갑연결 & 지갑연결 끊기

연결이 완료되면 환영 메세지와 함께
연결된 MetaMask 주소가 같이 출력


Explore

Explore 버튼을 클릭하면
Opensea Api를 받아와서 실제 판매되고 있는 NFT를 인기순으로 조회한다


Trade - NFT 조회기능

웹페이지와 MetaMask 지갑연결을 한 후에
NFT를 민팅한 트랜잭션 컨트랙트 주소를 입력하면
자신이 소유중인 NFT를 조회 할 수 있다


Trade - NFT 전송기능

자신이 소유중인 NFT를 다른사람의 주소를 입력하여 전송 할 수 있다


Trade - 전송받은 NFT 확인

NFT를 전송한 원래 계정은 연결해제를 하고
NFT를 전송받을 주소로 다시 지갑을 연결하여
NFT를 민팅한 트랜잭션 컨트랙트 주소를 입력하면
NFT가 잘 받아진걸 확인할수 있다


Stats

Stats 버튼을 클릭하면 실제 Opensea 홈페이지의 Stats 화면으로 이동된다


Resources

Resources 버튼을 클릭하면 실제 Opensea 홈페이지의 Resources 화면으로 이동된다


CloseSea Github 코드

https://github.com/codestates/beb-04-CloseSea

NFT를 민팅한 트랜잭션 컨트랙트 주소

https://rinkeby.etherscan.io/tx/0x8d5cddd62003f5a7e475058f1996425ef61d552d50d90a2b3983f702b4e2fb1b


개발 회고 💡

1. 개발내용 회고

4일간 진행되는 프로젝트라서
다양한 기능 구현을 하지 못할거라 생각하고
욕심을 많이 내려놓고 진행했다

팀원분들 다들 자신 있어 하는 파트가 없었기에
사다리 타기로 역할 분담을 했다

그러나 역할 분담을 하는 게 의미가 없었을 정도로
부족한 점이 많아서 맡은 파트를 넘나들며
도와주고 다같이 공부하며 작업하는 시간이었다

제로베이스가 아닌 어느정도 기본이 만들어져있는 키트
'ethereum nft marketplace boilerplate' 라는 걸
이용해서 만들어 볼까 라고도 생각했으나

그 안에 작성되어있는 코드들을 완벽히 이해하지 않은 상태면
복붙이나 마찬가지로 생각해서
프로젝트만큼은 제로베이스에서 해보기로 했다

'코드스테이츠' 에서 요구했던 최소 수준의 결과물은 구현해냈고
부가적으로 구현하고자 했던 것들은
나중에 복습하면서 구현해보고자 한다


2. 개발감정 회고

팀원들과 협업하며 하는 첫 프로젝트라서
부담감과 걱정과 설레임과 많은 감정들이 있었지만

막상 프로젝트를 들어가니 클론코딩 방식으로 진행을 하니까
전체적인 가이드가 있는 느낌이여서
큰 부담은 없이 했던거같다

세부 로직이나 기능적인 부분도 중요하겠지만
클라이언트에게 직접적으로 보여지는
UI/UX 에 대해 상당히 많은 부분을 차지한다는걸 느꼈다


3. 아쉬웠던 점 & 보완해야 할 사항

MetaMask 연결해제 기능

MetaMask와 웹페이지랑 연결하고 나서
연결을 끊어주고 다시 로그인을 하는걸 구현해보려고 했는데

1. useState 빈 배열에 연결된 MetaMask 지갑 주소를 담고
2. 연결을 끊을때는 주소가 담긴 useState 배열 값을 비워주면
3. 연결이 끊어질줄 알았으나
4. 배열이 비워지는건 맞는데 연결이 끊어지진 않음
5. MetaMask 에서 수동적으로 연결을 끊어야함

Component 간 MetaMask 연결유지 기능

Wallet 부분에서 지갑과 연결된 상태정보를
다른 컴포넌트에서도 유지될수 있게 하는 기능이 쉬워보였는데
생각보다 구현이 잘 안됨

MetaMask 가 계속 연결은 되어있으나
그 연결되어있다는 정보를 다른 컴포넌트에 가져와서
web3 로직을 짜야하는데 그 정보만 분리해서 가져오는게 힘들었다

👉 리액트 함수 안에 함수(변수)를 export 할수는 없을까?
👉 리액트 컴포넌트 메인 함수 안에 MetaMask 가 연결된 정보가 담긴 변수를 export 할수는 없을까?

TokenURI 에 담기는 정보

TokenURI 에 이미지 정보만 입력해서
가져오는 방식밖에 구현을 못하였는데
다양한 정보를 Json 파일에 넣고 구현을 해봐야겠다

👉 https://ipfs.io/ipfs/이미지CID 이렇게만 넣었는데
👉 ipfs://json CID 이렇게 넣어서 구현해보기 !

누구나 NFT 민팅을 하는 기능

Remix IDE를 이용한 민팅 기능을
VSCode에서도 구현할수 있을 것 같았다

1. 내 지갑주소와 TokenURI 정보를 입력하면 그 민팅 기능이 실행 되는데
2. '스마트 컨트랙트 주소'와 'ABI'를 변수에 담아놓고
3. web3 컨트랙트를 실행할 수 있었으나

혼자서는 그 구현 방법이 생각되는데
'다같이 이 서비스를 이용해야할때는 어떻게 해야 할까?'
에서 구현방법이 막혔다

👉 그래서 생각해낸 방법은
VSCode 폴더 안에 민팅할 NFT Json 파일을 많이 넣어놓고
(Json 파일을 반복문을 돌려서 랜덤으로 나오게)
MetaMask 와 연결된 주소가 담긴 변수 + Json 을
web3 컨트랙트 민팅 함수에 인자로 넣어 실행시키면 ( .call )
민팅 기능을 구현할수 있지 않을까?

git issue & project

git 에 대해 익숙하다고 생각했는데
팀원들과 협업하기 위한 branch를 사용하다보니까
새로 배워가는 부분이 있었다

branch를 이용하기에도 벅차서
git issue & project 탭 부분 기능은 사용하지도 못했는데
추가적으로 공부해봐야겠다

도메인에 배포하기

작성한 코드들을 localhost 에서만 돌려보지말고
무료로 받을수 있는 도메인 주소에 배포를 해보고 싶었지만
이것도 에러가 많이 발생하고 기한내에 배포하는게 쉬운일이 아니었다


더 공부할 내용 📃

  • 이더리움 보일러 플레이트 코드 분석해보기
  • git issue & project 탭
  • Tailwind CSS
  • Figma
  • Thirdweb
  • 리액트 핫 토스트기능
  • sanity
profile
loadin9... ▓▓▓▓▓▒▒▒▒▒

1개의 댓글

comment-user-thumbnail
2022년 6월 18일

응원합니다 ~!!!!

답글 달기