리액트를 만들고 사용하다보면 webpack과 babel에 대해 많이 들어봤을 겁니다.
하지만 지금까지 진행한 프로젝트는 cra로 react 프로젝트를 셋팅하기 때문에 크게 wepack과 babel에 대해 신경쓰지 않아도 됐습니다.
webpack과 babel에 대해 알지 못하면 깊은 리액트 공부가 되지 않을 것 같다는 생각에 webpack과 babel에 대해 알아보고 직접 cra없이 react프로젝트를 셋팅해보겠습니다.
Webpack이란?
웹팩(Webpack 또는 webpack)은 오픈소스 자바스크립트(JS) 모듈 번들러이다. 주로 자바스크립트(JS)를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다.
출처 : 위키백과
정의만 보고선 웹팩이 번들러라는 것 이외에 어디에 쓰는 물건인지 도통 알 수가 없습니다.
하지만 번들러의 등장 배경을 알면 webpack이 어디에 사용되는지 유추해볼 수 있습니다.
인터넷이 등장하고 처음에는 웹 페이지와 서비스들의 규모가 그렇게 크지 않았습니다. 때문에 이를 구성하는 HTML이나 자바스크립트 파일의 크기도 상대적으로 작았고 해당 서비스를 유지하는데 큰 무리가 없었습니다. 하지만 인터넷이 발달하면서, 적게는 수십만 줄에서 많게는 수백만 줄의 코드로 이루어진 대규모 웹서비스들이 생겨나기 시작했습니다. 하나의 웹 서비스에서 수십 수백개의 자바스크립트 파일을 다루면서 하나 둘 씩 발생되는 문제들에 여기저기서 곡소리가 나왔고 번들러의 필요성이 증가했습니다.
문제 1
중복된 이름으로 인한 에러
문제 2
파일 전송 문제(병목현상)
위 문제를 해결하기 위해 여러개의 파일을 하나의 파일로 묶어주는 번들러가 등장했다.
번들러는 대표적으로 Webpack,Parcel,Rollup,Browerify 등이 있습니다.
즉 webpack은 애플리케이션에 필요한 모든 종류의 파일들을 모듈단위로 나누어 최소한의 파일 묶음으로 만드는 기능을 합니다.
Babel
Babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 코드로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스컴파일러입니다. 웹 개발자는 언어의 최신 기능을 활용할 수 있습니다.
출처: 위키백과
바벨은 ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 등 코드를 하위버전의 자바스크립트 코드로 변환시켜 IE나 여러 브라우저에서 이상없이 동작할 수 있도록 도와줍니다.(크로스 브라우징)
간단히 말해 Arrow function같은 경우 ES6+ 자바스크립트에서 지원해주는데요. 이를 ES6이전 문법으로 바꿔주는 역할을 해줍니다.
CRA없이 React 프로젝트 셋팅하기
webpack과 babel에 대해 알아봤으니 이들을 이용해 React프로젝트를 셋팅해보겠습니다.
1. 터미널에서 새로운 폴더를 만듭니다.
mkdir reactwithoutcra
cd reactwithoutcra
2. jsonpackage생성
npm init -y
3. 필요한 패키지 설치
npm install --save -D webpack webpack-dev-server webpack-cli html-webpack-plugin
npm install --save -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript
npm install --save react react-dom
npm install --save @types/react @types/react-dom
npm install -D ts-loader
4. tsconfig.json생성
tsc --init
5. tsconfig.json설정
{
"compilerOptions": {
"outDir": "./dist",
"target": "es5",
"module": "esnext",
"jsx": "react",
"noImplicitAny": true,
"allowSyntheticDefaultImports": true,
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true
},
"include": ["src"],
"exclude": ["node_modules", "**/*.spec.ts"]
}6. babel.config.js 생성
module.exports = {
presets: ["@babel/preset-react", "@babel/preset-env", "@babel/preset-typescript"],
};
7. webpack.config.js 설정
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const mode = process.env.NODE_ENV || "development";
module.exports = {
mode,
devServer: {
historyApiFallback: true,
port: 3000,
hot: true,
},
entry: {
app: path.join(__dirname, "./src/index.tsx"),
},
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx"],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: ["babel-loader", "ts-loader"],
},
],
},
output: {
path: path.join(__dirname, "/dist"),
filename: "bundle.js",
},
plugins: [
new webpack.ProvidePlugin({
React: "react",
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
new webpack.HotModuleReplacementPlugin(),
],
};
8. index.html, index.tsx, App.tsx 생성
코드 구성은 이렇습니다.
public/index.html
src/App.tsx
src/index.tsx
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
App.tsx
import React from "react";
const App = () => {
return <div>Doyeonism</div>;
};
export default App;
9. package.json에서 script수정
"scripts": {
"start": "webpack serve --port 3000",
"build": "NODE_ENV=production webpack"
},
yarn start를 하면
화면이 잘 뜨는 것을 확인할 수 있습니다.
webpack.config.js, babel.config.js, typescript.json 파일의 내부적인 구성 요소와 기능들은 다음 글에서 확인 가능합니다.
cra없이 리액트 프로젝트 생성하기 두번째 파일구성 알아보기
cra없이 react 프로젝트 설정하기(feat. webpack,babel) 리액트를 만들고 사용하다보면 webpack과 babel에 대해 많이 들어봤을 겁니다. 하지만 지금까지 진행한 프로젝트는 cra로 react 프로젝트를 셋팅하기
blog.doyeonism.com
확실히 cra를 이용하면 로드시간이 늦었는데 cra없이 셋팅을하니 로드시간이 빨라졌다는 것을 체감할 수 있었습니다.
이 폴더를 깃허브에 저장하고 리따배 프로젝트를 시작할 때 사용하도록 해야겠습니다.
'React js' 카테고리의 다른 글
| axios get으로 api 호출했는데 response data 깨지는 현상 header 추가 (0) | 2022.11.30 |
|---|---|
| cra없이 리액트 프로젝트 생성하기 두번째 파일구성 알아보기 (0) | 2022.11.28 |
| 리액트 전역상태관리 라이브러리 Redux를 알아보고 사용해보자 (0) | 2022.11.24 |
| useState란 무엇이고 왜 리액트에선 useState를 통해 값을 변경해야할까? (0) | 2022.11.22 |
| 리액트, useState를 사용해서 브라우저 값 변경하기 (0) | 2022.11.18 |
