일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- TensorFlow
- 티스토리챌린지
- PYTHON
- 네트워크
- 개발
- node
- unittest
- vsCode
- androidstudio
- centos
- 오블완
- MachineLearning
- ReactNative
- build
- Android
- 맥
- jest
- 리눅스
- 센토스
- localserver
- VirtualBox
- Chrome
- xcode
- react
- qunit
- IOS
- webpack
- MAC
- linux
- Today
- Total
로메오의 블로그
[DApp - react.js] Election 화면을 React.js로 변경하기 - 환경설정 본문
[DApp - react.js] Election 화면을 React.js로 변경하기 - 환경설정
romeoh 2019. 7. 8. 04:17DApp을 만들기 위해서 Solidity로 투표하기 App을 만들었습니다.
그런데 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"]
}
'Backend > Python & Blockchain' 카테고리의 다른 글
[DApp - react.js] Election 화면을 React.js로 변경 - back-end 연결 (0) | 2019.07.08 |
---|---|
[DApp - react.js] Election 화면을 React.js로 변경 - Component 나누기 (0) | 2019.07.08 |
[DApp] Watch Event Listener (2) | 2019.07.08 |
[DApp] 투표하기 화면 구현 (1) | 2019.07.07 |
[DApp] 중복 투표 방지 테스트 코드 작성 (0) | 2019.07.07 |