NFT 마켓플레이스 제작 (정신차려보니 프로젝트 마지막 날이었던 건에 대하여)

처음엔 단순히 opensea 클론코딩이었지만 팀장님의 제안으로 상당히 재미있는 컨셉의 우리만의 마켓을 만들게 되었다!

 

Github 주소

https://github.com/codestates/beb-03-LIGHTSEA

GitHub - codestates/beb-03-LIGHTSEA

개발 코드가 나와있는 깃허브 주소

 

 

LightSea

- 우주여행자들을 위한 우주 관광 사업 관련 NFT 마켓 플레이스

https://heukkell00.notion.site/LIGHT-SEA-93a6bc7ce54d4e5db6fb092ac76a8613

LIGHT SEA

간단하게 소개해보자면 (노션 페이지에 더 상세하게 잘 나와있다)

우주 NFT를 거래하고 있는 마켓이고 사용자들은 NFT를 이용하여

'우주 항공권 할인 혜택, 예약 우선권, 행성 시민권, 우주 생물 입양권, 은하수 감상 패키지 여행 티켓 등등'

을 거래할 수 있다

 

SR (Software Requirement)

기술 스택

- react (jsx 사용)

- express

- axios

- nodejs

- web3

- 데이터베이스 - mongoDB

 

주요 기능

- explore에서 모든 nft 보기
- nft 이름으로 검색 가능한 search 기능

- nft의 내용을 확인하고 거래를 할 수 있는 상세페이지

- 메타마스크 지갑과 연동하여 로그인 하기

- 로그인 후 지갑 잔액 확인 가능

- 마이페이지에서 내가 소유한 nft 확인 가능

- 내 소유 nft 가격 책정, 판매 기능

 

 

---

 

역할 분담

4명인 팀에 처음 회의 때 2명 프론트엔드, 2명 백엔드로 바로 나뉘어서 그렇게 진행했었다
하지만 하다보니 컨트랙트는 디자인 담당 팀장님이 만들고 또 그걸 다른 분이 도와주시고
나는 백엔드였는데 서버와 DB를 만들다가 컨트랙트와 통신에 관해 헷갈리는 부분이 있어 물어보기도 하고
다른 분이 서버 모듈화를 도와주시기도, 내가 반응형 웹으로 만들기도 했다
모르는 걸 바로 물어보고 같이 고민하고 해결해나가다 보니 너무 재미있었다!! 
온전히 우리 힘만으로 컨셉 정하고 만들고... 햐,,,, 짜릿해.,,,,,

 

내가 맡은 역할 -  백엔드

사실 전에 웹디자인 했던 경력도 있고,, 백엔드보다 프론트엔드가 훨씬 익숙하지만

그렇기 때문에 이번 기회에 꼭 백엔드를 해보고 싶었다

단순히 내가 하는 일만 아는 개발자가 아닌 전반적인 개발에 대해 지식과 상식이 있는 개발자가 되고 싶었기 때문이다

그러면 실무에서 일할 때도 다른 사람들과 협업할 때 더 수월할거라고 생각이 들었다

 

그래서 맡은 백엔드에서 어려움도 있고 오히려 쉬웠던 부분도 있었다

우선 어려웠던 점은

데이터베이스와 컨트랙트를 연결해서 클라이언트에 응답을 보내주는 것...

단순히 클라이언트의 요청을 처리하는 것이 아니라 컨트랙트와 데이터베이스까지 있다보니

너무너무 생소하고 낯설어서 정말 많이 찾아보고 공부했다

 

* 다른 팀들은 프론트에서 바로 처리한 사람들도 많았지만 우리가 굳이 클라이언트와 서버를 나눠 작업한 이유는

web3가 이번 webpack 5에서 에러가 나는 것들 중 하나였기 때문이다

 

(버전을 다운시켜서 쓰기에는 보안에 그닥 좋은 생각이 아닌 것 같았다)

 

그렇기 때문에 더 복잡하고 어려워진 백엔드...!

하지만 적극적인 팀원분들 덕분에 나도 의욕이 뿜뿜해서 열심히 하게 됐당

열정적인 사람들과 함께하니 너무 재밌고 행복했다

이맛에 개발하는 건가...햐...🥺🥺

 

 

컨트랙트 개발은 다른 분이 맡아주셔서 그 컨트랙트 배포 후 abi를 가져와서

그 abi를 이용해서 서버랑 연결할 수 있었고

db는 mongoDB를 사용해서 만들었다

첫 프로젝트고 일주일밖에 시간이 없어서 최소기능을 구현하고 나머지는 시간이 남으면 하기로 했기 때문에

자유롭게 컬렉션을 추가할 수 있는 몽고디비가 우리 개발에 더 맞다고 판단이 되었다

 

그 후 전체적인 백엔드 서버 개발을 내가 작성하였고 프론트를 맡으셨던 다른 분이 모듈로 다 나눠주셨다

나는 그동안 프론트의 반응형을 작업하기 위해 힘을 써보고 있었다

서로 도와주고 서로 부족한 부분들을 보완해가며 작업을 하다보니 정말 한팀처럼 느껴지고 의욕도 더 생기고 열정이 불타올랐다

 

---

 

실제 동작 과정 

메인페이지

메인페이지에는 팀장이 직접 디자인한 이미지가 풀로 들어가있고

그 아래 우리의 컨텐츠를 간단하게 소개하고 있다

 

explore, my page, my wallet

explore 에서는 우리 Light Sea의 모든 NFT를 볼 수 있다

로그인을 하면 my page에 접속이 가능하고 wallet 아이콘을 누르면 잔액 조회도 가능하다.

 

 

login, wallet 잔액, nft 거래 가격 등록, 등록된 가격 explore에서 확인

가격을 등록 하기 전에는

구매를 눌러도 Not on sale 이라는 경고창만 뜨고 구매할 수 없다

로그인 후 마이페이지에서 내 NFT 가격을 책정하고 explore에 가보면

가격이 잘 등록 되어 있고, 본인 소유 NFT의 가격을 누르면 변경할 수 있는 창이 뜬다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  배포 주소 https://lightseanft.vercel.app/

LIGHT SEA

배포에서는 데이터베이스의 내용이 안뜬다... 어렵다 배포....