목적
영상이나 음원의 저작권을 거래하는 사이트.
영상이나 음원의 조회수에 따라 사이트는 해당 영상이나 음원 소유자에게 수익금을 분배해준다.
영상과 음원은 각각 토큰으로 만들어져 거래가 된다.
08.08 ~ 08.22 / 담당한 파트를 위한 공부기간
나는 이 중에서 경매사이트를 담당하게 되었다.
리액트는 대충 알아도 솔리디티는 기초만 알고있는 상태.
크립토좀비를 풀어서 기초를 다시 다지고, 다른 사람들의 nft마켓 코드들을 구글링해봐야겠다.
08.12
역시 기초와 실전코딩은 다르다.
크립토좀비만 떼면 될 줄 알았는데 실제로 코딩을 잡아보니 어디부터 손을 대야할지 막막하다.
마침 감사하게도 다른 팀의 nft마켓을 구현한 팀프로젝트 코드를 얻을 수 있어서 우선 그걸 뜯어봐야겠다.
08.20
경매사이트 코드를 3팀 정도 뜯어보니까 겨우 뭐가 뭘 말하는지 알겠다.
마구 들이박으면서 솔리디티를 짜고있었는데 도저히 안 될것 같아서 팀장님에게 도움을 요청했다.
structor랑 constructor의 차이점이랑 사용방법이 제일 어렵다.
유툽영상을 찾아봐도 다들 하나같이 똑같은 코드와 똑같은 설명을 해줘서 아무런 도움이 되지 않았다.
팀장님이 몇번이나 설명을 차근차근해준 덕분에 코드를 작성할 수 있었다. 고마워요 팀장님.
팁) structor랑 constructor를 이해하려면 배포란 무엇인지, 인스턴스란 무엇인지를 알아야한다.
08.23~09.22 / 담당한 파트 코드 작성하기
08.23
- web3와 메타마스크 연결해서 현재 접속하고있는 사람의 계정가져오기
- 입찰을 클릭하면 입력한 금액과 접속한 계정을 map구조로 엮어서 리스트화 하기
- 이미 입찰한 사람이 다시 입찰 버튼을 누르면 입찰 금액을 바꾸겠냐는 alert를 띄워주고 y선택시 입찰 리스트에 있는 금액을 바꿔주기
08.24
- 경매 종료시간을 알려주는 타이머 만들기
- 경매 참여자를 누르면 그 사람에게 낙찰되도록 하기
08.25
- 거래 컨트랙트 작성
경매 참여자를 누르면 그 사람에게 낙찰되도록하기 (기능 삭제)- 경매가 종료되면 가장 높은 금액을 제시한 사람에게 자동 낙찰 되도록 하기
08.26~09.06
- 프런트 : [Auction] 깃헙으로 코드 옮겨서 적용하기
- 통으로 작성한 코드를 용도별로 뜯어서 컴포넌트 작성, 정리하기
09.07
- remix, 트러플, 가나시, 테스트 코드를 통해 기능들이 잘 돌아가는 것을 확인함
- 실질적으로 화면에서도 잘 돌아가도록 연결하기 시작
- 몽고DB 데이터베이스와 연결
09.10
경매 상태값을 [경매중]에서 [취소]로 바꿔야하는데 메타마스크를 통한 변경이 일어나지 않는 이슈 발견- -> 상태를 변경시키는거니까 call이 아닌 send로 메서드를 호출해야했다.
09.11
백엔드 axios가 연결되지 않고 자꾸 에러를 띄우는 이슈 발견- -> 사전 설정이 잘못 되어있는 것을 수정함
09.12
- 토큰 아이디와 채널 아이디는 다른 팀원이 생성하니까 내가 생성할 필요가 없다는 말을 이제야 이해함.
- 내 코드에서 토큰 아이디와 채널 아이디를 생성,수정하는 내용을 모두 제거 (jsx, sol)
- 프런트와 연결할 백엔드 js코드 작성시작
09.13
constructor에서 작성한 초기값이 수정되지 않아서 d-day가 바뀌지 않는 이슈 발견- -> 후에 remix IDE를 통해 rinkeby에 배포할때 수정이 가능해서 괜찮다고 함.
경매 취소버튼을 누르면 모든 경매가 취소가 되어서 경매생성을 해도 계속 취소상태인 이슈 발견- -> 이건 토큰아이디랑 채널아이디를 받아서 모두 개별화하면 경매를 하나하나 지정할 수 있으니까 괜찮을듯.
09.14
- 다른 팀원들이 작업한 코드를 처음으로 완전 취합하고 rinkeby에 배포함
- 다른 컴포넌트에서 생성한 토큰 아이디와 채널 아이디를 내 컴포넌트까지 끌고와서 연결
- 변경하면 바로 재렌더링 될 수 있도록 react에서 useEffect, useState 로직을 다시 짬
- map메서드는 배열에서 사용이 가능하다!
09.15
pull을 당겼는데 백에서 해당 오류가 뜨면서 굴러가지 않는다.
검색해보니까 몽고DB와 연결이 되지 않는다고하는데 갑자기 스타벅스에서는 아틀라스가 굴러가지 않더라는 말이 떠올랐다.
응 이게 그건가보다.. 네트워크 DNS에 8.8.8.8을 추가함으로서 해결했나싶었는데
( 블로그 참조 : https://zih0.tistory.com/11, https://developers.google.com/speed/public-dns/docs/using#testing )
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
at Slider (webpack-internal:///./components/slide/MainSlide.jsx:55:39)
프런트 에러 메세지
MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you're trying to access the database from an IP that isn't whitelisted. Make sure your current IP address is on your Atlas cluster's IP whitelist: https://docs.atlas.mongodb.com/security-whitelist/
백엔드 에러메세지
왜요 왜 에러메세지가 더 늘어나는데요.
해결 -> .env가 업데이트 되었는데 팀 알림 메세지를 못 봤다..... .env 새로 작성하니 연결됨.
09.16
경매를 생성했을때 시작날짜를 자꾸 이상한걸 가져와서 온갖걸 다 뒤져본 결과 데이터베이스에 삭제되지 않은 기록이 남아있었다.
원인은 다음과 같다.
- 경매 기능 테스트하며 해당 토큰과 해당 계정으로 경매를 만들었음.
- 당시엔 경매 삭제 기능을 구현하지 않았기 때문에 다른 수많은 테스트에 밀려서 잊혀짐
- 마침 그 토큰과 그 계정으로 경매를 생성함
- 경매가 생성되면 새로 생성된 정보를 데이터베이스에 저장하고, 화면에 보여줄때는 데이터베이스에 있는 시작날짜를 가져와서 디데이를 세팅하고 카운팅에 들어감
- 근데 이미 똑같은 정보로 만들어진 기록이 남아있어서 그 기록을 가져옴.
- 그 기록에 있는 시작날짜가 9월16일보다 예전 날짜라서 경매를 시작하자마자 종료가 되는 거였음.
데이터베이스에 같은 정보가 있을 경우, 최신값을 가진 정보를 인용하도록 조건을 거는 것으로 해결됨.
9.17 - 9.22
팀원끼리 만든 컴포넌트를 조합해서 새로운 데이터를 입력받도록 코드 수정.
서로 연결할때 오류가 생기는 부분들 수정.
예기치 못한 오류 발생 수정.
예기치 못한 CSS 망그러짐 수정.
아직 완료화면 못함 -> 실질적으로 배포해서 경매와 판매를 생성이 끝나야 완료 화면을 생성할 수 있음
09.23~09.27 / PPT 자료 작성, 막바지 오류 수정
자잘한 이슈들 수정
경매 완료 후 보여지는 화면이 총 5개인데 서로 사이즈가 맞지않아 망가짐 찾음 -> 개별적으로 되도록 수정
거래 기록 화면 생성함.
결과물
https://www.youtube.com/watch?v=LilR9tOKSMs
https://dapptube.vercel.app/
dapptube.vercel.app
후기
늘 작업을 혼자 조용히 하는 습관을 가지고 있었지만 이번만큼은 팀원들과 대화를 많이 하면서 프로젝트를 진행했다.
평소에는 낯을 많이 가려서 말을 걸고 싶어도 잘 못하는 성격이었는데, 천운인지 팀원들이 모두 상냥하고 다정한 사람들이 되었다.
게다가 팀원들이 다들 재능도 뛰어나고 열심히 하는 사람들이라서 그 속에서 같이 열심히 할 수 있었다.
덕분에 낯 가리는 성격임에도 빠르게 친해질 수 있었고, 모르는 것들을 마음 편히 물어보거나 서로 대화할 수 있었다.
이번 기회로 왜 개발자들이 의견을 왜 그렇게 많이 나누는지 알 수 있는 기회가 되었다.
서로 대화를 나누면 정말정말정말 이득이 많다.
말을 하는 내가 듣고 깨닫고, 남들과 대화하며 깨닫고, 남들이 말하는 걸 듣고 깨닫는다.
이번 프로젝트가 끝나면 개별적으로 팀원을 모아서 프로젝트를 진행할 생각인데,
그때도 서로에게 설명하고 의견을 나누는 기회를 가져야겠다고 생각했다.
'실천하기 > 프로젝트' 카테고리의 다른 글
| 포트폴리오 사이트 업데이트 (0) | 2022.11.02 |
|---|---|
| [221030-221107] 일주일간 뚝딱거리며 포폴만든 이야기 (0) | 2022.10.07 |
| [220411] 연극 예매사이트 팀플 기록) 18. 팀플을 마치며 (0) | 2022.04.17 |
| [220407] 연극 예매사이트 팀플 기록) 17. 키워드에 맞게 배경바꾸기 (0) | 2022.04.17 |
| [220406] 연극 예매사이트 팀플 기록) 16. 카테고리 편집기능 완성 (0) | 2022.04.11 |
댓글