NFT 마켓플레이스 개발(OpenSea 클론 코딩) - 1

JangJooCool·2022년 2월 20일

NFT 마켓플레이스 개발

목록 보기

1/3

개요

첫번째 프로젝트로 NFT 마켓플레이스 오픈씨 클론 코딩을 하게 되었다.
처음에는 서버와 클라이언트를 구분하여 개발하고 DB도 연결하여 진행하려 했다.
본인이 서버 개발을 담당하여 개발을 하려 했는데...
서버 요청에 문제가 있어서 중간에 개발 방향을 수정하여 마무리를 하였다.
(서버에서 발생한 문제점은 추후 다시 확인해봐야겠다.)

무튼..이미 다른 팀원 분께서 프론트를 많이 작성하셔서 본의 아니게 버스를 타게 될 상황이었지만,
klaytn 기반의 NFT(KIP-17)도 추가하는 것으로 아이디어를 내어 그나마 내 몫을 할 수 있게 되었다.

이번 프로젝트로 구현한 기능은 크게 4가지로 아래와 같다.

지갑 연결

새로운 NFT 생성

NFT 목록 조회

다른 지갑으로 NFT 전송

그럼 기능별로 하나씩 어떻게 구현했는지 알아보자!

gitHub 개발 소스 링크

1. 지갑 연결 - 로그인

OpenSea 링크

우리가 개발한 NFT 마켓플레이스의 메인화면! 위 사진에서 보듯이 최대한 실제 오픈씨 사이트와 비슷하게 만든걸 알 수 있다.

1-1. 메타마스크 지갑연결

_app.js

useEffect(() => {
    if (typeof window.ethereum !== "undefined") {
      try {
        const web = new Web3(window.ethereum);
        setWeb3(web);
      } catch (err) {
        console.log(err);
      }
    }
  }, []);
  
const connectWallet = async () => {
    accounts = await window.ethereum.request({
      method: "eth_requestAccounts",
    });
    setAccount(accounts[0]);
    setWalletType("eth");
};

우선 메타마스크 지갑연결 코드를 보면 지갑 연결을 위해 web3 모듈을 사용하였고
메인 화면에 처음 접근할 때 useEffect()를 사용해 Web3 객체를 연결하도록 하였다.

메인화면 오른쪽 상단 메타마스크 아이콘 클릭시 connectWallet 함수가 실행되어
이더리움 지갑주소를 요청하고, 받아온 지갑주소와 연결된 지갑타입을 useState를 이용해 상태를 관리할 수 있도록 구현하였다.
지갑 형태는 코드상 카이카스와의 구분을 위하여 eth/klay 로 설정하였다.

메타마스크 지갑 연결에 대한 자세한 사항은 메타마스크 공식문서 를 통해 확인!

1-2. 카이카스 지갑연결

_app.js

useEffect(() => {
    if (typeof klaytn !== "undefined") {
      try {
        const caver = new Caver(klaytn);
        setCaver(caver);
      } catch (err) {
        console.log(err);
      }
    }
  }, []);
  
const connectKaikas = async () => {
	accounts = await klaytn.enable();
    setAccount(accounts[0]);
    setWalletType("klay");
};