1. NPM 초기화
npm
초기화(initialization) 명령을 사용해 프로젝트를 초기 구성합니다. (package.json
생성)
{
"name": "euid-react-app",
"version": "1.0.0",
"description": "E.UID React App",
"private": true,
"scripts": {
"start": "webpack"
}
}
2. Webpack 설치 & 구성
webpack, webpack-cli 패키지를 설치한 후, webpack.config.js
파일을 만들어 구성합니다.
npm i webpack webpack-cli -D
const path = require('path')
const getAbsolutePath = (pathDir) => path.resolve(__dirname, pathDir)
module.exports = (_env, argv) => {
const isProd = argv.mode === 'production'
const isDev = !isProd
return {
entry: {
main: './src/index.js',
},
output: {
path: getAbsolutePath('dist'),
filename: 'assets/js/[name].[contenthash:8].js',
publicPath: '/',
},
mode: 'development',
devtool: isDev && 'cheap-module-source-map',
}
}
3. React, ReactDOM 설치
react, react-dom 패키지를 프로젝트에 설치합니다.
npm i react react-dom
4. 엔트리 파일 생성
엔트리 파일을 만든 후, React, ReactDOM 모듈을 불러와 간단한 React 코드를 작성합니다.
import React from 'react';
import ReactDOM from 'react-dom';
// React 요소
const app = React.createElement(
'div',
{ className: 'app' },
'React App 매뉴얼 구성'
);
// DOM 노드
const rootNode = document.getElementById('root');
// DOM 노드에 React 요소 렌더링
ReactDOM.render(app, rootNode);