-
1. ์ค๋น๊ณผ์
-
1-1. Webpack Bundle Analyzer ์ค์น
-
1-2. Webpack Bundle Analyzer ์ ์ฉ
-
1-3. Webpack Bundle Analyzer ์คํ ๋ฐ ๊ฒฐ๊ณผ
-
2. React.lazy ์ ์ฉํ์ฌ ํ์ด์ง์ ํ์ํ ๋ชจ๋๋ง ๋ถ๋ฌ์ค๊ธฐ
-
2-1. React.lazy์ด๋?
-
2-2. React.lazy ์ ์ฉํ๊ธฐ
-
2-3. ๊ฒฐ๊ณผ
-
3. ์ฌ์ฉํ๋ ์์ด์ฝ๋ง ๋ถ๋ฌ์ค๊ธฐ
-
3-1. ์ผ๋ง๋ ์ฌ์ฉํ๊ณ ์๋?
-
3-2. @react-icons/all-files ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ
-
3-3. Tree Shaking
-
3-4. Tree Shaking ์ ์ฉ... ๊ทธ๋ฆฌ๊ณ ์คํจ? ์ฑ๊ณต?
-
3-5. react-icons vs @react-icons/all-files
ํ๋ก ํธ์๋ ์ฑ๋ฅ ๋ฒ ์ด์ค์บ ํ์ ๋ ๋ฒ์งธ ์ฃผ์ ๋ ํ์ํ ๊ฒ๋ง ์์ฒญํ๊ธฐ์ด๋ค. ๊ฐ๋จํ๊ฒ ์๊ฐํด์ ๋น์ฅ ํ์ ์๋ ๋ชจ๋์ ๋ถ๋ฌ์ค์ง ์๋ค๋ ๊ฒ์ด๋ค.
์ด์ ๊ด๋ จํ์ฌ ๊ตฌ์ฒด์ ์ธ ์๊ตฌ์ฌํญ์ ๋ค์๊ณผ ๊ฐ๋ค.
- Home ํ์ด์ง์์ ๋ถ๋ฌ์ค๋ ์คํฌ๋ฆฝํธ ๋ฆฌ์์ค์ gif ๊ฒ์์ ์ํ giphy ๋ชจ๋์ด ํฌํจ๋์ด ์์ง ์์์ผ ํ๋ค.
- react-icons ํจํค์ง์์ ์ค์ ๋ก ์ฌ์ฉํ๋ ์์ด์ฝ ๋ฆฌ์์ค๋ง ๋น๋ ๊ฒฐ๊ณผ์ ํฌํจ๋์ด์ผ ํ๋ค.
์ด๋ฒ ์ฑํฐ์์๋ ์ด๋ฌํ ์๊ตฌ์ฌํญ์ ๋ง์กฑํ๊ธฐ ์ํด ์์ ํ ๊ณผ์ ์ ๋ค๋ฃฌ๋ค.
1. ์ค๋น๊ณผ์
๋น๋๊ฐ ๋์์ ๋ ๋ฒ๋ค๋ ํ์ผ์ด ์ด๋ค ๋ชจ์ต์ธ์ง ๋จผ์ ํ์ธํด ๋ณด์. ๋์ผ๋ก ๋ณด๋ฉด์ ๋น๊ตํ๋ ๊ฒ์ด ์ค์ํ๋ฐ ์ด๋ฅผ ๋์์ฃผ๋ ๊ฒ์ด Webpack Bundle Analyzer๋ผ๋ ๋๊ตฌ(ํ๋ฌ๊ทธ์ธ)์ด๋ค. ์ด๋ฅผ ํตํด ๋ฒ๋ค๋ ํ์ผ์ ์ด๋ค ๋ชจ๋์ด ์ผ๋ง๋ ํฌ๊ธฐ๋ฅผ ์ฐจ์งํ๋์ง ์ ์ ์๋ค.
1-1. Webpack Bundle Analyzer ์ค์น
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
1-2. Webpack Bundle Analyzer ์ ์ฉ
Webpack Bundle Analyzer์ ์ ์ฉํ๊ธฐ ์ํด webpack์ ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์ถ๊ฐํ์.
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
// ...
plugins: [
// ...
new BundleAnalyzerPlugin(), // -> BundleAnalyzerPlugin ํ๋ก๊ทธ์ธ ์ถ๊ฐ
],
//...
};
1-3. Webpack Bundle Analyzer ์คํ ๋ฐ ๊ฒฐ๊ณผ
์ดํ ์๋ฒ๋ฅผ ์ฌ์คํํ๋ฉด ๋ค์๊ณผ ๊ฐ์ด bundle.js์ ์ด๋ค ๋ชจ๋์ด ์ผ๋ง๋งํผ ์ฐจ์งํ๊ณ ์๋์ง ๋์ผ๋ก ํ์ธํ ์ ์๋ค.
์ฐธ๊ณ ๋ก devํ๊ฒฝ์ด๋ค.
2. React.lazy ์ ์ฉํ์ฌ ํ์ด์ง์ ํ์ํ ๋ชจ๋๋ง ๋ถ๋ฌ์ค๊ธฐ
ํ์ฌ ๋ฉ์ธ ํ์ด์ง์ ์ ์์ ํ๊ฒ ๋๋ฉด bundle.js ํ๋๋ง ๋ถ๋ฌ์จ๋ค. ์ฌ๊ธฐ์๋ ๋ฉ์ธ ํ์ด์ง์์ ์ฌ์ฉํ๋ ์๋ ๋ชจ๋๋ ํฌํจ๋์ด ์๋ค. ๋๋ฌธ์ ์ฌ์ฉํ์ง ์๋ ๋ชจ๋๋ก ์ธํด ์ฑ๋ฅ๋ง ๋ฎ์์ง๋ค.
์ด๋ฅผ React.lazy์ ์ฌ์ฉํ์ฌ ๊ฐ ํ์ด์ง์์ ํ์ํ ๋ชจ๋๋ง ๋ถ๋ฌ์ฌ ์ ์๋๋ก ํด๋ณด์.
2-1. React.lazy์ด๋?
React.lazy๋ฅผ ์ ์ฉํ๋ฉด ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง ๋ ๋๊น์ง ์ปดํฌ๋ํธ์ ์ฝ๋์ ๋ก๋ฉ์ ์ง์ฐ์ํฌ ์ ์๋ค. ์ฆ, ์ด๋ ํ์ด์ง์์ ์ฉ๋์ด ํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ค๊ณ ํ์ ๋, ์ด๋ฅผ ๋ฏธ๋ฆฌ ๋ถ๋ฌ์ค๋ ๊ฒ์ด ์๋๋ผ ํด๋น ํ์ด์ง๊ฐ ๋ก๋๋ ๋ ๋ถ๋ฌ์ค๊ฒ ๋๋ค.
const App = () => {
return (
<Router>
<NavBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/search" element={<Search />} />
</Routes>
<Footer />
</Router>
);
};
์ ์ฝ๋๋ฅผ ์ดํด๋ณด๋ฉด ์ด ์๋น์ค์์๋ ๋ ๊ฐ์ ํ์ด์ง๋ก ๋ผ์ฐํ ์ ํ ์ ์๋ค. ํ๋๋ /์ด๊ณ ๋ค๋ฅธ ํ๋๋ /search์ด๋ค. ์ด๋, /search ํ์ด์ง๊ฐ ๋ก๋๋๋ค๋ฉด Search ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง์ด ๋๋๋ฐ Search ์ปดํฌ๋ํธ์๋ Home ์ปดํฌ๋ํธ์์ ์ฌ์ฉ๋์ง ์๊ณ ์ฉ๋์ด ํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์๋ค๊ณ ์๊ฐํด ๋ณด์. ์ฌ์ฉ์๊ฐ /์ผ๋ก ์ ์ํ์ ๋, ๋น์ฅ ์ฌ์ฉํ์ง๋ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋๋ฌธ์ ๋ ๋๋ง์ด ์๊ฐ์ด ๋์ด๋๊ฒ ๋๋ค. ์ด๋ฅผ ํด๊ฒฐํ ์ ์๋ ๊ฒ์ด ๋ฐ๋ก React.lazy์ด๋ค.
2-2. React.lazy ์ ์ฉํ๊ธฐ
์ผ๋ฐ์ ์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ import๋ฅผ ํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ๋ค.
import Search from "./pages/Search/Search";
์ด๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ์์ ํ์. ์ฌ์ฉ์๊ฐ /search๋ก ๋ฐ๋ก ์ ๊ทผํ ์ ์๊ธฐ ๋๋ฌธ์ Home ์ปดํฌ๋ํธ์๋ React.lazy๋ฅผ ์ ์ฉํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ฃผ์ํด์ผ ํ ์ ์ React.lazy๋ฅผ ์ ์ฉํ๋ฉด ์ ์ฉํ ๋ถ๋ถ์ React.Suspense๋ก ๊ฐ์ธ์ฃผ์ด์ผ ํ๋ค๋ ๊ฒ์ด๋ค.
import { Suspense, lazy } from "react";
const Home = lazy(() => import("./pages/Home/Home"));
const Search = lazy(() => import("./pages/Search/Search"));
const App = () => {
return (
<Router>
<Suspense fallback={<div>๋ก๋ฉ์ค...</div>}>
<NavBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/search" element={<Search />} />
</Routes>
<Footer />
</Suspense>
</Router>
);
};
์ถ๊ฐ์ ์ผ๋ก webpack์ output์ filename์ bundle.[contenthash].js๋ก ์์ ํ์๋ค.
2-3. ๊ฒฐ๊ณผ
๊ธฐ์กด์ ํ๋์๋ bundle.js๊ฐ 4๊ฐ๋ก ๋๋์ด์ง ๋ชจ์ต์ ํ์ธํ ์ ์๋ค.
๋ํ /์์๋ ํ์ํ ๋ชจ๋๋ง ๋ถ๋ฌ์ฌ ์ ์๊ฒ ๋์๋ค.
๋ฏธ์ ์๊ตฌ์ฌํญ์ธ Home ํ์ด์ง์์ ๋ถ๋ฌ์ค๋ ์คํฌ๋ฆฝํธ ๋ฆฌ์์ค์ gif ๊ฒ์์ ์ํ giphy ๋ชจ๋์ด ํฌํจ๋์ด ์์ง ์์์ผ ํ๋ค. ๋ ์ถฉ์กฑ๋์๋ค. ๋ค์ ์ฌ์ง์ ๋ณด๋ฉด giphy๋ชจ๋์ bundle.29e15af867de2689b6ab.js ๋ชจ๋์ด์ง๋ง /์์์ ๋คํธ์ํฌ๋ฅผ ์ดํด๋ณด๋ฉด bundle.29e15af867de2689b6ab.js ๋ชจ๋์ ์๋ค. ์ฆ, ๋ถ๋ฌ์ค์ง ์์๋ค.
3. ์ฌ์ฉํ๋ ์์ด์ฝ๋ง ๋ถ๋ฌ์ค๊ธฐ
3-1. ์ผ๋ง๋ ์ฌ์ฉํ๊ณ ์๋?
๋ฒ ์ด์ค ์ฑ๋ฅ ์บ ํ ํ๋ก์ ํธ์์๋ react-icons๋ฅผ ์ฌ์ฉํ๋ค. ์ฐ์ ํ๋ก์ ํธ์์ ์ผ๋ง๋ ์ฌ์ฉํ๊ณ ์๋์ง ์ดํด๋ณด์. vscode์ ๊ฒ์ ๊ธฐ๋ฅ์ ํ์ฉํ์ฌ react-icons๋ฅผ ์ฐพ์ผ๋ฉด ๋ค์๊ณผ ๊ฐ์ด 3๊ฐ์ ์์ด์ฝ์ ๋ถ๋ฌ์ ์ฌ์ฉํ๊ณ ์๋ค.
๊ทธ๋ ๋ค๋ฉด ์ฌ์ฉํ๋ ๊ฒ๋ง ์ค์ ๋ก ๋ถ๋ฌ์ค๊ณ ์ฌ์ฉํ๊ณ ์์ง ์๋ ๊ฒ๋ค์ ๋ถ๋ฌ์ค์ง ์๊ณ ์์๊น? ์ด๋ฅผ Webpack Bundle Analyzer๋ก ํ์ธํด ๋ณด์.
๋ค์ ์ฌ์ง์ develoment ๋ชจ๋๋ก ์๋ฒ๋ฅผ ์คํ์์ผฐ์ ๋ ๋ฒ๋ค๋ ๋ชจ๋์ ๋ํ๋ธ Webpack Bundle Analyzer์ด๋ค.
์ด์ํ ์ ์ ํ์ธํ ์ ์๋ค. ๋ถ๋ช ์์ด์ฝ 3๊ฐ๋ง ์ฌ์ฉํ๊ณ ์๋๋ฐ, react-icons ๋ชจ๋์ ํฌ๊ธฐ๋ฅผ ์ดํด๋ณด๋ฉด 600KB๊ฐ ํ์ฉ ๋๋๋ค. ๋ํ ๋์ผ๋ก๋ง ๋ด๋ ์์ฒญ๋ ํฌ๊ธฐ๋ฅผ ๊ฐ์ง๊ณ ์์์ ํ์ธํ ์ ์๋ค. ์ด๋ป๊ฒ ๊ฐ์ ํ ์ ์์๊น?
3-2. @react-icons/all-files ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ
๊ฒฐ๋ก ๋ถํฐ ๋งํ์๋ฉด ๋๋ @react-icons/all-files๋ฅผ ์ฌ์ฉํ์ง ์์๋ค. ๊ทธ ์ด์ ๋ ์๋์์ ์ค๋ช ํ๋ค.
์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ปจ์ ์ ์์ ์ด ๋ถ๋ฌ์จ ์์ด์ฝ๋ง ํฌํจํ์ฌ imports๋ฅผ ํ๋ค๋ ๊ฒ์ด๋ค. ๋ ์์ธํ ์ค๋ช ์ ์๋์ docs๋ฅผ ์ฐธ๊ณ .
3-3. Tree Shaking
Tree Shaking์ด๋ ์ฌ์ฉํ์ง ์๋ ์ฝ๋๋ฅผ ์ ๊ฑฐํ๊ธฐ ์ํด JavaScript ์ปจํ ์คํธ์์ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋๋ ์ฉ์ด์ด๋ค. webpack 4 ์ดํ๋ถํฐ package.json์ "sideEffects" ํ๋กํผํฐ๋ฅผ ํตํด ์ปดํ์ผ๋ฌ์ ํํธ๋ฅผ ์ ๊ณตํ๋ ๋ฐฉ์์ผ๋ก ์ปดํ์ผ๋ฌ์ ํํธ๋ฅผ ์ ๊ณตํ๋ ๋ฐฉ์์ผ๋ก ๊ธฐ๋ฅ์ ํ์ฅํ๋ค. ๋ค์์ ์ด์ ๋ํ Webpack ๋ฌธ์์ด๋ค.
3-4. Tree Shaking ์ ์ฉ... ๊ทธ๋ฆฌ๊ณ ์คํจ? ์ฑ๊ณต?
์ฌ์ฉํ๊ณ ์๋ react-icons์ ์์ด์ฝ๋ง ๋ถ๋ฌ์ค๊ธฐ ์ํด ์ฌ๋ฌ ์๋๋ฅผ ํด๋ณด์๋ค. ํ์ง๋ง ์ด๋ฅผ ํด๊ฒฐํ๊ณ ์ ์๋ก์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ค์นํ๊ธด ์ซ์๋ค. ์ฌ์ฉํ๊ณ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ฒ๋ฆฌ๊ณ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ค์นํ๊ฒ ๋๋ค๋ฉด ์์ผ๋ก ๊ฐ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋๋ผ๋ ํด๊ฒฐ์ฑ ์ ์ฐพ์ง ์๊ณ ๋์์ฑ ๋ง ๋จผ์ ์ฐพ๊ฒ ๋์ง ์์๊น? ์ถ๋ค. ๋ฌผ๋ก ๋น ๋ฅด๊ฒ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์ ๋์์ฑ ์ด ๊ฐ์ฅ ์ข์ ๋ฐฉ๋ฒ์ด ๋ ์ ์์ง๋ง ๊ณต๋ถํ๊ณ ์ ์ฅ์์ ์ฌ๋ฌ ์๋๋ฅผ ํด๋ณด๊ณ ์ถ์๋ค.
์ฐ์ Tree Shaking์ CommonJS ๋ชจ๋์ด ์๋ ES Module ๋ฐฉ์์์ ๋์ํ๋ค. ๋๋ฌธ์ ๋น๋๋๋ ๊ณผ์ ์์ ES Module๋ก ๋ณํ๋์ง ์๋๋ก ํด์ผ ํ๋ค. ์ด๋ฅผ ์ด๋ป๊ฒ ํ ์ ์์๊น? ์ฑ๋ฅ ๋ฒ ์ด์ค ์บ ํ์์๋ package.json์ bable ํ๋กํผํฐ๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ์์ ํ๋ฉด ๋๋ค.
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react",
{
"modules": false
}
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
modules์ false๋ก ํจ์ผ๋ก์จ ES Moldule์ด ๋น๋๊ฐ ๋ ํ์๋ ๋ณด์กด๋๊ฒ ๋๋ค.(๋ค์ ๊ธ ์ฐธ๊ณ )
๊ทธ ์ดํ์ package.json์ "sideEffects" ํ๋กํผํฐ๋ฅผ ์ถ๊ฐํ๋ค. ์ด๋ ๊ฐ์ false์ด๋ค.
{
// ...
"sideEffects": false
}
sideEffects๋ ๋ถ์ํจ๊ณผ๋ก ์ด๋ค ๋ชจ๋ ๋ค๋ฅธ ๋ชจ๋์ ์ํฅ์ ์ฃผ์ด ์ถ๊ฐ์ ์ธ ์ํฅ์ ๋ฏธ์น๋ค๋ ๊ฒ์ด๋ค. ํ์ง๋ง ์ ๊ฑฐํ๊ณ ์ถ์ ์์ด์ฝ์ ๋ ๋ฆฝ์ ์ด๋ฏ๋ก ๋ถ์ํจ๊ณผ๊ฐ ์๋ค. ์ฆ, false๋ก ํจ์ผ๋ก์จ ์ฌ์ฉํ์ง ์๋ export๋ ์ ๊ฑฐํด๋ ๊ด์ฐฎ๋ค๋ ๊ฒ์ webpack์๊ฒ ์๋ฆฌ๋ ๊ฒ์ด๋ค. ๋ค์์ ์ค์ react-icons/ai์ ๋ด๋ถ์ด๋ค.
์ ๋ง ์๋ ์์ด ์์ด์ฝ๋ค์ด ๋ง๋ค.(์ฌ์ง์ด ์ด๋ฐ ํด๋๋ค์ด ์ฌ๋ฌ ๊ฐ...) ์ฌ์ฉํ์ง ์๋ ๊ฒ๋ค๋ ๋ชจ๋ ํ์ํ ๊น? ๊น๋ํ ์ ๊ฑฐํ์ฌ ์ฌ์ฉํ๋ ๊ฒ๋ง ๊ฐ์ ธ์ค๋ ๊ฒ์ด ์ฌ๋ฌ๋ชจ๋ก ์ข๋ค.
์์ ๊ฐ์ด ์ค์ ์ ๋ง๋ฌด๋ฆฌํ๊ณ ๋ค์ dev serve๋ฅผ ์คํ์์ผฐ๋ค. ํ์ง๋ง ๊ฒฐ๊ณผ๋ฅผ ์ด์ ๊ณผ ๋์ผํ์๋ค. ์ฌ๋ฌ ๊ธฐ์ ๋ธ๋ก๊ธ ๊ธ๋ ๋ณด๊ณ github์์ ์ธ๊ตญ์ธ ๊ฐ๋ฐ์๋ค์ด ์๋ก ํ ๋ก ํ๋ ๊ฒ๋ ๋ณด์์ง๋ง ์ด๋ป๊ฒ dev serve์์ ์ฌ์ฉํ์ง ์๋ react-icons๋ฅผ ์ ๊ฑฐํ๋์ง๋ ์์ง ๊ฐ์ด ์กํ์ง ์์๋ค.
๊ทธ๋ฌ๋ค๊ฐ ๋ฌธ๋ ์ ๊ณ์ dev serve์์๋ง ํ์ธ์ ํ๋ ๊ฑฐ์ง?๋ผ๋ ์๋ฌธ์ด ๋ค์๊ณ production mode์์ build๋ฅผ ํ์๋๋ ๋ค์๊ณผ ๊ฐ์ด react-icons์ ํฌ๊ธฐ๊ฐ ์์ฒญ๋๊ฒ ์ค์ด๋ ๊ฒ์ ํ์ธํ ์ ์์๋ค.(๋๋ฌด ์์ผ๋ ํ๋ํด์ ๋ณด์ธ์.) ์ฌ์ง์ด ๋ ์ฌ๋ฐ๋ ์ ์ ์์ ์ถ๊ฐํ๋ ์ค์ ๋ค์ ๋ชจ๋ ์ง์ฐ๊ณ ํ์ธ์ ํด๋ ๊ฐ์ ๊ฒฐ๊ณผ๋ผ๋ ๊ฒ์ด๋ค. ์๋ง ์ด๋ webpack 4 ์ดํ๋ถํฐ production mode์์๋ ์ต์ ํ๋ฅผ ๊ธฐ๋ณธ์ ์ผ๋ก ํ๋ ๊ฒ๊ณผ ์ฐ๊ด์ด ์์ด ๋ณด์ธ๋ค.
๊ทธ๋ฆฌ๊ณ ์ด๋ฏธ react-icons์์ ๊ฐ ์์ด์ฝ ํด๋๋ง๋ค package.json์์ sideEffects๋ฅผ false๋ก ํด๋๊ณ ์๋ค. ์ด๋ ๊ด๋ จ์ด ์์ด ๋ณด์ธ๋ค.
3-5. react-icons vs @react-icons/all-files
react icons tree shaking์ ํ๊ณ ์ ์ฌ๋ฌ ๋ ํผ๋ฐ์ค๋ฅผ ์ฐพ๋ ๋์ค, react-icons ์์ฒด์์ sideEffects๋ฅผ ์ธ์ ์ถ๊ฐํ๋์ง๊ฐ ๊ถ๊ธํด์ก๋ค. ์ค์ ๋ก ์ฐพ์๋ณธ ๊ฒฐ๊ณผ sideEffects๋ง ์ถ๊ฐํ ๊ฒ์ด ์๋๋ผ react-icons, @react-icons/all-files๋ฅผ ๋๋๋ฉด์ ์์ฐ์ค๋ฝ๊ฒ package.json์ด ์์ฑ๋์๊ณ ์ด๊ณณ์ sideEffects๋ ํฌํจ๋ ์ฌ์ค์ ์ ์ ์์๋ค. ๋ค์์ ์ด์ ๋ํ react-icons์ PR์ด๋ค.
๋ํ ๋ ์๊ฒ ๋ ์ ์ ์ผ๋จ... ์ฒ์์ @react-icons/all-files ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์ ์ด๋ฅผ ์๋กญ๊ฒ ์ค์น๋ฅผ ํด์ผ ํด์ react-icons์ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ ์ค ์์๋๋ฐ ๊ทธ๊ฒ์ด ์๋๋ผ ์๋ก ๋ค๋ฅธ ์ฐจ์ด์ ์ ๊ฐ์ง ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ ๊ฒ์ด๋ค. ๋ง์ด ์กฐ๊ธ ์ด์ํ๋ฐ, ์ด ๋์ ์ฐจ์ด๋ ๋ค์๊ณผ ๊ฐ๋ค.
1. react-icons: ๊ธฐ๋ณธ์ ์ธ package๋ก ๋ง์ ์์ด์ฝ๋ค์ด ํ๋์ ํ์ผ์ ์กด์ฌํ๋ค.
2. @react-icons/all-files: ์ต์ ํ์ ๋ฌธ์ ๊ฐ ์์ ๋ ์ฌ์ฉํ๋ package๋ก ํ ํ์ผ์ ํ๋์ ์์ด์ฝ๋ง ์กด์ฌํ๋ค. ํ์ง๋ง ํ์ผ์ด ๊ทธ๋งํผ ๋ง๊ธฐ ๋๋ฌธ์ ์ค์นํ๋ ๋ฐ ์ค๋ ์๊ฐ์ด ๊ฑธ๋ฆฐ๋ค.
...
์๋ฌดํผ ๊ฒฐ๋ก ์ production mode๋ก build๋ฅผ ํ๊ฒ ๋๋ค๋ฉด ์์์ ์ ์ฌ์ฉํ์ง ์๋ ์์ด์ฝ์ ์ ๊ฑฐ๋๊ธฐ ๋๋ฌธ์ ๋ณ๋ค๋ฅธ ์์ ์ ํ์ง ์์๋ ๋๋ค๋ ๊ฒ์ด๋ค.
'๐ ์ฐ์ํํ ํฌ์ฝ์ค > Level4' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๋ ๋ฒจ4 ํ๋ก ํธ์๋ ์ฑ๋ฅ ๋ฒ ์ด์ค์บ ํ 1 - ์์ฒญ ํฌ๊ธฐ ์ค์ด๊ธฐ (2) | 2023.10.06 |
---|
ํ๋ก ํธ์๋ ์ฑ๋ฅ ๋ฒ ์ด์ค์บ ํ์ ๋ ๋ฒ์งธ ์ฃผ์ ๋ ํ์ํ ๊ฒ๋ง ์์ฒญํ๊ธฐ์ด๋ค. ๊ฐ๋จํ๊ฒ ์๊ฐํด์ ๋น์ฅ ํ์ ์๋ ๋ชจ๋์ ๋ถ๋ฌ์ค์ง ์๋ค๋ ๊ฒ์ด๋ค.
์ด์ ๊ด๋ จํ์ฌ ๊ตฌ์ฒด์ ์ธ ์๊ตฌ์ฌํญ์ ๋ค์๊ณผ ๊ฐ๋ค.
- Home ํ์ด์ง์์ ๋ถ๋ฌ์ค๋ ์คํฌ๋ฆฝํธ ๋ฆฌ์์ค์ gif ๊ฒ์์ ์ํ giphy ๋ชจ๋์ด ํฌํจ๋์ด ์์ง ์์์ผ ํ๋ค.
- react-icons ํจํค์ง์์ ์ค์ ๋ก ์ฌ์ฉํ๋ ์์ด์ฝ ๋ฆฌ์์ค๋ง ๋น๋ ๊ฒฐ๊ณผ์ ํฌํจ๋์ด์ผ ํ๋ค.
์ด๋ฒ ์ฑํฐ์์๋ ์ด๋ฌํ ์๊ตฌ์ฌํญ์ ๋ง์กฑํ๊ธฐ ์ํด ์์ ํ ๊ณผ์ ์ ๋ค๋ฃฌ๋ค.
1. ์ค๋น๊ณผ์
๋น๋๊ฐ ๋์์ ๋ ๋ฒ๋ค๋ ํ์ผ์ด ์ด๋ค ๋ชจ์ต์ธ์ง ๋จผ์ ํ์ธํด ๋ณด์. ๋์ผ๋ก ๋ณด๋ฉด์ ๋น๊ตํ๋ ๊ฒ์ด ์ค์ํ๋ฐ ์ด๋ฅผ ๋์์ฃผ๋ ๊ฒ์ด Webpack Bundle Analyzer๋ผ๋ ๋๊ตฌ(ํ๋ฌ๊ทธ์ธ)์ด๋ค. ์ด๋ฅผ ํตํด ๋ฒ๋ค๋ ํ์ผ์ ์ด๋ค ๋ชจ๋์ด ์ผ๋ง๋ ํฌ๊ธฐ๋ฅผ ์ฐจ์งํ๋์ง ์ ์ ์๋ค.
1-1. Webpack Bundle Analyzer ์ค์น
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
1-2. Webpack Bundle Analyzer ์ ์ฉ
Webpack Bundle Analyzer์ ์ ์ฉํ๊ธฐ ์ํด webpack์ ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์ถ๊ฐํ์.
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
// ...
plugins: [
// ...
new BundleAnalyzerPlugin(), // -> BundleAnalyzerPlugin ํ๋ก๊ทธ์ธ ์ถ๊ฐ
],
//...
};
1-3. Webpack Bundle Analyzer ์คํ ๋ฐ ๊ฒฐ๊ณผ
์ดํ ์๋ฒ๋ฅผ ์ฌ์คํํ๋ฉด ๋ค์๊ณผ ๊ฐ์ด bundle.js์ ์ด๋ค ๋ชจ๋์ด ์ผ๋ง๋งํผ ์ฐจ์งํ๊ณ ์๋์ง ๋์ผ๋ก ํ์ธํ ์ ์๋ค.
์ฐธ๊ณ ๋ก devํ๊ฒฝ์ด๋ค.
2. React.lazy ์ ์ฉํ์ฌ ํ์ด์ง์ ํ์ํ ๋ชจ๋๋ง ๋ถ๋ฌ์ค๊ธฐ
ํ์ฌ ๋ฉ์ธ ํ์ด์ง์ ์ ์์ ํ๊ฒ ๋๋ฉด bundle.js ํ๋๋ง ๋ถ๋ฌ์จ๋ค. ์ฌ๊ธฐ์๋ ๋ฉ์ธ ํ์ด์ง์์ ์ฌ์ฉํ๋ ์๋ ๋ชจ๋๋ ํฌํจ๋์ด ์๋ค. ๋๋ฌธ์ ์ฌ์ฉํ์ง ์๋ ๋ชจ๋๋ก ์ธํด ์ฑ๋ฅ๋ง ๋ฎ์์ง๋ค.
์ด๋ฅผ React.lazy์ ์ฌ์ฉํ์ฌ ๊ฐ ํ์ด์ง์์ ํ์ํ ๋ชจ๋๋ง ๋ถ๋ฌ์ฌ ์ ์๋๋ก ํด๋ณด์.
2-1. React.lazy์ด๋?
React.lazy๋ฅผ ์ ์ฉํ๋ฉด ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง ๋ ๋๊น์ง ์ปดํฌ๋ํธ์ ์ฝ๋์ ๋ก๋ฉ์ ์ง์ฐ์ํฌ ์ ์๋ค. ์ฆ, ์ด๋ ํ์ด์ง์์ ์ฉ๋์ด ํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ค๊ณ ํ์ ๋, ์ด๋ฅผ ๋ฏธ๋ฆฌ ๋ถ๋ฌ์ค๋ ๊ฒ์ด ์๋๋ผ ํด๋น ํ์ด์ง๊ฐ ๋ก๋๋ ๋ ๋ถ๋ฌ์ค๊ฒ ๋๋ค.
const App = () => {
return (
<Router>
<NavBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/search" element={<Search />} />
</Routes>
<Footer />
</Router>
);
};
์ ์ฝ๋๋ฅผ ์ดํด๋ณด๋ฉด ์ด ์๋น์ค์์๋ ๋ ๊ฐ์ ํ์ด์ง๋ก ๋ผ์ฐํ ์ ํ ์ ์๋ค. ํ๋๋ /์ด๊ณ ๋ค๋ฅธ ํ๋๋ /search์ด๋ค. ์ด๋, /search ํ์ด์ง๊ฐ ๋ก๋๋๋ค๋ฉด Search ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง์ด ๋๋๋ฐ Search ์ปดํฌ๋ํธ์๋ Home ์ปดํฌ๋ํธ์์ ์ฌ์ฉ๋์ง ์๊ณ ์ฉ๋์ด ํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์๋ค๊ณ ์๊ฐํด ๋ณด์. ์ฌ์ฉ์๊ฐ /์ผ๋ก ์ ์ํ์ ๋, ๋น์ฅ ์ฌ์ฉํ์ง๋ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋๋ฌธ์ ๋ ๋๋ง์ด ์๊ฐ์ด ๋์ด๋๊ฒ ๋๋ค. ์ด๋ฅผ ํด๊ฒฐํ ์ ์๋ ๊ฒ์ด ๋ฐ๋ก React.lazy์ด๋ค.
2-2. React.lazy ์ ์ฉํ๊ธฐ
์ผ๋ฐ์ ์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ import๋ฅผ ํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ๋ค.
import Search from "./pages/Search/Search";
์ด๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ์์ ํ์. ์ฌ์ฉ์๊ฐ /search๋ก ๋ฐ๋ก ์ ๊ทผํ ์ ์๊ธฐ ๋๋ฌธ์ Home ์ปดํฌ๋ํธ์๋ React.lazy๋ฅผ ์ ์ฉํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ฃผ์ํด์ผ ํ ์ ์ React.lazy๋ฅผ ์ ์ฉํ๋ฉด ์ ์ฉํ ๋ถ๋ถ์ React.Suspense๋ก ๊ฐ์ธ์ฃผ์ด์ผ ํ๋ค๋ ๊ฒ์ด๋ค.
import { Suspense, lazy } from "react";
const Home = lazy(() => import("./pages/Home/Home"));
const Search = lazy(() => import("./pages/Search/Search"));
const App = () => {
return (
<Router>
<Suspense fallback={<div>๋ก๋ฉ์ค...</div>}>
<NavBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/search" element={<Search />} />
</Routes>
<Footer />
</Suspense>
</Router>
);
};
์ถ๊ฐ์ ์ผ๋ก webpack์ output์ filename์ bundle.[contenthash].js๋ก ์์ ํ์๋ค.
2-3. ๊ฒฐ๊ณผ
๊ธฐ์กด์ ํ๋์๋ bundle.js๊ฐ 4๊ฐ๋ก ๋๋์ด์ง ๋ชจ์ต์ ํ์ธํ ์ ์๋ค.
๋ํ /์์๋ ํ์ํ ๋ชจ๋๋ง ๋ถ๋ฌ์ฌ ์ ์๊ฒ ๋์๋ค.
๋ฏธ์ ์๊ตฌ์ฌํญ์ธ Home ํ์ด์ง์์ ๋ถ๋ฌ์ค๋ ์คํฌ๋ฆฝํธ ๋ฆฌ์์ค์ gif ๊ฒ์์ ์ํ giphy ๋ชจ๋์ด ํฌํจ๋์ด ์์ง ์์์ผ ํ๋ค. ๋ ์ถฉ์กฑ๋์๋ค. ๋ค์ ์ฌ์ง์ ๋ณด๋ฉด giphy๋ชจ๋์ bundle.29e15af867de2689b6ab.js ๋ชจ๋์ด์ง๋ง /์์์ ๋คํธ์ํฌ๋ฅผ ์ดํด๋ณด๋ฉด bundle.29e15af867de2689b6ab.js ๋ชจ๋์ ์๋ค. ์ฆ, ๋ถ๋ฌ์ค์ง ์์๋ค.
3. ์ฌ์ฉํ๋ ์์ด์ฝ๋ง ๋ถ๋ฌ์ค๊ธฐ
3-1. ์ผ๋ง๋ ์ฌ์ฉํ๊ณ ์๋?
๋ฒ ์ด์ค ์ฑ๋ฅ ์บ ํ ํ๋ก์ ํธ์์๋ react-icons๋ฅผ ์ฌ์ฉํ๋ค. ์ฐ์ ํ๋ก์ ํธ์์ ์ผ๋ง๋ ์ฌ์ฉํ๊ณ ์๋์ง ์ดํด๋ณด์. vscode์ ๊ฒ์ ๊ธฐ๋ฅ์ ํ์ฉํ์ฌ react-icons๋ฅผ ์ฐพ์ผ๋ฉด ๋ค์๊ณผ ๊ฐ์ด 3๊ฐ์ ์์ด์ฝ์ ๋ถ๋ฌ์ ์ฌ์ฉํ๊ณ ์๋ค.
๊ทธ๋ ๋ค๋ฉด ์ฌ์ฉํ๋ ๊ฒ๋ง ์ค์ ๋ก ๋ถ๋ฌ์ค๊ณ ์ฌ์ฉํ๊ณ ์์ง ์๋ ๊ฒ๋ค์ ๋ถ๋ฌ์ค์ง ์๊ณ ์์๊น? ์ด๋ฅผ Webpack Bundle Analyzer๋ก ํ์ธํด ๋ณด์.
๋ค์ ์ฌ์ง์ develoment ๋ชจ๋๋ก ์๋ฒ๋ฅผ ์คํ์์ผฐ์ ๋ ๋ฒ๋ค๋ ๋ชจ๋์ ๋ํ๋ธ Webpack Bundle Analyzer์ด๋ค.
์ด์ํ ์ ์ ํ์ธํ ์ ์๋ค. ๋ถ๋ช ์์ด์ฝ 3๊ฐ๋ง ์ฌ์ฉํ๊ณ ์๋๋ฐ, react-icons ๋ชจ๋์ ํฌ๊ธฐ๋ฅผ ์ดํด๋ณด๋ฉด 600KB๊ฐ ํ์ฉ ๋๋๋ค. ๋ํ ๋์ผ๋ก๋ง ๋ด๋ ์์ฒญ๋ ํฌ๊ธฐ๋ฅผ ๊ฐ์ง๊ณ ์์์ ํ์ธํ ์ ์๋ค. ์ด๋ป๊ฒ ๊ฐ์ ํ ์ ์์๊น?
3-2. @react-icons/all-files ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ
๊ฒฐ๋ก ๋ถํฐ ๋งํ์๋ฉด ๋๋ @react-icons/all-files๋ฅผ ์ฌ์ฉํ์ง ์์๋ค. ๊ทธ ์ด์ ๋ ์๋์์ ์ค๋ช ํ๋ค.
์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ปจ์ ์ ์์ ์ด ๋ถ๋ฌ์จ ์์ด์ฝ๋ง ํฌํจํ์ฌ imports๋ฅผ ํ๋ค๋ ๊ฒ์ด๋ค. ๋ ์์ธํ ์ค๋ช ์ ์๋์ docs๋ฅผ ์ฐธ๊ณ .
3-3. Tree Shaking
Tree Shaking์ด๋ ์ฌ์ฉํ์ง ์๋ ์ฝ๋๋ฅผ ์ ๊ฑฐํ๊ธฐ ์ํด JavaScript ์ปจํ ์คํธ์์ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋๋ ์ฉ์ด์ด๋ค. webpack 4 ์ดํ๋ถํฐ package.json์ "sideEffects" ํ๋กํผํฐ๋ฅผ ํตํด ์ปดํ์ผ๋ฌ์ ํํธ๋ฅผ ์ ๊ณตํ๋ ๋ฐฉ์์ผ๋ก ์ปดํ์ผ๋ฌ์ ํํธ๋ฅผ ์ ๊ณตํ๋ ๋ฐฉ์์ผ๋ก ๊ธฐ๋ฅ์ ํ์ฅํ๋ค. ๋ค์์ ์ด์ ๋ํ Webpack ๋ฌธ์์ด๋ค.
3-4. Tree Shaking ์ ์ฉ... ๊ทธ๋ฆฌ๊ณ ์คํจ? ์ฑ๊ณต?
์ฌ์ฉํ๊ณ ์๋ react-icons์ ์์ด์ฝ๋ง ๋ถ๋ฌ์ค๊ธฐ ์ํด ์ฌ๋ฌ ์๋๋ฅผ ํด๋ณด์๋ค. ํ์ง๋ง ์ด๋ฅผ ํด๊ฒฐํ๊ณ ์ ์๋ก์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ค์นํ๊ธด ์ซ์๋ค. ์ฌ์ฉํ๊ณ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ฒ๋ฆฌ๊ณ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ค์นํ๊ฒ ๋๋ค๋ฉด ์์ผ๋ก ๊ฐ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋๋ผ๋ ํด๊ฒฐ์ฑ ์ ์ฐพ์ง ์๊ณ ๋์์ฑ ๋ง ๋จผ์ ์ฐพ๊ฒ ๋์ง ์์๊น? ์ถ๋ค. ๋ฌผ๋ก ๋น ๋ฅด๊ฒ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์ ๋์์ฑ ์ด ๊ฐ์ฅ ์ข์ ๋ฐฉ๋ฒ์ด ๋ ์ ์์ง๋ง ๊ณต๋ถํ๊ณ ์ ์ฅ์์ ์ฌ๋ฌ ์๋๋ฅผ ํด๋ณด๊ณ ์ถ์๋ค.
์ฐ์ Tree Shaking์ CommonJS ๋ชจ๋์ด ์๋ ES Module ๋ฐฉ์์์ ๋์ํ๋ค. ๋๋ฌธ์ ๋น๋๋๋ ๊ณผ์ ์์ ES Module๋ก ๋ณํ๋์ง ์๋๋ก ํด์ผ ํ๋ค. ์ด๋ฅผ ์ด๋ป๊ฒ ํ ์ ์์๊น? ์ฑ๋ฅ ๋ฒ ์ด์ค ์บ ํ์์๋ package.json์ bable ํ๋กํผํฐ๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ์์ ํ๋ฉด ๋๋ค.
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react",
{
"modules": false
}
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
modules์ false๋ก ํจ์ผ๋ก์จ ES Moldule์ด ๋น๋๊ฐ ๋ ํ์๋ ๋ณด์กด๋๊ฒ ๋๋ค.(๋ค์ ๊ธ ์ฐธ๊ณ )
๊ทธ ์ดํ์ package.json์ "sideEffects" ํ๋กํผํฐ๋ฅผ ์ถ๊ฐํ๋ค. ์ด๋ ๊ฐ์ false์ด๋ค.
{
// ...
"sideEffects": false
}
sideEffects๋ ๋ถ์ํจ๊ณผ๋ก ์ด๋ค ๋ชจ๋ ๋ค๋ฅธ ๋ชจ๋์ ์ํฅ์ ์ฃผ์ด ์ถ๊ฐ์ ์ธ ์ํฅ์ ๋ฏธ์น๋ค๋ ๊ฒ์ด๋ค. ํ์ง๋ง ์ ๊ฑฐํ๊ณ ์ถ์ ์์ด์ฝ์ ๋ ๋ฆฝ์ ์ด๋ฏ๋ก ๋ถ์ํจ๊ณผ๊ฐ ์๋ค. ์ฆ, false๋ก ํจ์ผ๋ก์จ ์ฌ์ฉํ์ง ์๋ export๋ ์ ๊ฑฐํด๋ ๊ด์ฐฎ๋ค๋ ๊ฒ์ webpack์๊ฒ ์๋ฆฌ๋ ๊ฒ์ด๋ค. ๋ค์์ ์ค์ react-icons/ai์ ๋ด๋ถ์ด๋ค.
์ ๋ง ์๋ ์์ด ์์ด์ฝ๋ค์ด ๋ง๋ค.(์ฌ์ง์ด ์ด๋ฐ ํด๋๋ค์ด ์ฌ๋ฌ ๊ฐ...) ์ฌ์ฉํ์ง ์๋ ๊ฒ๋ค๋ ๋ชจ๋ ํ์ํ ๊น? ๊น๋ํ ์ ๊ฑฐํ์ฌ ์ฌ์ฉํ๋ ๊ฒ๋ง ๊ฐ์ ธ์ค๋ ๊ฒ์ด ์ฌ๋ฌ๋ชจ๋ก ์ข๋ค.
์์ ๊ฐ์ด ์ค์ ์ ๋ง๋ฌด๋ฆฌํ๊ณ ๋ค์ dev serve๋ฅผ ์คํ์์ผฐ๋ค. ํ์ง๋ง ๊ฒฐ๊ณผ๋ฅผ ์ด์ ๊ณผ ๋์ผํ์๋ค. ์ฌ๋ฌ ๊ธฐ์ ๋ธ๋ก๊ธ ๊ธ๋ ๋ณด๊ณ github์์ ์ธ๊ตญ์ธ ๊ฐ๋ฐ์๋ค์ด ์๋ก ํ ๋ก ํ๋ ๊ฒ๋ ๋ณด์์ง๋ง ์ด๋ป๊ฒ dev serve์์ ์ฌ์ฉํ์ง ์๋ react-icons๋ฅผ ์ ๊ฑฐํ๋์ง๋ ์์ง ๊ฐ์ด ์กํ์ง ์์๋ค.
๊ทธ๋ฌ๋ค๊ฐ ๋ฌธ๋ ์ ๊ณ์ dev serve์์๋ง ํ์ธ์ ํ๋ ๊ฑฐ์ง?๋ผ๋ ์๋ฌธ์ด ๋ค์๊ณ production mode์์ build๋ฅผ ํ์๋๋ ๋ค์๊ณผ ๊ฐ์ด react-icons์ ํฌ๊ธฐ๊ฐ ์์ฒญ๋๊ฒ ์ค์ด๋ ๊ฒ์ ํ์ธํ ์ ์์๋ค.(๋๋ฌด ์์ผ๋ ํ๋ํด์ ๋ณด์ธ์.) ์ฌ์ง์ด ๋ ์ฌ๋ฐ๋ ์ ์ ์์ ์ถ๊ฐํ๋ ์ค์ ๋ค์ ๋ชจ๋ ์ง์ฐ๊ณ ํ์ธ์ ํด๋ ๊ฐ์ ๊ฒฐ๊ณผ๋ผ๋ ๊ฒ์ด๋ค. ์๋ง ์ด๋ webpack 4 ์ดํ๋ถํฐ production mode์์๋ ์ต์ ํ๋ฅผ ๊ธฐ๋ณธ์ ์ผ๋ก ํ๋ ๊ฒ๊ณผ ์ฐ๊ด์ด ์์ด ๋ณด์ธ๋ค.
๊ทธ๋ฆฌ๊ณ ์ด๋ฏธ react-icons์์ ๊ฐ ์์ด์ฝ ํด๋๋ง๋ค package.json์์ sideEffects๋ฅผ false๋ก ํด๋๊ณ ์๋ค. ์ด๋ ๊ด๋ จ์ด ์์ด ๋ณด์ธ๋ค.
3-5. react-icons vs @react-icons/all-files
react icons tree shaking์ ํ๊ณ ์ ์ฌ๋ฌ ๋ ํผ๋ฐ์ค๋ฅผ ์ฐพ๋ ๋์ค, react-icons ์์ฒด์์ sideEffects๋ฅผ ์ธ์ ์ถ๊ฐํ๋์ง๊ฐ ๊ถ๊ธํด์ก๋ค. ์ค์ ๋ก ์ฐพ์๋ณธ ๊ฒฐ๊ณผ sideEffects๋ง ์ถ๊ฐํ ๊ฒ์ด ์๋๋ผ react-icons, @react-icons/all-files๋ฅผ ๋๋๋ฉด์ ์์ฐ์ค๋ฝ๊ฒ package.json์ด ์์ฑ๋์๊ณ ์ด๊ณณ์ sideEffects๋ ํฌํจ๋ ์ฌ์ค์ ์ ์ ์์๋ค. ๋ค์์ ์ด์ ๋ํ react-icons์ PR์ด๋ค.
๋ํ ๋ ์๊ฒ ๋ ์ ์ ์ผ๋จ... ์ฒ์์ @react-icons/all-files ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์ ์ด๋ฅผ ์๋กญ๊ฒ ์ค์น๋ฅผ ํด์ผ ํด์ react-icons์ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ ์ค ์์๋๋ฐ ๊ทธ๊ฒ์ด ์๋๋ผ ์๋ก ๋ค๋ฅธ ์ฐจ์ด์ ์ ๊ฐ์ง ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ ๊ฒ์ด๋ค. ๋ง์ด ์กฐ๊ธ ์ด์ํ๋ฐ, ์ด ๋์ ์ฐจ์ด๋ ๋ค์๊ณผ ๊ฐ๋ค.
1. react-icons: ๊ธฐ๋ณธ์ ์ธ package๋ก ๋ง์ ์์ด์ฝ๋ค์ด ํ๋์ ํ์ผ์ ์กด์ฌํ๋ค.
2. @react-icons/all-files: ์ต์ ํ์ ๋ฌธ์ ๊ฐ ์์ ๋ ์ฌ์ฉํ๋ package๋ก ํ ํ์ผ์ ํ๋์ ์์ด์ฝ๋ง ์กด์ฌํ๋ค. ํ์ง๋ง ํ์ผ์ด ๊ทธ๋งํผ ๋ง๊ธฐ ๋๋ฌธ์ ์ค์นํ๋ ๋ฐ ์ค๋ ์๊ฐ์ด ๊ฑธ๋ฆฐ๋ค.
...
์๋ฌดํผ ๊ฒฐ๋ก ์ production mode๋ก build๋ฅผ ํ๊ฒ ๋๋ค๋ฉด ์์์ ์ ์ฌ์ฉํ์ง ์๋ ์์ด์ฝ์ ์ ๊ฑฐ๋๊ธฐ ๋๋ฌธ์ ๋ณ๋ค๋ฅธ ์์ ์ ํ์ง ์์๋ ๋๋ค๋ ๊ฒ์ด๋ค.
'๐ ์ฐ์ํํ ํฌ์ฝ์ค > Level4' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๋ ๋ฒจ4 ํ๋ก ํธ์๋ ์ฑ๋ฅ ๋ฒ ์ด์ค์บ ํ 1 - ์์ฒญ ํฌ๊ธฐ ์ค์ด๊ธฐ (2) | 2023.10.06 |
---|