{"id":718,"date":"2026-05-22T02:00:29","date_gmt":"2026-05-21T17:00:29","guid":{"rendered":"https:\/\/blog.anchors-biz.com\/?p=718"},"modified":"2026-06-04T16:04:40","modified_gmt":"2026-06-04T07:04:40","slug":"%ec%99%9c-%eb%8b%a4%eb%93%a4-cra-%eb%8c%80%ec%8b%a0-vite%eb%a5%bc-%ec%93%b8%ea%b9%8c","status":"publish","type":"post","link":"https:\/\/blog.anchors-biz.com\/?p=718","title":{"rendered":"\uc65c \ub2e4\ub4e4 CRA \ub300\uc2e0 Vite\ub97c \uc4f8\uae4c?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"932\" height=\"794\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2026\/05\/image-1.png\" alt=\"\" class=\"wp-image-724\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2026\/05\/image-1.png 932w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2026\/05\/image-1-300x256.png 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2026\/05\/image-1-768x654.png 768w\" sizes=\"(max-width: 932px) 100vw, 932px\" \/><\/figure>\n\n\n\n<p>React\ub97c \ucc98\uc74c \ubc30\uc6b8 \ub54c \uc6b0\ub9ac\ub294 \ubcf4\ud1b5 <code>npx create-react-app my-app<\/code> \ud55c \uc904\ub85c \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud569\ub2c8\ub2e4. \uadf8\ub7f0\ub370 \uc694\uc998 React \uc0dd\ud0dc\uacc4\uc758 \ubd84\uc704\uae30\ub294 \ud655\uc2e4\ud788 \ub2ec\ub77c\uc84c\uc2b5\ub2c8\ub2e4. \ub2e4\ub4e4 &#8220;\uc774\uc81c CRA \ub9d0\uace0 Vite \uc4f0\uc138\uc694&#8221;\ub77c\uace0 \ub9d0\ud558\uc8e0.<\/p>\n\n\n\n<p>\uadf8\ub7ec\ub2e4 \ubcf4\uba74 \uc790\uc5f0\uc2a4\ub7fd\uac8c \uc774\ub7f0 \uc9c8\ubb38\uc774 \ub5a0\uc624\ub985\ub2c8\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote has-tertiary-background-color has-background\"><p>\uc65c \uc694\uc998\uc740 CRA\uac00 \uc544\ub2c8\ub77c Vite\uc77c\uae4c? \uadf8\ub9ac\uace0 CRA, Vite, Webpack, Babel\uc740 \uac01\uac01 \ubb34\uc2a8 \uc5ed\ud560\uc744 \ud560\uae4c?<\/p><\/blockquote>\n\n\n\n<p>\uc0ac\uc2e4 \uc774 \ub450 \uc9c8\ubb38\uc740 \uc5f0\uacb0\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. <strong>\uc65c Vite\ub85c \ub118\uc5b4\uac00\ub294\uc9c0\ub97c \uc81c\ub300\ub85c \uc774\ud574\ud558\ub824\uba74, \uadf8 \uc548\uc5d0\uc11c \uc77c\ud558\ub294 Webpack\uacfc Babel\ubd80\ud130 \uc54c\uc544\uc57c \ud558\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<\/strong> \uacb0\ub860\ubd80\ud130 \ub9d0\ud558\uba74 \uc774 \ub137\uc740 \uac19\uc740 \uc885\ub958\uc758 \ub3c4\uad6c\uac00 \uc544\ub2c8\ub77c, \uc11c\ub85c \ub2e4\ub978 \uce35(layer)\uc5d0\uc11c \uc77c\ud558\ub294 \ub3c4\uad6c\ub4e4\uc774\uc5d0\uc694.<\/p>\n\n\n\n<p>\uadf8\ub798\uc11c \uc774 \uae00\uc5d0\uc11c\ub294 Webpack\uacfc Babel\uc774 \uc5b4\ub5a4 \uc77c\uc744 \ud558\ub294\uc9c0 \uba3c\uc800 \uc9da\uace0, \uadf8 \uc704\uc5d0\uc11c CRA\uc640 Vite\uac00 \uc5b4\ub5bb\uac8c \ub2e4\ub978\uc9c0 \u2014 \uadf8\ub9ac\uace0 \uc65c CRA\ub294 \ub4a4\ub85c \ubc00\ub824\ub098\uac8c \ub418\uc5c8\ub294\uc9c0\ub97c \uc815\ub9ac\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2>1. \uba3c\uc800, \uc774 \ub3c4\uad6c\ub4e4\uc740 \ub808\ubca8\uc774 \ub2e4\ub985\ub2c8\ub2e4<\/h2>\n\n\n\n<p>Babel, Webpack, CRA, Vite \u2014 \ube44\uc2b7\ud574 \ubcf4\uc774\uc9c0\ub9cc \uc0ac\uc2e4 \ud558\ub294 \uc77c\uc774 \uc804\ud600 \ub2e4\ub985\ub2c8\ub2e4. \uc774 \ub137\uc740 \uac01\uc790 \ub2e4\ub978 \ub808\ubca8\uc5d0\uc11c \uc77c\ud558\ub294 \ub3c4\uad6c\ub4e4\uc774\uc5d0\uc694.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\ub3c4\uad6c<\/th><th>\ud55c \uc904 \uc815\uc758<\/th><th>\uc5ed\ud560\uc758 \uce35\uc704<\/th><\/tr><\/thead><tbody><tr><td><strong>Babel<\/strong><\/td><td>\ucd5c\uc2e0 JS\/JSX\ub97c \uad6c\ud615 \ube0c\ub77c\uc6b0\uc800\uc6a9 \ucf54\ub4dc\ub85c \ubcc0\ud658<\/td><td>\ubd80\ud488 (\ubcc0\ud658\uae30)<\/td><\/tr><tr><td><strong>Webpack<\/strong><\/td><td>\ud769\uc5b4\uc9c4 \ud30c\uc77c\ub4e4\uc744 \ud558\ub098\ub85c \ubb36\uc74c<\/td><td>\ubd80\ud488 (\ubc88\ub4e4\ub7ec)<\/td><\/tr><tr><td><strong>CRA<\/strong><\/td><td>Webpack + Babel\uc744 \ubbf8\ub9ac \uc138\ud305\ud574 \ub454 \uc2dc\uc791 \ud0a4\ud2b8<\/td><td>\uc644\uc131\ud488 (\ub3c4\uad6c \ubaa8\uc74c)<\/td><\/tr><tr><td><strong>Vite<\/strong><\/td><td>\ubc88\ub4e4\ub9c1 \ubc29\uc2dd\uc744 \uc0c8\ub85c \uc124\uacc4\ud55c \ube4c\ub4dc \ub3c4\uad6c<\/td><td>\uc644\uc131\ud488 (\ub3c4\uad6c \ubaa8\uc74c)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\uc989 <strong>Babel\uacfc Webpack\uc740 \uc5d4\uc9c4\u00b7\ubd80\ud488\uc774\uace0, CRA\uc640 Vite\ub294 \uadf8 \ubd80\ud488\uc744 \uc870\ub9bd\ud574 \ub9cc\ub4e0 \uc644\uc131\ub41c \uc790\ub3d9\ucc28\uc785\ub2c8\ub2e4.<\/strong> CRA\uc640 Vite\ub97c \ube44\uad50\ud558\ub824\uba74, \uadf8 \uc548\uc5d0 \ub4e4\uc5b4 \uc788\ub294 Babel\uacfc Webpack\ubd80\ud130 \uc774\ud574\ud574\uc57c \ud558\ub294 \uc774\uc720\uac00 \uc5ec\uae30 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote has-tertiary-background-color has-background\"><p><strong>\ud575\uc2ec:<\/strong> Babel\u00b7Webpack\uc740 \ubd80\ud488, CRA\u00b7Vite\ub294 \uadf8 \ubd80\ud488\uc73c\ub85c \ub9cc\ub4e0 \uc644\uc131\ud488\uc774\ub2e4.<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2>2. Babel \u2014 \ucd5c\uc2e0 \ubb38\ubc95\uc744 \ubc88\uc5ed\ud558\ub294 \ubc88\uc5ed\uae30<\/h2>\n\n\n\n<p>\uc6b0\ub9ac\uac00 React\uc5d0\uc11c \ub9e4\uc77c \uc4f0\ub294 \uc774\ub7f0 \ucf54\ub4dc\ub97c \ub5a0\uc62c\ub824 \ubd05\uc2dc\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code has-tertiary-background-color has-background\"><code>const App = () =&gt; {\n  return &lt;h1&gt;Hello!&lt;\/h1&gt;;\n};<\/code><\/pre>\n\n\n\n<p>\uc5ec\uae30\uc5d4 \ub450 \uac00\uc9c0 \ubb38\uc81c\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uccab\uc9f8, <code>&lt;h1&gt;<\/code> \uac19\uc740 <strong>JSX \ubb38\ubc95\uc740 \ube0c\ub77c\uc6b0\uc800\uac00 \ubaa8\ub985\ub2c8\ub2e4.<\/strong> \ub458\uc9f8, \ud654\uc0b4\ud45c \ud568\uc218\ub098 <code>const<\/code> \uac19\uc740 \ucd5c\uc2e0 \ubb38\ubc95\uc740 \uc544\uc8fc \uc624\ub798\ub41c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ub3d9\uc791\ud558\uc9c0 \uc54a\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>Babel\uc740 \uc774 \ucf54\ub4dc\ub97c \ube0c\ub77c\uc6b0\uc800\uac00 \uc54c\uc544\ub4e4\uc744 \uc218 \uc788\ub294 \ud3c9\ubc94\ud55c JavaScript\ub85c \ubc14\uafd4 \uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code has-tertiary-background-color has-background\"><code>\/\/ Babel\uc774 \ubcc0\ud658\ud55c \uacb0\uacfc (\uc2e4\uc81c \ucd9c\ub825\uc740 Babel \uc124\uc815\uc5d0 \ub530\ub77c \uc870\uae08\uc529 \ub2e4\ub985\ub2c8\ub2e4)\nvar App = function App() {\n  return React.createElement(\"h1\", null, \"Hello!\");\n};<\/code><\/pre>\n\n\n\n<p>React \uac1c\ubc1c\uc790\uc5d0\uac8c Babel\uc774 \uc911\uc694\ud55c \uc774\uc720\ub294 \ub2e8\uc21c\ud569\ub2c8\ub2e4. <strong>Babel\uc774 \uc5c6\uc73c\uba74 JSX \uc790\uccb4\uac00 \ub3d9\uc791\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<\/strong> \uc6b0\ub9ac\uac00 JSX\ub97c \uc790\uc720\ub86d\uac8c \uc4f8 \uc218 \uc788\ub294 \uac74 \ub4a4\uc5d0\uc11c Babel\uc774 \uc870\uc6a9\ud788 \ubc88\uc5ed\ud574 \uc8fc\uace0 \uc788\uae30 \ub54c\ubb38\uc774\uc5d0\uc694.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote has-tertiary-background-color has-background has-small-font-size\"><p><strong>\ud575\uc2ec:<\/strong> Babel\uc740 \ube0c\ub77c\uc6b0\uc800\uac00 \ubaa8\ub974\ub294 \ubb38\ubc95\uc744 \uc544\ub294 \ubb38\ubc95\uc73c\ub85c \ubc88\uc5ed\ud574 \uc8fc\ub294 \ubc88\uc5ed\uae30\ub2e4.<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2>3. Webpack \u2014 \ud769\uc5b4\uc9c4 \ud30c\uc77c\uc744 \ud558\ub098\ub85c \ubb36\ub294 \ubc88\ub4e4\ub7ec<\/h2>\n\n\n\n<p>React \ud504\ub85c\uc81d\ud2b8\ub294 \ucef4\ud3ec\ub10c\ud2b8, CSS, \uc774\ubbf8\uc9c0 \ub4f1 \uc218\uc2ed~\uc218\ubc31 \uac1c\uc758 \ud30c\uc77c\ub85c \ucabc\uac1c\uc838 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7f0\ub370 \ube0c\ub77c\uc6b0\uc800\uac00 \uc774 \ud30c\uc77c\uc744 \ud558\ub098\ud558\ub098 \ub530\ub85c \uc694\uccad\ud558\uba74 \ub290\ub9ac\uace0 \ube44\ud6a8\uc728\uc801\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p>Webpack\uc740 <code>import<\/code> \/ <code>export<\/code>\ub85c \uc5f0\uacb0\ub41c \ud30c\uc77c\ub4e4\uc744 \ub530\ub77c\uac00\uba70 \uc758\uc874\uc131 \uadf8\ub798\ud504\ub97c \ub9cc\ub4e4\uace0, \uadf8\uac83\uc744 \uba87 \uac1c\uc758 \ud30c\uc77c(\ubc88\ub4e4)\ub85c \ud569\uccd0 \uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code has-tertiary-background-color has-background\"><code>App.jsx    \u2500\u2510\nButton.jsx \u2500\u253c\u2500&gt;  &#091; Webpack ]  \u2500&gt;  bundle.js  (\ud558\ub098\ub85c \ud569\uccd0\uc9c4 \uacb0\uacfc)\nstyle.css  \u2500\u2518<\/code><\/pre>\n\n\n\n<p>\uc5ec\uae30\uc11c \uc911\uc694\ud55c \uc810\uc740 <strong>Webpack\uacfc Babel\uc740 \ud611\uc5c5 \uad00\uacc4<\/strong>\ub77c\ub294 \uac83\uc785\ub2c8\ub2e4. Webpack\uc774 \ud30c\uc77c\uc744 \ubb36\ub2e4\uac00 JSX \ud30c\uc77c\uc744 \ub9cc\ub098\uba74, \uadf8 \ud30c\uc77c\uc758 \ubc88\uc5ed\uc740 Babel\uc5d0\uac8c \ub118\uae41\ub2c8\ub2e4. Webpack\uc740 \ubb36\ub294 \uc77c\uc744, Babel\uc740 \ubc88\uc5ed\ud558\ub294 \uc77c\uc744 \ub9e1\ub294 \ubd84\uc5c5 \uad6c\uc870\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote has-tertiary-background-color has-background has-small-font-size\"><p><strong>\ud575\uc2ec:<\/strong> Webpack\uc740 \ud769\uc5b4\uc9c4 \ud30c\uc77c\uc744 \ubc88\ub4e4\ub85c \ubb36\uace0, \uadf8 \uacfc\uc815\uc5d0\uc11c Babel\uc5d0\uac8c \ubc88\uc5ed\uc744 \ub9e1\uae34\ub2e4.<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2>4. CRA \u2014 Webpack\uacfc Babel\uc744 \ubbf8\ub9ac \uc870\ub9bd\ud574 \ub454 \uc2dc\uc791 \ud0a4\ud2b8<\/h2>\n\n\n\n<p>\uc5ec\uae30\uae4c\uc9c0 \uc77d\uc73c\uba74 \uc774\ub7f0 \uc0dd\uac01\uc774 \ub4e4 \uac81\ub2c8\ub2e4. \uadf8\ub7fc React \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud560 \ub54c\ub9c8\ub2e4 Webpack\uacfc Babel\uc744 \ub9e4\ubc88 \uc9c1\uc811 \uc124\uc815\ud574\uc57c \ud560\uae4c\uc694?<\/p>\n\n\n\n<p>\uc608\uc804\uc5d0\ub294 \uadf8\ub798\uc57c \ud588\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uadf8 \uc124\uc815\uc740 React\ub97c \ub9c9 \uc2dc\uc791\ud55c \uc0ac\ub78c\uc5d0\uac8c \uaf64 \ub192\uc740 \uc9c4\uc785 \uc7a5\ubcbd\uc774\uc5c8\uc8e0 \u0aee(\u2022\u1dc4\u200e\u0847\u2022\u1dc5 )\u10d0 <strong>CRA(Create React App)\ub294 \ubc14\ub85c \uadf8 \ubc88\uac70\ub85c\uc6c0\uc744 \uc5c6\uc560\uc8fc\ub824\uace0 \ub4f1\uc7a5\ud588\uc2b5\ub2c8\ub2e4.<\/strong><\/p>\n\n\n\n<p>CRA\ub294 Webpack, Babel, \uac1c\ubc1c \uc11c\ubc84, \ud14c\uc2a4\ud2b8 \ud658\uacbd \uac19\uc740 \uc124\uc815\uc744 <strong>\ubbf8\ub9ac \ub2e4 \uc870\ub9bd\ud574\uc11c<\/strong> \uba85\ub839\uc5b4 \ud55c \uc904\ub85c \ub05d\ub0b4 \uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code has-tertiary-background-color has-background\"><code>npx create-react-app my-app<\/code><\/pre>\n\n\n\n<p>\uc7a5\uc810\uc740 \uba85\ud655\ud569\ub2c8\ub2e4. \uc124\uc815\uc744 \ubab0\ub77c\ub3c4 \ubc14\ub85c React \uac1c\ubc1c\uc744 \uc2dc\uc791\ud560 \uc218 \uc788\uc8e0. \ub300\uc2e0 \uadf8 \uc124\uc815\ub4e4\uc774 <code>react-scripts<\/code>\ub77c\ub294 \ud328\ud0a4\uc9c0 \uc548\uc5d0 \uc228\uaca8\uc838 \uc788\uc5b4\uc11c, \uc138\ubd80 \uc124\uc815\uc744 \ubc14\uafb8\ub824\uba74 \uae4c\ub2e4\ub86d\ub2e4\ub294 \ub2e8\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p><strong>\uc911\uc694:<\/strong> CRA\ub294 2025\ub144 \ucd08 React \uacf5\uc2dd \ud300\uc5d0 \uc758\ud574 \uad8c\uc7a5 \uc911\ub2e8\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uacf5\uc2dd \ubb38\uc11c\ub3c4 \uc774\uc81c \uc0c8 \ud504\ub85c\uc81d\ud2b8\uc5d0\ub294 Vite\ub098 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uad8c\ud558\ub2c8, \uc9c0\uae08 React\ub97c \uc2dc\uc791\ud55c\ub2e4\uba74 CRA\ubcf4\ub2e4 Vite\ub97c \ubcf4\uac8c \ub420 \uac00\ub2a5\uc131\uc774 \ud07d\ub2c8\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote has-tertiary-background-color has-background has-small-font-size\"><p><strong>\ud575\uc2ec:<\/strong> CRA\ub294 Webpack\u00b7Babel \uc124\uc815\uc744 \ub300\uc2e0 \ud574 \uc8fc\ub294 \uc2dc\uc791 \ud0a4\ud2b8\uc9c0\ub9cc, \uc9c0\uae08\uc740 \ub354 \uc774\uc0c1 \uad8c\uc7a5\ub418\uc9c0 \uc54a\ub294\ub2e4.<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2>5. Vite \u2014 \ubc88\ub4e4\ub9c1 \ubc29\uc2dd \uc790\uccb4\ub97c \ub2e4\uc2dc \uc0dd\uac01\ud55c \ube4c\ub4dc \ub3c4\uad6c<\/h2>\n\n\n\n<p>CRA\uac00 \ub290\ub9ac\ub2e4\ub294 \ubd88\ub9cc\uc740 \uc624\ub798\uc804\ubd80\ud130 \uc788\uc5c8\uc2b5\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\uac00 \ucee4\uc9c8\uc218\ub85d \uac1c\ubc1c \uc11c\ubc84\ub97c \ucf1c\ub294 \ub370 \ud55c\ucc38 \uac78\ub9ac\uace0, \ucf54\ub4dc\ub97c \ud55c \uc904 \uace0\uccd0\ub3c4 \ud654\uba74 \ubc18\uc601\uc774 \ub290\ub824\uc84c\uc8e0.<\/p>\n\n\n\n<p>\uc774\uc720\ub294 Webpack\uc758 \ub3d9\uc791 \ubc29\uc2dd\uc5d0 \uc788\uc2b5\ub2c8\ub2e4. Webpack\uc740 <strong>\uac1c\ubc1c \uc11c\ubc84\ub97c \ucf24 \ub54c \ubaa8\ub4e0 \ud30c\uc77c\uc744 \ubbf8\ub9ac \ubc88\ub4e4\ub85c \ubb36\uc2b5\ub2c8\ub2e4.<\/strong> \ud30c\uc77c\uc774 \ub9ce\uc744\uc218\ub85d \uc774 \uc791\uc5c5\uc774 \uc624\ub798 \uac78\ub9bd\ub2c8\ub2e4.<\/p>\n\n\n\n<p>Vite\ub294 \ubc1c\uc0c1\uc744 \ub4a4\uc9d1\uc5c8\uc2b5\ub2c8\ub2e4. \uc694\uc998 \ube0c\ub77c\uc6b0\uc800\ub294 <code>import<\/code> \ubb38\ubc95(ES Modules)\uc744 \uc9c1\uc811 \uc774\ud574\ud560 \uc218 \uc788\ub2e4\ub294 \uc810\uc744 \ud65c\uc6a9\ud574, <strong>\uac1c\ubc1c \uc911\uc5d0\ub294 \ud504\ub85c\uc81d\ud2b8 \ucf54\ub4dc\ub97c \ubbf8\ub9ac \ubb36\uc9c0 \uc54a\uace0 \ube0c\ub77c\uc6b0\uc800\uac00 \uc694\uccad\ud558\ub294 \ud30c\uc77c\ub9cc \uadf8\ub54c\uadf8\ub54c \ubcc0\ud658\ud574\uc11c \ubcf4\ub0b4 \uc90d\ub2c8\ub2e4.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-tertiary-background-color has-background\"><code>npm create vite@latest my-app -- --template react<\/code><\/pre>\n\n\n\n<p>\uadf8\ub798\uc11c \ud504\ub85c\uc81d\ud2b8\uac00 \uc544\ubb34\ub9ac \ucee4\ub3c4 \uac1c\ubc1c \uc11c\ubc84\uac00 \uac70\uc758 \uc989\uc2dc \ucf1c\uc9d1\ub2c8\ub2e4. (\ubc30\ud3ec\uc6a9 \ube4c\ub4dc\uc5d0\uc11c\ub294 Vite\ub3c4 Rollup\uc73c\ub85c \ubb36\uc9c0\ub9cc, \uac1c\ubc1c \uc911\uc5d0\ub294 \ubb36\uc9c0 \uc54a\ub294\ub2e4\ub294 \uc810\uc774 \ud575\uc2ec\uc785\ub2c8\ub2e4.)<\/p>\n\n\n\n<blockquote class=\"wp-block-quote has-tertiary-background-color has-background has-small-font-size\"><p><strong>\ucc38\uace0:<\/strong> Rollup\uc740 Webpack\uacfc \uac19\uc740 \ubc88\ub4e4\ub7ec(\ud30c\uc77c\uc744 \ubb36\ub294 \ub3c4\uad6c)\uc785\ub2c8\ub2e4. \uacb0\uacfc\ubb3c\uc774 \uae54\ub054\ud574 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc81c\uc791\uc5d0 \uac15\uc810\uc774 \uc788\uace0, Vite\ub294 \ubc30\ud3ec\uc6a9 \ube4c\ub4dc\uc5d0 \uc774 Rollup\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p><\/blockquote>\n\n\n\n<p>\uc18d\ub3c4 \ucc28\uc774\ub294 \ucc98\uc74c \ucf24 \ub54c\ub9cc\uc758 \uc774\uc57c\uae30\uac00 \uc544\ub2d9\ub2c8\ub2e4. \uac1c\ubc1c \uc911 \ucf54\ub4dc\ub97c \ud55c \uc904 \uace0\ucce4\uc744 \ub54c \uadf8 \ubcc0\uacbd\uc744 \ud654\uba74\uc5d0 \ubc18\uc601\ud558\ub294 \uae30\ub2a5\uc744 <strong>HMR(Hot Module Replacement)<\/strong> \uc774\ub77c\uace0 \ud558\ub294\ub370, \ud398\uc774\uc9c0 \uc804\uccb4\ub97c \uc0c8\ub85c\uace0\uce68\ud558\uc9c0 \uc54a\uace0 \ubc14\ub010 \ubd80\ubd84\ub9cc \uc989\uc2dc \uac08\uc544\ub07c\uc6c1\ub2c8\ub2e4. Vite\ub294 \uac1c\ubc1c \uc11c\ubc84\uac00 \ud30c\uc77c \ud558\ub098\ub9cc \ub2e4\uc2dc \ubcc0\ud658\ud558\uba74 \ub418\uae30 \ub54c\ubb38\uc5d0 \uc774 HMR\ub3c4 CRA\ubcf4\ub2e4 \ud6e8\uc52c \ube60\ub985\ub2c8\ub2e4. \uc6b0\ub9ac\uac00 &#8220;Vite\ub294 \ube60\ub974\ub2e4&#8221;\uace0 \ub290\ub07c\ub294 \uac74 \uacb0\uad6d <strong>\uac1c\ubc1c \uc11c\ubc84 \uc2dc\uc791 \uc18d\ub3c4 + HMR \ubc18\uc601 \uc18d\ub3c4<\/strong>, \uc774 \ub458\uc758 \uccb4\uac10 \ucc28\uc774\uc778 \uc148\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uac1c\ubc1c \uc11c\ubc84\uc640 HMR\uc774 \ub0b4\ubd80\uc5d0\uc11c \uc815\ud655\ud788 \uc5b4\ub5bb\uac8c \ub3d9\uc791\ud558\ub294\uc9c0\ub294 \uc774\uc57c\uae30\uac00 \uaf64 \uae38\uc5b4\uc11c, \ucd94\ud6c4\uc5d0 Vite\ub97c \ub354 \uae4a\uc774 \ub2e4\ub8e8\ub294 \uae00\uc5d0\uc11c \ub530\ub85c \uc815\ub9ac\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote has-tertiary-background-color has-background has-small-font-size\"><p><strong>\ud575\uc2ec:<\/strong> Vite\ub294 \uc790\uc8fc \ubc14\ub00c\ub294 \ud504\ub85c\uc81d\ud2b8 \ucf54\ub4dc\ub294 \ubbf8\ub9ac \ubb36\uc9c0 \uc54a\uace0, \uc798 \ubc14\ub00c\uc9c0 \uc54a\ub294 \uc758\uc874\uc131\ub9cc \ud55c \ubc88 \ubb36\uc5b4\ub450\ub294 \ubc29\uc2dd\uc73c\ub85c \uc18d\ub3c4 \ubb38\uc81c\ub97c \ud574\uacb0\ud588\ub2e4.<\/p><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote has-tertiary-background-color has-background has-small-font-size\"><p><strong>\ucc38\uace0:<\/strong> \uc758\uc874\uc131\uc774\ub780 react, lodash\ucc98\ub7fc \ub0b4\uac00 \uc9c1\uc811 \ub9cc\ub4e4\uc9c0 \uc54a\uace0 \uc678\ubd80\uc5d0\uc11c \uc124\uce58\ud574 \uac00\uc838\ub2e4 \uc4f0\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ub9d0\ud569\ub2c8\ub2e4. <code>package.json<\/code>\uc5d0 \uc801\ud788\uace0 <code>node_modules<\/code>\uc5d0 \uc124\uce58\ub429\ub2c8\ub2e4.<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2>6. CRA vs Vite \u2014 \ud55c\ub208\uc5d0 \ube44\uad50<\/h2>\n\n\n\n<p>\uc774\uc81c \uc9c4\uc9dc \ube44\uad50 \ub300\uc0c1\uc778 CRA\uc640 Vite\ub97c \uc815\ub9ac\ud574 \ubd05\uc2dc\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\ud56d\ubaa9<\/th><th>CRA<\/th><th>Vite<\/th><\/tr><\/thead><tbody><tr><td>\ub0b4\ubd80 \ubc88\ub4e4\ub7ec<\/td><td>Webpack<\/td><td>\uac1c\ubc1c: \ube0c\ub77c\uc6b0\uc800 ESM \/ \ubc30\ud3ec: Rollup<\/td><\/tr><tr><td>\ubcc0\ud658 \ub3c4\uad6c<\/td><td>Babel<\/td><td>esbuild (Go \uae30\ubc18, \ub9e4\uc6b0 \ube60\ub984)<\/td><\/tr><tr><td>\uac1c\ubc1c \uc11c\ubc84 \uc2dc\uc791 \uc18d\ub3c4<\/td><td>\ud504\ub85c\uc81d\ud2b8\uac00 \ud06c\uba74 \ub290\ub9bc<\/td><td>\uac70\uc758 \uc989\uc2dc<\/td><\/tr><tr><td>\ucf54\ub4dc \uc218\uc815 \ubc18\uc601(HMR)<\/td><td>\uc0c1\ub300\uc801\uc73c\ub85c \ub290\ub9bc<\/td><td>\ube60\ub984<\/td><\/tr><tr><td>\uc124\uc815 \ubcc0\uacbd<\/td><td>\uc5b4\ub824\uc6c0 (<code>eject<\/code> \ud544\uc694)<\/td><td><code>vite.config.js<\/code>\ub85c \uac04\ub2e8<\/td><\/tr><tr><td>\ud604\uc7ac \uc0c1\ud0dc<\/td><td>\uacf5\uc2dd \uad8c\uc7a5 \uc911\ub2e8<\/td><td>\uc0ac\uc2e4\uc0c1 \ud45c\uc900\uc73c\ub85c \uc790\ub9ac\uc7a1\uc74c<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\ud45c\uc5d0\uc11c \ubcf4\ub4ef CRA\uc640 Vite\uc758 \ucc28\uc774\ub294 \uacb0\uad6d <strong>\ub0b4\ubd80\uc5d0\uc11c \uc5b4\ub5a4 \ubd80\ud488\uc744 \uc5b4\ub5a4 \ubc29\uc2dd\uc73c\ub85c \uc4f0\ub290\ub0d0\uc758 \ucc28\uc774<\/strong>\uc785\ub2c8\ub2e4. CRA\ub294 Webpack+Babel\uc744 \uc804\ud1b5\uc801\uc778 \ubc29\uc2dd\uc73c\ub85c, Vite\ub294 esbuild\uc640 \ube0c\ub77c\uc6b0\uc800 ESM\uc744 \ud65c\uc6a9\ud55c \uc0c8\ub85c\uc6b4 \ubc29\uc2dd\uc73c\ub85c \uc870\ub9bd\ud588\uc744 \ubfd0\uc774\uc5d0\uc694.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote has-tertiary-background-color has-background has-small-font-size\"><p><strong>\ud575\uc2ec:<\/strong> CRA\uc640 Vite\uc758 \ucc28\uc774\ub294 \uc548\uc5d0 \ub4e0 \ubd80\ud488\uacfc \uc870\ub9bd \ubc29\uc2dd\uc758 \ucc28\uc774\ub2e4.<\/p><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote has-tertiary-background-color has-background has-small-font-size\"><p><strong>\ucc38\uace0:<\/strong> esbuild\ub294 Go\ub85c \ub9cc\ub4e0 \uc544\uc8fc \ube60\ub978 \ubcc0\ud658\u00b7\ubc88\ub4e4\ub9c1 \ub3c4\uad6c\ub85c, Babel\u00b7Webpack\uc774 \ud558\ub358 \uc77c\uc744 \ud6e8\uc52c \ube60\ub974\uac8c \ucc98\ub9ac\ud569\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 ESM\uc740 \ube0c\ub77c\uc6b0\uc800\uac00 <code>import<\/code>\u00b7<code>export<\/code> \ubb38\ubc95\uc744 \uc9c1\uc811 \uc774\ud574\ud558\ub294 \uae30\ub2a5\uc73c\ub85c, \ub355\ubd84\uc5d0 Vite\ub294 \uac1c\ubc1c \uc911 \ud30c\uc77c\uc744 \ubbf8\ub9ac \ub2e4 \ubb36\uc9c0 \uc54a\uc544\ub3c4 \ub429\ub2c8\ub2e4.<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2>7. \uadf8\ub798\uc11c React \uac1c\ubc1c\uc790\uac00 \uc54c\uc544\uc57c \ud560 \uac83<\/h2>\n\n\n\n<p>\uc5ec\uae30\uae4c\uc9c0\uc758 \ub0b4\uc6a9\uc744 \ub2e4\uc74c \ub124 \uac00\uc9c0 \uc9c8\ubb38\uc73c\ub85c \uc815\ub9ac\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p><strong>\ub0b4\uac00 \uc4f4 JSX\ub294 \uc65c \uadf8\ub0e5 \ub3d9\uc791\ud560\uae4c?<\/strong> \u2192 Babel(\ub610\ub294 esbuild)\uc774 \ubc88\uc5ed\ud574 \uc92c\uc73c\ub2c8\uae4c.<\/p>\n\n\n\n<p><strong>\ucef4\ud3ec\ub10c\ud2b8\ub97c \uc774\ub807\uac8c \ub9ce\uc774 \ub098\ub234\ub294\ub370 \ube0c\ub77c\uc6b0\uc800\ub294 \uc5b4\ub5bb\uac8c \ud55c \ubc88\uc5d0 \uc77d\uc744\uae4c?<\/strong> \u2192 Webpack(\ub610\ub294 Rollup) \uac19\uc740 \ubc88\ub4e4\ub7ec\uac00 \ubb36\uc5b4 \uc92c\uc73c\ub2c8\uae4c.<\/p>\n\n\n\n<p><strong>\uadf8\ub7fc \uc774\uac78 \ub9e4\ubc88 \uc9c1\uc811 \uc124\uc815\ud574\uc57c \ud560\uae4c?<\/strong> \u2192 \uc544\ub2c8\ub2e4. CRA\uc640 Vite\uac00 \ub300\uc2e0 \ud574 \uc900\ub2e4.<\/p>\n\n\n\n<p><strong>\uc0c8 \ud504\ub85c\uc81d\ud2b8\ub294 \ubb58\ub85c \uc2dc\uc791\ud560\uae4c?<\/strong> \u2192 \uc774\uc81c\ub294 CRA\uac00 \uc544\ub2c8\ub77c Vite.<\/p>\n\n\n\n<p>\uc774 \ud750\ub984\uc744 \uc54c\uc544\ub450\uba74 \uc5d0\ub7ec \uba54\uc2dc\uc9c0\uc5d0 <code>babel<\/code>\u00b7<code>webpack<\/code>\u00b7<code>vite<\/code> \uac19\uc740 \ub2e8\uc5b4\uac00 \ub5a0\ub3c4 \ub2f9\ud669\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \ubc88\uc5ed \ub2e8\uacc4\uc758 \ubb38\uc81c\uc778\uc9c0 \ubb36\ub294 \ub2e8\uacc4\uc758 \ubb38\uc81c\uc778\uc9c0, \uc5b4\ub514\ubd80\ud130 \ubd10\uc57c \ud560\uc9c0 \ubc29\ud5a5\uc774 \uc7a1\ud788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote has-tertiary-background-color has-background has-small-font-size\"><p><strong>\ud575\uc2ec:<\/strong> \ub3c4\uad6c\uc758 \uc5ed\ud560\uc744 \uad6c\ubd84\ud560 \uc904 \uc54c\uba74, \uc5d0\ub7ec\uac00 \ub098\ub3c4 \uc5b4\ub514\ub97c \ubd10\uc57c \ud560\uc9c0 \uc54c \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2>\ud55c \uc904 \uc694\uc57d<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote has-medium-font-size\"><p><strong>Babel\uc740 \ubc88\uc5ed\uae30, Webpack\uc740 \ubb36\ub294 \ub3c4\uad6c(\ubc88\ub4e4\ub7ec)\uc774\uace0, CRA\uc640 Vite\ub294 \uc774 \ub458\uc744 \ub300\uc2e0 \uc138\ud305\ud574 \uc8fc\ub294 \uc2dc\uc791 \ud0a4\ud2b8\ub2e4. CRA\ub294 Webpack\uc744 \uc804\ud1b5 \ubc29\uc2dd\uc73c\ub85c, Vite\ub294 \ub354 \ube60\ub978 \ubc29\uc2dd\uc73c\ub85c \uc870\ub9bd\ud588\ub2e4. \uadf8\ub9ac\uace0 \uc55e\uc73c\ub85c \uc0c8 \ud504\ub85c\uc81d\ud2b8\uc758 \ub2f5\uc740 \uc0ac\uc2e4\uc0c1 Vite \ud558\ub098\ub2e4.<\/strong><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>React\ub97c \ucc98\uc74c \ubc30\uc6b8 \ub54c \uc6b0\ub9ac\ub294 \ubcf4\ud1b5 npx create-react-app my-app \ud55c \uc904\ub85c \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud569\ub2c8\ub2e4. \uadf8\ub7f0\ub370 \uc694\uc998 React \uc0dd\ud0dc\uacc4\uc758 \ubd84\uc704\uae30\ub294 \ud655\uc2e4\ud788 \ub2ec\ub77c\uc84c\uc2b5\ub2c8\ub2e4. \ub2e4\ub4e4 &#8220;\uc774\uc81c CRA \ub9d0\uace0 Vite \uc4f0\uc138\uc694&#8221;\ub77c\uace0 \ub9d0\ud558\uc8e0. \uadf8\ub7ec\ub2e4 \ubcf4\uba74 \uc790\uc5f0\uc2a4\ub7fd\uac8c \uc774\ub7f0 \uc9c8\ubb38\uc774 \ub5a0\uc624\ub985\ub2c8\ub2e4. \uc65c \uc694\uc998\uc740 CRA\uac00 \uc544\ub2c8\ub77c Vite\uc77c\uae4c? \uadf8\ub9ac\uace0 CRA, Vite, Webpack, Babel\uc740 \uac01\uac01 \ubb34\uc2a8 \uc5ed\ud560\uc744 \ud560\uae4c? \uc0ac\uc2e4 \uc774 \ub450 \uc9c8\ubb38\uc740 \uc5f0\uacb0\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc65c Vite\ub85c [&hellip;]<\/p>\n","protected":false},"author":37,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false},"categories":[3],"tags":[60,59,74],"_links":{"self":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/718"}],"collection":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=718"}],"version-history":[{"count":5,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/718\/revisions"}],"predecessor-version":[{"id":725,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/718\/revisions\/725"}],"wp:attachment":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}