PROJECT1
프로젝트1 주제로 Opensea를 클론코딩을 진행하였다.
OPENSEA? NFT MARKET PLACE로 NFT토큰을 거래할 수 있는 거래소 사이트이다. 테마별로 NFT를 구매할 수 있고, 사용자는 NFT 토큰을 발행까지 할 수 있다.
PROJECT 1 구성 및 FLOW
팀원들과 먼저 와이어프레임과 전체적인 흐름 플로우를 정리하고, 개발에 돌입하기 전 많은 회의를 진행하였다. 이 과정에 개발에 들어갔을 때 헷갈리는 것 없이 할 수 있었다.
먼저, 코드스테이츠 측에서 안내해준 , 아키텍처부터 이해하고 정리를 하기 시작했다.
조원분들과 함께 확인할 수 있는 대략적인 FLOW는 이 정도로 정리했으며,
먼저 해야할 Bare Minimum과 OPTIONAL를 따로 정리하였다.
와이어 프레임
기술 스택
초기 기술스택은 이렇게 사용하기로 정했고, Aws s3도 사용하였으나, 기능 구현에 필요 없는 경우도 있어 중간에 빼야하는 경우도 있었다.
aws s3 대신 NFT 스토리지를 이용하여 ipfs를 사용해서 사진을 업로드하였다.
ROLE
본인이 맡은 역할은 Backend 였으며, Frontend 보조 등 풀스택으로 참여하였다.
-
로그인/ 로그아웃 구현 : 로그인 로그아웃을 구현하였고, 로그인 유지를 위해 간단하게 express-session을 사용하였다. openSea 사이트를 뜯어보니 로그인 유지에는 localStorage를 사용하는 것 같기도 했다. 로그인할 때 메타마스크 지갑에 로그인 한번만하고, 페이지에서는 로그아웃을 해도 메타마스크 로그인은 유지되는 것을 보아 세션을 사용해도 무방하다고 생각했다. 추가적으로 로그인 로그아웃을 분리하여 로그인이 필요한 곳은 로그인을 해야만 가능하도록 구현하였다.
-
Aws s3 : aws-sdk와 multer -s3를 사용하여 사진을 업로드하면, 사진정보가 s3에 넘어가도록 기능을 구현하였으나, flow에 맞지 않아 빼버렸고, 프론트에서 NFT 스토리지를 사용하여 ipfs 업로드하도록 바꾸었다.
-
민팅 부분 : NFT를 컨트랙트 하여 민팅을 하게 되면, tokenId를 반환하고 제목, 설명 등 데이터들을 axios로 서버로 넘겨 DB에 해당 내용들을 저장하게 만들었다.
-
토큰 리스트 : NFT를 민팅하게되면, 토큰 메타 데이터들을 사용자들이 볼 수 있도록 하였고, 프론트 측에도 토큰 리스트들이 보이도록 구현하였다.
-
구매/ 판매 : 컨트랙트를 하고, 판매등록/판매완료/판매취소 DATABASE로 로직이 이루어질 수 있도록 쿼리문을 미리 구현해두었다.
-
프로필 : 사용자가 보유중인 토큰목록들을 볼 수 있는 것을 쿼리문을 작성하여 미리 구현해두었다. (판매등록/판매완료)한 토큰들은 볼 수가 없다.
느낀점
처음 기획할 때 구현해야할 기능들을 많이 작성하였고, 조원분들이 열심히 해주어서 나 또한 열심히 할 수 있었다. 중간에 구현하다가 빼야할 부분도 있었는데, 협업을 해야할 때 어떻게 더 얘기를 나눠야할 지 깨달을 수 있었다. erc721에서 거의 다 컨트랙트를 사용할 수 있어서 다른 것들도 참조하였다. 하지만 시간이 부족했고, 많은 기능들을 구현하고 싶었으나.. 이것은 따로 개인적으로 해야했다. 개발을 진행하면서 프론트와 백엔드 TODOLIST들을 작성하였고, 개인 TODOLIST를 작성하여 개발에서 흐름을 놓지 않기 위해 최대한 기록을 하면서 팀원들과 소통하였다.
아직 내가 스스로 부족하다고 느끼고 많은 공부를 필요로 하는 것 같다. 아쉬운 부분이 많았다.
Trouble Shooting 및 해결 && 어려웠던 점
로그인 로그아웃 할 때 세션이 저장안되거나 반영이 안되는 경우가 있었다.
프론트 측에서 prefilght까지 안되었던 겨우가 있었는데, cors설정으로 (*) 와일드카드 설정을 줄 경우 쿠키를 넘기지 않는 경우도 있었다 origin을 제대로 정해줘야하는 것으로 해결하였다.
sameSite: false 설정을 해주기도 했고, 다시 헷갈렸던 부분을 더 정리할 수 있었다.
세션을 저장할 때 쿠키때문에 withCredentials 옵션을 true를 주고 axios 요청을 해야했다.
깃허브 주소
https://github.com/codestates-beb/BEB-06-KnockSea/wiki
개발 회고
목적
OpenSea 클론코딩을 진행하면서 가능한 기능 구현하기
Keep(장점, 유지할 것)
빠른 선택과 집중 객관적인 판단 가능한 기능들 빠르게 구현 FLOW 흐름 정리 깔끔한 코드 정리를 위해 노력한 점
PROBLEM(단점)
가끔 집요할 정도로 디테일한 부분에 신경씀
TRY(시도해야할 것)
컨트랙트에 대한 이해가 좀 더 필요함.
