5 [ NFT 민팅 및 나열 ]

github : https://github.com/codestates/BEB1stProject-05

youtube : https://www.youtube.com/watch?v=V6X_fyD-mos

🔥 진행한 부분

오늘로써 팀으로 진행한 프로젝트는 마무리 되었습니다.

구현하지 못한 기능과 아쉬운 점이 많은 부분이였지만... 전반적으로 네트워크와 소통하는 부분을 코드로 작성을 함으로써 실제로 구현해볼수 있는 시간이였던것 같습니다.

• 지금 와서 생각해보니 많은 작업을 한 것이 아닌데 왜이리 오랜 시간이 걸렸는지 모르겠군요..ㅠㅠ

오늘은 ipfs를 통해 저장된 img를 다시 꺼내온뒤 그 값을 프론트쪽에 보여주는 부분까지 진행을 하였습니다.

• 추가 정보로 입력했던 name, description 부분은 css를 통해 클릭할떄 작동하게 만들 계획이지만 시간이 부족하여..ㅠㅠ

또한 서버를 도중에 구축하려고 하다 보니

web3를 따로 설정해주고 하는 과정이 너무 시간적으로 촉박하여 그냥 클라이언트 측에서 처리를 하는 것으로 결정을 하였습니다 ㅠㅠ

🔥 코드

일단 가장 많이 사용한 부분은 useEffect부분입니다.

• 조건으로는 모든 []를 사용 하였습니다.

저번글과 중복이 되는 내용이지만 대략적으로 흐름을 설명하기 위해서

일단 ipfs를 통해서 byte64로 인코딩된 img결로를 변환 시킵니다.

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

이 값을 link라는 변수에 할당을 하고 트랜잭션을 전송할 떄에는

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);
});

link,name,description값을 할당하여 트랜잭션을 전송 합니다.

그후 NFTList.js파일에서 이 값을 프론트 쪽으로 나열을 해주는 작업을 진행합니다.

일단 기본적으로 ipfs로 변환시킨 값은 uri의 형태를 가지고 있으며 res로는 이미지 파일을 가지고 있기 떄문에

해당 링크에 get요청을 전송 합니다.

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

이런식으로 ipfs에 있는 값을 배열에 할당을 하게 됩니다.

• 전체 코드는 github를 참고하는 것을 추천 드립니다.

이 부분에서 문제는 byte64로 인코딩한 값이 매우 긴 경우에는 값을 가져오는데에 상당한 시간이 소요 되던군요... ㅠㅠ

이후 변환 시킨 이미지값, name, description값을 변수에 할당하고 그 값을

list.map((URI, idx) => {
            return (
              <span className="card" key={idx}>
                <div className="cardImgDiv">
                  <img
                    className="cardImg"
                    src={URI[0]}
                    alt="test"
                    key={"img"}
                  />
                </div>
                <div className="cardBody">
                  <h4 className="cardTitle">{URI[1]}</h4>
                  <p className="cardText">{URI[2]}</p>
                </div>
              </span>
            );
          })

이런식으로 뿌려 줌으로써 작동이 이루어 지게 됩니다.

🔥 후기 및 느낀점

가장 크게 느낀점은 바로 최초 설계하는 부분입니다.

설계하는 과정 없이 우리가 할수 있는 부분을 해보자라는 식의 접근이였고

그러다 보니 서버를 도중에 만들고자 했던 과정이 정상적으로 진행되지 못했습니다 ㅠㅠ

• 결국 서버는 따로 구성하지 못하고 모두 클라이언트 측에서 처리를 하는 로직으로 결정하였습니다.

또한 props로 전달하는 인자값 또한 설계를 하지 않다보니 값이 원하는 시간에 들어오지 않게 되는 현상이 발생했습니다.

• redux가 확실히 편하기는 할꺼 같더군요..

최초 프로그램 계획을 하는 부분을 정말 뼈저리게 느끼는 프로젝트 시간이였습니다 ㅠ

추가로 youtube를 통해서 작동하는 것을 기록 하였습니다!