BlockChain/이더리움

web3 및 erc721 사용한 NFT 민팅 프로젝트 일기 (1)

정신이 많이없는 개발자 2022. 1. 5. 13:33
728x90
반응형

항상 모든것을 설명하기 위해서 자세하고 설명하도록 노력해보자!
공부한 내용을 바탕으로 도움이 될 수 있게 작성하려고 노력중입니다.
*잘못된 내용은 댓글로 남겨주시면 수정하겠습니다.*

reactJS / reactStrap / heroku /metamask / web3 / ipfs / MongoDB / node.js /postman /truffle / ganache를 사용했습니다.

(1)
화면은 일반적은 reactStrap template를 사용했습니다.
https://usecode.pw/free-react-dashboard/
 

무료 리액트 어드민 대시보드 템플릿(Free React Admin Dashboard Template)

보통 서비스를 운영하게 되면 서비스 관리를 위해 별도로 관리자 페이지를 만들어 사용하게 된다.

usecode.pw

(2)

전체코드는 github을 참조하세요! 

https://github.com/ms3221/BEB_01_ToTheMoon.git

 

GitHub - ms3221/BEB_01_ToTheMoon

Contribute to ms3221/BEB_01_ToTheMoon development by creating an account on GitHub.

github.com

 기능별로(ipfs 이미지 및 json파일의 형태 올리기 등) 나누어서 코드구성을 공유하고 gif를 첨부해서 눈에 보이게 만들어 보겠습니다.

 

 

(3) ipfs 설명 및 기존방식과 차이점 설명 

 

기존의 사진파일 첨부 방식 

<src="/Users/anhyeongjun/Desktop/project/codestates_first/NFTMarket-01-ToTheMoon/server/cat.jpeg">

이미지파일자체는 local서버에 저장, 파일의 이미지이름만 겹치지않게 만들어 DB에 이미지이름 저장.

화면에 사진을 나타나게하는 방식은 local서버경로+DB이미지이름 이러한 방식으로 사용을 많이 했습니다. 

*local서버가아니더라도 비슷한 방식으로 사용합니다. DB자체에 이미지파일을 넣기에는 용량이 크다.*

 

ipfs사용하여 사진파일을 첨부하는 방식 

먼저, 왜 이렇게 하는지에 대해서 생각을 조금 해보자. 블록체인은 사진이나 동영상파일을 올리기에  블록크기가 충분하지 않습니다.
이해가 어려우신분들은 일단 블록 == DB라고 생각하셔도 좋을 것 같습니다. 즉, DB에 직접 사진이나 동영상을 저장하지 않는다.

 

이를 해결하기 위한 방안으로 사진,동영상 파일을 ipfs라는 공간에 두고 ipfs가 해쉬값을 반환해 주면 그 해쉬값을 블록체인에 올리는 방식이 화두가 되면서 ipfs가 인기가 좋아지고 있습니다. 또한, ipfs는 p2p 분산파일 시스템으로 기존 중앙화된 서버를 이용하여 여러 문제점이 있었던 기존 웹을 대체 할 수 있을 것이라는 기대도 모으고 있습니다.

 IPFS (InterPlanetary File System) 개념 

- 전 세계 컴퓨터의 파일 표준 및 시스템을 연결시키려는 분산형 P2P 파일 표준.

- 웹을 보다 빠르고 안전하고 개방적으로 만들 수 있는 P2P 분산 파일 시스템

- 근본적인 목표는 HTTP를 대체하는 것입니다. 

더 필요한 부분은 공식문서를 참조해서 ipfs가 가지고자 하는 신념 및 어떻게 작동되는지에 대한 방식을 읽으면 더 좋을 것 같습니다. 제 글에서는 왜 사용했고, 어떻게 사용했는지에 대해서만 간략하게 설명하겠습니다.

Ipfs를 사용해서 이미지를 업로드

강아지사진을 보게되면 기존의 로컬서버+DB이미지 방식으로 불러온것이 아닌 ipfs를 사용해서 https://ipfs.io/ipfs/QmPJZLH4jbRfMmfTdm1YL3RG13LmkBdJYFf6zkxQnc4f5f

                위 주소를 사용해서 불러온 것이다. https~~ipfs까지는 지정값이고 그 후Q로시작하는 부부분터가 해쉬값이다.

이주소로 들어가보면 강아지 사진이 나올 것이다.

이정도 보게 되면 왜 사용했는지에 대해서 충분한 설명이 되었다고 생각한다.

그럼 이제 어떻게 사용했는지 에 대해서 같이 살펴보자

 

 

(3) ipfs 코드 및 코드리뷰(옛날 방식)

일단 옛날에 사용했던 코드를 봐보자.

npm i ipfs-api 라는 명령어를 터미널에 입력해주자.

ipfs를 사용하기 위해서 설정하는 방법

간단하다. 사용하는 방법은 위 코드사진처럼 선언한 후 ipfs.add('buffer(사진을 buffer 파일로 변환'),(err, ipfsHash)=>{

     성공하면 console.log( ipfsHash[0].hash)를 통해서 이미지가 올려진 해쉬값을 확인할 수 있다.

})

 

그러나, 옛날 방식은 사진을 버퍼이미지형식으로 바꾸어서 올려야한다는 귀찮은 부분이있다. 밑에 코드사진처럼

이미지파일을 buffer로 변환하는 방법
이미지 업로드시 오른쪽에 보이는 화면을 참조.

옆에사진을 보게 되면 File부분은 이미지가 왼쪽에 있는 그림처럼 업로드 됬을때 나오는 log이다. 이 파일을 buffer로 변환 시켜서 ipfs.add에 넣으면 되는 방식이다. 그러면 Create.js 111이라는 코드처럼 해쉬값이 나올것이다. 그러나 이 해쉬값만 가지고는 이미지가 나오지않고 꼭!! https://ipfs.io/ipfs/ {해쉬} 이렇게 사용하도록 하자. *{}기호를 넣지말고 빼주고 해쉬값만 넣어주면된다.*

(4) ipfs 코드 및 코드리뷰(요즘 방식)

많이 달라진것은 없다. 더 편해졌을 뿐....

npm install ipfs-http-client 라는 명령어를 터미널에 입력해주자.

import { create } from 'ipfs-http-client';
const ipfs = create({
    host: 'ipfs.infura.io',
    port: 5001,
    protocol: 'https',
  });
  
  const [files, setFiles] = useState('');
  
  const onSubmitNft = async (e) => {
  
   //ipfs에 이미지 업로드하고 hash값 리턴
     const imgURI = await ipfs.add(files);
     }

이제는 위에 옛날 방식의 코드처럼 buffer로 변환시켜주지 않아도 된다. 그냥 선택된 파일을 위에 코드블럭에서 보이는 것처럼 

const imgURI = ipfs.add("저장된 파일"); 해주면 imgURI에 위에서 본것과 똑같은 해쉬값이 변수에 담기게 된다. 

반응형