Node 프로젝트 초기화를 위한 bash code
# git, node, mongodb 설치 # 콘솔 실행 편의를 위한 webpack global install # - Linux 기반 운영체제 사용시 global 설치이므로 sudo 붙여주어야 함 $sudo npm install -g webpack webpack-dev-server # 프로젝트 초기화 # - npm init 명령어는 node project를 위한 package.json 파일을 생성함 mkdir my-project-name cd my-project-name npm init # Dependency 및 Plugin 설치 # - 해당 모듈들은 local로 설치된다 # - --save 지시자는 pakage.json에 의존성 관련 정보를 등록하기 위함 npm install --save react react-dom npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react npm install --save-dev react-hot-loader webpack webpack-dev-server
webpack config 파일 생성 (webpack.config.js 파일 생성)
// webpack 호출 (es6부터 import 사용)
var webpack = require('webpack');
// 다음의 객체를 모듈로 내보냄을 의미
// webpack에서 해당 모듈을 호출하여 설정으로 사용함
module.exports = {
// webpack의 주요 기능인 script 병합이 최초 이루어지는 root file 지정
// 지정된 파일의 require부터 재귀호출하여 연결된 script들을 모두 병합한다
entry: './src/index.js',
// 병합된 script 파일이 생성되는 경로 및 파일명
output: {
path: __dirname + '/public/',
filename: 'bundle.js'
},
// 개발서버 설정
devServer: {
hot: true,
inline: true,
host: '0.0.0.0',
port: 4000,
// index 파일의 위치
contentBase: __dirname + '/public/'
},
// 지정된 loader를 통해 script 파일을 변환한다
// 이 경우는 es2015와 react 문법을 javascript로 변환하는 것
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: '/node_modules/',
query: {
cacheDirectory: true,
presets: ['es2015', 'react']
}
}
]
},
// webpack의 plugin을 호출
// 하단에서는 auto-reload를 위한 plugin을 호출하고 있음
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
html 파일 생성 (/public/index.html)
<html>
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
javascript 파일 생성 (/src/components/App.js)
// React라는 변수명으로 react 모듈을 호출
import React from 'react';
class App extends React.Component {
render() {
return (
<h1>Hello React Skeleton</h1>
);
}
}
// 다른 script 파일에서도 사용할 수 있도록 export
export default App;
javascript 파일 생성 (/src/index.js)
// 모듈 호출
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
const rootElement = document.getElementById('root');
// React가 Component를 그리도록 render() 호출
ReactDOM.render(<App/>, rootElement);
package.json 파일을 수정하여 개발서버 실행 스크립트를 생성
/* ... */
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// 아래 코드를 추가한다: 개발서버 실행 스크립트
// root 디렉토리가 아니더라도 npm run dev-server 커맨드로 실행할 수 있게 해줌
"dev-server": "webpack-dev-server"
},
/* ... */
개발서버 실행 스크립트 호출
npm run dev-server