The Complete NFT Web Development Course - Zero To Expert - 섹션 9: Set Up NFT Project Configuration & Architecture

섹션 8의 내용은 nodejs, npm, truffle, ganache, metamask 를 설치하는 과정이어서 생략했다.

85. What is JSON (Examples)

https://www.w3schools.com/whatis/whatis_json.asp

 

86. NFT Project Dependency Overview

package.json 파일의 dependencies를 간단하게 살펴보았다.

 

dependencies 의 내용은 우리가 프로젝트를 실행하기 위해 설치해야하는 configuration을 담았다. 아직은 isntall 하지 않았지만, npm install을 실행하면 package.json 파일에 있는 dependencies를 설치할 것이다.

  "dependencies": {
    "@metamask/detect-provider": "^1.2.0",
    // metamask dependency
    "@openzeppelin/contracts": "^4.3.1",
    // openzepplin : one of the most popular standards for secure blockchain application
    "babel-polyfill": "6.26.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-stage-2": "6.24.1",
    "babel-preset-stage-3": "6.24.1",
    "babel-register": "6.26.0",
    // babel : to run more modern versions of Javascript
    "bootstrap": "4.3.1",
    // focus on UI, design
    "chai": "4.2.0",
    "chai-as-promised": "7.1.1",
    "chai-bignumber": "3.0.0",
    // chai : testing
    "mdb-react-ui-kit": "^1.3.0",
    "mdb-ui-kit": "^3.9.0",
    // React Bootstrap with Material Design
    "react": "16.8.4",
    "react-bootstrap": "1.0.0-beta.5",
    "react-dom": "16.8.4",
    "react-scripts": "2.1.3",
    // react
    "truffle": "5.0.5",
    "web3": "1.0.0-beta.55"
    // Ethereum Javascript API
  },

https://web3js.readthedocs.io/en/v1.7.0/

web3.js - Ethereum JavaScript API — web3.js 1.0.0 documentation

 

87. Package.json vs Package-lock-json

package-lock.json 파일은 version을 지정하는 파일이다. 이전에 한 번 찾아볼 때 잘 정리해놓은 블로그가 있었어서 첨부해놓는다.

https://junwoo45.github.io/2019-10-02-package-lock/

 

88. The Index.js FIle

index.js essentially is what allows us to use react in order to build our application.

 

89. The Index.html File

index.html 은 말 그대로 html 파일이다. 여기서 주목할 점은 body 안에 div 에 id='root' 태그이다.

index.js에는

ReactDOM.render(<App />, document.getElementById('root'));

위와 같은 코드가 있는데, index.html에서 'root'를 id로 가지고 있는 element를 가져와서 DOM으로 만든다는 뜻이다..!!

 

90. Adding Projects Folders & Architecture Setup

프로젝트의 구조를 살펴보면 크게 public 폴더와 src 폴더로 나뉘는데, public 폴더는 html 파일을 포함해 front 에 보여지는 publishing되는 변하지 않는 파일들이 들어있는 곳이고, src 폴더는 smart contract와 같은 로직(?) 이 들어가는 폴더인 것 같다. (아닐수도 내 영어가 짧을수도)

 

일단 src 폴더 안에 contracts 파일과 components파일을 추가하였고, public, src 폴더 외에 migrations 라는 폴더를 새로 추가하였다. migration에 대해서 얘기를 해줬는데 잘 이해가 가지 않아서 추가로 찾아보았다.

 

• 마이그레이션(migration)이란 한 종류의 데이터베이스에서 다른 종류의 데이터베이스로 데이터를 옮기는 것을 의미한다. DB 마이그레이션, DB 이전, DB 이관, DB 이행이라고도 불린다.

 

블록체인 상의 smart contract를 바꾸는 것은 불가능하다. 그래서 smart contracts를 변경하고자 한다면, 새로운 address에 migration을 해야 한다. 우리는 실제로 블록체인에 올라간 smart contract를 바꾸지 않는다. 그저 새로운 address로 옮기는 것이다.(?)

 

91. Installing The NFT Project Dependancies

npm i

package.json 에 적혀있는 모듈들을 다운받기 위한 명령어이다. 실행이 완료되면, node_modules라는 폴더가 생성되고 그 안에 모듈들이 위치한다.

 

92. Initialize Truffle Configurations (Truffle Init)

truffle init

truffle을 시작하기 위한 명령어이다. 그러면 truffle configuration 에 필요한 코드들을 자동으로 생성해준다.

 

완료되면 migrations 폴더 안에 1_initial_migration.js 파일이 생성되어 있을 것이다. 코드를 살펴보면

const Migrations = artifacts.require("Migrations");

module.exports = function (deployer) {
  deployer.deploy(Migrations);
};

여기서 말하는 Migrations는 contracts 폴더 안에 위치한 Migrations.sol 파일이다. 우리가 위에서 생성한 contracts 폴더가 아니라 truffle이 자동으로 생성해준 폴더이다. 해당 파일을 우리가 생성한 src/contracts 안으로 옮기고 폴더를 삭제해버리자.

 

또한 truffle-config.js 파일도 생성되어 있을 텐데, 여기서 우리가 디테일한 부분들을 채워넣으면 된다. solidity 버전이나, 사용하는 네트워크나 그런 정보들...

 

93. Truffle Configurations & Customizations

truffle-config.js 파일을 customize 해보자.

module.exports = {
  networks: {
    // Useful for testing. The `development` name is special - truffle uses it by default
    // if it's defined here and no other network is specified at the command line.
    // You should run a client (like ganache-cli, geth or parity) in a separate terminal
    // tab if you use this network and you must also set the `host`, `port` and `network_id`
    // options below to some value.
    //
    development: {
     host: "127.0.0.1",     // Localhost (default: none)
     port: 7545,            // Standard Ethereum port (default: none)
     network_id: "*",       // Any network (default: none)
    },
  },

  contracts_directory: './src/contracts', // 기존에 truffle이 default로 생성한 contracts 폴더를 사용하지 않으므로 위치를 알려준다.
  contracts_build_directory: './src/abis', //

  // Configure your compilers
  compilers: {
    solc: {
      version: "^0.8.0",    // Fetch exact version from solc-bin (default: truffle's version)
      optimizer: {
        enabled: 'true',
        runs: 200
      }
    }
  },

};

contracts_build_directory

https://trufflesuite.com/docs/truffle/reference/configuration.html#contracts_build_directory

Optimizer Parameter Runs
The number of runs ( --optimize-runs ) specifies roughly how often each opcode of the deployed code will be executed across the life-time of the contract. This means it is a trade-off parameter between code size (deploy cost) and code execution cost (cost after deployment).

읽어도 잘 모르겠지만,, 200이 default 값이라고 한다.

 

• solidity optimizer

https://docs.soliditylang.org/en/v0.8.11/internals/optimizer.html

 

94. The Migrations Truffle Smart Contract Overview

Migrations.sol

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;

contract Migrations {
  address public owner = msg.sender;
  uint public last_completed_migration;

  modifier restricted() {
    require(
      msg.sender == owner,
      "This function is restricted to the contract's owner"
    );
    _; //continue running function
  }

  function setCompleted(uint completed) public restricted {
    last_completed_migration = completed;
  }
}

require() 안의 첫 번째 인자는 우리가 check 할 조건이고, 해당 조건이 true면 넘어가고 false면 두번째 인자로 전달된 에러 메시지가 리턴된다.

• modifier
  https://caileb.tistory.com/141

 

95. Write The Upgrade Smart Contract Migration Function

  function upgrade(address new_address) public restricted {
    Migrations upgraded = Migrations(new_address);
    upgraded.setCompleted(last_completed_migration);
  }

새로운 주소를 업데이트 하기위한 function을 추가했다. 완전히 프로세스가 이해가 되진 않는다.

 

function 안에서 contract인 Migration을 호출해서 새로운 address를 주고, 그렇게 만든 새로운 Migration에 last_completed_migration을 set해서 상태를 keep track 할 수 있도록 한다. 일단 막연하게 이해가 되긴 하는데, 왜 필요한지 아직 이해가 되지 않는 중이다.