[DApp] 오픈씨 일부 기능 구현(NFT 민팅, 전송 등)

개인적으로 복습하기 위해 만든 화면

https://github.com/Hyun2/my-beb-01

• 메타마스크 연결
• ERC20 토큰 등록 / 전송
• ERC721 토큰 민팅 / 등록 / 전송

GitHub - Hyun2/my-beb-01

팀 프로젝트 구현물

https://github.com/codestates/BEB_01_Yukjo

GitHub - codestates/BEB_01_Yukjo

오픈씨의 일부 기능 구현

자체 배포한 ERC20 토큰과 ERC721 토큰을 웹에서 조회하고 상대방에게 전송하는 기능과 웹에서 ERC721토큰(NFT)를 민팅하는 프로젝트를 진행해보았다. 레퍼런스가 web3.js로 되어 있어서 팀프로젝트는 web3.js로 진행하고 복습은 ethers.js로 진행 중이다.

개선을 할 만한 코드

const [erc721list, setErc721list] = useState([]);

    const addNewErc721Token = async () => {
        // 생략
            let arr = [];
          for (let i = 1; i <= totalSupply; i++) {
              arr.push(i);
          }

          for (let tokenId of arr) {
              let tokenOwner = await tokenContract.methods
                  .ownerOf(tokenId)
                  .call();
              if (String(tokenOwner).toLowerCase() === account) {
                  let tokenURI = await tokenContract.methods
                      .tokenURI(tokenId)
                      .call();
                  setErc721list((prevState) => {
                      return [...prevState, { name, symbol, tokenId, tokenURI }];
                  });
              }
          }
    }

위 코드는 연결된 지갑의 NFT를 가져오는 코드인데, 시간이 오래걸리는 문제가 있다. 아래쪽 반복문에서 tokenId를 순회하면서 tokenId 한 번 당 스마트 컨트랙트를 두 번이나 호출하고 있다. 이렇게 구현을 해서 그런지 자체 발급한 ERC721 토큰을 추가할 때, 그 토큰 컨트랙트로 발급된 NFT 개수(30, 40개만 되도 꽤 오래 걸림)가 많아지면 반복문을 도는데 한 참이 걸렸다. 스마트 컨트랙트 내에서 msg.sender를 받아서 sender가 owner인 Token을 배열로 리턴하는 함수를 만들어 프론트에서 호출할 수 있다면 로딩 속도가 개선되지 않을까? 라는 생각이 들었다.

회고

오랜만에 누군가와 함께 협업하는 경험을 하였다. 팀원이 적극적이고 열심히 하였기 때문에 나도 의욕적으로 할 수 있었다. 이번에 만든 것에 NFT 민팅할 파일을 IPFS로 호스팅하는 기능을 추가해보아야 겠다. 요즘 블록체인에 대해 학습하고 있는데, 이번에는 솔리디티나 스마트 컨트랙트보다는 프론트엔드에 초점을 맞춘 것 같다. 테스트를 위해서 배포했던 erc20, erc721 코드는 비교적 간단했다.(더 복잡한 레퍼런스도 있겠지만 일단 기본적인 것을 우선으로 했다.) 오랜만에 프론트엔드를 하다보니 리액트 상태관리나, UI 프레임워크에 대해 서칭하는데 시간을 많이 할애한 것 같다. 다음에는 솔리디티와 스마트 컨트랙트에 집중해서 프로젝트를 구현해보아야 겠다.