NFT 민팅 및 나열 후기

🔥 느낀점 및 다짐

이번 글에서는 제가 프로젝트를 진행함에 있어서 느꼇던 부분과 대략적인 코드 설명을 하도록 하겠습니다.

• 내일부터 또다른 프로젝트를 시작할꺼라서..

이 글은 특정분을 비하하고자 쓰는 글이 아니며 제가 진행간에 느꼈던 부분에 대해서 작성하는 글 입니다!!!

일단 가장 크게 느낀점은 협업의 중요성과 기초 설계입니다.

저희팀같은 경우에는 실제로 협업을 진행하시는 분들은 매우 적었고 3명의 팀원중 한분은 상대적으로 코드작성에 불편함을 가지시는 분도 계셨습니다.

그러다 보니 거의 대부분의 작업을 2명에서 작업을 하게 되었고

제 기준에서는 의사소통 면에서도 원활하다는 생각이 되지는 않았습니다.

• 실제로 팀원분이 말도 없이 혼자서 작업을 하시고 안된다고 하시는 경우도 있고 해서 ㅠㅠ

또한 저도 팀장을 처음 맡아서 진행하였던 프로젝트라서 다른분들에게 부족한 면도 많이 보였습니다..

• 최초 설계를 하지 않은점 등등 저도 잘못한 부분이 많습니다

모두가 처음하는 작업인 만큼 힘들고 구조적으로 완성된 프로젝트가 나오지 못하였고 계획대로 이루어 지지 않았다는 단점도 있지만

그래도 그만큼 새로운 것들을 배우고 바닥부터 만들어 가는 작업을 통해서 좀더 코드와 친숙해지는 시간을 가진것 같습니다.

다음 프로젝트에서는 이러한 저의 문제점들을 발판삼아서 좀더 완성도 있는 프로젝트를 진행 하는 것으로 목표를 잡았습니다!!

• 제대로 작동을 하지 않지만... 시간이 다 되었기 떄문에 손볼수 없다는 점이 안타깝네요 ㅠ

다음 프로젝트를 진행하는데에 있어서 제가 스스로 명심해야 하는 부분들에 대해서 적어보고자 합니다.

1. Redux를 쓰자

이 부분은 팀원분들과 의견이 맞아야 가능한 부분이지만 저는 이번 프로젝트를 React로 진행하는데에 있어서 Props를 전달하는데에 많은 어려움이 있었습니다.

물론 기본 구조 설계 자체를 하지 않아서 이러한 부분이 발생하였을 수도 있지만

후에 프로젝트를 진행하는데에 있어서 코드를 수정해야할 필요도 있을 것이고 그러한 부분에서 Props을 사용하기 보다는 Redux를 사용하는 것이 좀더 효율적이기 떄문에

다음 프로젝트에서는 가능하다면 Redux를 사용하는 것을 지향할껏 같습니다.

2. 설계하는 시간을 반드시 가지자

몇번이나 언급을 하였지만 정말 중요한 부분 같습니다.

기본적인 틀을 잡고 팀원들과 의논후 우리 어떻게 진행해보자 이런식의 이야기를 주고 받는것이 완성된 프로젝트를 만드는데 많은 기여를 할것 같습니다.

이번 프로젝트 같은 경우에는 정말 단순하게 홈페이지 만들어 놓고 이런기능 이런 기능 집어넣어보자

이런식으로 진행을 하다보니 props전달도 많이 꼬이게 되고 후에 코드 자체가 유동적으로 작동을 하지 못하게 되었습니다.

• 이 부분이 저희 프로젝트 실패원인의 가장 주요한 부분이 아닌가 싶습니다.

3. 역할 분담을 확실하게 하자

저번 프로젝트에서는 처음 하는 프로젝트다 보니 최대한 자신이 할수 있는 것을 해보자라는 느낌으로 접근을 하였고

이러다 보니 정말 규제없는 정부와 같이 코드 수정을 마구자비로 하게 되었습니다..

그러다보니 pull, merge할떄에도 병합 오류 및 후에 코드를 합치고 나서도 코드 분석을 다시 했어야 했으며

css작업또한 합치는 과정에서 다시 재 수정해야 했습니다.

이러한 부분에서 저희 시간이 많이 소요되었습니다.

4. 오픈 소스 및 템플릿을 활용하자

저는 이러한 부분에 동의를 하였지만 서로 의견이 맞지 않아서 실제로 실행되지는 않았습니다.

물론 html, css를 모두 처음부터 작업을 하는 과정을 통해 배우는 점은 더 많다고 생각을 합니다.

• 실제로 이번 프로젝트에서 직접 모두 작성을 하다보니 많은점을 배우기도 하였습니다.

하지만 저희는 전체적으로 프로젝트를 완성시켜야 했고 이러한 점에서 많은 시간이 소요가 되었습니다

그러기 떄문에 다음 프로젝트에서 서로 의견이 맞는다면 오픈소스를 활용해 보고자 하며 이를 통해 프로젝트 시간을 좀더 단축시키고자 합니다.

🔥 간단한 코드 전체 리뷰

일단 구조가 너무 뒤죽박죽이기 떄문에.. 어떤 방향으로 link가 설정되어있고 Router를 사용하였는지에 대해서는 정리를 하지 않겠습니다.

• 좋지 못한 표본입니다.. ㅠ

🔨 web3 연결 및 메타마스크 계정 연결

-- web3 연결 --

if (typeof window.ethereum !== "undefined") {
      try {
        const web = new Web3(window.ethereum);
        setWeb3(web);
      } catch (err) {
        console.log(err);
      }
}
    
-- 계정 연결 --

const accounts = await window.ethereum.request({
      method: "eth_requestAccounts",
    });
setAccount(accounts[0]);

일단 저희는 컨트랙트를 사용해야 하기 떄문에 web3연결이 필요하며 후에 내가 만든 NFT인지를 검증하는 과정이 필요하기 떄문에 메타마스크의 주소 값이 필요합니다.

최초로 new Web3(window.ethereum) 을 통하여 web3를 설정하게 됩니다.

• 이 부분은 infura를 통해서 연결 가능하기도 합니다.

그후 web3의 노드값 주소값을 가져오게 되면 저희는 저희 계정의 값을 가져 와야 합니다.

window.ethereum.request({ method:"eth_requestAccounts", }) 를 통하여 계정을 가져올수 있습니다.

이 과정까지 끝난다면 저희는 간편하게 메타마스크 연동및 이더리움 네트워크에 연결이 완료가 되었습니다.

이후 이러한 값들을 구조적으로 활용을 해야 합니다.

• 이부분은 redux로 처리하면 좀더 편했을꺼 같습니다.

🔨 NFT만들기

const nftContract = await new web3.eth.Contract(ERC721abi, CA);
    const nonce = await web3.eth.getTransactionCount(account, "latest");

    const tx = {
      from: account,
      to: CA,
      nonce: nonce,
      gas: 500000,
      data: nftContract.methods
        .mintNFT(account, `${link}, ${name}, ${description}`)
        .encodeABI(),
    };

    await web3.eth.sendTransaction(tx).then((trs) => {
      console.log(trs.blockNumber);
    });

ipfs는 이과정을 다루고 또다시 다루어 보겠습니다.

일단 저희는 web3를 통해서 연결이 이루어져 있고 이를 통해서 이더리움 네트워크와 소통이 가능합니다.

저는 기본적으로 remix를 통해서 배포한 CA값과 abi값을 가지고 제가 배포한 컨트랙트를 가져왔습니다.

이를 통해서 nftContract변수는 컨트랙트 코드를 가지고 있고 이는 call()함수를 붙임으로써 사용 가능해 집니다.

이더리움은 이중지불 문제를 막기위해서 nonce값을 사용하고 있기 떄문에 nonce라는 변수의 가장 최근의 트랜잭션을 가져옴으로써 갱신을 해주고 이를 tx라는 객체 값에 담게 됩니다.

필요한 부분을 입력을 해준뒤 mintNFT를 통해서 NFT로 만든 값을 data에 담게 됩니다.

그후 트랜잭션을 전송을 하면 되고 트랜잭션이 전송될 떄에는 메타마스크가 등장하여 승일 및 거부를 판별하게 됩니다.

저희는 트랜잭션을 전송할떄 단순히 img의 url값을 전송을 한것이 아니라 ipfs값으로 변환을 한뒤에 전송을 하였습니다.

• 즉 link변수는 ipfs값을 담고 있습니다.
• 이 부분은 저번 글에 영상으로 담았습니다.

const ipfsUpload = async () => {
        await ipfs.add(Buffer.from(img)).then((result) => {
          SetLink(`https://ipfs.io/ipfs/${String(result[0].path)}`);
        });
};

이 함수가 실행되지 전에 img변수에는 단순히 img의 경로가 담겨 있지만 ipfs.add 과정을 통해서 ipfs주소값으로 변경이 이루어지게 됩니다.

• 이 부분에서 트러블 슈팅이 많이 발생을 하였는데 이 부분은 ipfs메서드를 하나하나 콘솔을 찍어가면서 어떠한 값처리를 하는지를 확인하였고
• 추가적으로 오류를 분석하여 해결을 하였습니다.

🔨 NFT프론트에 나열하기

const nftContract = await new web3.eth.Contract(ERC721abi, CA);
    const total = await nftContract.methods.totalSupply().call();

    let arr = [];
    let answer = [];
    for (let i = 1; i <= total; i++) {
      arr.push(i);
    }

    for (let Id of arr) {
      let tokenURI = await nftContract.methods.tokenURI(Id).call();
      if(String(tokenURI).toLowerCase() === account){
        let temp = tokenURI.split(", ");

      	await axios.get(temp[0]).then((data) => {
      	  answer.push(data.data);
      	});
      }
      
    }

앞선 과정과 동등하게 nftContract에 컨트랙트를 담았습니다.

그후 totalSupply과정을 통해서 해당 CA에는 몇개의 NFT가 있는지를 확인을 하였고

있는 NFT중 나의 계정 주소에 맞는 NFT만을 화면에 보이게 만들어 놓았습니다.

이후 ipfs로 변환하였던 이미지 주소를 get요청을 통해 다시 img주소 링크로 가져오게 되었고

이를 새로운 변수에 할당해준뒤

후에 map을 사용하여 프론트에 뿌려주게 되었습니다.

이후 각각의 NFT 이미지 마다 Link를 사용하여 경로를 지정해 주었지만 이후의 기능을 시간부족으로 구현을 하지 못하였기 떄문에 다루지 못했습니다 ㅠ