openSea ?
OpenSea는 NFT를 거래할 수 있는 온라인 Market 이다.
처음 이 프로젝트를 진행할땐 단순한 페이지 구성과 디자인도 중요하지만 기능과 성능 구현에 중점을 맞춰야 했습니다.
저희 팀원과 저도 마찬가지로 완벽하진 않고 스스로 공부할 수 있는 계기를 목표로 진행했습니다.
역할 : 프론트엔드 총괄
https://github.com/codestates-beb/BEB-07-Openpool
지시사항
순서
- 메인페이지
- NFT 민팅 페이지
- 테마별 NFT 리스트 페이지
- NFT 상세 페이지
- 마이페이지
사실 순서라기 보단 각각의 페이지를 구성하고 기능을 구현하는 것이 1차 목표였다.
- 메인페이지
FE ] NFT 데이터를 받아 화면에 리스트를 출력
BE ] 서버에 등록되어 있는 NFT 데이터를 FE로 전송
- NFT 민팅 페이지
FE ] minting 에 필요한 기능들과 UI 출력
BE ] NFT 민팅하는 API 제공
smart Contract ] NFT가 블록체인에 등록될 때 실행하게
- NFT 리스트 카테고리 페이지
FE ] 리스트 출력하는 UI + 카테고리 별 필터링 Query // 하나의 페이지에서 SSR형식으로 HTTP Request
BE] 카테고리 별 NFT 정보를 따로 DB에 저장하고 Request가 있을 때마다 FE에 출력
- NFT 상세 페이지
FE ] 해당 NFT에 대한 상세한 설명과 이미지를 갖고 있는 UI
해당 NFT를 구입할 수 있게끔 구현
지갑의 NFT 거래 트랜잭션 요청
BE ] 해당 NFT에 대한 상세 설명
이미지 관련 데이터들 API 처리 + 소유권 이전에 대한 정보 저장
- 마이 페이지
FE ] 상세 계정, 구매를 눌렀을 때 트랜잭션이 넘어올 때 마이페이지에 구매한 NFT 구현
지갑 연결 해제 구현 + 소유한 NFT에 대해 상세페이지로 연결 구현
BE ] 계정 주소에 대하여 필터링 된 NFT 데이터를 서버에 전송
초기 구성
목표 및 완료 예시
- 리액트 프로젝트 세팅
- 메타마스크 지갑 연결 기능 구현
- Minting NFT 시 지갑과 연동하여서 스마트 컨트랙트 구현
요구한 기능은 전부 개발을 완료하였습니다.
어려웠던 점 및 진행하면서 생긴 문제
가장 어려웠던 부분을 고르자면 두 가지를 뽑을 수 있는 것 같다.
1. Metamask 를 구동해서 NFT를 minting 하거나 구매하는 것
이 부분은 제일 어려웠고 지금까지도 이해가 잘 가지 않는 부분이다. 아마 계속 꾸준히 해보면서
더욱 공부해서 Web3.js 부분과 FE + BE 와 연계하는 방법을 잘 구현할 줄 알아야 겠다고 느꼈다.
처음 고안한 방안은
1. 민팅 페이지에서 API를 통해서 metadata라는 NFT 민팅 시 필요한 데이터들을 json 형식으로 서버로 전송하는 것이다.
2. 기존의 OpenSea와는 다르게 contract transaction 을 만들어서 그 트랜잭션을 기반으로 NFT를 만들 수 있게 고안했다.
3. ImageUpload 함수에서 axios 함수를 사용하였고 API 요청해서 서버에서 이미지를 받아오는 형식
즉, MetaMask > Smart contract Transaction > Minting NFT 의 단계를 고안했다.
Metamask 부분과 스마트 컨트랙트 부분은 이미 Solidity를 이용해서 구현되었지만
Transaction 을 부여받아서 그 정보를 이용해서 NFT를 minting하는 과정이 어려웠다.
Minting NFT를 구현하는 방법은 ethers를 사용하는 방법도 있지만 이번 프로젝트에선 Web3.js + Metamask를 이용했다.
2. Git Merge
Git Branch 를 활용해서 Merge를 하면서 많은 어려움들이 있었다. 기술적인 어려움보다는 사실 Merge하는 과정에서 생기는 충돌로 인해 생기는 어려움들이 많았다. 여러 명이 한 프로젝트를 진행하다 보니 더 나은 프로세스와 디자인을 추구하게 되었고 이로 인해 생기는 코드 변경으로 인해 충돌들이 생겼었다.
Merge로 생기는 충돌 이슈는 당연한 것이라고 생각하지만 이슈 관리 및 최신 업데이트 상황을 만들어서 진행하는 방법도 괜찮다고 생각했었다.
이번 프로젝트의 경우는 서브 브랜치로 dev와 메인 브랜치인 Main 을 유지해서 진행하였고, dev에 최신 업데이트를 진행하면서 문제가 없거나 오류가 없을 시 main 브랜치로 merge 하여서 관리했다.
3. Design
이번 프로젝트를 진행하면서 프론트엔드 총괄이라는 역할을 맡고난 뒤 제일 마음에 안들었던 부분은 디자인이였던 것 같다. 이번 프로젝트에서 CSS 라이브러리는 TailwindCSS 를 사용했지만 시간을 갖고 OpenSea와 다르게 클라이언트에게 편의성을 갖춘 디자인을 만들었으면 어땠을 까 라는 생각이 들었다.
직관적인 디자인을 유지했지만 사실 기능 구현에 많은 어려움이 있어서 편의성을 기반한 디자인을 잘 구현했다고는 못하겠다. 다음 프로젝트를 진행할 땐 편의성을 기반으로 둔 디자인을 우선적으로 설계하고 이에 맞춰서 기능을 구현하도록 해야겠다고 느낄 수 있었다.
포기한 부분
- 카테고리별 페이지
서버쪽에서 API 를 통해서 카테고리 별로 맞는 NFT 를 렌더링 하는 작업을 구현하는 것을 포기했다
아무리 고민해도 시간 안에 기능을 구현하고 완벽한 결과물을 만드는 것이 불가능하다고 판단했다.
프로젝트를 진행하면서 느낀 점
처음으로 Web3와 관련된 프로젝트를 진행하면서 많은 부분이 빈약하고 아직 공부해야 할 부분이 많다고 느꼈다.
매우 많이 열심히...
- React >> Next.js
- Web3.js + ethers
- Web3 + Smart Contract
이번 프로젝트가 팀장님 덕분에 많은 것을 배우고 마무리 할 수 있었지만 ( Thanks to DH.... )
개인적으로 계속 follow-up 하면서 업데이트와 더 추가할 방안들을 모색해서 추가해 볼 예정이다.
'Web3 프로젝트' 카테고리의 다른 글
| 블록체인 부동산 거래 플랫폼 (2) | 2023.03.27 |
|---|---|
| Web3 기반 커뮤니티 프로젝트 (1) | 2023.01.13 |
댓글