{"id":788,"date":"2026-05-18T23:03:04","date_gmt":"2026-05-18T15:03:04","guid":{"rendered":"https:\/\/junai.ai\/blog\/react-build-deploy-24\/"},"modified":"2026-05-19T20:26:32","modified_gmt":"2026-05-19T12:26:32","slug":"react-build-deploy-24","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/react-build-deploy-24\/","title":{"rendered":"React \ube4c\ub4dc\uc640 \ubc30\ud3ec (Ch.24)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 762 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root {--color-primary:#0891b2;--color-accent:#06b6d4;--color-bg:#f8fafc;--color-bg-card:#fff;--color-text:#0f172a;--color-text-muted:#64748b;--hero-start:#0f172a;--hero-end:#0891b2;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 24px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:80px 24px 60px;text-align:center;}\n.hero .eyebrow{display:inline-block;font-size:14px;color:#67e8f9;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;}\n.hero h1{font-size:36px;margin:0 0 16px;line-height:1.3;font-weight:800;}\n.hero p{color:#cffafe;font-size:18px;max-width:640px;margin:0 auto;line-height:1.6;}\n.hero img{width:100%;max-width:640px;height:auto;margin:32px auto 0;border-radius:10px;display:block;}\narticle{padding-top:48px;}\narticle h2{font-size:26px;margin:56px 0 20px;padding-left:14px;border-left:5px solid var(--color-accent);line-height:1.4;}\narticle h3{font-size:19px;margin:32px 0 12px;color:var(--color-primary);}\narticle p{margin:16px 0;}\narticle strong{color:var(--color-primary);font-weight:700;}\narticle code{background:#ecfeff;padding:2px 8px;border-radius:4px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;color:#0e7490;}\n.databox{background:#ecfeff;border-left:4px solid var(--color-accent);padding:16px 20px;margin:24px 0;border-radius:0 8px 8px 0;font-size:15.5px;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);padding:16px 20px;margin:24px 0;border-radius:8px;font-size:15.5px;}\n.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;}\ntable{width:100%;border-collapse:collapse;font-size:15px;background:var(--color-bg-card);}\nth,td{padding:11px 12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top;}\nth{background:#f1f5f9;font-weight:700;color:#0f172a;}\ntd:first-child,th:first-child{font-weight:700;}\n@media (max-width:560px){.tablewrap table,.tablewrap thead,.tablewrap tbody,.tablewrap tr,.tablewrap th,.tablewrap td{display:block;width:auto;}.tablewrap thead{display:none;}.tablewrap tr{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;}.tablewrap td{border:none;border-bottom:1px solid #f1f5f9;padding:9px 14px;}.tablewrap td:first-child{background:#f1f5f9;font-weight:800;font-size:15.5px;}.tablewrap td:last-child{border-bottom:none;}.tablewrap td[data-label]::before{content:attr(data-label) \" \u2014 \";font-weight:700;color:var(--color-primary);}}\n.code-block{background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:8px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.6;margin:20px 0;overflow-x:auto;white-space:pre;}\n.cta{background:linear-gradient(135deg,#0891b2 0%,#06b6d4 100%);color:#fff;padding:28px 24px;border-radius:12px;margin:48px 0 0;text-align:center;}\n.cta h3{color:#fff;margin:0 0 8px;font-size:20px;}\n.cta p{color:#cffafe;margin:0;font-size:15.5px;}\n.footer-nav{margin-top:32px;padding-top:20px;border-top:1px solid #e2e8f0;font-size:14px;color:var(--color-text-muted);}\n.footer-nav a{color:var(--color-primary);text-decoration:none;}\n@media (max-width:480px){.hero h1{font-size:26px;}.hero p{font-size:16px;}article h2{font-size:21px;}article h3{font-size:17px;}body{font-size:16px;}}\n<\/style>\n<section class=\"hero\">\n  <span class=\"eyebrow\">React \uad50\uc7ac \u00b7 \uc6b4\uc601 24\ud3b8<\/span>\n  <h1>React \ube4c\ub4dc\uc640 \ubc30\ud3ec<\/h1>\n  <p>localhost \uc5d0\uc11c \ubcf4\ub358 \uc571\uc744 \uc778\ud130\ub137\uc5d0. Vite build \ud55c \uc904 + Vercel\u00b7Cloudflare \ud55c \ud074\ub9ad.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-45.jpg\" alt=\"\ube4c\ub4dc \uacb0\uacfc\ubb3c\uc774 \ud074\ub77c\uc6b0\ub4dc\ub85c \ubc30\ud3ec\ub418\ub294 \ud30c\uc774\ud504\ub77c\uc778 \uc77c\ub7ec\uc2a4\ud2b8 \u2014 \ubc30\ud3ec \ucee8\uc149\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>23\ud3b8\uae4c\uc9c0 React \uc758 \ubaa8\ub4e0 \ud328\ud134\uc744 \ubc30\uc6e0\ub2e4. \uc774\uc81c \uc9c4\uc9dc \u2014 <strong>\uc778\ud130\ub137\uc5d0 \uc62c\ub9ac\uae30<\/strong>. \ub2e4\ud589\ud788 2026 \ub144 \ud604\uc7ac React \uc571 \ubc30\ud3ec\ub294 5\ub144 \uc804\uacfc \ube44\uad50\ud560 \uc218 \uc5c6\uc744 \ub9cc\ud07c \uc27d\ub2e4. Vite build + \uc815\uc801 \ud638\uc2a4\ud305 = 5\ubd84.<\/p>\n\n<p>\uc774\ubc88 24\ud3b8\uc740 production build \uc758 \uc791\ub3d9 \uc6d0\ub9ac + code splitting + \ud658\uacbd \ubcc0\uc218 \ubd84\ub9ac + 3 \ub300 \ud638\uc2a4\ud305 \uc635\uc158 (Vercel\u00b7Cloudflare Pages\u00b7\uc790\uccb4 nginx) \ube44\uad50 + \ubc15\uc900\uc131\ub2d8 \ud658\uacbd \uad8c\uc7a5.<\/p>\n\n<h2>1. vite build \u2014 \ubb34\uc5c7\uc774 \uc77c\uc5b4\ub098\ub098<\/h2>\n\n<div class=\"code-block\">npm run build\n# = vite build\n\n# \uacb0\uacfc\ndist\/\n\u251c\u2500\u2500 index.html              # \uc9c4\uc785\uc810, script src \uc790\ub3d9 \uc8fc\uc785\n\u251c\u2500\u2500 assets\/\n\u2502   \u251c\u2500\u2500 index-a4f3b2c1.js   # \uba54\uc778 \ubc88\ub4e4 (\ud574\uc2dc \ud3ec\ud568 \u2014 \uce90\uc2dc \ubb34\ud6a8\ud654)\n\u2502   \u251c\u2500\u2500 index-9e2c1d3f.css  # CSS\n\u2502   \u2514\u2500\u2500 react-7a8b9c0d.js   # vendor (react\u00b7react-dom \ubd84\ub9ac)\n\u2514\u2500\u2500 vite.svg<\/div>\n\n<p>4\uac00\uc9c0 \uc790\ub3d9 \u2014 \u2460 TypeScript \ucef4\ud30c\uc77c. \u2461 JSX \u2192 JS. \u2462 tree shaking (\uc0ac\uc6a9 \uc548 \ud55c \ucf54\ub4dc \uc81c\uac70). \u2463 minify + \ud574\uc2dc (\uce90\uc2dc busting). dist \ud3f4\ub354 \uadf8\ub300\ub85c \uc5b4\ub5a4 \uc815\uc801 \ud638\uc2a4\ud305\uc5d0 \uc62c\ub824\ub3c4 \ub3d9\uc791.<\/p>\n\n<div class=\"databox\">\n<strong>\ubc88\ub4e4 \ud06c\uae30 \ud655\uc778<\/strong> \u2014 <code>npm install -D rollup-plugin-visualizer<\/code> \ud6c4 vite.config \uc5d0 \ucd94\uac00. <code>npm run build<\/code> \uc2dc stats.html \uc0dd\uc131 \u2192 \uc5b4\ub5a4 \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 \uc5bc\ub9c8\ub098 \ucc28\uc9c0\ud558\ub294\uc9c0 \uc2dc\uac01\ud654. React 19 + react-dom \ub9cc \uc57d 45KB (gzip). 1MB \ub118\uc73c\uba74 \ubaa8\ub4c8 \uc904\uc5ec\uc57c.\n<\/div>\n\n<h2>2. Code splitting \u2014 lazy + Suspense<\/h2>\n\n<p>\ubaa8\ub4e0 \ucf54\ub4dc\ub97c \ud55c \ubc88\uc5d0 \ubc1b\uc73c\uba74 \uccab \ub85c\ub529\uc774 \ub290\ub9bc. <strong>\ub77c\uc6b0\ud2b8\ubcc4\ub85c \ubd84\ud560<\/strong>\uc774 \ud45c\uc900.<\/p>\n\n<div class=\"code-block\">\/\/ App.tsx\nimport { lazy, Suspense } from &#8216;react&#8217;;\nimport { Routes, Route } from &#8216;react-router-dom&#8217;;\n\nconst Dashboard = lazy(() =&gt; import(&#8216;.\/pages\/Dashboard&#8217;));\nconst Settings = lazy(() =&gt; import(&#8216;.\/pages\/Settings&#8217;));\nconst Report = lazy(() =&gt; import(&#8216;.\/pages\/Report&#8217;));\n\nfunction App() {\n  return (\n    &lt;Suspense fallback={&lt;Spinner \/&gt;}&gt;\n      &lt;Routes&gt;\n        &lt;Route path=&#8221;\/dashboard&#8221; element={&lt;Dashboard \/&gt;} \/&gt;\n        &lt;Route path=&#8221;\/settings&#8221; element={&lt;Settings \/&gt;} \/&gt;\n        &lt;Route path=&#8221;\/report&#8221; element={&lt;Report \/&gt;} \/&gt;\n      &lt;\/Routes&gt;\n    &lt;\/Suspense&gt;\n  );\n}<\/div>\n\n<p>\uc774\ub7ec\uba74 \uc0ac\uc6a9\uc790\uac00 <code>\/dashboard<\/code> \ubc29\ubb38 \uc2dc Dashboard \uccad\ud06c\ub9cc \ub85c\ub4dc. Settings\u00b7Report \ub294 \uac00\uc9c0 \uc54a\uc73c\uba74 \uc804\uc1a1 \uc548 \ub428. \uccab \ud398\uc774\uc9c0 \ub85c\ub4dc = \uba54\uc778 \uccad\ud06c + \ud604\uc7ac \ub77c\uc6b0\ud2b8 \uccad\ud06c 2\uac1c\ub9cc.<\/p>\n\n<h2>3. \ud658\uacbd \ubcc0\uc218 \u2014 VITE_ prefix \ud544\uc218<\/h2>\n\n<p>API \ubca0\uc774\uc2a4 URL\u00b7\ubd84\uc11d \ud0a4 \uac19\uc740 \uac12\uc744 \ucf54\ub4dc \uc548\uc5d0 \ubc15\uc9c0 \ub9d0\uace0 \ud658\uacbd \ubcc0\uc218\ub85c.<\/p>\n\n<div class=\"code-block\"># .env.local (git ignore)\nVITE_API_URL=https:\/\/api.example.com\nVITE_SENTRY_DSN=https:\/\/&#8230;@sentry.io\/&#8230;\n\n\/\/ \ucf54\ub4dc \uc548\uc5d0\uc11c \uc0ac\uc6a9\nconst apiUrl = import.meta.env.VITE_API_URL;<\/div>\n\n<div class=\"warnbox\">\n<strong>\uc911\uc694<\/strong> \u2014 <code>VITE_<\/code> prefix \uac00 \ubd99\uc740 \ubcc0\uc218\ub9cc \ud074\ub77c\uc774\uc5b8\ud2b8 \ubc88\ub4e4\uc5d0 \ud3ec\ud568. \uadf8\ub798\uc11c secret (DB \ube44\ubc00\ubc88\ud638\u00b7\uc11c\ubc84 API \ud0a4) \uc740 <strong>\uc808\ub300 VITE_ prefix \ub85c \ub450\uba74 \uc548 \ub428<\/strong>. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc5d0\uc11c \ub2e4 \ubcf4\uc778\ub2e4. \uc9c4\uc9dc secret \uc740 \uc11c\ubc84\uce21 (Next.js \ub77c\uba74 RSC, Vite SPA \ub77c\uba74 \ubcc4\ub3c4 API \uc11c\ubc84) \uc5d0\uc11c\ub9cc \uc0ac\uc6a9.\n<\/div>\n\n<h2>4. \ud638\uc2a4\ud305 3 \uc120\ud0dd<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>\uc635\uc158<\/th><th>\uc7a5\uc810<\/th><th>\uc801\ud569\ud55c \uacbd\uc6b0<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>Vercel<\/td><td data-label=\"\uc7a5\uc810\">git push \ub9cc\uc73c\ub85c \uc790\ub3d9 \ubc30\ud3ec\u00b7preview URL\u00b7Edge\u00b7\ubb34\ub8cc \ud2f0\uc5b4 \ub109\ub109<\/td><td data-label=\"\uc801\ud569\ud55c \uacbd\uc6b0\">Next.js \uba74 \uc0ac\uc2e4\uc0c1 \uccab \uc120\ud0dd<\/td><\/tr>\n<tr><td>Cloudflare Pages<\/td><td data-label=\"\uc7a5\uc810\">\ubb34\uc81c\ud55c bandwidth\u00b7Workers \ud1b5\ud569\u00b7\uc804 \uc138\uacc4 CDN\u00b7\ubb34\ub8cc \ud2f0\uc5b4 \ub354 \ud07c<\/td><td data-label=\"\uc801\ud569\ud55c \uacbd\uc6b0\">\uc815\uc801 SPA\u00b7\ud2b8\ub798\ud53d \ub9ce\uc740 \uc0ac\uc774\ud2b8\u00b7\ubc15\uc900\uc131\ub2d8 \ud68c\uc0ac stack \uc5d0 \uc788\uc74c<\/td><\/tr>\n<tr><td>\uc790\uccb4 Nginx (VPS)<\/td><td data-land=\"\uc7a5\uc810\">\uc644\uc804 \uc81c\uc5b4\u00b7\uae30\uc874 \uc778\ud504\ub77c \uc7ac\uc0ac\uc6a9\u00b7\ube44\uc6a9 \uc608\uce21 \uac00\ub2a5<\/td><td data-label=\"\uc801\ud569\ud55c \uacbd\uc6b0\">junai.ai \uac19\uc774 \uc774\ubbf8 nginx \uac00 \ub3c4\uba54\uc778 \uad00\ub9ac \uc911\uc778 \ud658\uacbd. dist\/ \ub97c \/var\/www\/ \uc5d0 \ubcf5\uc0ac + nginx try_files<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<h3>Vercel 5\ubd84 \ubc30\ud3ec<\/h3>\n\n<div class=\"code-block\">npm install -g vercel\nvercel              # GitHub \uc5f0\uacb0 \u2192 \uc790\ub3d9 \ube4c\ub4dc \u2192 URL \ubc1c\uae09\n# \uc774\ud6c4 git push origin main \ub9c8\ub2e4 \uc790\ub3d9 \uc7ac\ubc30\ud3ec<\/div>\n\n<h3>Cloudflare Pages<\/h3>\n\n<div class=\"code-block\">npm install -g wrangler\nwrangler pages deploy .\/dist &#8211;project-name=my-app\n# \ub610\ub294 GitHub \uc5f0\uacb0\ub85c \uc790\ub3d9\ud654<\/div>\n\n<h3>\uc790\uccb4 Nginx (\ubc15\uc900\uc131\ub2d8 \ud658\uacbd \ud328\ud134)<\/h3>\n\n<div class=\"code-block\">scp -r dist\/* user@server:\/var\/www\/my-app\/\n\n# \/etc\/nginx\/sites-available\/my-app\nserver {\n  server_name app.junai.ai;\n  root \/var\/www\/my-app;\n  index index.html;\n  location \/ {\n    try_files $uri $uri\/ \/index.html;  # SPA \ub77c\uc6b0\ud305 \u2014 \ubaa8\ub4e0 \uacbd\ub85c\ub97c index.html \ub85c\n  }\n}<\/div>\n\n<p>SPA \uc758 \ud575\uc2ec \u2014 <strong>try_files &#8230; \/index.html<\/strong>. \uc0ac\uc6a9\uc790\uac00 <code>\/dashboard<\/code> URL \uc744 \uc9c1\uc811 \uc785\ub825\ud574\ub3c4 nginx \uac00 index.html \uc744 \ubc18\ud658 \u2192 React Router \uac00 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \ub77c\uc6b0\ud305. \uc548 \uadf8\ub7ec\uba74 404.<\/p>\n\n<div class=\"databox\">\n<strong>\ubc15\uc900\uc131\ub2d8 \ud658\uacbd \uad8c\uc7a5<\/strong> \u2014 junai.ai \uac00 \uc774\ubbf8 Nginx + Cloudflare \ub77c \uc0c8 React \uc571\uc744 \uac19\uc740 Nginx \uc5d0 server_name \ucd94\uac00\ud558\ub294 \uac8c \uae68\ub057. <code>app.junai.ai<\/code> \u00b7 <code>admin.junai.ai<\/code> \uac19\uc740 \uc11c\ube0c\ub3c4\uba54\uc778\uc73c\ub85c. Cloudflare \uac00 \uc55e\ub2e8\uc5d0\uc11c CDN\u00b7SSL \uc790\ub3d9 \ucc98\ub9ac.\n<\/div>\n\n<p>24\ud3b8\uc73c\ub85c production \uae4c\uc9c0 \uc644\uc131. 25\ud3b8 \ub9c8\uc9c0\ub9c9 \u2014 \uc6b4\uc601 \uc911 \ub9cc\ub098\ub294 \ub514\ubc84\uae45 + \uc61b \ucf54\ub4dc \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud328\ud134.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \uae00 (\uc2dc\ub9ac\uc988 \ub9c8\uc9c0\ub9c9)<\/h3>\n<p>React \uad50\uc7ac 25\ud3b8 \u2014 DevTools \ub514\ubc84\uae45 + \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud328\ud134. Class \u2192 Hooks, JS \u2192 TS, \uc2dc\ub9ac\uc988 \uc644\uacb0.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\nReact \uad50\uc7ac \uc2dc\ub9ac\uc988 \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-zod-rhf-22\/\">22\ud3b8 Zod+RHF<\/a> \u00b7\n<a href=\"https:\/\/junai.ai\/blog\/react-server-components-23\/\">23\ud3b8 RSC<\/a> \u00b7\n<strong>24\ud3b8 \ube4c\ub4dc\u00b7\ubc30\ud3ec<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>React \ube4c\ub4dc\u00b7\ubc30\ud3ec \u2014 Vite build, code splitting, \ud658\uacbd\ubcc0\uc218, Vercel\u00b7Cloudflare\u00b7\uc790\uccb4 Nginx. \uad50\uc7ac 24\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":762,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-788","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=788"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/788\/revisions"}],"predecessor-version":[{"id":811,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/788\/revisions\/811"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/762"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}