[DApp - react.js] Election 화면을 React.js로 변경하기 - 환경설정

DApp을 만들기 위해서 Solidity로 투표하기 App을 만들었습니다.

[DAPP] WATCH EVENT LISTENER

그런데 Front-end 화면 개발을 단순한 html과 jquery를 이용해서 간단하게 구현했었는데요.

이것을 React.js프레임워크를 이용해서 Refactoring 해보겠습니다.

물론 코드를 간단하게 하기 위해서 Bootstrap같은 디자인 적인 요소는 사용하지 않겠습니다.

 

webpack-cli 설치

$ npm install -g webpack-cli

webpack-cli 를 글로벌로 설치합니다.

 

React.js 환경 설정

babel 설치

$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

javascript ES6를 사용하기 위해서 babel을 설치합니다.

@babel/core 

@babel/preset-env 

@babel/preset-react 

babel-loader

 

webpack 설치

$ npm install --save-dev webpack webpack-cli webpack-dev-server

webpack을 설치합니다.

webpack

webpack-cli

webpack-dev-server

 

truffle-contract, web3 설치

$ npm install --save-dev truffle-contract web3

블록체인을 사용하기 위해서 truffle-contract과 web3를 설치합니다.

 

react, react-dom 설치

$ npm install --save-dev react react-dom

react를 사용하기 위해서 react와 react-dom을 설치합니다.

 

css-loader, style-loader, json-loader 설치

$ npm install --save-dev css-loader style-loader json-loader

lite-server 제거

$ npm uninstall --save-dev lite-server

solidity 프로젝트를 생성할때 자동으로 설치된 list-server를 제거합니다.

 

 

모듈을 설치하는 도중 오류가 발생하면 아래 포스트를 참조하세요.

ERROR: EACCES: PERMISSION DENIED, MKDIR 오류해결

 

 

package.json script 수정

"scripts": {
    "start": "webpack-dev-server --open",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
},

webpack start와 build 스크립트를 추가합니다.

start는 webpack-dev-server를 구동하고

dev는 development로 build

build는 production 모드로 build 하는 스크립트입니다.

 

package.json 파일의 최종 상태는 아래와 같습니다.

{
  "name": "pet-shop",
  "version": "1.0.0",
  "description": "",
  "main": "truffle.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "start": "webpack-dev-server --open",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.0",
    "@babel/preset-env": "^7.5.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.0.0",
    "json-loader": "^0.5.7",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "style-loader": "^0.23.1",
    "truffle-contract": "^4.0.23",
    "web3": "^1.0.0-beta.55",
    "webpack": "^4.35.2",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  }
}

 

webpack.config.js 생성

$ touch webpack.config.js

const path = require('path')
module.exports = {
  entry: path.join(__dirname, 'src/js', 'App.js'),
  devServer: {
    contentBase: path.join(__dirname, 'src'),
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader','css-loader'],
        include: [/src/, /node_modules/]
      }, {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react', 'stage-2']
        }
      }, {
        test: /\.json$/,
        loader: 'json-loader',
        include: '/build/contracts/'
      }
    ]
  }
}

 

.babelrc 파일 생성

touch .babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}