React 앱 만들 때
1) Babel: 자바스크립트 컴파일러라고 하고 a에서 b를 변경해주는 코드입니다.
2) webpack
3) HMR(hot-module-replacement)
react, react-som, Babel 설정
파일 구조
index.html는 React가 렌더링될 진입점 역할을 합니다. root 요소에 컴포넌트를 동적으로 렌더링합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js는 React 애플리케이션의 자바스크립트 진입점입니다. 애플리케이션을 초기화하고 index.html를 root에 react 컴포넌트를 렌더링 해줍니다.
import React from "react"
import ReactDom from "react-dom";
import FollowButton from "./components/FollowButton.js"
const domContainer = document.querySelector("#root");
ReactDom.rendar(<FollowButton/>, domContainer)
FollowButton.js는 button 클릭 시 css를 주는 기능입니다.
import React, { useState } from 'react';
function FollowButton() {
const [isFollowing, setIsFollowing] = useState(false);
const toggleFollow = () => {
setIsFollowing(!isFollowing);
};
return (
<button onClick={toggleFollow}>
{isFollowing ? 'Unfollow' : 'Follow'}
</button>
);
}
export default FollowButton;
Babel
babel/preset-react 리액트의 관련된 코드를 컴파일해주는 패키지
바벨을 사용하기 위해 패키지를 다운로드 해줍니다.
babel/cli 터미널에서 명령을 통해 바벨을 적용시킬 수 있도록 도와주는 패키지
@babel/core 바벨사용 시에 필수적인 패키지
npx babel src/components/FollowButton.js --presets=@babel/preset-react
바로 babel.config.js 바벨를 관리하는 파일를 하나 만들어주면 됩니다.
module.exports = function (api) {
api.cache(true);
const presets = ["@babel/preset-env", "@babel/preset-react" ]; // Babel이 사용할 변환 규칙 세트를 정의합니다.
const plugins = [ ]; // 특정 기능을 추가하거나 커스터마이징하기 위해 사용됩니다.
return {
presets,
plugins
};
}
파일 덕분게 간단한 명령어로 실행 가능합니다.
npx babel src/components/FollowButton.js
Webpack
번들러와 같은 역할을 합니다. 애플리케이션의 모든 파일(HTML, CSS, JavaScript, 이미지 등)을 하나 이상의 번들(bundle)로 결합합니다. 이를 통해 여러 파일을 효율적으로 관리하고, 브라우저가 필요한 리소스를 더 빠르게 로드할 수 있도록 최적화합니다
webpack을 사용하기 위해 다운로드 해줍니다.
webpack : webpack을 사용하기 위해 다운로드해야 할 패키지입니다.
webpack-cli : 터미널에서 webpack을 실행하기 위한 패키지입니다.
html-webpack-pligin :
babel-loader :
npm i -D webpack webpack-cli html-webpack-pligin babel-loader
webpack.config.js 파일을 만들어서 아래에 있는 코드를 적어줍니다.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports ={
mode:"development", // 모드 설정
entry:"./src/index.js", // 실행시킬 파일
module:{ // 번들링하면서 룰 적용용
rules:[{test: /\.js$/, use:'balbel-loader'}], // 모든 js 파일을 읽으면서 balbel-loader를 적용시킨다.
},
plugins:[
new HtmlWebpackPlugin({
template: "./public/index.html", //bundle.js를 자동으로 index.html을 붙인 다음에 최종적으로 dist 폴더에 같이 만들어줍니다.
}),
optimization:{
mininmizer:[] // 빈배열의 설정한다.
},
output:{ //번들링을 한 결과를 어떤 파일에 위치할 것인지
path: path.resolve(__dirname, "dist"), // dist 이름으로 된 폴더가 생성되고 dist에 저장이 됩니다.
fliename:'bundle.js' // 파일이름은 bundle.js
},
]
}
명령어를 실행시켜줍니다.
npx webpack
폴더와 파일이 생긴 것을 알 수 있습니다.
HMR(Hot-Module-replacement)
모든 종류의 모듈을 새로고침 할 필요없이 런타임에 업데이트 할 수 있습니다.
devSer를 추가해주면 새로고침을 안해도 업데이트를 할 수 있습니다
const path = require("path");
module.exports ={
mode:"development", // 모드 설정
entry:"./src/index.js", // 실행시킬 파일
output:{ //번들링을 한 결과를 어떤 파일에 위치할 것인지
path: path.resolve(__dirname, "dist"), // dist 이름으로 된 폴더가 생성되고 dist에 저장이 됩니다.
fliename:'bundle.js' // 파일이름은 bundle.js
},
module:{ // 번들링하면서 룰 적용용
rules:[{test: /\.js$/, use:'balbel-loader'}], // 모든 js 파일을 읽으면서 balbel-loader를 적용시킨다.
},
optimization:{ mininmizer:[]}, // 빈배열의 설정한다.
devSer:{
static:"./dist", // dist 파일에 업데이트가 발생할 때마다
hot:true, // 바로 런타임으로 실행시켜줍니다.
}
}'리액트' 카테고리의 다른 글
| [React] Lifecycle 자세히 알아보기 (0) | 2025.04.04 |
|---|---|
| [React] State 자세히 알아보기 (0) | 2025.04.03 |
| [React] Hooks (2) | 2023.01.05 |
| [React] Satae and Lifecycle (1) | 2023.01.05 |
| [React] Component (1) | 2023.01.05 |