{"id":95,"date":"2025-07-16T14:55:18","date_gmt":"2025-07-16T05:55:18","guid":{"rendered":"http:\/\/34.64.61.65\/?p=95"},"modified":"2025-07-16T15:16:27","modified_gmt":"2025-07-16T06:16:27","slug":"__trashed-3","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=95","title":{"rendered":"React CRA"},"content":{"rendered":"\n<ol class=\"wp-block-list\">\n<li>CRA(create-react-app)<\/li>\n<\/ol>\n\n\n\n<p>React \uac1c\ubc1c \ud658\uacbd\uc744 \uc27d\uac8c \uad6c\ucd95\ud574\uc8fc\ub294 \ub3c4\uad6c.<\/p>\n\n\n\n<p>\ud83d\udcbb CRA\ub97c \ud1b5\ud574 \uc790\ub3d9\uc73c\ub85c \uad6c\ucd95\ub418\ub294 \uc694\uc18c:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>webpack: \ubaa8\ub4c8 \ubc88\ub4e4\ub7ec<\/li>\n\n\n\n<li>babel: JSX\ub97c JavaScript\ub85c \ucef4\ud30c\uc77c<\/li>\n\n\n\n<li>jest: \uae30\ub2a5 \ud14c\uc2a4\ud2b8<\/li>\n\n\n\n<li>eslint: \ucf54\ub4dc \uad50\uc815 \ubc0f \uc2a4\ud0c0\uc77c \ub9de\ucd94\uae30(\ud615\uc0c1\uad00\ub9ac)<\/li>\n\n\n\n<li>polyfill: \uad6c\ud615 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \ubb38\ubc95(\uae30\ub2a5) \uc9c0\uc6d0<\/li>\n\n\n\n<li>HMR(Hot Module Replacement): reload \uc5c6\uc774 \ubcc0\uacbd\uc0ac\ud56d \ubc18\uc601<\/li>\n\n\n\n<li>CSS \ud6c4\ucc98\ub9ac: sass \uc0ac\uc6a9\uc2dc CSS \ucef4\ud30c\uc77c, \uad6c\ud615 \ube0c\ub77c\uc6b0\uc800\uc5d0\ub294 Vendor \uc811\ub450\uc0ac(perfix) \ud544\uc694<\/li>\n<\/ul>\n\n\n\n<p>\u203b \ub2e8\uc810: webpack, babel, eslint \ub4f1 \uc124\uc815 \ubcc0\uacbd\ud558\uae30 \uc5b4\ub824\uc6c0.(\uc124\uc815\uc744 \ubcc0\uacbd\ud560 \uacbd\uc6b0 eject)<\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>CRA \uc0ac\uc6a9<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app \ud504\ub85c\uc81d\ud2b8\ud3f4\ub354\uba85<\/code><\/pre>\n\n\n\n<p>\ud83c\udf1f CRA\ub294 \uc11c\ubc84\uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)\uc744 \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294\ub2e4<\/p>\n\n\n\n<p>CRA\uc5d0 eject\ud558\uc5ec webpack\uacfc babel\uc744 \uc124\uc815\ud558\uba74 \uc11c\ubc84\uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1\uc744 \uad6c\ud604\ud560 \uc218\ub294 \uc788\uc73c\ub098 \ud6a8\uc728\uc801\uc774\uc9c0\ub294 \uc54a\uc73c\ubbc0\ub85c<\/p>\n\n\n\n<p>\uc11c\ubc84\uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1\uc774 \ud544\uc694\ud558\uba74 SSR\uc744 \uae30\ubcf8\uc801\uc73c\ub85c \uc81c\uacf5\ud558\ub294 Next.js\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uad8c\uc7a5.<\/p>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>CRA scripts<\/li>\n<\/ol>\n\n\n\n<p>\ud83c\udf1fpackage.json<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  }<\/code><\/pre>\n\n\n\n<p>1) start<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React \uac1c\ubc1c \uc11c\ubc84 \uad6c\ub3d9.<\/li>\n\n\n\n<li>\uae30\ubcf8 http\ub85c \uc2e4\ud589<\/li>\n<\/ul>\n\n\n\n<p>\u270d\ud83c\udffb https \uc2e4\ud589 \uc6d0\ud558\ub294 \uacbd\uc6b0<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CMD<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>set HTTPS=true &amp;&amp; npm start<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Power Shell<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>($env:HTTPS = \"true\") -and (npm start)<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Linux, MacOS<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>HTTPS=true npm start<\/code><\/pre>\n\n\n\n<p>2) build<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc2e4\uc81c \uc11c\ubc84 \ubc30\ud3ec\uc2dc \uc0ac\uc6a9.<\/li>\n\n\n\n<li>\ube4c\ub4dc\uc2dc \uc815\uc801\ud30c\uc77c \uc0dd\uc131(\/build \ud30c\uc77c)<\/li>\n\n\n\n<li>\uc11c\ubc84\uc5d0 \ubcc4\ub3c4\uc758 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc2e4\ud589 \uc5c6\uc74c<\/li>\n<\/ul>\n\n\n\n<p>3) test<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud14c\uc2a4\ud2b8 \uc2e4\ud589<\/li>\n\n\n\n<li>\uae30\ubcf8\uc73c\ub85c \uc874\uc7ac\ud558\ub294 App.test.hs \ud30c\uc77c \ud14c\uc2a4\ud2b8 \uc2e4\ud589.<\/li>\n\n\n\n<li>\ud30c\uc77c\uc774\ub984.test.js, \ud30c\uc77c\uc774\ub984.spec.js \ud615\uc2dd \ud14c\uc2a4\ud2b8 \ud30c\uc77c\uc774\uba74 \uc778\uc2dd \uac00\ub2a5\ud558\uc5ec \ud14c\uc2a4\ud2b8\uc2e4\ud589\ub428.<\/li>\n<\/ul>\n\n\n\n<p>4) eject<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>react-scripts\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0 \ubaa8\ub4e0 \uc124\uc815\ud30c\uc77c \ucd94\ucd9c<\/li>\n\n\n\n<li>CRA\ub97c \uae30\ubcf8\uc73c\ub85c \uc9c1\uc811 \uac1c\ubc1c \ud658\uacbd \uc124\uc815 \ubc0f \uad6c\ucd95\ud558\uace0 \uc2f6\uc744 \uacbd\uc6b0 \uc0ac\uc6a9<\/li>\n\n\n\n<li>\ud55c \ubc88 \uc2e4\ud589\ud558\uba74 \ub418\ub3cc\ub9b4 \uc218 \uc5c6\uc74c<\/li>\n<\/ul>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>\ud658\uacbd\ubcc0\uc218<\/li>\n<\/ol>\n\n\n\n<p>1) NODE_ENV \ud658\uacbd\ubcc0\uc218<\/p>\n\n\n\n<p>CRA\uc5d0\uc11c \uae30\ubcf8\uc801\uc73c\ub85c \uac00\uc9c0\uace0 \uc788\ub294 \ud658\uacbd\ubcc0\uc218, \uc2e4\ud589 \uba85\ub839\uc5b4\uc5d0 \ub530\ub77c \uc790\ub3d9\uc73c\ub85c NODE_ENV \uac12\uc774 \uc815\ud574\uc9d0.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>process.env.NODE_ENV<\/code><\/pre>\n\n\n\n<p>(1) \uac1c\ubc1c \ud658\uacbd: development<\/p>\n\n\n\n<p>npm start\ub85c \uc2e4\ud589\ud560 \uacbd\uc6b0<\/p>\n\n\n\n<p>(2) \ud14c\uc2a4\ud2b8 \ud658\uacbd: test<\/p>\n\n\n\n<p>npm test\ub85c \uc2e4\ud589\ud560 \uacbd\uc6b0<\/p>\n\n\n\n<p>(3) \ubc30\ud3ec \ud658\uacbd: production<\/p>\n\n\n\n<p>npm run build\ub85c \uc2e4\ud589\ud560 \uacbd\uc6b0<\/p>\n\n\n\n<p>2) \uc0c8\ub85c\uc6b4 \ud658\uacbd\ubcc0\uc218 \uc124\uc815<\/p>\n\n\n\n<p>React \ud658\uacbd \ubcc0\uc218\uba85\uc740 \uc0dd\uc131\uc2dc&nbsp;<strong>REACT<em>APP<\/em><\/strong>&nbsp;\uc73c\ub85c \uc2dc\uc791.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React \uac1c\ubc1c \ud658\uacbd\uc744 \uc27d\uac8c \uad6c\ucd95\ud574\uc8fc\ub294 \ub3c4\uad6c. \ud83d\udcbb CRA\ub97c \ud1b5\ud574 \uc790\ub3d9\uc73c\ub85c \uad6c\ucd95\ub418\ub294 \uc694\uc18c: \u203b \ub2e8\uc810: webpack, babel, eslint \ub4f1 \uc124\uc815 \ubcc0\uacbd\ud558\uae30 \uc5b4\ub824\uc6c0.(\uc124\uc815\uc744 \ubcc0\uacbd\ud560 \uacbd\uc6b0 eject) \ud83c\udf1f CRA\ub294 \uc11c\ubc84\uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)\uc744 \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294\ub2e4 CRA\uc5d0 eject\ud558\uc5ec webpack\uacfc babel\uc744 \uc124\uc815\ud558\uba74 \uc11c\ubc84\uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1\uc744 \uad6c\ud604\ud560 \uc218\ub294 \uc788\uc73c\ub098 \ud6a8\uc728\uc801\uc774\uc9c0\ub294 \uc54a\uc73c\ubbc0\ub85c \uc11c\ubc84\uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1\uc774 \ud544\uc694\ud558\uba74 SSR\uc744 \uae30\ubcf8\uc801\uc73c\ub85c \uc81c\uacf5\ud558\ub294 Next.js\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uad8c\uc7a5. \ud83c\udf1fpackage.json 1) start [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[100,102,101],"class_list":["post-95","post","type-post","status-publish","format-standard","hentry","category-react","tag-react","tag-react-js","tag-101"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/95","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=95"}],"version-history":[{"count":2,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/95\/revisions"}],"predecessor-version":[{"id":151,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/95\/revisions\/151"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=95"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=95"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}