web3.js를 사용하여 NFT를 민팅하는 방법

이 튜토리얼은 Web3와 Part I: How to Create an NFT에서 만든 스마트 컨트랙트를 사용해 Ethereum 블록체인에 NFT를 민팅하는 방법을 설명합니다.

이 가이드를 완료하는 데 걸리는 예상 시간: 약 10분

또한 저희 NFT 튜토리얼 시리즈의 다른 글들도 꼭 확인해보세요:

• 🪄 Ether.js로 NFT 민팅하는 방법
• 👛 모바일 지갑에서 NFT를 확인하는 방법
• 💸 NFT에 가격을 설정하는 방법
• 💻 NFT minter 튜토리얼: 풀스택 dApp을 만드는 방법

"NFT를 민팅한다"는 것은 블록체인에 여러분의 ERC721 토큰의 고유한 인스턴스를 발행하는 행위를 말합니다. 이 NFT 튜토리얼 시리즈의 Part I에서 Sepolia 네트워크에 스마트 컨트랙트를 배포하는 데 성공했으니, 이제 web3 실력을 발휘해 NFT를 민팅해봅시다!

이 튜토리얼을 마치면, 이 코드로 원하는 만큼 NFT를 민팅할 수 있게 됩니다 — 시작해봅시다!

1단계: Web3 설치하기

NFT 스마트 컨트랙트 만들기에 관한 첫 번째 튜토리얼을 따라왔다면, 이미 Ethers.js를 사용해본 경험이 있을 것입니다. Web3는 Ethereum 블록체인에 요청을 보내는 작업을 더 쉽게 만들어주는 라이브러리라는 점에서 Ethers와 비슷합니다. 이 튜토리얼에서는 자동 재시도와 견고한 WebSocket 지원을 제공하는 향상된 web3 라이브러리인 Alchemy Web3를 사용하겠습니다.

프로젝트 홈 디렉터리에서 다음을 실행합니다:

2단계: mint-nft.js 파일 생성하기

scripts 디렉터리 안에 mint-nft.js 파일을 생성하고 다음 코드를 추가합니다:

3단계: 컨트랙트 ABI 가져오기

컨트랙트 ABI(Application Binary Interface)는 스마트 컨트랙트와 상호작용하기 위한 인터페이스입니다. Hardhat이 자동으로 ABI를 생성해 MyNFT.json 파일에 저장해줍니다. 이를 사용하려면 mint-nft.js 파일에 다음 코드를 추가해 내용을 파싱해야 합니다:

ABI를 확인하고 싶다면 콘솔에 출력해볼 수 있습니다:

mint-nft.js를 실행해 콘솔에 ABI가 출력되는 것을 확인하려면, 터미널로 이동해 다음을 실행합니다

4단계: IPFS로 NFT의 메타데이터 구성하기

Part I 튜토리얼을 기억하신다면, mintNFT 스마트 컨트랙트 함수는 NFT의 메타데이터를 설명하는 JSON 문서로 연결되는 tokenURI 매개변수를 받습니다— 이것이 바로 이름, 설명, 이미지 등 구성 가능한 속성을 가질 수 있게 해줌으로써 NFT에 생명을 불어넣는 요소입니다.

NFT가 진정으로 탈중앙화되도록 보장하기 위해, NFT 자산과 메타데이터를 저장하는 데 편리한 IPFS API이자 툴킷인 Pinata를 사용하겠습니다. Pinata 계정이 없다면 pinata.cloud에서 무료 계정을 만들고 이메일 인증 절차를 완료하세요.

계정을 생성한 후:

• 우측 상단의 "Pinata Upload" 버튼으로 이동합니다
• pinata에 이미지를 업로드합니다 - 이것이 NFT의 이미지 자산이 됩니다. 자산의 이름은 원하는 대로 지어도 됩니다
• 업로드 후, 페이지 상단에 업로드한 파일의 해시를 볼 수 있는 녹색 팝업이 나타납니다 —> 그 해시코드를 복사하세요. 업로드한 파일은 다음에서 확인할 수 있습니다: https://gateway.pinata.cloud/ipfs/<hash-code>

시각적으로 학습하는 것을 선호하시는 분들을 위해, 위 단계를 아래에 정리했습니다. 이제 Pinata에 문서를 하나 더 업로드해야 합니다. 하지만 그 전에 먼저 문서를 만들어야 합니다!

루트 디렉터리에 nft-metadata.json이라는 새 파일을 만들고 다음 json 코드를 추가합니다:

​json의 데이터는 자유롭게 변경해도 됩니다. attributes 섹션의 항목을 제거하거나 추가할 수 있습니다. 가장 중요한 것은 image 필드가 여러분의 IPFS 이미지 위치를 가리키도록 하는 것입니다— 그렇지 않으면 NFT에 (아주 귀여운!) 강아지 사진이 포함되고 맙니다.

json 파일 편집을 마쳤다면 저장한 뒤, 이미지 업로드 때와 동일한 단계를 따라 Pinata에 업로드합니다.

5단계: 컨트랙트 인스턴스 생성하기

이제 컨트랙트와 상호작용하려면 코드에서 컨트랙트의 인스턴스를 생성해야 합니다. 이를 위해서는 배포 과정에서 얻거나 컨트랙트를 배포할 때 사용한 주소로 Etherscan에서 조회할 수 있는 컨트랙트 주소가 필요합니다.

위 예시에서 컨트랙트 주소는 0x81c587EB0fE773404c42c1d2666b5f557C470eED입니다.

다음으로 web3의 contract method를 사용해 ABI와 주소로 컨트랙트를 생성하겠습니다. mint-nft.js 파일에 다음을 추가합니다:

6단계: .env 파일 업데이트하기

이제 Ethereum 체인에 트랜잭션을 생성하고 전송하려면, 여러분의 공개 ethereum 계정 주소를 사용해 계정의 nonce를 가져와야 합니다(아래에서 설명하겠습니다).

.env 파일에 공개 키를 추가합니다 —튜토리얼 파트 1을 완료했다면, .env 파일은 이제 다음과 같이 보일 것입니다:

7단계: 트랜잭션 생성하기

먼저 mintNFT(tokenData)이라는 함수를 정의하고 다음과 같이 트랜잭션을 생성합니다:

1. .env 파일에서 PRIVATE_KEY와 PUBLIC_KEY를 가져옵니다.
2. 다음으로 계정 nonce를 확인해야 합니다. nonce 규격은 주소에서 전송된 트랜잭션 수를 추적하는 데 사용됩니다— 이는 보안상의 이유와 재전송 공격을 방지하기 위해 필요합니다. 주소에서 전송된 트랜잭션 수를 가져오려면 getTransactionCount를 사용합니다.
3. 마지막으로 다음 정보를 사용해 트랜잭션을 구성합니다:
4. 'from': PUBLIC_KEY : 트랜잭션의 출처인 공개 주소
5. 'to': contractAddress : 트랜잭션을 통해 상호작용하고자 하는 컨트랙트
6. 'nonce': nonce : 우리 주소에서 전송된 트랜잭션 수를 나타내는 계정 nonce
7. 'gas': estimatedGas : 트랜잭션을 완료하는 데 필요한 예상 gas
8. 'maxPriorityFeePerGas': estimatedFee : gas당 입찰할 예상 수수료
9. 'data': nftContract.methods.mintNFT(PUBLIC_KEY, md).encodeABI() : 이 트랜잭션에서 수행하고자 하는 연산— 이 경우에는 NFT 민팅

이제 mint-nft.js 파일은 다음과 같이 보일 것입니다:

8단계: 트랜잭션 서명하기

트랜잭션을 생성했으니, 이제 전송하기 위해 서명해야 합니다. 여기서 개인 키를 사용합니다.

web3.eth.sendSignedTransaction은 트랜잭션 해시를 반환해주며, 이를 통해 트랜잭션이 채굴되었는지, 네트워크에서 드롭되지 않았는지 확인할 수 있습니다. 트랜잭션 서명 섹션에서 트랜잭션이 성공적으로 전송되었는지 확인할 수 있도록 오류 검사 코드를 추가한 것을 확인할 수 있습니다.‍

9단계: mintNFT 호출하고 node contract-interact.js 실행하기

Pinata에 업로드했던 metadata.json을 기억하시나요? Pinata에서 그 해시코드를 가져와 다음과 같이 mintNFT 호출에 전달합니다 https://gateway.pinata.cloud/ipfs/​

해시코드를 얻는 방법은 다음과 같습니다:

전체적으로 코드는 다음과 같이 보일 것입니다:

이제 node scripts/mint-nft.js를 실행해 NFT를 배포합니다. 몇 초 후, 터미널에 다음과 같은 응답이 표시됩니다:

다음으로 Alchemy mempool을 방문해 트랜잭션의 상태(대기 중인지, 채굴되었는지, 네트워크에서 드롭되었는지)를 확인하세요. 트랜잭션이 드롭되었다면, Sepolia Etherscan에서 트랜잭션 해시를 검색해보는 것도 도움이 됩니다.

이게 전부입니다! 이제 Ethereum 블록체인에서 NFT를 배포하고 민팅까지 완료했습니다 🎉

mint-nft.js을 사용하면 원하는 만큼(그리고 지갑이 허락하는 만큼) NFT를 민팅할 수 있습니다! 다만 NFT의 메타데이터를 설명하는 새로운 tokenURI을 반드시 전달해야 합니다— 그렇지 않으면 ID만 다른 동일한 NFT를 여러 개 만들게 됩니다.

아마 여러분의 NFT를 지갑에서 자랑하고 싶으실 텐데요 😉— Part III: How to View Your NFT in Your Wallet을 꼭 확인해보세요.