프로젝트 준비
기나긴 학습이 끝나고 드디어 OpenSea 클론코딩 프로젝트를 시작했다.
4인1조로 편성된 우리팀은 서로의 포지션에 대해 먼저 의논하였다.
다행히 겹치는 포지션 없이 프론트 2 풀스택 1 백 1 스마트컨트랙트는 함께 하기로 하였다.
백을 맡아서 하기로 하였다. 내가 백을 하고 싶은 이유는 프로젝트를 통해 node.js에 좀 더 능숙해지고, 프론트와의 협업을 경험해보고 싶어 백을 자원하게 되었다.
팀원들과 함께 와이어프레임을 작성해보았다.
동기분께서 작성하신 와이어프레임을 주축으로 뼈대를 잡아 나아가기로 했다.
처음하는 협업 프로젝트라 어디서 어떻게 손을 대야할지 감이 안왔다.
프론트와 백을 어떻게 연동해야하며, 뭐부터 시작해야 할지 감이 잡히지 않았다.
우선 개발 환경을 동일하게 갖춰야한다고 생각했기 때문에 모든 버전들을 동일하게 맞추었다.
그 후 강의 자료에 나온것을 바탕으로 프론트와 백의 분야를 나눠보았다.
프론트 기술스택
React(axios, 부트스트랩 패키지)
시간적 여유가 있으면 css를 하드코딩으로 해보기로 하였다.
백 기술스택
node.js, NoSQL, MongoDB
위의 기술을 선택한 이유
NoSQL과 MongoDB를 선택한 이유는 나는 완성형 개발자가 아니기 때문에 개발을 하는 와중에도 계속해서 학습을 해나가며 코드를 짜야하기 때문에
보다 직관적이고 또한 프론트를 하시는 팀원 분들이 보시기에도 이해하기 쉽고 간편해야 한다고 생각했기 때문에 복잡한 쿼리문을 작성해야하는 mysql보다 낫다고 생각했다.
팀원 분들께 동의를 구하고 풀스택을 하시는 팀원 분께서도 NoSQL과 MongoDB를 사용해보고 싶다고 하셨기에 백의 기술 스택은 이렇게 정하였다.
그 외의 기술
Web3, Goerli테스트넷 이용
우선 코드를 짜기에 앞서 프론트에 필요한 컴포넌트들을 분리하였다.
Main Page (랜딩 페이지)
Nav - 메인 페이지 상단
Explore - 테마별 NFT 리스트 페이지
Create (NFT 민팅 페이지) - 스마트 컨트랙트
NFT 상세 페이지
My Page
백 쪽에서 작업해야 할 것은
민팅된 이미지 DB에 저장
검색 기능 구현
테마별 검색 엔드포인트 작성
buy, sell시 NFT 소유자 변경
이렇게 대략 틀을 잡아놓고 공부를 시작하였다. 우선 검색기능과 explore페이지에서 테마별로 nft를 노출시켜줄 수 있게끔 작성해보았다. 그 후 buy, sell시 소유자 변경과 NFT 민팅시 이미지가 DB에 저장 되게끔 작업을 해봤다. 생각보다 공부 할 것이 많았다. 어쩌다보니 백쪽을 혼자 도맡아 하게 되었다.
팀원 분들이 백쪽을 잘 모르신다고 하셔서 혼자 하게 되었는데 쉽게 생각했지만 큰 오산이었다.
search 기능과 테마별로 nft노출 기능은 쉽게 구현할 수 있었는데 이미지 업로드 부분과 소유자 변경 부분이 좀 어려웠다. 공부를 하던 중 HTTP 메소드 중 PATCH 메소드에 대해 공부하게 되었다. PUT과 PATCH의 차이를 설명하자면 update를 하는 것은 같지만 PUT은 무언가를 update해서 새로운 리소스를 생성하지만 PATCH는 기존에 있던 것을 부분적으로 수정만 해주는 거이기 때문에 나는 소유자만 변경해주면 되었기에 PATCH메소드를 사용했다.
이 부분을 해결하고 나니 어렵지 않게 코드를 짜게 되었다. 이미지 업로드 부분도 전에 개인적으로 소규모 프로젝트를 할 때 구현해본적이 있기 때문에 어렵지 않았다.
코드를 구현하고 나서가 문제였다 이 구현한 코드를 프론트 분들이 이해할 수 있게끔 설명이 필요했는데 어떻게 설명하면 좋을까 생각하다가 postman을 이용해서 테스트를 하면서 어떻게 DB에 저장되고 프론트에서 DB의 어떤 필드값이 노출되게끔 하면 되고 client가 어떤 값을 저장해야하는지 설명해드렸다.
서버는 독립적으로 존재해야하는데 프론트와 연결해서 생각을 하시다보니 그 개념을 설명해드리는게 조금 오래걸렸던 것 같다. 시간적으로 여유가 있었으면 조금 더 설명을 자세하게 해드릴 수 있었을 것 같았는데 아쉬웠다. 하지만 그래도 기능적으로는 테스트를 다 보여드렸기에 이해하셨을 거라 믿었다. 웹사이트에 배포를 google cloud를 통해 하려고 했는데 별 다른 상의가 없었기에 추후에 내가 따로 배포를 할 계획이다.
느낀점
이번 팀 프로젝트를 통해서 얻은게 참 많은 것 같다. 기술적으로나 소통하는 방법이나 얻은 것이 많다. 또한 프로젝트 전에 사전에 논의 해야될 것들이나 준비해야 될 것들이 어떤 것인지도 알게 되었다. 정확히 문서화된 API문서가 없어서 작업하는데 어려움이 있었지만 잘 마무리 되어서 다행이다. 또한 토이 프로젝트 정도는 혼자서 백을 할 수 있다는 자신감이 생겨서 다음 프로젝트를 할 때 큰 도움이 될 것 같다.
github repository
