{"id":155,"date":"2026-06-26T13:33:01","date_gmt":"2026-06-26T13:33:01","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=155"},"modified":"2026-06-26T13:33:01","modified_gmt":"2026-06-26T13:33:01","slug":"%ec%8b%9c%ec%9e%91%ed%95%98%ea%b8%b0-2","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=155","title":{"rendered":"\uc2dc\uc791\ud558\uae30"},"content":{"rendered":"<h2>1. \uc601\uc0c1<\/h2>\n<p><video controls width=\"100%\"><source src=\"https:\/\/youtu.be\/rcCWzkgqW00\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2><strong>2. create-react-app\uc73c\ub85c \ub9ac\uc561\ud2b8 \uc571 \ub9cc\ub4e4\uae30<\/strong><\/h2>\n<ol>\n<li>\ud0d0\uc0c9\uae30\ub97c \uc5f4\uace0 recipe-app \ud3f4\ub354\ub97c \ub9cc\ub4e0\ub2e4.<\/li>\n<li>VScode \ub97c \uc2e4\ud589\ud6c4 recipe-app \ud3f4\ub354\ub97c \ud3b8\uc9d1\ucc3d\uc73c\ub85c \ub4dc\ub798\uadf8\ub4dc\ub78d\ud558\uc5ec \ub8e8\ud2b8\ud3f4\ub354\ub85c \uc5f0\ub2e4.<\/li>\n<li>VScode \uc5d0\uc11c\u00a0ctrl +\u00a0J ( command + J )\ub97c \ub20c\ub7ec \ud130\ubbf8\ub110\uc744 \uc2e4\ud589\ud55c\ub2e4.<\/li>\n<li>\uc544\ub798\uc758 \uba85\ub839\uc5b4\ub97c \ud130\ubbf8\ub110\uc5d0 \uc785\ub825\ud55c\ub2e4\uba85\ub839\uc5b4\ub294 npm \ubaa8\ub4c8\uc5d0 \ub0b4\uc7a5\ub418\uc5b4 \uc788\ub294 \ubcf4\uc77c\ub7ec\ud50c\ub808\uc774\ud2b8(\u00a0<a href=\"https:\/\/www.google.com\/search?q=boilerplate&#038;oq=boilerplate&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCDgzNDNqMGo3qAIAsAIA&#038;sourceid=chrome&#038;ie=UTF-8\"><strong>boilerplate<\/strong><\/a>\u00a0)\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub9ac\uc561\ud2b8\uc571\uc744 \ud604\uc7ac \ud3f4\ub354\uc5d0 \uc124\uce58\ud55c\ub2e4\ub294 \ub0b4\uc6a9\uc774\ub2e4.<\/li>\n<\/ol>\n<pre><code class=\"language-shell\">  npx create-react-app .\n<\/code><\/pre>\n<h3><strong>3. README \uc218\uc815\ud558\uae30<\/strong><\/h3>\n<blockquote>\n<p>\uc548\uc5d0 \uc788\ub294 \ub0b4\uc6a9\uc744 \uc804\ubd80 \uc9c0\uc6b0\uace0 \uc544\ub798\uc640 \uac19\uc774 \uc785\ub825\ud558\uace0 Ctrl + S\ub97c \ub20c\ub7ec \uc800\uc7a5<\/p>\n<\/blockquote>\n<pre><code class=\"language-text\"># recipe App 2024\n<\/code><\/pre>\n<h3><strong>4. \ub9ac\uc561\ud2b8 \uc571 \uc2e4\ud589\ud558\uae30<\/strong><\/h3>\n<blockquote>\n<p>\ud130\ubbf8\ub110\uc5d0 \u00a0npm start\ub97c \uc785\ub825\ud55c\ub2e4.<\/p>\n<\/blockquote>\n<p>  \ud06c\ub86c \ube0c\ub77c\uc6b0\uc800\uac00 \uc2e4\ud589\ub418\uba74\uc11c <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a> or http:\/\/\ub0b4\uc544\uc774\ud53c\uc8fc\uc18c:3000\/ \uc5d0 \ub9ac\uc561\ud2b8 \uc571\uc774 \uc2e4\ud589\ub41c\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/2-6.png\" alt=\"\"><\/p>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/retype-react\/debug\/1\/\"><strong>\uc704 \uacbd\uace0 \ubc1c\uc0dd\uc2dc \ud574\uacb0\ubc29\ubc95<\/strong><\/a><\/p>\n<h3><strong>5. \ub9ac\uc561\ud2b8 \uc571 \uc885\ub8cc\ud558\uae30<\/strong><\/h3>\n<blockquote>\n<p>\ud130\ubbf8\ub110\uc758 \uba85\ub839\ud504\ub86c\ud504\ud2b8\ub85c \ub3cc\uc544\uac00\uc11c\u00a0Ctrl\u00a0+\u00a0C\u00a0\ub97c \ub204\ub974\uba74 \ub9ac\uc561\ud2b8 \uc571\uc774 \uc885\ub8cc\ub41c\ub2e4.<\/p>\n<\/blockquote>\n<h3><strong>6. \ube44\uc8fc\uc5bc \uc2a4\ud29c\ub514\uc624 \ucf54\ub4dc \ud1b5\ud569 \ud130\ubbf8\ub110\uc5d0\uc11c \uc2e4\ud589\ud558\ub294 \ubc29\ubc95<\/strong><\/h3>\n<ul>\n<li>\ud130\ubbf8\ub110 &gt; \uc0c8 \ud130\ubbf8\ub110\uc744 \uc2e4\ud589\ud558\uc5ec \ud130\ubbf8\ub110\uc5d0\uc11c \uc2e4\ud589\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/04-25_630.jpg\" alt=\"\"><\/p>\n<h3><strong>7. \uae43\ud5c8\ube0c\uc5d0 \ub9ac\uc561\ud2b8 \uc571 \uc5c5\ub85c\ub4dc\ud558\uae30<\/strong><\/h3>\n<blockquote>\n<p>\uc774\ubc88 \uac15\uc758\uc758 \ud504\ub85c\uc81d\ud2b8\ub97c \ub2e4\ub978 \uc0ac\ub78c\ub3c4 \ubcfc\uc218 \uc788\uac8c \ud558\ub824\uba74 \uae43 \ud5c8\ube0c\uc5d0 \ud504\ub85c\uc81d\ud2b8\ub97c \uc5c5\ub85c\ub4dc \ud558\ub294\uac83\uc774 \ud3b8\ub9ac\ud558\ub2e4.<\/p>\n<\/blockquote>\n<p>  \uc6b0\ub9ac\ub294 vercel \ud638\uc2a4\ud305\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\ub97c \ubc30\ud3ec\ud560 \uac83\uc774\uace0 vercel\uc5d0\uc11c \uae43\ud5c8\ube0c\uc758 \uc800\uc7a5\uc18c\ub97c \ubd88\ub7ec\uc62c\uc218 \uc788\ub294 \uae30\ub2a5\uc774 \uc81c\uacf5\ub418\uae30 \ub54c\ubb38\uc774\ub2e4.<br \/>\n  npm \uc744 \uc0ac\uc6a9\ud558\uc5ec \uc124\uce58\ud55c \ub9ac\uc561\ud2b8 \uc571\uc740 \uae43 \ucd08\uae30\ud654\uac00 \uc774\ubbf8 \ub418\uc5b4\uc788\ub2e4.<br \/>\n  vsCode \uc758 \ud0d0\uc0c9\uae30\ub85c \ud655\uc778\ud558\uba74 .git \ud3f4\ub354\uac00 \ubcf4\uc77c\uac83\uc774\ub2e4.<\/p>\n<h3><strong>7.1. \uae43\ud5c8\ube0c\uc5d0 \uc800\uc7a5\uc18c \ub9cc\ub4e4\uae30<\/strong><\/h3>\n<p><strong>\uae43\ud5c8\ube0c\ub85c \uc774\ub3d9<\/strong><\/p>\n<ul>\n<li>Create a new repository \ub97c \ud074\ub9ad\ud6c4 Repository name \uc744 \uc785\ub825\ud558\uc5ec \uc0dd\uc131\ud55c\ub2e4.<\/li>\n<\/ul>\n<h3><strong>7.2. \uae43\ud5c8\ube0c \uc800\uc7a5\uc18c\uc5d0 \ub9ac\uc561\ud2b8 \uc571 \uc5c5\ub85c\ub4dc\ud558\uae30<\/strong><\/h3>\n<ul>\n<li>\uae43 \ud5c8\ube0c \uc800\uc7a5\uc18c\uc758 URL\uc744 \uc0ac\uc6a9\ud574 \ud130\ubbf8\ub110\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc774 \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud55c\ub2e4. \uc774\ub54c \uc800\uc7a5\uc18c \uba85\uc740 \ud0c0\uc774\ud551\ud558\uc9c0 \ub9d0\uace0 \ubcf5\uc0ac\ud574\uc11c \uc0ac\uc6a9\ud558\uc790.<\/li>\n<\/ul>\n<pre><code class=\"language-shell\">git branch -M main\ngit remote add origin https:\/\/github.com\/\uae43\ud5c8\ube0c\uc544\uc774\ub514\/\ub808\ud30c\uc9c0\ud1a0\ub9ac\uc774\ub984.git\ngit commit -m &quot;\uae43\ud5c8\ube0c\uc5d0 \ub9ac\uc561\ud2b8 \uc571 \uc5c5\ub85c\ub4dc\ud558\uae30&quot;\ngit push -u origin main\n\n<\/code><\/pre>\n<h3><strong>7.3. \uae43\ud5c8\ube0c \uc800\uc7a5\uc18c \ud655\uc778\ud558\uae30<\/strong><\/h3>\n<pre><code class=\"language-text\">https:\/\/github.com\/\uae43\ud5c8\ube0c\uc544\uc774\ub514\/\ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\uc774\ub984\n<\/code><\/pre>\n<h2><strong>8. \ub9ac\uc561\ud2b8 \uc571 \uc0b4\ud3b4\ubcf4\uace0 \uc218\uc815\ud558\uae30<\/strong><\/h2>\n<h3><strong>8.1. \ub85c\uceec \uc800\uc7a5\uc18c \ucd08\uae30\ud654\ud558\uae30<\/strong><\/h3>\n<ul>\n<li>VSCode\uc758 \ud0d0\uc0c9\uae30\ub97c \uc0b4\ud3b4\ubcf4\uba74 recipe-app \ud3f4\ub354 \uc548\uc5d0 \uc6b0\ub9ac\uac00 \uc790\uc8fc \uc18c\uc2a4\ub97c \uc218\uc815\ud558\uac8c \ub420 public, src \ud3f4\ub354\ub97c \ubcfc \uc218 \uc788\ub2e4.<\/li>\n<\/ul>\n<h3><strong>8.2. public \ud3f4\ub354 \uc0b4\ud3b4\ubcf4\uae30<\/strong><\/h3>\n<ul>\n<li>public \ud3f4\ub354\uc5d0\ub294 favicon.ico \ud30c\uc77c\uc774 \uc788\ub294\ub370 \uc774\uac74 \ube0c\ub77c\uc6b0\uc800 \uc81c\ubaa9\uacfc \ud568\uaed8 \ud45c\uc2dc\ub418\ub294 \uc544\uc774\ucf58\uc774\ub2e4.<\/li>\n<\/ul>\n<h3><strong>8.3. index.html \ud30c\uc77c \uc0b4\ud3b4\ubcf4\uae30<\/strong><\/h3>\n<ul>\n<li>public\/index.html\ud30c\uc77c\uc5d0\ub294 \uc790\uc8fc \ubcf4\ub294 html \ubb38\uc11c\uc758 \ucf54\ub4dc\uac00 \ubcf4\uc778\ub2e4. .<\/li>\n<\/ul>\n<h3><strong>8.4. App.js \ud30c\uc77c \uc218\uc815\ud558\uae30<\/strong><\/h3>\n<ul>\n<li>src \ud3f4\ub354\uc758 App.js \ub97c \uc5f4\uc5b4\uc11c \uc544\ub798\uc640 \uac19\uc774 \uc218\uc815\ud574\ubcf4\uc790<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import &#39;.\/App.css&#39;;\n\nfunction App() {\n\treturn &lt;div className=&#39;App&#39;&gt;&lt;\/div&gt;;\n}\n\nexport default App;\n<\/code><\/pre>\n<h3><strong>8.5. \ub9ac\uc561\ud2b8 \uc571 \ub2e4\uc2dc \uc2e4\ud589\ud558\uae30<\/strong><\/h3>\n<pre><code class=\"language-text\">npm start\n<\/code><\/pre>\n<ul>\n<li>Ctrl+C\u00a0\ub97c \ub20c\ub7ec \uc2e4\ud589 \uc911\uc774\ub358 \ub9ac\uc561\ud2b8 \uc571\uc744 \uc885\ub8cc\ud558\uace0 \ub2e4\uc2dc \uc2e4\ud589\ud55c\ub2e4.<\/li>\n<li>\uc5d0\ub7ec \uc5c6\uc774 \ucf54\ub4dc\ub97c \uc785\ub825\ud588\ub2e4\uba74 \ud654\uba74\uc5d0 \uc544\ubb34\uac83\ub3c4 \ud45c\uc2dc\ub418\uc9c0 \uc54a\uc740 \ube48 \ube0c\ub77c\uc6b0\uc800 \ud654\uba74\uc774 \uc2e4\ud589\ub41c\ub2e4.<\/li>\n<\/ul>\n<h3><strong>8.6. App.js \ud30c\uc77c \uc218\uc815\ud558\uae30<\/strong><\/h3>\n<ul>\n<li>\uc778\uc0bf\ub9d0\uc744 \ud45c\uc2dc\ud574 \ubcf4\uc790.<\/li>\n<li><code>src\/App.js<\/code>\u00a0\ud30c\uc77c\uc744 \uc5f4\uc5b4\uc11c \ucf54\ub4dc\ub97c \uc544\ub798\uc640 \uac19\uc774 \ubcc0\uacbd\ud558\uace0 \uc800\uc7a5\ud55c\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from &#39;react&#39;;\n\nfunction App() {\n\treturn (\n\t\t&lt;div className=&#39;App&#39;&gt;\n\t\t\t&lt;h1&gt; Hello!!!!! &lt;\/h1&gt;\n\t\t&lt;\/div&gt;\n\t);\n}\n\nexport default App;\n<\/code><\/pre>\n<h3><strong>8.7. \ud06c\ub86c \uac1c\ubc1c\uc790 \ub3c4\uad6c\ub85c \ub9ac\uc561\ud2b8 \uc571 \uc0b4\ud3b4\ubcf4\uae30<\/strong><\/h3>\n<ul>\n<li>\ud06c\ub86c \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc5d0\uc11c\u00a0\ub97c \ub20c\ub7ec \uac1c\ubc1c\uc790 \ub3c4\uad6c\ub97c \uc2e4\ud589\ud55c \ub2e4\uc74c [Elements] \ud0ed\uc744 \ub20c\ub7ec\ubcf4\uc790. \uadf8\ub7ec\uba74 \uc55e\uc5d0\uc11c \uc785\ub825\ud55c\u00a0<code>&lt;h1&gt; Hello!!!!! &lt;\/h1&gt;<\/code>\ub97c \ubcfc \uc218 \uc788\ub2e4.\uc804\uccb4 \ucf54\ub4dc\ub97c \ubcf4\uba74<code>index.html<\/code>\ud30c\uc77c\uacfc<code>App.js<\/code>\ud30c\uc77c\uc774 \ud569\uccd0\uc9c4 \uac83 \uac19\uc774 \ubcf4\uc778\ub2e4.<br \/>\nF12<\/li>\n<\/ul>\n<h3><strong>8.8. Hello!!!!! \uac00 \ud654\uba74\uc5d0 \uc5b4\ub5bb\uac8c \ud45c\uc2dc\ub418\ub294\uc9c0 \uc0b4\ud3b4\ubcf4\uae30<\/strong><\/h3>\n<ul>\n<li><code>public\/index.html<\/code>\u00a0\ud30c\uc77c\uc744 \uc5f4\uc5b4\uc11c body \uc5d8\ub9ac\uba3c\ud2b8 \uc8fc\ubcc0\uc744 \uc0b4\ud3b4\ubcf4\uc790.<\/li>\n<li><code>&lt;div id=&quot;root&quot;&gt; &lt;\/div&gt;<\/code>\u00a0\uc0ac\uc774\uc5d0 \uc544\ubb34\uac83\ub3c4 \uc5c6\ub2e4. \uadf8\ub7f0\ub370 \uc704 2.7\uc5d0\uc11c\ub294 \uc774 \uacf5\uac04\uc5d0 \ucf54\ub4dc\uac00 \ub4e4\uc5b4\uac00 \uc788\ub2e4. \uc5b4\ub5bb\uac8c \ub41c \uac78\uae4c?<\/li>\n<\/ul>\n<h2><strong>9. \ub9ac\uc561\ud2b8 \uc571 \ub3d9\uc791 \uc6d0\ub9ac \uc54c\uc544\ubcf4\uae30<\/strong><\/h2>\n<ul>\n<li>\ub9ac\uc561\ud2b8\ub294 \uc6b0\ub9ac\uac00 \uc791\uc131\ud55c \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\uc5d0 \uc788\ub294 \ucf54\ub4dc(\uc608\ub97c \ub4e4\uc5b4 App.js, index.js)\ub97c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc774\uc6a9\ud558\uc5ec \ud574\uc11d\ud55c \ub2e4\uc74c \ud574\uc11d\ud55c \uacb0\uacfc\ubb3c\uc744\u00a0<code>index.html<\/code>\uc5d0 \ub07c\uc6cc \ub123\ub294\ub2e4.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/p1.jpg\" alt=\"\"><\/p>\n<ul>\n<li>\uc774\uac83\uc774 index.html \ud30c\uc77c\uc5d0 \uc5c6\uc5c8\ub358\u00a0<code>&lt;div&gt; Hello!!!!! &lt;\/div&gt;<\/code>\uac00 \ub9ac\uc561\ud2b8 \uc571\uc744 \uc2e4\ud589\ud558\uba74 \uc0dd\uae30\ub294 \uc6d0\ub9ac\uc774\ub2e4.<\/li>\n<li>\ub2e4\uc2dc\ub9d0\ud574 index.html\uc758<code>\u00a0&lt;div id=&quot;root&quot;&gt;&lt;\/div&gt;<\/code>\ub294 \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\uc5d0 \uc788\ub294 \ud30c\uc77c\uc744 \ud574\uc11d\ud558\uc5ec \ub123\ub294 \uc5ed\ud560\uc744 \ub2f4\ub2f9\ud55c\ub2e4.<\/li>\n<\/ul>\n<h3><strong>9.1. index.js \uc0b4\ud3b4\ubcf4\uae30<\/strong><\/h3>\n<ul>\n<li>src \ud3f4\ub354\uc758 index.js \ud30c\uc77c\uc744 \ub2e4\uc2dc \uc5f4\uc5b4 \ubcf4\uc790.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/p2.png\" alt=\"\"><\/p>\n<ul>\n<li>root \ubcc0\uc218\uc5d0 ReactDom \ubaa8\ub4c8\uc758 createRoot \uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud558\uc5ec \ucd5c\uc0c1\uc704dom \uc694\uc18c\ub97c \uc804\ub2ec\ud55c\uac83\uc744 \ud560\ub2f9\ud55c\ub2e4.\n<ul>\n<li>ReactDOM \uac1d\uccb4\ub97c \ucf58\uc194\uc5d0\uc11c \ud655\uc778\ud574\ubcf4\uba74 \ub450\uac1c\uc758 \uba54\uc11c\ub4dc\uac00 \ubc18\ud658\ub41c\ub2e4.\n<ul>\n<li><a href=\"https:\/\/react.dev\/reference\/react-dom\/client\"><strong>\uacf5\uc2dd\ubb38\uc11c<\/strong><\/a><\/li>\n<li>createRoot : \ube0c\ub77c\uc6b0\uc800 DOM \ub178\ub4dc \ub0b4\uc5d0 React \uad6c\uc131 \uc694\uc18c\ub97c \ud45c\uc2dc\ud558\ub294 \ub8e8\ud2b8\ub97c \ub9cc\ub4e4 \uc218 \uc788\ub2e4.<\/li>\n<li><strong>hydrateRoot: \uc11c\ubc84\uc571\uc744 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \ud65c\uc131\ud654 \ud560\ub54c \uc0ac\uc6a9 (NextJS\uc5c6\uc774 SSR \uad6c\ud604\uac00\ub2a5)<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><strong>9.2. index.html \uc218\uc815\ud574 \ubcf4\uae30<\/strong><\/h3>\n<ul>\n<li>public \ud3f4\ub354\uc758 index.html \ud30c\uc77c\uc744 \uc5f4\uc5b4\uc11c<code>\u00a0&lt;div id=&quot;root&quot;&gt;&lt;\/div&gt;<\/code>\ub97c\u00a0<code>&lt;div id=&quot;orange&quot;&gt;&lt;\/div&gt;<\/code>\ub85c \ubc14\uafd4\ubcf4\uc790.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/2-2.png\" alt=\"\"><\/p>\n<ul>\n<li>Ctrl+C\ub97c \ub20c\ub7ec \uc885\ub8cc\ud558\uace0\u00a0<code>npm start<\/code>\ub85c \ub2e4\uc2dc \uc2dc\uc791\ud558\uba74 console\uc5d0 \uc5d0\ub7ec\uac00 \ub728\uba74\uc11c \uc2e4\ud589\ub418\uc9c0 \uc54a\ub294\ub2e4.<\/li>\n<\/ul>\n<h3><strong>9.3. index.js \uc218\uc815\ud558\uc5ec \uc624\ub958 \ud574\uacb0\ud558\uae30<\/strong><\/h3>\n<ul>\n<li>src \ud3f4\ub354\uc758 index.js \ud30c\uc77c\uc744 \uc544\ub798\uc640 \uac19\uc774 \uc218\uc815\ud574 \ubcf4\uc790.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/2-3.png\" alt=\"\"><\/p>\n<h3><strong>9.4. \ud30c\uc77c \uc6d0\ub798\ub300\ub85c \ub3cc\ub824\ub193\uae30<\/strong><\/h3>\n<ul>\n<li>&#39;orange&#39;\ub97c &#39;root&#39;\ub85c \ub2e4\uc2dc \uc6d0\ub798\ub300\ub85c \ubc14\uafd4\ub193\ub294\ub2e4.<\/li>\n<li>\ub9ac\uc561\ud2b8\ub294 \ucc98\uc74c \uc2e4\ud589\ud560 \ub54c \ube48 index.html\uc744 \uc2e4\ud589\ud558\uace0 \ub098\uc11c App.js\ub97c \ud574\uc11d\ud558\uba70 \uc810\uc810 \ucc44\uc6cc\uc9c0\ub294 \ud615\uc2dd\uc774\ub2e4.\uc989, \ucc98\uc74c\ubd80\ud130 HTML\uc744 \uadf8\ub824 \ub123\uc9c0 \uc54a\ub294\ub2e4.\uc77c\ubd80 HTML\ub9cc \uadf8\ub9ac\uace0 \uc774\ud6c4 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \ucd94\uac00\ud558\uac70\ub098 \uc81c\uac70\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \ud654\uba74\uc744 \uadf8\ub9b0\ub2e4.\ub9ac\uc561\ud2b8\ub294 \ud654\uba74\uc5d0 \ud45c\uc2dc\ub420 \ubaa8\ub4e0 HTML\uc744 \ucc98\uc74c\ubd80\ud130 \uadf8\ub9ac\uc9c0 \uc54a\uc73c\ub2c8\uae4c\u00a0\ube60\ub974\uac8c \uc2e4\ud589\ub41c\ub2e4.<\/li>\n<\/ul>\n<h2><strong>10. \uc644\uc131\ucf54\ub4dc<\/strong><\/h2>\n<p>\ud83d\udd17<a href=\"https:\/\/github.com\/qwerewqwerew\/recipe-app\/tree\/48cf984d5ec6ad0a21e132173cc16359e2bf46f7\"><strong>\uc644\uc131\uc18c\uc2a4\ucf54\ub4dc<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. \uc601\uc0c1 2. create-react-app\uc73c\ub85c \ub9ac\uc561\ud2b8 \uc571 \ub9cc\ub4e4\uae30 \ud0d0\uc0c9\uae30\ub97c \uc5f4\uace0 recipe-app \ud3f4\ub354\ub97c \ub9cc\ub4e0\ub2e4. VScode \ub97c \uc2e4\ud589\ud6c4 recipe-app \ud3f4\ub354\ub97c \ud3b8\uc9d1\ucc3d\uc73c\ub85c \ub4dc\ub798\uadf8\ub4dc\ub78d\ud558\uc5ec \ub8e8\ud2b8\ud3f4\ub354\ub85c \uc5f0\ub2e4. VScode \uc5d0\uc11c\u00a0ctrl +\u00a0J ( command + J )\ub97c \ub20c\ub7ec \ud130\ubbf8\ub110\uc744 \uc2e4\ud589\ud55c\ub2e4. \uc544\ub798\uc758 \uba85\ub839\uc5b4\ub97c \ud130\ubbf8\ub110\uc5d0 \uc785\ub825\ud55c\ub2e4\uba85\ub839\uc5b4\ub294 npm \ubaa8\ub4c8\uc5d0 \ub0b4\uc7a5\ub418\uc5b4 \uc788\ub294 \ubcf4\uc77c\ub7ec\ud50c\ub808\uc774\ud2b8(\u00a0boilerplate\u00a0)\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub9ac\uc561\ud2b8\uc571\uc744 \ud604\uc7ac \ud3f4\ub354\uc5d0 \uc124\uce58\ud55c\ub2e4\ub294 \ub0b4\uc6a9\uc774\ub2e4. npx create-react-app . 3. README \uc218\uc815\ud558\uae30 \uc548\uc5d0 \uc788\ub294 &#8230; <a title=\"\uc2dc\uc791\ud558\uae30\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=155\" aria-label=\"\uc2dc\uc791\ud558\uae30\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-155","post","type-post","status-publish","format-standard","hentry","category-react-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=155"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/155\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}