React 초기 개발환경 설정 및 실행 방법 - 순수 설정 방법

2020. 7. 1. 10:41

728x90

참고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

'reactJS' 카테고리의 다른 글

React 초기 개발환경 설정 및 실행 방법 - create-react-app 사용방법 (0)	2020.07.01
MAC에서 [RN] React-Native 설치하기/ react-native-cli / create-react-native-app (0)	2020.06.30

프로그래머로 살아가기