1. npm init
$ npm init -y
npm 이란 node package manager으로 node.js 에서 사용하는 모듈들을 패키지로 만들어 관리 배포 합니다.
옵션값에 대한 질문 없이 초기 디폴트 값으로 세팅한다면 -y를 붙여줍니다.npm init 완료 후 프로젝트 정보와 의존성(dependencies)을 관리하는 문서인 package.json가 생성됩니다.
react, react-dom package 다운로드$ npm i react react-dom
"react": "^17.0.2",
"react-dom": "^17.0.2",
// 리액트 virtualDom 관리
2. webpack(모듈 번들러), babel(JS 컴파일러) 설정
$ npm install @bable/core @babel/preset-env @babel/preset-react
$ npm install --save-dev webpack webpack-cli/.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
// preset-react
JSX로 작성된 코드들을 createElement 함수를 이용한
코드로 변환해 주는 바벨 플러그인이 내장되어 있다.
리액트 애플리케이션을 만들 때 필요한 플러그인들의 집합
// preset-env
모든 es6 기능을 컴파일할 모든 plugin
"plugins": []
// 필요한 플러그인은 여기에 세팅해줍니다.
}$ npm install ** 필요한 구성요소 package명 **
/webpack.config.js
const path = require('path');
// 빌드파일 구성요소에 따라 필요한 플러그인을 설치하여 import 해줍니다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
module.exports = {
mode: 'development',
// 번들링할 파일들의 entry
entry: './src/index',
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
exclude: /node_modules/,
use: ['file-loader?name=[name].[ext]'],
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{ test: /\.txt$/, use: 'raw-loader' },
{
test: /\.css?$/,
use: ['style-loader', 'css-loader'],
},
],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
// index.html에 output에서 만들어진 bundle.js를 적용하여, dist에 새로운 html 파일 생성
template: `./public/index.html`,
favicon: `./public/favicon.ico`,
manifest: './public/manifest.json',
}),
// images or favicon등을 빌드 파일에 포함시키기 위해 플러인을 설치
new CopyWebpackPlugin({
patterns: [{ from: './public/images', to: 'images' }],
}),
new WebpackPwaManifest({
path: './public/manifest.json',
}),
new FaviconsWebpackPlugin('./public/favicon.ico'),
],
};3. public , src 폴더 생성
public 폴더 생성 후 index.html, favicon.ico, images, manifest.json 등 필요한 파일을 추가해줍니다.
ex) public/index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<title>드래그앤드롭 🦑</title>
</head>
<body>
<div id="root"></div>
</body>
</html>src/index.js
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
import './index.css';
ReactDom.render(<App />, document.getElementById('root'));
c. src/App.jsx
import React from 'react';
const App = () => {
return(
<>
<h1>App TEST</h1>
</>
)
}리액트는 컴포넌트를 통해 virtual DOM을 관리하고, 이 virtual DOM이 실제 DOM을 관리하는 시스템으로 작동됩니다. index.js에 작성된 코드는 생성된 다른 컴포넌트들을 index.js라는 파일 내부에서 사용하겠다는 이야기와 같습니다.
HTML 파일에 있는 id = "root'를 찾습니다.
출력될 요소들을 실제로는 render() 에서 관리됩니다. () 태그 안에 들어가는 모든 요소를 ReactoDOM에서 관리하기 때문에 이를 루트 DOM 노드라고 부르고, 이 요소들을 루트 DOM 노드에 렌더링하기 위해 id가 root인 요소를 가져와서 ReactDOM.render()에 전달하는 것입니다
4. 작성한 파일 build 하기
위에서 설정한 webpack을 사용해 번들링 한 후 빌드 폴더를 생성하기 위해 package.json script를 아래와 같이 수정 해 줍니다.
package.json
"scripts": {
"dev": "webpack serve --open",
"build": "webpack --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},$ npm run build
스크립트로 build 할 경우 webpack config 에서 설정에 따라 dist 폴더안에 빌드 파일이 생성됩니다.
