* webpack
브라우저 위에서 import(ES5에서는 require) 를 할 수 있게 해주고 자바스크립트 파일들을 하나로 합쳐준다.
npm으로 설치한 것 또한 사용할 수 있게 해주며 자바스크립트 파일을 하나로 합쳐주는 등 많은 것들을 자동화 시켜주는 빌드 툴!
* webpack-dev-server
별도의 서버를 구축하지 않고도 static 파일을 다루는 웹서버를 열 수 있으며 hot-loader 를 통하여 코드가 수정 될 때마다 자동으로 리-로드 되게 할 수 있다. (개발용 서버)
* 설치 방법
- 리눅스: $ sudo npm install -g webpack webpack-dev-server
- 맥, 윈도우: npm install -g webpack webpack-dev-server
-
mac에서 프로젝트 시작하기
1. 프로젝트 생성
$ mkdir react-fundamentals
$ cd react-fundamentals
$ npm init (노드 프로젝트를 시작하는 명령어)
+) Node.js: 자바 스크립트 런타임
자바 스크립트를 브라우저에서만 사용하는 것이 아니라 서버 사이드에서도 사용할 수 있도록 하는 것!
2. Dependency, plugin 설치
- 리액트 설치: npm install --save react react-dom
- 개발 의존모듈 설치
npm install --save-dev react-hot-loader webpack webpack-dev-server
(react-hot-loader: 해당되는 컴포넌트만 업데이트 해 주는 것)
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
(babel: ES6를 사용할 수 있도록 해주는 모듈)
3. Webpack 설정하기
Atom 에디터에 들어간 뒤 webpack.config.js라는 파일을 하나 생성한다.
var webpack = require('webpack'); //웹팩 불러오기, npm으로 설치한 것들 requrie로 불러오는 것
module.exports = { //객체를 모듈로 내보내겠다는 것
entry: './src/index.js', //이 파일에서 부터 require한 파일들을 불러오고 그 파일로 부터 또 시작하여 재귀적으로 필요한 모듈들을 불러오는 것
output: { //합친 파일들을 public에 'bundle.js'로 저장하겠다는 것
path: __dirname + '/public/',
filename: 'bundle.js'
},
devServer: { //개발 서버의 설정
hot: true, //수정될 때 마다 리-로딩 하는 것
inline: true,
host: '0.0.0.0',
port: 4000,
contentBase: __dirname + '/public/', //index 파일의 위치
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['es2015', 'react']
}
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
4. HTML 및 JS 작성하기
- public 폴더 생성 후 index.html 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
- 자바스크립트 파일 작성
src/components/App.js 만들기
import React from 'react';
class App extends React.Component {
render(){
return (
<h1>Hello React Skeleton</h1>
);
}
}
export default App;
src/index.js 만들기
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
5. 개발 서버의 실행 스크립트 만들기
/package.json 파일 수정하기
/* .. 생략 .. */
"scripts": {
"dev-server": "webpack-dev-server"
},
/* .. 생략 .. */
6. 실행
npm run dev-server
-
webpack, babel의 용도
리액트 프로젝트를 만들게 되면서 컴포넌트 를 여러가지 파일로 분리해서 저장 할 것이고,
또 이 컴포넌트는 일반 자바스크립트가 아닌 JSX 라는 문법으로 작성하게 된다.
여러가지의 파일을 한개로 결합하기 위해서 우리는 Webpack 이라는 도구를 사용하고,
JSX 를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서 우리는 Babel 이라는 도구를 사용한다.
[참고]
https://velopert.com/3621
https://github.com/coddingbear/webpack4_quickstarter/
'Web Study > React' 카테고리의 다른 글
| [React] 컴포넌트 매핑 (Component Mapping) (0) | 2018.12.18 |
|---|---|
| [React] props, state (0) | 2018.12.18 |
| [React] JSX (0) | 2018.12.18 |
| [React] React.js 기초 (0) | 2018.12.18 |