참고URL
https://codinghub.tistory.com/39
Babel
ECMAScript6를 지원하지 않는 환경에서 ECMAScript6 Syntax를 사용할 수 있게 해줍니다.
Webpack
모듈 번들러입니다.
Browserify 처럼 브라우저 위에서 import(require)을 할 수 있게 해주고 자바스크립트 파일들을 하나로 묶어 줍니다.
webpack-dev-server
webpack에서 지원하는 간단한 개발서버로써 별도의 서버를 구축하지 않아도 웹서버를 열 수 있으며 hot-loader 를 통하여 코드가 수정될때마다 자동으로 리로드되게 할 수 있습니다.
프로젝트를 위한 폴더 생성 및 npm 초기화 - 폴더명 myFristApp
$ mkdir myFirstApp
$ cd myFirstApp
$ npm init
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (reactjs)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/jaehonghan/dev/workspace_nodejs/reactjs/package.json:
{
"name": "reactjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
package.json에 webpack-dev-server 스크립트 추가
package.json에 "dev-server":"webpack-dev-server" 추가해야 합니다.
추후 개발 서버를 실행하기 위해서 필요합니다.
$ vi package.json
{
"name": "reactjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev-server":"webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0"
},
"dependencies": {
"bootstrap": "^4.5.0",
"react-bootstrap": "^1.0.1"
}
}
리엑트 설치
$ npm install --save-dev react react-dom
$ npm install --save-dev react react-dom
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN reactjs@1.0.0 No description
npm WARN reactjs@1.0.0 No repository field.
+ react-dom@16.13.1
+ react@16.13.1
added 8 packages from 3 contributors and audited 8 packages in 0.695s
found 0 vulnerabilities
부트스트랩 설치
$ npm install --save bootstrap react-bootstrap
$ npm install --save bootstrap react-bootstrap
npm WARN bootstrap@4.5.0 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.5.0 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.
npm WARN reactjs@1.0.0 No description
npm WARN reactjs@1.0.0 No repository field.
+ react-bootstrap@1.0.1
+ bootstrap@4.5.0
added 22 packages from 43 contributors and audited 30 packages in 2.929s
2 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
css / sass 설치
$ npm install --save-dev sass-loader css-loader style-loader node-sass
$ npm install --save-dev sass-loader css-loader style-loader node-sass
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
> node-sass@4.14.1 install /Users/jaehonghan/dev/workspace_nodejs/reactjs/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/darwin-x64-83_binding.node
Download complete░░⸩ ⠋ :
Binary saved to /Users/jaehonghan/dev/workspace_nodejs/reactjs/node_modules/node-sass/vendor/darwin-x64-83/binding.node
Caching binary to /Users/jaehonghan/.npm/node-sass/4.14.1/darwin-x64-83_binding.node
> node-sass@4.14.1 postinstall /Users/jaehonghan/dev/workspace_nodejs/reactjs/node_modules/node-sass
> node scripts/build.js
Binary found at /Users/jaehonghan/dev/workspace_nodejs/reactjs/node_modules/node-sass/vendor/darwin-x64-83/binding.node
Testing binary
Binary is fine
npm WARN bootstrap@4.5.0 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.5.0 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.2 requires a peer of webpack@^4.36.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN css-loader@3.6.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN style-loader@1.2.1 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN reactjs@1.0.0 No description
npm WARN reactjs@1.0.0 No repository field.
+ sass-loader@8.0.2
+ css-loader@3.6.0
+ node-sass@4.14.1
+ style-loader@1.2.1
added 224 packages from 177 contributors and audited 254 packages in 9.398s
11 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Babel 설치
$ npm install --save-dev babel-core babel-loader babel-cli babel-preset-react babel-preset-es2015 babel-preset-stage-0 babel-polyfill babel-preset-env file-loader url-loader babel-preset-react-hmre
$ npm install --save-dev babel-core babel-loader babel-cli babel-preset-react babel-preset-es2015 babel-preset-stage-0 babel-polyfill babel-preset-env file-loader url-loader babel-preset-react-hmre
npm WARN deprecated babel-preset-es2015@6.24.1: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read https://babeljs.io/env to update!
npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
> fsevents@1.2.13 install /Users/jaehonghan/dev/workspace_nodejs/reactjs/node_modules/fsevents
> node install.js
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack at ChildProcess.emit (events.js:315:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
gyp ERR! System Darwin 19.5.0
gyp ERR! command "/usr/local/Cellar/node/14.4.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/jaehonghan/dev/workspace_nodejs/reactjs/node_modules/fsevents
gyp ERR! node -v v14.4.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
> core-js@2.6.11 postinstall /Users/jaehonghan/dev/workspace_nodejs/reactjs/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
npm WARN bootstrap@4.5.0 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.5.0 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.
npm WARN css-loader@3.6.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.2 requires a peer of webpack@^4.36.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN style-loader@1.2.1 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-loader@8.1.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-loader@8.1.0 requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
npm WARN file-loader@6.0.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN url-loader@4.1.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN reactjs@1.0.0 No description
npm WARN reactjs@1.0.0 No repository field.
+ babel-loader@8.1.0
+ babel-preset-env@1.7.0
+ babel-polyfill@6.26.0
+ babel-cli@6.26.0
+ babel-preset-react@6.24.1
+ babel-core@6.26.3
+ babel-preset-stage-0@6.24.1
+ file-loader@6.0.0
+ url-loader@4.1.0
+ babel-preset-react-hmre@1.1.1
+ babel-preset-es2015@6.24.1
added 314 packages from 130 contributors and audited 569 packages in 38.757s
13 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
.babelrc 파일 생성
$ vi .babelrc
{
"presets":["env","react","es2015", "stage-0"],
"env":{
"development":{
"presets":["react-hmre"]
}
}
}
WebPack 설치
$ npm install --save-dev react-hot-loader webpack webpack-dev-server webpack-dev-middleware webpack-hot-middleware
$ npm install --save-dev react-hot-loader webpack webpack-dev-server webpack-dev-middleware webpack-hot-middleware
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"14.4.0","npm":"6.14.4"})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN babel-loader@8.1.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.5.0 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.5.0 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.
npm WARN reactjs@1.0.0 No description
npm WARN reactjs@1.0.0 No repository field.
+ webpack-dev-middleware@3.7.2
+ webpack-hot-middleware@2.25.0
+ react-hot-loader@4.12.21
+ webpack-dev-server@3.11.0
+ webpack@4.43.0
added 463 packages from 312 contributors and audited 1033 packages in 10.309s
31 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
webpack 설정 - webpack.config.js
프로젝트 폴더에 webpack 설정파일인 webpack.config.js 을 생성하고 아래의 내용을 입력합니다.
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'webpack-hot-middleware/client',
'./src/index.js'
],
output: {
path: __dirname + '/public/',
filename: 'bundle.js'
},
devServer: {
hot: true,
inline: true,
port: 4000,
contentBase: __dirname + '/public/',
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot-loader', 'babel-loader'],
include: path.join(__dirname, 'src')
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader' // use ! to chain loaders
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192' // inline base64 URLs for <=8k images, direct URLs for the rest
}
]
},
plugins: [ new webpack.HotModuleReplacementPlugin() ]
}
react app 만들기
1. 처음에 생성한 myFirstApp 에 public, src 폴더를 생성합니다.
webpack.config.js에서 개발 서버가 바라볼 기본 폴더는 public가 됩니다.
$ cd myFirstApp
$ mkdir public
$ mkdir src
2. public 폴더에 index.html 파일을 아래와 같이 생성합니다.
$ cd public/index.html
-- index.html에 간략한 내용 입력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React App with Babel + webpack</title>
</head>
<body>
<div id="contents"></div>
<script src="bundle.js"></script>
</body>
</html>
3. src 폴더에 components 폴더를 생성합니다.
src 폴더의 하위에 components 폴더를 만들고 src/components 에 Contents.react.js 파일을 생성하고 아래의 내용을 입력합니다.
$ cd ../src
$ mkdir components
$ vi Contents.react.js
-- Contents.react.js 파일의 내용
import React from 'react';
class Contents extends React.Component {
render() {
return ( <h1>React + Webpack + Babel First Apps</h1> );
}
}
4. 개발 서버를 실행합니다.
브라우저에서 http://localhost:4000에 접속하시면 결과를 확인할 수 있습니다.
$ cd myFirstApp
$ npm run dev-server
