Block Chain Development

NFT Dapp 개발 연습 #1(개발환경 세팅 및 스마트 컨트랙트)

PON_Z 2022. 4. 7. 15:35

- NFT를 만들거나 가상화폐를 만드는 행위를 Minting이라고 한다.

 

- 이전 프로젝트에서는 Solidity로 스마트컨트 컨트랙트를 직접 작성하였는데, 이번에는 OpenZeppelin을 사용하여

  좀 더 쉽게 작성해 볼 것이다.

 

- 프론트 앤드는 React를 사용할 것이고 UI는 chakra를 사용할 것이다.

  Solidity와 React를 연결할 때에는 js의 Web3 라이브러리를 사용할 것이다.

  IDE는 vscode를 사용할 것이다.

 

- 우선 contracts 디렉토리를 하나 만들고 OepnZeppelin을 설치해 준다(node.js 필요).

  npm i @openzeppelin/contracts

 

- 그리고 remix를 설치해준다(링크).

  npm install -g @remix-project/remixd

  실행 : remixd -s . --remix-ide https://remix.ethereum.org

 

- 리믹스 설치 후 localhost가 잘 작동한다면, remix IDE에 들어가 connect to localhost를 해준다.

- 오타가 없다면 왼쪽에 초록색 체크 표시가 뜬다. 안 뜬다면 Compile버튼을 누르거나 Auto compile을 활성화 해주면      된다.

 

- 3번째 버튼에서는 Deploy를 할 수 있다. 작성한 컨트랙트를 선택하고 Deploy 했을 때 제대로 작동이 되었다.

- Deploy를 살펴보면 작성하지 않은 메소드도 보이는데 이것이 OpenZeppelin에서 제공해주는 것이다.

- mintSlimeToken을 2번 누르고 ownerOf로 NFT의 번호를 넣으면 account를 볼수있는데 1, 2 번 모두 나의 계정이

 주최자 임을 알 수 있다. 3번 mint하지는 않았기 때문에 number 3을 넣으면 에러가 난다. Account를 바꿔서 테스트 해

 볼 수 도 있다.

 

# code

// SPDX-License-Identifier: MIT // 라이센스

// 프라그마 버전
pragma solidity ^0.8.0;

// NFT Interface ERC721
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";

// contract
contract MintSlimeToken is ERC721Enumerable {
    // ERC721(name, symbol)
    constructor() ERC721("Slime", "SLM") {}

    // 앞의 uint256은 slimeTokenId, 뒤에 slimeTokenId는 slimeType 맵핑
    mapping(uint256 => uint256) public silmeTypes;

    function mintSlimeToken() public {
        // totalSupply()는 지금까지 발행한 NFT의 양을 나타냄
        uint256 slimeTokenId = totalSupply() + 1;

        // keccak256 알고리즘 사용 (블럭 생성시간, sender, tokenId) 로 랜덤 추출 (1 ~ 5)
        uint256 silmeType = uint256(keccak256(abi.encodePacked(block.timestamp, msg.sender, slimeTokenId))) % 5 + 1;

        silmeTypes[slimeTokenId] = silmeType;

        // _mint(주최자, NFT TOKEN ID), msg.sender면 이 NFT를 minting한 주최자라는 뜻
        _mint(msg.sender, slimeTokenId);
    }

}

 

ref) https://www.inflearn.com/course/%EB%94%94%EC%95%B1-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/dashboard

728x90