티스토리 뷰

Language/Node.js

React Webpack을 하려면 필요한 것들

KyeongRok Kim 2016. 10. 29. 01:09

React Webpack을 하려면 필요한 것들



React를 하려면 Webpack은 기본으로 사용하니까 같이 다룬다..


Webpack쓰려면 Node.js는 있어야 하는 것이고. Node.js는 해당 사이트에 가면 다운로드 받고 쉽게 설치 할 수 있다.



Webpack을 왜 쓰는가에 대해 간단히 이야기 해보자면 html하고 .js로 웹페이지 개발 하는데 규모가 커지고 조직화 되다보니까 이런 도구들이 자연스럽게 필요하게 되었다. 이것은 web을 쓰는 인구가 늘어나고, 스마트폰이 나오고 기술이 발전하고 네트웍이 빨라지는 등 it가 발전했기 때문.


마차를 타고 다니던 시절에서 자동차가 나오면서 자동차 운전 면허증, 보험 등이 자연스럽게 필요해진것과 같다.


나도 Webpack 안쓰고 해볼려고 했는데 결국은 쓰게 되더라. '운전 면허증'을 딴다고 생각 하고 차분히 접근하는게 마음이 편하다.


아래 과정으로 해보려고 한다.

1.index.html만들기

2.app.js만들기

3.React하는데 필요한 npm 모듈들 설치하기

4.빌드 스크립트 webpack.config.js 만들기

5.webpack 빌드 실행하기

6.web에서 실행하기



프로젝트 구조

c:/practice/react_01

|-src

|+-- app.js

|+-- component

|+++-- HelloBox.jsx

|- app.bundle.js

|- index.html

|- webpack.config.js



root/index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>App</title>
</head>
<body>
    <div id="content">
        hello
    </div>
    <script type="text/javascript" src="./app.bundle.js"></script>
</body>
</html>
cs


#content에 react app을 렌더 할 것인데 그 아래에 script를 import해줬다. 위에(head같은데) 해주면 다른 코드를 좀 더 써줘야 하는데 이게 간단하다.


root/src/app.js

1
2
3
4
5
import React from 'react';
import ReactDOM from 'react-dom';
import HelloBox from "./components/HelloBox.jsx";
 
ReactDOM.render(<HelloBox />, document.getElementById('content'));
cs


HelloBox.jsx를 분리해두었다. 많은 예제들이 같은 페이지에 넣어놓았는데 import 하는 방법을 보여주기 위해 위와 같이 분리해놓았다.



root/webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
    entry:"./src/app.js",
    output:{
        path:"./",
        filename:"app.bundle.js"
    },
    module:{
        loaders:[
            {
                test:/\.jsx?$/,
                exclude: /node_modules/,
                 loader: 'babel-loader',
                 query:{
                     presets: ['es2015', 'react'],
                 }
            }
        ]
    }
};
cs

처음에 이거 setting하는게 이해하기 어렵기 때문에 위에 entry, output의 경로만 신경써주고 복사해서 만들어도 된다.
보통 인터넷에서 예제를 찾으면 loders.query 이 부분은 빠져있는데 이게 있어야 react가 build된다.



root/component/HelloBox.jsx

1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
 
module.exports = React.createClass({
    render(){
        return(
            <div>
                HelloBox
            </div>
        )
    }
});
cs



필요한 npm 모듈 설치하기

npm install webpack -g (설치 안했으면 여기서 함)
npm install react
npm install react-dom
npm install babel-loader
npm install babel-preset-es2015


babel만 있다고 되지 않는다. babel-preset-es2015 이거 없으면 build가 안된다.
그리고 'React.js 프로 리액트(카시우지 소자)' 라는 책에서 React.render() 로 dom에 render 할 수 있는 것 처럼 되어있는데 이건 옛날 버전에서 됐던 것 같고 요즘은 react-dom이 있어야 한다. 


Webpack build하기

webpack


chrome에서 확인




end.




저작자표시 비영리

'Language > Node.js' 카테고리의 다른 글

react di 하기  (0) 2016.11.11
javascript ecma6 function lambda표현법  (0) 2016.10.31
react webpack(웹팩) build과정  (0) 2016.10.28
javascript null과 undefined의 차이점  (0) 2016.10.01
javascript sort, 다중 조건 sort  (0) 2016.09.28
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
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
글 보관함