들어가기 전
코드만 보고 싶다면, 아래의 링크를 확인해보세요
https://github.com/insidedw/minified-cra
GitHub - insidedw/minified-cra
Contribute to insidedw/minified-cra development by creating an account on GitHub.
github.com
프로젝트 구성
npm init -y
package.json에 의존성 설치
리엑트 설치
리엑트는 runtime에서 읽혀야 하니 dependencies에 추가합니다.
npm install react react-dom
webpack 설치
npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin
webpack
번들링 한다고 했으니 webpack을 설치해야겠죠? ㅋㅋ
webpack-cli
터미널에서 webpack 명령어를 사용할 수 있게 해줍니다.
webpack-dev-server
개발을 빠르게 할 수 있게 도와줍니다. 개발서버를 가상으로 띄워서 live reloading을 지원해줍니다. 저희가 파일 수정이 일어날 때마다 브러우저 재시작을 안해도 변경된 코드로 화면이 그려집니다.
html-webpack-plugin
지정한 html문서에 번들링된 파일들을 주입시킵니다.
babel 설치
npm install -D babel-loader @babel/cli @babel/core @babel/preset-env @babel/preset-react
리엑트 프로젝트에서는 babel이 필수요소 입니다.
리엑트 컴포넌트를 브라우저가 읽을 수 있는 코드로 변환해주기 때문입니다.
babel.config.js 생성
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
}
babel-loader
babel설정 파일을 읽어 설정에 맞게 파일 변환
@babel/cli
터미널에서 babel 명렁어 사용 가능하도록 제공
@babel/core
babel의 핵심 기능 포함
@babel/preset-env
가장 최신 자바스크립트 문법을 사용할 수 있도록 해줍니다.
@babel/preset-react
리엑트 컴포넌트를 브라우저가 읽을 수 있는 코드로 변환해줍니다.
css-loader 설치
npm install -D css-loader
리엑트 컴포넌트에서 import하는 css파일을 읽을 수 있게 해줍니다.
@svgr/webpack 설치
npm install --save-dev @svgr/webpack
svg 파일을 리엑트 컴포넌트로 사용하기 위한 로더입니다.
cra에도 기본으로 내장되어 있어서 추가했습니다.
없으면 컴포넌트가 많아짐..
mini-css-extract-plugin 설치
작성된 css 파일을 미리 만들어 놓은 html에 link 태그로 넣어줍니다.
npm i -D mini-css-extract-plugin
css-minimizer-webpack-plugin 설치
npm i -D css-minimizer-webpack-plugin
배포 시 css파일의 크기를 최소화 해줍니다.
webpack.config.js
완성된 webpack 설정 파일입니다.
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ['@svgr/webpack'],
},
{
test: /\.(js|jsx)$/,
exclude: '/node_modules',
use: 'babel-loader',
},
{
test: /\.css$/,
exclude: '/node_modules',
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
devServer: {
static: './build',
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
new MiniCssExtractPlugin(),
],
optimization: {
minimizer: [new CssMinimizerPlugin()],
},
}
html 문서 만들기
cra는 client side rendering만 지원하기 때문에 이 프로젝트 역시 cra만 지원합니다.
그렇기에 미리 가공된 html문서가 있어야 합니다.
webpack도 그 파일을 보고 번들링된 파일을 주입합니다.
public 폴더를 만들고 index.html문서를 추가합니다.
div tag는 리엑트 컴포넌트에서 페이지를 그릴 때 해당 태그 기준으로 그려집니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Title</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js 파일 생성
import React from 'react'
import ReactDOM from 'react-dom/client'
import { App } from './App'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
App.js 파일 생성
css파일과 svg파일은 아무거나 하나 만들어서 넣어주세요.
import React from 'react'
import './index.css'
import Icon from './assets/react.svg'
export function App() {
return (
<div>
<h1>
Hello World <span className={'time'}>{new Date().toString()}</span>
</h1>
<Icon />
</div>
)
}
package.json
스크립트를 추가합니다.
개발 할 때는 npm run dev, 배포할 떄는 npm run build를..
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config ./webpack.config.js --mode development",
"build": "webpack --progress --mode production"
},
테스트
npm run dev 명령어 입력 후 http://localhost:8080/로 접근해보세요
아래와 같은 화면이 노출될것입니다.
'IT > react' 카테고리의 다른 글
| [react] ssr 프로젝트 만들기 (2) - css, 번들에 추가하기 (0) | 2024.07.02 |
|---|---|
| [react] ssr 프로젝트 만들기 (1) - hello world 찍기 (0) | 2024.07.01 |
| [react] Suspense (0) | 2024.03.26 |
| [React] 컴포넌트 추상화 (0) | 2024.03.04 |
| [React] Controlled Props Pattern (0) | 2024.03.01 |
