Opensea Clone Coding Project 회고

 

opensea clone project 회고

https://github.com/yiminwook/BEB-06-FIRST-03/wiki

 

 opensea는 사용자가 NFT를 직접 사고 팔기위한 가장 대표적인 플랫폼입니다.

또한 NFT를 생성하고 저장까지 할 수 있는 기능을 사용자들에게 제공하고 있습니다.  

 

Codestates Blockchain Bootcamp 첫 프로젝트는 opensea의 clone coding으로 opensea의 Front-end Back-end Architecture와 API를 분석하여 자신만의 언어로 구현하는 것이 목표입니다.

 

 

 부트캠프에서 처음으로 경험하게 된 Project는 팀원 모두에게 있어서 처음으로 경험하는 것이었습니다. 누군가 방향을  정해 팀원들을 끌어 한정된 시간을 유용하게 사용하는 것이 중요하다고 생각하여 저는 스스로 팀장을 맡았습니다.

 

 

저는 팀장으로서 코딩에 들어가기 전에 우선적으로 선행되야하는 것을 생각해보았었습니다.

• Role & Rule
• WorkFlow
• Architecture
• WireFrame

 

Role & Rule

   회의는 오전 11시에 진행
   커밋은 한글로 간결하게 작성하고, 기능 구현 시마다 작성
   고민이 될 때는 항상 팀원들과 상담!

 

 지금까지는 팀원 대부분이 개발을 혼자서 진행해왔습니다. 그렇지만 Project는 모두가 함께 만들어 나가는 것이고 그렇기에 역할분담(Role)과 서로의 개발패턴, 즉 행동이나 commit 작성법을 통일시키는 규칙(Rule)을 정하는 것이 필요다고 생각하였습니다. 저희는 Role은 장래에 개발자로서 나아가고 싶은 방향으로 정했습니다. 저는 Front_end BlockChain 개발자를  목표를 했기에 Front의 Search 기능 구현과, 메타마스크 연결을 저의 역할(Role)로 맡았고 팀원들이 대부분 오후에 본격적으로 개발에 들어가는 패턴을 가지고 있었기에 오전 11시에 모두 모여서 회의를 하고 오후에 자신이 맡은 부분을 개발하기로 정하였습니다. commit은 전에 개발을 직으로 하신 팀원께서 한글로 간결하게 작성해왔다고 하셔서 해당 팀원분께 맞추어서 기능 하나를 구현 시마다 한글로 작성하기로 정하였습니다.

 

WorkFlow

 

 master(공동) repository는 project후에는 fork후 개발을 하는 것에 익숙해지기 위해서 저희는 포크를 따서 각자의 repository에서 작업하는 것으로 협의했습니다. 작업이 끝나면 개인 repo에 올리고 master_dev에 pull request를 하여 개발 버전을 동기화시키고 버그나 오류를 해결 후 최종적으로 master_main에 올리기로 하였습니다. 저는 git으로 협업하는 게 익숙지 않아서 pull이 안되거나 push가 안 되는 등 헤멧 지만 이번 project를 통해서 merge도 여러 번 해보고 remote로 원격저장소 관리도 많이 해보니 git를 다루는 실력이 많이 늘었습니다.

 

 

Architecture

 

 Architecture는 모두가 사용 가능한 라이브러리와 API로 선택하였습니다. 저와 같이 Front를 맡아주신 조은석 팀원님은 더 많은 라이브러리를 사용이 가능하셨지만 저에게 맞추어서 React와 Bootstrap으로 개발을 진행해주셨습니다. Metamask와 IPFS는 저희 모두 익숙하지 않았기 때문에 시작부터 팀 선결과제로 정하고 docs나 자료를 찾았습니다. 개발 초기에 testnet opensea API 사용을 배제하였지만 web3와 infura API를 사용하여 contract의 함수를 실행시키는 것 만으로는 좀 더 다양한 NFT를 search하는데 한계를 느꼈기 때문에 중간에 Architecture가 수정되었습니다. project  종료하고 나서 좀 더 다양한 third party API, 라이브러리를 사용할 수 있도록 공부해야겠다는 생각이 우선 들었고 Metamask를 더 열심히 공부하여 로그인 기능도 구현할 수 있도록 해야겠다는 생각이 들었습니다.

 

 

WireFrame

 

 wireframe은 mint tranfer search 3가지 주요 기능을 생각하며 작성하였습니다. 가장 opensea를 많이 참고한 부분이고 가장 많이 수정이 되었던 부분입니다. 초기 wireframe은 복잡하였지만 점점 간략화시키고 단순화시켜 사용자에게 쉽고 자연스럽게 느껴지도록 노력하였습니다. 초기에 가장 큰 변경점은 본래 tranfer page가 있었지만 저희가 구현한 tranfer기능은 저희가 발행한 Smart contract로 mint한 NFT를 전송하는 단순한 기능이었기 때문에 detatil page안으로 포함시켜 on/off으로 랜더링 하는 방식으로 수정되었습니다. mint page는 사용자가 IPFS 주소를 생성시킨 뒤 mint transaction를 생성하는 하나의 연속적인 프로세스였지만 IPFS 연결 오류가 잦았기 때문에 하나에서 둘로 분할하여 직접 IPFS주소가 생성되는지 확인 후에 transcation을 생성하게 개선되었습니다. 본래 image 파일도 IPFS에 업로드하는 것 을 구상하였지만 개발기간이 타이트하다고 생각되었기 때문에 해당 기능은 project후에 각자 개발하는 것으로 정하였습니다.

 

느낀 점

하나의 웹서비스(client와 server)를 만들어나가는 데 있어서 전체적인 흐름을 정하는 것이 매우 중요했다는 생각이 듭니다. 특히 무작정 코딩하는 것보다 client에는 어떤 기능을 추가할 건지 server에 어떤 역할을 부여할 건지 wireframe과 api를 짜는 것이 중요성을 깨닫게 되었습니다. 6일이라는 한정적인 시간에 계획한 부분을 전부 구현에 낼 수 있었던 것은 첫 단추를 잘 꿰었기 때문이라고 생각하고 그런 부분에 있어서 저희 project는 매우 성공적이었다고 생각합니다. 이번 프로젝트에서 개발자로서 성장했다고 느끼는 부분은 git을 좀 더 능숙하게 다룰 수 있게 되었고, github repository 설정이나 issue, WIKI, README를 작성하면서 github에서 권한을 부여하는 방법, issue template으로  todo를 관리하는 방법, markdown 작성법을 알게 되었습니다. block chain 개발자로서 성장한 부분은 transaction을 분석하여 data를 스스로 인코딩하거나 디코딩할 수 있게 되었습니다. 즉, 제가 원하는 트랜젝션을 생성하여 metamask에 request 할 수 있게 되었습니다. project에서 제가 주로 맞은 역할은 metamask을 연결하고 trasaction를 생성하는 부분이었는데 metamask를 공부하면서 Dapp에 대한 매력을 느꼈습니다. 다양한 웹 애플리케이션 서비스에 metamask를 연결한다면 이더리움이나 비트코인으로도 사용자가 지불이 가능하고 smart contract에 transaction을 보낸다면 무공 무진 하게 활용이 가능하다고 생각합니다. 앞으로는 Front_end 블록체인 개발자로서 Dapp을 개발하고 싶다고 생각하게 되었습니다.

 

개선할 점

front_end 개발을 진행하면서 제가 생각한 디자인을 구현해내는 것이 매우 힘들었습니다. 저는 css에 대한 지식이 절대적으로 부족하였기 때문에 저와 같이 front를 맡으신 박은석 팀원님께 많은 도움을 받았습니다. 우선 가장 많이 사용되고 있는 react bootstrap를 공부하여 약점인 css를 극복하고자 합니다. 또한 client 라이브러리를 React 외는 다루어 본 적이 없었기에 팀원분이 배려해주시기도 하였기 때문에 Redux도 추후에 공부해보려고 합니다. mint 기능 구현할 때 jsonData를 IPFS에 올리고 주소를 받는 것까지는 구현을 하였지만 IPFS에 이미지를 올리는 기능은 구현해내지 못했습니다. 우선 React에 img upload foam 생성 방법을 찾아보고 multer 라이브러리를 사용하여 이미지를 IPFS로 올리는 기능도 나중에 구현하여 개선해보려고 합니다. 초기에 mypage도 구상했었는데 개발 시간 부족으로 구현해내지 못했습니다 metamask docs를 좀 더 공부해서 로그인 기능을 추가하고 프로필 사진이나 자기소개 등을 올릴 수 있도록 추후에 개선하고자 합니다.