드디어 첫 프로젝트가 끝났다. 걱정과 달리 화기애애한 분위기 속에 진행되어 순식간에 끝나버렸다. 따끈한 소개 및 회고록 작성!
프로젝트 소개
1. 오픈씨
OpenSea는 미국의 NFT 마켓플레이스로, NFT를 직접 판매하거나 경매를 진행할 수 있는 시장을 제공한다. 기존 이더리움 블록체인에서 발행된 토큰만 취급했으나, 최근 Solana NFT까지 추가되어 Solana 블록체인에서 발행된 NFT도 거래가 가능해졌다.
2. 진행 기간
2022.04.08 ~ 2022.04.15
3. 소스 코드
4. 기술 스택
Frontend
Javascript, React, Web3
2022.04.08 ~ 2022.04.15
Backend
Node.JS, IPFS, Oracle Cloud
Blockchain
Solidity, Rinkeby network
ETC
Github, Discord
5. 구현 기능
- 메타마스크 연결
- 블록체인 상의 NFT 검색
- 보유한 NFT 조회
- NFT 전송
프로젝트 진행
1. 계획 회의(줌)
팀원들과 첫 미팅에서 포지션을 정하고 우리가 구현할 기능에 대해 정했다. 첫 프로젝트이고 기간이 일주일이기 때문에 욕심 내지 않기로 했다. 따라서 기본 기능을 구현하고 여력이 되면 도전해볼 기능을 정했다.
기본 기능
- NFT 검색
- NFT 전송
심화 기능
- NFT 판매
2. 두 번째 회의(오프라인)
첫 회의가 러프하게 진행됐던 만큼 각자 파트를 진행하며 필요했던 부분들에 대해 논의할 것이 생겼다. 나의 경우에는 컨트랙트에서 전달할 정보와 메타데이터 전달 방식이 의문이었고 프론트엔드와 백엔드 간에도 어떤 데이터를 주고받을지에 대해 좀 더 논의했다. 추가적으로 깃헙 충돌 방지를 위해 방법을 미리 알아두고 공유한 덕에 이후 프로젝트에서 충돌상황을 해결하는데 시간을 많이 쏟지 않을 수 있었다.
3. 일일 회의(줌)
매일 오후 1시 30분에 포지션 별 진행상황을 공유하는 회의를 했다. 회의 후 시간이 될 때는 각자의 문제 상황을 공유하고 함께 해결했다. 개인적으로는 이 지점이 프로젝트가 여유롭게 진행될 수 있었던 중요 포인트라고 생각했다. 더욱이 함께 문제를 해결하는 시간들이 블록체인 섹션으로 잊혀졌던 웹개발에 대한 감을 찾는데 굉장히 도움되는 시간이었다.
4. 파트별 해결할 문제들
맡았던 파트 외에 다른 파트들은 공유했던 문제들에 대해 작성했다. 추측이 섞여있을 수 있다.
4-1. Frontend
mintNFT함수 실행이 안되었다. 알고 보니 컨트랙트 함수 실행 시 서명 문제와 관련이 있었다. 아래 글로 해당 부분을 해결할 수 있었다.
mintNFT 기능 구현
4-2. Backend
explore 페이지에서 보여줄 nft를 어디서 받아올까에 대한 고민이 있었다. opensea api를 신청했으나 승인 메일이 오지 않았고 차선책으로 moralis api를 사용하여 해결하였다.
4-3. Smart Contract
4-3-1. transfer
erc-721에 대한 이해가 없어서 transfer는 또 어떻게 해야하나~ 어처구니 없는 고민을 했었다. 다행히도 팀장에게 상황을 공유하고 조언을 얻을 수 있었다. 이미 erc-721에 내장된 transferFrom 함수를 사용하면 간단히 해결되는 부분이었다.
4-3-2. abi, address
컨트랙트 address와 abi를 전달해야 프론트에서 스마트 컨트랙트를 생성하고 특정함수를 실행할 수 있다. 이전 실습에서는 리믹스에서 컴파일을 하고 abi를 직접 가져왔기 때문에 프론트에 어떤 방식으로 전달해줘야하는가 고민이 있었다. 팀장의 조언으로 배포할 때 직접 파일이 생성되도록 하는 방법을 찾을 수 있었다. 만들어진 파일을 프론트에서 직접 접근하는 방식을 사용하여 해결할 수 있었다.
4-3-3. 배포
컨트랙트 작성 후 컴파일, 배포를 진행하는데 아무리해도 실패가 떴다.migrations폴더의 파일명에 대한 오류였다. "1_deploy..." 이런식의 번호가 왜 있는지를 몰랐기 때문에 migrations의 파일을 "mintings.sol"이렇게 작성했는데 알고보니, 번호가 있어야 마이그레이션이 된다. 번호가 없는 파일은 마이그레이션이 되지 않았다.
truffle 문서에 이렇게 적혀있다.
Note that the filename is prefixed with a number and is suffixed by a description. The numbered prefix is required in order to record whether the migration ran successfully. The suffix is purely for human readability and comprehension.
프로젝트를 통해 배운 것
맡은 포지션이 끝나고 백엔드 쪽 account controller 코드를 작성할 기회를 얻었다. 서투른 백엔드를 경험해볼 수 있어 좋은 기회라는 생각이 들었다. 코드를 작성하며 이미 쓰여진 서버 쪽 코드들에 대한 이해도 깊어졌다. 마냥 어렵다고 생각한 부분에 대해 직접 코드를 작성하며 자신감을 얻기도 했다.
또 프로젝트 후에 오라클 클라우드를 이용해 배포까지 진행해보았다. 도메인을 받아 적용했고, ssl인증서를 발급받아 설치하는 것까지 배포의 모든 것을 진행해본 것 같다. 이것에 대한 내용은 별도로 포스팅이 필요할 것 같아 남겨두어야겠다.
링크(작성예정)
아쉬운 점 / 잘한 점
1. 아쉬운 점
첫 회의 후 막연하게 이미지 더미데이터가 필요하지 않을까라는 생각이 들었다. 블록체인 상의 nft를 보여주는 방식을 몰랐기 때문에 더미데이터로 보여주어야 한다고 생각했다. 그래서 팀원들에게 묻지 않고 주말동안 필요한 이미지들을 만들어 두었다. 주말이 지나고 월요일 회의(두 번째 회의) 때 내가 만든 더미데이터는 불필요한 것임을 깨달았다. 우리 프로젝트에서는 moralis api를 통해 블록체인 상의 nft를 보여줄 수 있었다. 물론 추후 프로젝트가 끝나고 팀원들에게 민팅할 이미지로 사용했지만 프로젝트 초반에 불필요한 곳에 혼자 힘을 뺀 상황이었다. 이 때부터 협업 할 때는 모르는 상황을 빠르게 공유하는 것도 중요하다고 생각이 들었다.
깃헙으로 태스크, 이슈 등을 관리하면 되겠다는 믿음으로 기록을 많이 남기지 않았는데 그래도 회의록이 필요한 순간들이 있었다. 귀찮더라도 다음 프로젝트 때는 꼭 회의록을 남기는 습관을 들여야겠다고 다짐했다.
2. 잘한 점
초반에 컨트랙트 배포가 잘 안돼서 필요한 데이터를 전달해주지 못하고 있었다. 팀원들에게 상황을 공유하고 함께 문제를 찾아 해결할 수 있었다. 마냥 시간을 쏟기보다는 문제 상황을 공유하고 빠르게 해결방법을 찾은 것이 팀프로젝트의 시간절약 측면에서 오히려 좋았다고 생각한다. 하지만 이 지점에 약간의 딜레마가 있기는 하다. 내가 앞으로 마주할 문제 상황에서 늘 도움을 받을 수는 없기 때문이다. 이 부분에 있어서 적절한 타협이 필요하다고 생각한다.
깃헙 이슈, 태스크 관리, 칸반보드 등 이전에 사용해보지 못한 다양한 기능들을 사용해보는 것도 좋은 경험이었다. 물론 프로젝트에 도움되는 방향으로 사용하려면 아직은 추가적인 연구가 필요하다고 느꼈다.
작동 화면
1. 지갑 연결
2. 검색 기능
()
3. 내 지갑
()
4. 전송 기능
()
마무리
처음 프로젝트를 시작하며 목표한 부분들이 있었다. 프로젝트를 완성하는 것은 당연하겠지만 이 외에 아래의 목표가 있었다.
- 협업방식 익히기
- github 활용도 올리기
- 프론트엔드 - 백엔드 소통방식 익히기
좋은 팀원들을 만나 프로젝트 완성은 물론 목표한 바도 모두 이룰 수 있었다. 추가적으로 남은 기간동안 배포를 직접 할 수 있도록 본인의 시간을 기꺼이 내어주고 지식을 아낌없이 공유해준 팀장에게 다시금 감사함을 전하고싶다. 뿐만아니라 프로젝트를 통해 본인이 가진 능력치를 보여주고 공유하며 소통하는 방식에 대한 깨달음을 준 팀원들에게도 너무 감사하다.
