티스토리 뷰

React

React, webpack 및 Babel 7을 처음부터 설정하는 방법 (2019)

Aairon 2019. 5. 24. 01:45

웹팩에 대해 이해하기 위해 CRA를 사용하지 않고 설정을 해보았습니다

https://www.valentinog.com/blog/babel 을 의역한 글입니다. 오류가 있으면 알려주세요


React, webpack 및 Babel 설정 방법 : 목차

다음 내용을 다룹니다

  • webpack 설치 및 구성 방법
  • Babel 설치 및 구성 방법
  • React 설치 방법
  • 두 개의 React 구성 요소를 만드는 법 ( Container / Presentational )
  • 번들을 HTML 페이지에 포함시키는 방법
  • webpack dev 서버를 설치하고 구성하는 방법
React, webpack 및 babel 설정 방법 : webpack 설정
npm 설정 초기화
1
npm init -y
cs

webpack / webpack-cli 설치
1
2
3
4
npm i webpack --save-dev
//npm i -D webpack 으로 단축해도 됩니다
 
npm i webpack-cli --save-dev
cs

packge.json 안에 webpack 명령 추가

1
2
3
 "scripts": {
    "build": "webpack --mode production"
  }
cs


React, webpack 및 Babel 설정 방법 : Babel 설정

React 컴포너트는 대부분 ES6문법으로 작성됩니다. ES6는 많은 기능이 향상되었지만 오래된 브라우저에서는 이해 할 수없습니다. 예를 들면 class 키워드를 사용할 수 없습니다. state를 가지고 있는 컴포넌트는 클래스 문법을 사용합니다. ( hooks가 나오면서 지양하는 추세 인거 같습니다 ) 따라서 ES6 문법을 구형 브라우저에서도 작동을 시키려면 변환이 필요합니다


그리고 그 변환을 transpiling 이라고 합니다. Webpack만으로는 ES6 자바스크립트 문법을 ES5로 변환하지 못합니다. 이를 가능하게 하기 위해 loader를 사용합니다. loader에 무언가를 입력하면 다른 무언가로 바꾸어 줍니다.


babel-loader는 ES6 문법을 브라우저가 이해할 수 있도록 해주는 웹팩 로더입니다. 물론 babel-loader는 babel을 사용합니다. 

1. babel preset env는 ES6문법을 ES5문법으로 컴파일 해줍니다. ( babel-preset-es2015는 현재 사용하지 않습니다 )

2. babel preset reacct는 JSX 등을 ES5로 컴파일 해줍니다


dependencies에 설치 해줍니다

1
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
cs

 .babelrc  파일을 생성합니다. Babel설정을 해주는 파일입니다

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

cs

이제 최소한의 웹팩 설정을 할 준비가 되었습니다.

webpack.config.js 파일을 생성합니다

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
cs

설정은 간단합니다.

js 또는 jsx 확장자를 가진 모든 파일에 대해 webpack은 es6를 es5로 변환하기 위해 babel-loader를 통해 코드를 파이프 합니다.


React, webpack 및 Babel 설정 방법 : React Components 작성

 *해당 부분은 원문에 비해 간략화 되어있습니다


React를 사용하기 위해 react와 react-dom을 npm으로 설치합니다

1
npm i react react-dom
cs

그 후에 src폴더 안에 component 폴더를 생성합니다

1
mkdir -p src/component
cs

해당 폴더안에 App.js 파일을 생성한 후 기본적인 컴포넌트 코딩을 합니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//src/component/App.js
import React from 'react';
 
class App extends React.Component {
    constructor(){
        super() 
    }
 
    clickHandler(){
        console.log('click')
    } 
    
    render () {
        return (
            <div>
                react webpack
                <button onClick={this.clickHandler}>button</button>
            </div>
        )
    }
}
export default App;
cs

src/index.js 파일을 생성합니다

1
2
3
4
5
//src/index.js
import App from "./component/App";
import React from "react";
import ReactDOM from "react-dom"; 
ReactDOM.render(<App />, document.querySelector("#app"));
cs


React, webpack 및 Babel 설정 방법 : HTML webpack 플러그인

리액트를 나타내려면 HTML페이지를 만들어야 합니다. 스크립트 태그는 번들된 파일 안에 들어갑니다

webpack에서 HTML을 처리하려면 2가지 요소가 필요합니다 : html-webpack-plugin, html-loader

1
npm i html-webpack-plugin html-loader --save-dev
cs

webpack.config.js를 수정합니다

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
const HtmlWebPackPlugin = require("html-webpack-plugin");
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};
cs

.src/index.html 파일을 생성합니다 ( 선호하는 css 라이브러리를 자유롭게 사용하세요)

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang = "en" > 
<head >
    <meta charset = "utf-8" > 
    <link rel = "stylesheet" 
    href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" >   
    <title > React, Webpack 및 Babel 설정 방법 </title>
</head>
<body>
    <div id="app"> 
    </div>
</body>
</html>
cs

이제 빌드를 실행하면 번들된 파일이 생성됩니다

1
npm run build
cs

빌드가 완료되면 ./dist 폴더가 생성되고 그 안에 HTML 파일이 생성됩니다.

번들된 js 파일은 ./dist 폴더 안에 main.js의 이름으로 생성되며 자동으로 html에 삽입이 됩니다.

./dist 폴더안의 index.html을 실행시키면 react로 코딩된 페이지를 볼 수 있습니다.

하지만 파일을 변경할 때 마다 빌드를 할 수 없으니 webpack dev 서버도 설치합니다


React, webpack 및 Babel 설정 방법 : webpack dev 서버

webpack dev 서버는 파일이 수정 후 저장되면 자동으로 브라우저 창을 새로고침 해주는 패키지 입니다

1
npm i webpack-dev-server --save-dev
cs

package.json 파일에 stripts를 추가합니다

1
2
3
4
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }
cs

이제 npm start 를 통해 webpack dev 서버를 실행하여 개발할 수 있습니다.


React, webpack 및 Babel 설정 방법 : Class 문법을 사용 할 때 Arrow Function 사용하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
 
class App extends React.Component {
    constructor(){
        super() 
    }
    //arrow function
    clickHandler=()=> {
        console.log('click')
    } 
    
    render () {
        return (
            <div>
                react webpack
                <button onClick={this.clickHandler}>button</button>
            </div>
        )
    }
}
export default App;
cs

이전의 설정만 하게 되면 클래스 문법안에서 arrow function을 사용할 경우 에러가 뜹니다. 해당 문법을 사용하기 위해선 플러그인 설치가 필요합니다

1
2
3
4
5
6
7
8
9
10
11
npm i -D @babel/plugin-proposal-class-properties
 
//.babelrc
{
    "presets": [
        "@babel/preset-env", "@babel/preset-react"
    ],
    "plugins": [ 
        "@babel/plugin-proposal-class-properties" 
    ]
}
cs

플러그인 설치후 .babelrc 파일에 추가해 주면 사용할 수 있습니다.


CRA를 사용하지 않고 웹팩 세팅을 해보았습니다. 다시 한번 정리하면서 번들과 바벨 웹팩에 대한 개념이 정리가 되었습니다.

오타나 오류가 있다면 알려주세요



반응형
저작자표시

'React' 카테고리의 다른 글

react ie 11 적용하기 ( feat.polyfill )  (0) 2019.09.29
하위 태그에 클릭 이벤트 해제 - currentTarget  (0) 2019.09.02
component lifecycle  (0) 2019.04.28
react 기초  (0) 2019.03.31
react props, state Bloging  (0) 2019.02.26
댓글