🧾 스마트 컨트랙트 없이 NFT 발행하기: React + Node.js + MintAPI 연동 실습

🧾 스마트 컨트랙트 없이 NFT 발행하기: React + Node.js + MintAPI 연동 실습

NFT를 만들고 싶은데, 스마트 컨트랙트 배포는 어렵고 복잡하다는 생각, 해보셨나요?
이제는 스마트 컨트랙트를 직접 작성하지 않고도 API만으로 NFT를 발행할 수 있습니다.
이번 글에서는 MintAPI를 활용해 React + Node.js로 NFT를 쉽게 발행하는 방법을 소개합니다.

---

✅ 왜 스마트 컨트랙트 없이도 NFT 발행이 가능한가?

기존에는 NFT를 발행하려면 Solidity로 직접 컨트랙트를 작성하고, 배포하고, mint 함수를 호출해야 했습니다.

하지만 최근에는 MintAPI, Crossmint, thirdweb 등에서 이미 배포된 NFT 컨트랙트를 활용해 REST API만으로 mint할 수 있게 해줍니다.
즉, 지갑 주소만 있으면 NFT를 발행할 수 있는 Web2 친화적인 방식이 가능해졌습니다.

---

✅ MintAPI란?

MintAPI는 Polygon, Ethereum 기반의 NFT를 간단한 API 요청만으로 발행할 수 있게 해주는 서비스입니다.

• ✅ RESTful 방식 (POST 요청으로 NFT 발행)
• ✅ 스마트 컨트랙트 배포 불필요
• ✅ 이미지 URL, 이름, 설명만으로 민팅 가능
• ✅ Polygon, Ethereum 등 멀티체인 지원

---

✅ 시스템 구성

[React 프론트엔드] → [Node.js 백엔드] → [MintAPI 호출] → NFT 발행

---

✅ 백엔드: Node.js + Express API

🔧 의존성 설치

npm install express axios cors body-parser

🧩 백엔드 코드 (server.js)

 

const express = require("express");
const axios = require("axios");
const cors = require("cors");
const bodyParser = require("body-parser");

const app = express();
const PORT = 4000;
const MINT_API_KEY = "YOUR_MINTAPI_KEY";

app.use(cors());
app.use(bodyParser.json());

app.post("/mint", async (req, res) => {
  const { walletAddress, name, description, imageUrl } = req.body;

  try {
    const response = await axios.post(
      "https://mintapi.com/api/mint",
      {
        chain: "polygon",
        recipient: walletAddress,
        metadata: { name, description, image: imageUrl },
      },
      {
        headers: {
          Authorization: `Bearer ${MINT_API_KEY}`,
          "Content-Type": "application/json",
        },
      }
    );

    res.json({ success: true, txHash: response.data.tx_hash });
  } catch (err) {
    res.status(500).json({ success: false, error: err.message });
  }
});

app.listen(PORT, () => {
  console.log(`✅ Mint API server running on port ${PORT}`);
});

 

---

✅ 프론트엔드: React NFT Mint 폼

🧱 컴포넌트 (NFTMintForm.tsx)

import React, { useState } from "react";

const NFTMintForm = () => {
  const [walletAddress, setWalletAddress] = useState("");
  const [name, setName] = useState("My NFT");
  const [description, setDescription] = useState("MintAPI NFT 예시입니다.");
  const [imageUrl, setImageUrl] = useState("https://yourdomain.com/image.png");
  const [status, setStatus] = useState("");

  const handleMint = async () => {
    setStatus("발행 중...");
    try {
      const res = await fetch("http://localhost:4000/mint", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ walletAddress, name, description, imageUrl }),
      });

      const data = await res.json();
      if (data.success) {
        setStatus(`✅ 민팅 성공! 트랜잭션 해시: ${data.txHash}`);
      } else {
        setStatus(`❌ 민팅 실패: ${data.error}`);
      }
    } catch (err) {
      setStatus(`❌ 오류: ${err.message}`);
    }
  };

  return (
    <div>
      <h2>NFT 민팅 폼</h2>
      <input value={walletAddress} onChange={(e) => setWalletAddress(e.target.value)} placeholder="지갑 주소" />
      <input value={name} onChange={(e) => setName(e.target.value)} placeholder="NFT 이름" />
      <input value={description} onChange={(e) => setDescription(e.target.value)} placeholder="NFT 설명" />
      <input value={imageUrl} onChange={(e) => setImageUrl(e.target.value)} placeholder="이미지 URL" />
      <button onClick={handleMint}>NFT 발행하기</button>
      <p>{status}</p>
    </div>
  );
};

export default NFTMintForm;

---

✅ 실행 방법 요약

1. MintAPI 가입 후 API 키 발급
2. Node 서버 실행: node server.js
3. React 앱 실행: npm start
4. 폼 입력 → NFT 자동 발행 → PolygonScan으로 확인

---

✅ 마무리: 누구나 쉽게 만드는 NFT

MintAPI 같은 플랫폼 덕분에, 이제 NFT 발행은 더 이상 스마트 컨트랙트를 알아야만 가능한 것이 아닙니다.
Web2 환경에서도 REST API만으로 NFT를 발행하고, 사용자 지갑으로 전송할 수 있습니다.

🔥 지금 바로, 지갑 주소 하나로 NFT를 만들어보세요!