NFT Market[Team project]

1.기획

 

4명이 팀으로 이루어졌다

팀발표가 나자마자 디코채널을 파서 여러가지 채널을 생성하였다

그 후 

git을통해 이슈를 정의하고 To do를 정리하였습니다.

 

milestone을 정의하여 To do in progress 등등 github사용법을 터득하였음
1.housework
2.programming

3.refactoring

 

 

https://www.figma.com/file/BvcyTl3zF6zowwbrOAzHbr/Untitled?node-id=583%3A399 초안

Figma

-Figma를 사용하여 초반기획디자인

벤치마킹사이트

https://upbit.com/nft/

=>메인화면 디자인

https://magiceden.io/

Magic Eden

 

=>색감

https://pala.world/

Pala

=>UI/UX

 

포지션

 

프론트 2명과 스마트컨트랙트 2명으로 기획하였습니다.

 

메인화면 구현을 위해 NavBar와 Footer를 규현님에게 움직이는 커다란 썸네일화면은 지혜님게 맡겼고
썸네일 아래에 들어갈 nft 리스트와 nft발행로직을 구현하기위해 스마트컨트랙트를 따로공부하기로 결정

 

여기서 맹점은 저를 포함해 Next.js 사용이 익숙치않았다는점 하지만 서로 공부를 위해 사용하기로 결정하였습니다.

 

2.개발

기술스택

next.js 리액트 라이브러리
https://moralis.io/

Moralis » The Ultimate Web3 Development Platform

를 사용해 Web3Dapp 개발 용이하게 써보았음
ethers.js 사용
NFT.storage라이브러리사용

 

스택 사용이유

1.Next.js
CSR과 SSR의 장점을 모두가진 라이브러리를 사용해보고싶었음
2.ethers를 통해 지갑연결과 민팅컨트랙트등을 구현해보았지만 서버를 만들지않아 서버없이 데이터를 데이터베이스에 저장하는 라이브러리의 필요성을 느낌 그래서 Moralis사용
But, 새로운 라이브러리를 공부하는 시간에 더 많은 걸 할애하다보니 기능구현을 많이못하였음

 

파일구조

├── ./README.md
├── ./component2
│   ├── ./component2/App.js
│   ├── ./component2/Erc721.js
│   ├── ./component2/TokenList.js
│   └── ./component2/erc721Abi.js
├── ./components
│   ├── ./components/Contract.js
│   ├── ./components/Footer.js
│   ├── ./components/Lists.js
│   ├── ./components/NavBar.js
│   ├── ./components/SampleURI.js
│   ├── ./components/SearchCollection.js
│   ├── ./components/Thumbnail.js
│   ├── ./components/dummy
│   └── ./components/getuserNFT.js
├── ./next.config.js
── ./package-lock.json
├── ./package.json
├── ./pages
│   ├── ./pages/_app.js
│   ├── ./pages/_document.js
│   ├── ./pages/api
│   ├── ./pages/detail
│   ├── ./pages/index.js
│   └── ./pages/mintNFT.js
├── ./public
│   ├── ./public/favicon.ico
│   └── ./public/vercel.svg
├── ./styles
│   ├── ./styles/Home.module.css
│   └── ./styles/globals.css

 

어려웠던 점과 해결과정

1.Next.js의 특징상 화면에 HTML을 먼저 뿌려주고 나머지 작업을 서버렌더링을 통해 해결하다보니 api를 통해 데이터를 받아오는 과정에서 렌더링이 늦어지게되면서 렌더링에러가나와 화면자체가 구현이 안되는 문제점을 겪었습니다.

NFT를 누르면 나오는 detail페이지에서 데이터를 못받아오는 상황발생

1.useEffect가 비동기로 사용되다보니 데이터를 받아오는 과정이 늦어져서 안되는가?

동기적으로 작동하는 useState를 사용해서 상태값을 동기로 바꾸면되지않을까해서 바꿔보았지만=>> 실패

2.처음 받아오는 데이터값이 undefined라서 안된다면 Optional chaining을 사용해서 예외적으로 허용을 해준다음 렌더링시킨후 데이터를 받아오게된다면 데이터를 렌더링하는게 가능해지지않을까?

성공

이문제가 Next.js의 만의 문제인지 아니면 서버없이 데이터를 받아오다보니 데이터를 받아오는과정이 느려터져서 그런건지는 확신하지 못하겠지만

DApp을 만들때있어 서버를 따로두는 이유에 대해 체감하게 된 계기였다.

2.Main페이지에서 Props를 디테일 페이지로 Props를 넘기고 싶었지만 디테일 페이지자체가 부모컴포넌트라서 자식컴포넌트에서 넘기는게 불가능하였습니다.

[id].js에서 useEffect를 이용해 데이터를 받아왔습니다

그리하여 디테일 페이지를 넘어갈때 api를 한번더 불러오는 방식으로 하기로 결정. 서버를 이용한다면 더좋은 방법이 있을꺼라고 생각했습니다.

 

구현한 페이지들

 

회고

1.기획
개발을 시작하기전 관련 라이브러리 관련된 내용을 기획하는데 있어서 부족했던것같다.
2.개발
처음 환경셋팅에 있어서 추가로 설치할 부분이 많아 merge단계에서 시간을 잡아먹어서 아쉬웠다.
3.협업
디코, 줌, 깃을 통한 의사소통, 코드가 잘못되었다면 무엇이 잘못되었고 근거가 무엇인지에 대해서 서로 소통을 할 수 있어 좀더 빠르게 문제를 해결할 수 있었던것같다.


짧은 시간이었지만 얻어가는게 많은 프로젝트였습니다.
강의를 통해 배웠다고는 하나 언제봐도 새로운코드들과 처음하는 프로젝트다보니 시행착오도 많았지만 차분히 같이 생각하고 해결하는 팀원분들덕분에 할 수 있는  만큼 해냈다고생각합니다.
특히나 문제를 정의하고 기능을 구현하기위한 로직을 생각해볼 기회를 많이가져서 좋았습니다.