[클레이튼] 개발 환경

목표 

klaytn 개발 환경을 구성 합니다. 

환경 설정

1. npm 버전 5 이상 

2. node.js 버전 8 이상.

3. truffle framework 5.1.23 설치 

    $sudo npm install -g truffle@5.1.23

    $truffle version
      Truffle v5.1.23 (core: 5.1.23)
      Node v16.15.0

4. visual studio code 설치

    - solidity extention 설치

truffle 이란?

트러플(Truffle)은 이더리움 기반 디앱을 쉽게 개발할 수 있도록 도와주는 블록체인 프레임워크이다. 스마트 컨트랙트(smart contract) 컴파일, 배포, 관리, 테스트까지 빠르고 쉽게 할 수 있다.

 

klaytn 역시 truffle framework 를 사용하여 개발 가능 합니다.

 

truffle boilerplate 

truffle에서 제공하는 디앱 개바을 위한 표준 template 입니다. 

1. 단점

    - ethereum 기반이라서 kalytn에서 사용하기 위해서 ethereum 관련된것을 모두 삭제 해야 합니다. 

 

truffle boilerplate 구조 설명

주소 :  https://github.com/kkagill/addition-game-starter.git

1. [폴더] contract 

    - solidity contract 파일 보관

    1) [파일] AddtionalGame.sol

        - solitiy contrat code

    2) [파일] Migrations.sol

        - smart contract 배포할 때 migrations 폴더안에 있는 script를 실행하게 합니다.

        - 배포할 때 필요한 중요 파일

2. [폴더] migrations

    - 배포와 관련된 정보를 저장 

    1) [파일] 1_initial_migration.js

        - 배포과정 로직이 구현되어 있습니다. 

        - Migrations.sol를 불러와서 kalytn node에 배포 합니다. 

3. [폴더] src

    - 비앱의 frontend를 담당하는 소스가 존재 합니다. 

    1) [파일] index.html

        - 비앱의 화면을 구성

    2) [파일] index.js

        - 기능을 실행하기 위한 enigne과 같은 파일

4. [파일] package-lock.json

5. [파일] package.jons

    - npm을 통해서 필요한 dependency 를 추가하는 곳 

    - caver-js 가 존재함.(klaytn block chain과 소통하기 위한 library)

6. [파일] truffle.js

    - 환경 설정을  담당.

    - 어느 network에 smart contract를 배포할지 정의 

7. [파일] webpack.config.js

    - 파일 최적화 

    - code에 변화가 있을때 마다 감지해서 brower에 변경 사항을 바로 반영

 

troubleshooting

1. webpack 문제 해결. 

    - webpack 관련 부분을 아에 새로 생성 해야함.

    1) 설치

        $npm i -D webpack webpack-cli

        $npm i -D html-webpack-plugin

    2) package.json 설정

{
  "name": "addtion_game",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  }
}

    3) webpack.config.js 설정

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        path: path.resolve('./dist'),
        filename: '[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

    4) webpack build

        $npm run build 

 

 

참조 사이트

https://velog.io/@repedore/truffle-Klaytn-NFT