{"id":142,"date":"2026-06-26T13:32:53","date_gmt":"2026-06-26T13:32:53","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=142"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"%ec%bb%b4%ed%8f%ac%eb%84%8c%ed%8a%b8","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=142","title":{"rendered":"\ucef4\ud3ec\ub10c\ud2b8"},"content":{"rendered":"<p><video controls width=\"100%\"><source src=\"https:\/\/www.youtube.com\/embed\/Rpb635GHOmo?si=eLyQkX8-TqXrtRiP\" type=\"video\/mp4\" \/><\/video><\/p>\n<p><video controls width=\"100%\"><source src=\"https:\/\/www.youtube.com\/embed\/y46OIWUA2OM?si=LiuIV1RM7b0FmVib\" type=\"video\/mp4\" \/><\/video><\/p>\n<p><video controls width=\"100%\"><source src=\"https:\/\/www.youtube.com\/embed\/2ZJkmBuFu5Y?si=HSvagxFojdvEP4Af\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2>1. <strong>\ub9ac\uc561\ud2b8\ucef4\ud3ec\ub10c\ud2b8<\/strong><\/h2>\n<h3>1.1. <strong>\ub9ac\uc561\ud2b8 \uc571 \uad6c\uc870<\/strong><\/h3>\n<h4>1.1.1. <strong>\uc774\ubbf8\uc9c0 \ub9ac\uc18c\uc2a4 \uc8fc\uc18c<\/strong><\/h4>\n<p>\uc218\uc5c5\uc5d0 \uc0ac\uc6a9\ud560 \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc758 \uc8fc\uc18c \uc785\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-text\">http:\/\/qwerew.cafe24.com\/images\/pet-1.jpg\n\nhttp:\/\/qwerew.cafe24.com\/images\/pet-2.jpg\n\nhttp:\/\/qwerew.cafe24.com\/images\/pet-3.jpg\n\nhttp:\/\/qwerew.cafe24.com\/images\/pet-4.jpg\n\nhttp:\/\/qwerew.cafe24.com\/images\/pet-5.jpg\n\nhttp:\/\/qwerew.cafe24.com\/images\/pet-6.jpg\n\nhttp:\/\/qwerew.cafe24.com\/images\/pet-7.jpg\n\nhttp:\/\/qwerew.cafe24.com\/images\/pet-8.jpg\n<\/code><\/pre>\n<h4>1.1.2. \ub9ac\uc561\ud2b8 \uc571\uc758 \ud3f4\ub354 \uad6c\uc131<\/h4>\n<blockquote>\n<p>\ub9ac\uc561\ud2b8 \uc571\uc758 \ud3f4\ub354\uc640 \ud30c\uc77c\uc758 \uad6c\uc131\uacfc \uc5ed\ud560\uc744 \uc54c\uc544\ubd05\uc2dc\ub2e4.<\/p>\n<\/blockquote>\n<pre><code class=\"language-text\">\nreact-test\/\n  |-**node_modules**\/ # \uc758\uc874\uc131 \ud30c\uc77c\uc744 \ub2f4\uc740 \ud3f4\ub354\n  |- **src**\/\n    |- **App.js**        # \ucd5c\uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\n    |- **index.js**          # \uc571 \uc9c4\uc785\uc810 \ud30c\uc77c (Entry Point)\n  |- public\/\n    |- index.html        # HTML \ud15c\ud50c\ub9bf \ud30c\uc77c\uacfc \uc815\uc801 \ub9ac\uc18c\uc2a4\ub97c \ub2f4\uc740 \ud3f4\ub354\n  |- **package.json**         # \ud504\ub85c\uc81d\ud2b8 \uc815\ubcf4\uc640 \uc885\uc18d\uc131 \uad00\ub9ac \ud30c\uc77c\n<\/code><\/pre>\n<ul>\n<li>node_modules\ub294 \uc758\uc874\uc131 \ud30c\uc77c\ub4e4\uc774 \uc800\uc7a5\ub418\ub294 \ud3f4\ub354\ub2e4.<br \/>\n\uc774 \ud3f4\ub354 \ub0b4\uc758 \ud30c\uc77c\ub4e4\uc740 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uc678\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640 \ubaa8\ub4c8\ub4e4\uc744 \ud3ec\ud568\ud558\uace0 \uc788\uc73c\uba70,<br \/>\n\uad00\ub828 \uc815\ubcf4\ub294 package.json \ud30c\uc77c\uc5d0 \uae30\ub85d\ub41c\ub2e4.<\/li>\n<li>src \ud3f4\ub354\ub294 \uc2e4\uc81c \uc18c\uc2a4 \ucf54\ub4dc\uac00 \uc704\uce58\ud558\ub294 \uacf3\uc774\ub2e4.<br \/>\n\uc774\uacf3\uc5d0\uc11c\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc8fc\uc694 \ub85c\uc9c1\uacfc \uae30\ub2a5\ub4e4\uc774 \uad6c\ud604\ub41c\ub2e4.<\/li>\n<li>public \ud3f4\ub354\ub294 \uc815\uc801\uc778 \ub9ac\uc18c\uc2a4\ub4e4\uacfc HTML \ud15c\ud50c\ub9bf \ud30c\uc77c(index.html)\uc774 \uc704\uce58\ud558\ub294 \uacf3\uc774\ub2e4.<br \/>\n\uc774 \ud3f4\ub354\uc5d0 \ud3ec\ud568\ub41c \ud30c\uc77c\ub4e4\uc740 \ube4c\ub4dc \uacfc\uc815\uc5d0\uc11c \uacb0\uacfc\ubb3c\uc5d0 \uc790\ub3d9\uc73c\ub85c \ud3ec\ud568\ub418\uba70,<br \/>\n\uc774 \ud30c\uc77c\ub4e4\uc774 \ucd5c\uc885\uc801\uc73c\ub85c \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc81c\uacf5\ub41c\ub2e4.<\/li>\n<li>package.json \ud30c\uc77c\uc740 \ud504\ub85c\uc81d\ud2b8\uc758 \uc815\ubcf4\uc640 \uc885\uc18d\uc131 \uad00\ub9ac\ub97c \uc704\ud55c \uc124\uc815 \ud30c\uc77c\uc774\ub2e4.<br \/>\n\uc5ec\uae30\uc5d0\ub294 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640 \ubaa8\ub4c8\ub4e4\uc774 \uba85\uc2dc\ub418\uc5b4 \uc788\uc73c\uba70,<br \/>\n\uac01 \uc758\uc874\uc131\uc758 \ubc84\uc804\ub3c4 \ud568\uaed8 \uae30\ub85d\ub41c\ub2e4.<\/li>\n<li>package-lock.json \ud30c\uc77c\uc740 package.json\ubcf4\ub2e4 \ub354 \uc138\ubd80\uc801\uc778 \uc815\ubcf4\ub97c \ub2f4\uace0 \uc788\ub294 \uc124\uc815 \ud30c\uc77c\ub85c, \uc2dc\uc2a4\ud15c\uc5d0\uc11c \uc790\ub3d9\uc73c\ub85c \uad00\ub9ac\ub41c\ub2e4.<br \/>\n\uc774 \ud30c\uc77c\uc744 \uc784\uc758\ub85c \uc218\uc815\ud558\uba74 \uc758\ub3c4\uce58 \uc54a\uc740 \uc624\ub958\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub2e4.<\/li>\n<li>App.js \ud30c\uc77c\uc740 \ucd5c\uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\ub85c, \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ud575\uc2ec\uc801\uc778 \ubd80\ubd84\uc744 \uad6c\uc131\ud55c\ub2e4.<br \/>\n\ub9ac\uc561\ud2b8\ub294 \uc791\uc740 \ucef4\ud3ec\ub10c\ud2b8 \ub2e8\uc704\ub85c \uad6c\uc131\ub418\uba70, App \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc774\ub4e4 \uc791\uc740 \ubaa8\ub4c8\ub4e4\uc744 \ud558\ub098\ub85c \ubb36\uc5b4\uc8fc\ub294 \uc5ed\ud560\uc744 \ud55c\ub2e4.<\/li>\n<li>index.js \ud30c\uc77c\uc5d0\uc11c\ub294 ReactDOM.render() \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucd5c\uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc778 App \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc2e4\uc81c DOM\uc5d0 \ub9c8\uc6b4\ud305\ud55c\ub2e4.<br \/>\n\uc774 \ud30c\uc77c\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc5d4\ud2b8\ub9ac\ud3ec\uc778\ud2b8\ub85c, \uc8fc\ub85c \ub77c\uc6b0\ud305 \uc124\uc815\uc774\ub098 \uc0c1\ud0dc \uad00\ub9ac \ub4f1\uc758 \ucd08\uae30\ud654 \uc791\uc5c5\uc774 \uc774\uacf3\uc5d0\uc11c \uc774\ub8e8\uc5b4\uc9c4\ub2e4.<br \/>\n\uc544\ub798 \uc774\ubbf8\uc9c0\uc758 root.render() \ud568\uc218\ub294 public \ud3f4\ub354\uc758 index.html \ubb38\uc11c\uc640 \ub9ac\uc561\ud2b8 DOM\uc744 \uc5f0\uacb0\ud558\ub294 \uc5ed\ud560\uc744 \ud55c\ub2e4.<br \/>\n\uc544\ub798\uc758 \ucf54\ub4dc\ub294 App \ucef4\ud3ec\ub10c\ud2b8\ub97c DOM\uc5d0 \ub123\uc5b4 \ud654\uba74\uc5d0 \uadf8\ub9ac\uaca0\ub2e4\ub294 \uc758\ubbf8 \uc774\ub2e4.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/01-8.png\" alt=\"src\/index.js\"><\/p>\n<p>\ud83d\uddd2\ufe0f <strong>\uc704\uc758 \ud30c\uc77c\uacfc \ud3f4\ub354\ub294 \ub9ac\uc561\ud2b8\uc758 \ud575\uc2ec\uc694\uc18c\uc774\uba70 \ud30c\uc77c\uba85,\ud3f4\ub354\uba85 \ud639\uc740 \uad6c\uc870\ub97c \ubcc0\uacbd\ud574\uc11c\ub294 \uc548\ub41c\ub2e4.<\/strong><\/p>\n<h3>1.2. \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<strong> <\/strong><\/h3>\n<blockquote>\n<p>\ub9ac\uc561\ud2b8\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub780<\/p>\n<\/blockquote>\n<p>  <strong>\ubc18\ubcf5 \uc0ac\uc6a9\ub418\ub294 UI\uc694\uc18c\ub97c \ud568\uc218\ub85c \ub9cc\ub4dc\ub294\uac83<\/strong> \uc774\ub2e4.<br \/>\n  \uc5ec\uae30\uc11c <strong>UI\uc694\uc18c<\/strong>\ub780 <strong>html\uc758 \ud0dc\uadf8<\/strong>\ub4e4\ub85c \ub9cc\ub4e4\uc5b4\uc9c0\ub294 \uad6c\uc870\uc774\uace0 <strong>\ud568\uc218<\/strong>\ub780 <strong>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ud568\uc218 <\/strong>\uc774\ub2e4<\/p>\n<blockquote>\n<p><strong>Info<\/strong>: <strong>\ucef4\ud3ec\ub10c\ud2b8<\/strong><\/p>\n<\/blockquote>\n<p>  \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud3ec\ud568\uad00\uacc4\ub97c \uac00\uc9c8\uc218 \uc788\uc73c\uba70 \uc704\uacc4\uc5d0 \ub530\ub77c \ubd80\ubaa8\uc640 \uc790\uc2dd\uc73c\ub85c \ub098\ub258\uc5b4\uc9c4\ub2e4.<br \/>\n  \uac04\ub2e8\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud574\ubcf4\uc790.<\/p>\n<ul>\n<li>src\ud3f4\ub354\uc5d0 Child.jsx \ud30c\uc77c\uc744 \uc0dd\uc131\ud55c\ub2e4.<br \/>\n\ucef4\ud3ec\ub10c\ud2b8 \ud30c\uc77c\uc758 \ud655\uc7a5\uc790\ub294 js \ub098 jsx \uc0ac\uc6a9\ud560 \uc218 \uc788\uc73c\ub098 \ud30c\uc77c\uba85\uc740 \ubc18\ub4dc\uc2dc \ub300\ubb38\uc790\ub85c \uc2dc\uc791\ud574\uc57c \ud55c\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">\/\/src\/Child.js\n\nfunction Child() {\n  return &lt;h3&gt;\ub098\ub294 \uc790\uc2dd\uc785\ub2c8\ub2e4.&lt;\/h3&gt;;\n}\n\nexport default Child;\n<\/code><\/pre>\n<p><Accordion title=\"\ud83d\udca1<strong> js \uc640 jsx\ub294 \ubb50\uac00 \ub2e4\ub97c\uae4c\uc694?<\/strong>&#8220;><br \/>\n\ub458\ub2e4 \uac19\ub2e4.<br \/>\n\uc6b0\ub9ac\ub294 \uc804\ud1b5\uc801\uc778 \uc6f9 \uac1c\ubc1c\uc5d0\uc11c `HTML`\ub85c \uad6c\uc870\ub97c \ub9cc\ub4e4\uace0, `CSS`\ub85c \ub514\uc790\uc778\uc744 \uc801\uc6a9\ud558\uba70, `JavaScript`\ub85c \ub3d9\uc791\uc744 \uad6c\ud604\ud588\ub2e4.<br \/>\n\uadf8\ub7ec\ub098 \ub9ac\uc561\ud2b8 \ud658\uacbd\uc5d0\uc11c\ub294 `HTML` \ubb38\uc11c\uc5d0 \ub4e4\uc5b4\uac08 \ud0dc\uadf8\ub4e4\uc744 `JavaScript`\ub85c \uc0dd\uc131\ud558\uac8c \ub418\uba70, \uc774\ub54c \uc0ac\uc6a9\ud558\ub294 \ubb38\ubc95\uc774 \ubc14\ub85c `JSX`\ub2e4. \uc774 `JSX`\ub85c \uc791\uc131\ub41c \ucf54\ub4dc\ub97c \uc6b0\ub9ac\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub77c\uace0 \ubd80\ub978\ub2e4.<br \/>\n\ub9ac\uc561\ud2b8\uc5d0\uc11c \ub514\uc790\uc778\uc740 \uc5ec\uc804\ud788 `CSS`\ub85c, \ub3d9\uc791\uc740 `JavaScript`\ub85c \uac1c\ubc1c\ud558\uac8c \ub41c\ub2e4.<br \/>\n\ud558\uc9c0\ub9cc \ub9ac\uc561\ud2b8\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc640 \uae30\ub2a5\uc744 \ubaa8\ub450 `JavaScript`\ub85c \uc791\uc131\ud558\ub2e4 \ubcf4\ub2c8, `.js` \ud655\uc7a5\uc790\ub97c \uac00\uc9c4 \ud30c\uc77c\uc774 \ub9e4\uc6b0 \ub9ce\uc544\uc9c8 \uc218 \uc788\ub2e4.<br \/>\n\uc774 \ub54c\ubb38\uc5d0 \uac00\ub3c5\uc131\uc744 \ub192\uc774\uae30 \uc704\ud574, \uc77c\ubd80 \uac1c\ubc1c\uc790\ub4e4\uc740 \ucef4\ud3ec\ub10c\ud2b8 \ud30c\uc77c\uc5d0 `.jsx` \ud655\uc7a5\uc790\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774\ub2e4.<br \/>\n\uc774\ub294 \ucf54\ub4dc\uc758 \ubaa9\uc801\uc5d0 \ub530\ub77c \ud30c\uc77c\uc744 \uad6c\ubd84\ud558\ub294 \ub370 \ub3c4\uc6c0\uc744 \uc8fc\uba70, \ucf54\ub4dc\ub97c \ub354 \uba85\ud655\ud558\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\uac8c \ud574\uc900\ub2e4<br \/>\n<\/Accordion><\/p>\n<ul>\n<li>src \/ App.js \ud30c\uc77c\uc744 \uc218\uc815\ud55c\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">\/\/src\/App.js\n\nimport logo from &#39;.\/logo.svg&#39;;\nimport &#39;.\/App.css&#39;;\nimport Child from &#39;.\/Child&#39;;\n\nfunction App() {\n return (\n \t&lt;div&gt;\n \t\t&lt;h1&gt;\uc548\ub155\ud558\uc138\uc694&lt;\/h1&gt;\n \t\t&lt;Child \/&gt;\n \t\t&lt;Child \/&gt;\n \t\t&lt;Child \/&gt;\n \t\t&lt;Child&gt;&lt;\/Child&gt;\n \t&lt;\/div&gt;\n );\n}\n\nexport default App;\n<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/2-1-2-6wxdt5?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm06lv26m0006356i4xopncya%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm06lv26m0002356i1m19cu9z%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm06lv26m0003356iwv7zz79q%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm06lv26m0005356ikxd2bomi%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm06lv26m0002356i1m19cu9z%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm06lv26m0001356ixf6fwjra%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cm06lvh540002356i9m5potht%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A14%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A14%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cm06lv26m0002356i1m19cu9z%2522%252C%2522activeTabId%2522%253A%2522cm06lvh540002356i9m5potht%2522%257D%252C%2522cm06lv26m0005356ikxd2bomi%2522%253A%257B%2522id%2522%253A%2522cm06lv26m0005356ikxd2bomi%2522%252C%2522activeTabId%2522%253A%2522cm06lx1np000z356iy1zucseg%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm06lv26m0004356i3rkkf14v%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522cm06lx1np000z356iy1zucseg%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm06lv26m0003356iwv7zz79q%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cm06lv26m0003356iwv7zz79q%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D\">\u25b6 \uc2e4\ud589<\/a>  <\/p>\n<ul>\n<li>Child.js \uc758 Child \ud568\uc218\uc758 \ubc18\ud658\uac12\uc740 \ud0dc\uadf8\uc774\ub2e4.<\/li>\n<li>App.js \uc5d0\uc11c Child.js\uc758 Child \ud568\uc218\ub97c \uc784\ud3ec\ud2b8 \ud55c \ud6c4 App\ud568\uc218 \ubc14\ub514\uc758 \ubc18\ud658 \uac12\uc73c\ub85c \ub123\uc5c8\ub2e4.<br \/>\n\uc774\ucc98\ub7fc \ud0dc\uadf8\ub97c \ud568\uc218\ub85c \ub9cc\ub4dc\ub294\uac83\uc774 \ucef4\ud3ec\ub10c\ud2b8 \uc774\ub2e4.<br \/>\n\ucef4\ud3ec\ub10c\ud2b8\ub294 \ud55c\ubc88 \uc120\uc5b8\ud574 \ub193\uc73c\uba74 \ud544\uc694\ud560\ub54c \uc5b4\ub514\uc11c\ub098 \ud638\ucd9c\ud574\uc11c \uc0ac\uc6a9\ud560\uc218 \uc788\uc5b4 \ucf54\ub4dc\uc758 \uc720\uc5f0\uc131 \ubc0f \ud655\uc7a5\uc131\uc774 \ub192\uc544\uc9c4\ub2e4.<\/li>\n<\/ul>\n<h4>1.2.1. \ucef4\ud3ec\ub10c\ud2b8 \uaddc\uce59<\/h4>\n<hr>\n<blockquote>\n<p><strong>Info<\/strong>: <strong>\ucef4\ud3ec\ub10c\ud2b8 3\uc6d0\uce59<\/strong><\/p>\n<\/blockquote>\n<ol>\n<li>\ucef4\ud3ec\ub10c\ud2b8\ub294 \ub2e4\ub978 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud3ec\ud568\ud560\uc218 \uc788\uc73c\ub098 \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\ubd80\uc5d0 \ub2e4\ub978 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud558\uba74 \uc548\ub429\ub2c8\ub2e4.<\/li>\n<li>\ucd5c\uc0c1\uc704 \uc694\uc18c\ub294 \uc720\uc77c \ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>\n<li>\ub9c9\uc74c \ud0dc\uadf8\uac00 \uc5c6\uc744 \uacbd\uc6b0\u00a0<code>\/<\/code>\u00a0\ub97c \ubc18\ub4dc\uc2dc \uc791\uc131\ud569\ub2c8\ub2e4<\/li>\n<\/ol>\n<p><strong>1. \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc911\ucca9\ud574\uc11c \uc120\uc5b8\ud560\uc218 \uc5c6\uc2b5\ub2c8\ub2e4.<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/02-5.png\" alt=\"\uadf8\ub9bc \ucc98\ub7fc Syntax1 \ucef4\ud3ec\ub10c\ud2b8\uc758 return\ubb38 \ub0b4\ubd80\uc5d0 \ub610 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc120\uc5b8\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.\"><\/p>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/2-1-2-forked-dnl4ky?file=%2Fsrc%2FSyntax1.js%3A11%2C8\">\u25b6 \uc544\ud508\ud654\uba74<\/a><\/p>\n<blockquote>\n<p><strong>Info<\/strong>: <a href=\"https:\/\/ko.react.dev\/learn\/your-first-component\">\ud83d\udd17\uacf5\uc2dd\ud648:\ucef4\ud3ec\ub10c\ud2b8\ud559\uc2b5\ud558\uae30<\/a><\/p>\n<\/blockquote>\n<p>  \ud654\uba74\uc740 \uc798 \ub80c\ub354\ub9c1 \ub429\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc704\uc758 \uacf5\uc2dd \uc0ac\uc774\ud2b8\uc758 \uac00\uc774\ub4dc\ub97c \uc77d\uc5b4\ubcf4\uba74<br \/>\n\uc911\ucca9\uc120\uc5b8\uc740 \uc18d\ub3c4\uac00 \ub9e4\uc6b0 \ub290\ub9ac\uace0 \uc7a0\uc7ac\uc801\uc73c\ub85c \ubc84\uadf8\ub97c \uc720\ubc1c\ud558\uae30 \ub54c\ubb38\uc5d0 \uc0ac\uc6a9\ud558\uc9c0 \ub9d0\ub77c\uace0 \ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. <\/p>\n<p>\uc544\ub798\ucc98\ub7fc \uc218\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/03-5.png\" alt=\"\"><\/p>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/2-1-2-forked-jsrlyw?file=%2Fsrc%2FSyntax1.js%3A11%2C8\">\u25b6 \uac74\uac15\ud55c\ud654\uba74<\/a><\/p>\n<p><strong>2. \ucd5c\uc0c1\uc704 \uc694\uc18c\ub294 \ud55c\uac1c\ub9cc \ubc18\ud658<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/04-2.png\" alt=\"\"><\/p>\n<blockquote>\n<p><strong>Info<\/strong>: \ucef4\ud3ec\ub10c\ud2b8\ub294 \ubc18\ub4dc\uc2dc UI\uc694\uc18c\ub97c \ud55c\uac1c\ub9cc \ubc18\ud658\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n<p>  \uc704\uc758 \ucf54\ub4dc\ub294 4\uac1c\ub97c \ubc18\ud658 \ud558\ubbc0\ub85c \uc624\ub958\uac00 \ub0a9\ub2c8\ub2e4.<br \/>\n  <code>div<\/code> \ub098 \ub9ac\uc561\ud2b8\uc758 <code>&lt;&gt;&lt;\/&gt;<\/code> (fragment) \uc694\uc18c\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac10\uc2f8\uc57c \ud569\ub2c8\ub2e4.<br \/>\n   return \ud568\uc218\ub294 \ucd5c\uc0c1\uc704 \uc694\uc18c \ud558\ub098\ub9cc\uc744 \ubc18\ud658 \ud558\ub3c4\ub85d \uc218\uc815 \ud574\uc8fc\uc138\uc694. <\/p>\n<p><Accordion title=\"<strong>\ud83d\udcac fragment\ub780?<\/strong>&#8220;><br \/>\n\ucd5c\uc0c1\uc704 \uc694\uc18c\ub97c \ub798\ud551\ud574\uc57c \ud558\ub294 \uc870\uac74 \ub54c\ubb38\uc5d0 \uad6c\uc870\uac00 \ubcf5\uc7a1\ud574 \uc9c8\uc218 \uc788\uc2b5\ub2c8\ub2e4.<br \/>\n\uc774\ub54c \uc0ac\uc6a9\ud560\uc218 \uc788\ub294\uac83\uc774\u00a0`Fragment`\u00a0\uc785\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/05-3.png\" alt=\"ReactFragment \uc0ac\uc6a9\uc804 \uacfc \uc0ac\uc6a9\ud6c4 \ube44\uad50\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/06.jpg\" alt=\"Fragment \ub294\u00a0&lt;&gt;&lt;\/&gt;\u00a0\ube48 \ud0dc\uadf8\ub85c\ub3c4 \uc791\uc131\ud560\uc218 \uc788\uc2b5\ub2c8\ub2e4.\u00a0\"><br \/>\n<\/Accordion><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/07-1.png\" alt=\"\"><\/p>\n<p>\uc544\ub798\ucc98\ub7fc \uc218\uc815\ud574\uc57c \ud569\ub2c8\ub2e4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/08-1.png\" alt=\"\"><\/p>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/2-1-2-forked-9zpqmz?file=%2Fsrc%2FSyntax1.js\">\u25b6 \uac74\uac15\ud55c\ud654\uba74<\/a><\/p>\n<p><strong>3. \ucef4\ud3ec\ub10c\ud2b8\uc758 \ud0dc\uadf8\ub294 \ubc18\ub4dc\uc2dc \ub2eb\ub294\ub2e4<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/09.png\" alt=\"\"><\/p>\n<blockquote>\n<p><strong>Info<\/strong>: \ucef4\ud3ec\ub10c\ud2b8\ub97c \uad6c\ud604\ud560\ub54c\ub294 <strong>JSX<\/strong> \ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n<p>  <strong>JSX<\/strong> \ub294 <strong>J<\/strong>avascript <strong>S<\/strong>yntax E<strong>x<\/strong>tention \uc758 \uc57d\uc790\ub85c \uc790\ubc14\uc2a4\ud2b8\ub9bd\ud2b8\uc758 \ud655\uc7a5\ubb38\ubc95\uc774\ub77c\ub294 \ub73b\uc785\ub2c8\ub2e4.<\/p>\n<p>  \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud654\uba74\uc5d0 \ub80c\ub354\ub9c1 \ud560\ub54c\ub294 html \ud0dc\uadf8\ub97c \ub9c8\ud06c\uc5c5 \ud558\ub4ef \ucef4\ud3ec\ub10c\ud2b8 \ud568\uc218\uba85\uc744 <code>&lt;&gt;<\/code> \uc548\uc5d0  \uc501\ub2c8\ub2e4.  \uc608\uc2dc)  <code>&lt;\ucef4\ud3ec\ub10c\ud2b8\uba85&gt;<\/code><br \/>\n  \uc774 \ub2e8\uacc4\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc5d0\uc11c \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ub2e8\uacc4\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p>  html \uc740 <code>&lt;div&gt;&lt;\/div&gt;<\/code> \uac19\uc740 \uc77c\ubc18\ud0dc\uadf8 \uc640  <code>&lt;input&gt;<\/code> , <code>&lt;br&gt;<\/code> \uac19\uc740 \ub2e8\uc77c\ud0dc\uadf8\uac00 \uc788\ub4ef<br \/>\n  JSX\uc758 \ud0dc\uadf8\ub3c4 (<strong>\u21d2\ucef4\ud3ec\ub10c\ud2b8<\/strong>)  \ud544\uc694\uc5d0 \ub530\ub77c \ub450\uac00\uc9c0\ub97c \ub2e4 \uc0ac\uc6a9\ud560\uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li>\uc77c\ubc18\ud0dc\uadf8 <code>&lt;\ucef4\ud3ec\ub10c\ud2b8\uba85&gt;<\/code> \ucee4\ud50c\ud83e\udddf\u200d\u2640\ufe0f\ud83e\udddf\u200d\u2642\ufe0f <code> &lt;\/\ucef4\ud3ec\ub10c\ud2b8\uba85&gt;<\/code> <\/li>\n<li>\ub2e8\uc77c\ud0dc\uadf8  <code>&lt;\ucef4\ud3ec\ub10c\ud2b8\uba85 \/&gt;<\/code> \uc2f1\uae00\u2764<br \/>\n  <strong>html \uacfc \ucc28\uc774\uc810\uc740 \ub2e8\uc77c\ud0dc\uadf8 \ub4a4\uc5d0 <strong><strong><code>\/<\/code><\/strong><\/strong> \uae30\ud638\uac00 \uc5c6\uc73c\uba74 \uc624\ub958\uac00 \ubc1c\uc0dd\ud569\ub2c8\ub2e4. <\/strong><br \/>\n\uc624\ub958\uac00 \ub739\ub2c8\ub2e4<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/10.png\" alt=\"\"><\/p>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/2-1-2-forked-fqwnz3?file=%2Fsrc%2FSyntax1.js%3A11%2C17\">\u25b6 \uc544\ud508\ud654\uba74<\/a><\/p>\n<p>\uc544\ub798\ucc98\ub7fc \uc218\uc815\ud574\uc57c \ud569\ub2c8\ub2e4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/11.png\" alt=\"\"><\/p>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/2-1-2-forked-fqwnz3?file=%2Fsrc%2FSyntax1.js%3A8%2C19\">\u25b6 \uac74\uac15\ud55c\ud654\uba74<\/a><\/p>\n<hr>\n<h3>1.2. <strong>\u00a0\ucef4\ud3ec\ub10c\ud2b8 \ub0b4\ubcf4\ub0b4\uae30<\/strong><\/h3>\n<blockquote>\n<p>\ucef4\ud3ec\ub10c\ud2b8\ub294 \ubc18\ubcf5\ud574\uc11c \uc0ac\uc6a9\ud574\uc57c \ud558\ub294 UI \uc694\uc18c\ub97c \ud568\uc218\ucc98\ub7fc \ub9cc\ub4e4\uc5b4 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \uac1c\ubc1c\ub41c \uae30\uc220\ub85c \uc774\ud574\ud560 \uc218 \uc788\ub2e4. <\/p>\n<\/blockquote>\n<p>  \ub530\ub77c\uc11c, \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc678\ubd80\uc5d0\uc11c \uc27d\uac8c \ubd88\ub7ec\uc640 \uaebc\ub0b4\uc4f8\uc218 \uc788\ub3c4\ub85d \uc791\uc131\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4.<\/p>\n<p>  \uc774\ubc88\uc5d0\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc678\ubd80\ub85c \ub0b4\ubcf4\ub0b4\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf8\ub2e4<\/p>\n<h4>1.2.1. \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\ubcf4\ub0b4\ub294 2\uac00\uc9c0 \ubc29\ubc95<\/h4>\n<table>\n<thead>\n<tr>\n<th>\uc885\ub958<\/th>\n<th>\ub0b4\ubcf4\ub0bc\ub54c<\/th>\n<th>\ubd88\ub7ec\uc62c\ub54c<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\ud30c\uc77c\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud55c\uac1c\ub9cc \ub0b4\ubcf4\ub0b4\ub294 \uacbd\uc6b0<\/td>\n<td><code>export default \ucef4\ud3ec\ub10c\ud2b8\uba85<\/code><\/td>\n<td><code>import \ucef4\ud3ec\ub10c\ud2b8\uba85 from &#39;.\/\ucef4\ud3ec\ub10c\ud2b8\uba85.js&#39;;<\/code><\/td>\n<\/tr>\n<tr>\n<td>\ud30c\uc77c\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc5ec\ub7ec\uac1c \ub0b4\ubcf4\ub0b4\ub294 \uacbd\uc6b0<\/td>\n<td><code>export { \ucef4\ud3ec\ub10c\ud2b8\uba85 }<\/code><\/td>\n<td><code>import { \ucef4\ud3ec\ub10c\ud2b8\uba85 } from &#39;.\/\ucef4\ud3ec\ub10c\ud2b8\uba85.js&#39;;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>1.2.3. Member \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uace0 \ub0b4\ubcf4\ub0b4\uae30 (default export )<\/h4>\n<ul>\n<li>src\/Meber.js \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uace0 \uc678\ubd80\ub85c \ub0b4\ubcf4\ub0b8\ub2e4.<br \/>\n\uc774\ub54c default export \ub97c \uc0ac\uc6a9\ud574\ubcf4\uc790.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">const Member = () =&gt; {\n return (\n \t&lt;&gt;\n \t\t&lt;span&gt; \uc774\ub984: &lt;\/span&gt;\n \t\t&lt;span&gt; \uae40\ub9dd\uace0&lt;\/span&gt;\n \t&lt;\/&gt;\n );\n};\nexport default Member;\n<\/code><\/pre>\n<h4>1.2.4. Picture \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uace0 \uc678\ubd80\ub85c \ub0b4\ubcf4\ub0b4\uae30 (named export)<\/h4>\n<ul>\n<li>src\/Picture.js \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uace0 \uc678\ubd80\ub85c \ub0b4\ubcf4\ub0b8\ub2e4.<br \/>\n\uc774\ub54c named export \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud574\ubcf4\uc790.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">const Picture = () =&gt; {\n return (\n \t&lt;&gt;\n \t\t&lt;span&gt; \uc0ac\uc9c4: &lt;\/span&gt;\n \t\t&lt;img src=&quot;http:\/\/qwerew.cafe24.com\/images\/pet-7.jpg&quot; alt=&quot;&quot; \/&gt;;\n \t&lt;\/&gt;\n );\n};\n\nexport { Picture };\n<\/code><\/pre>\n<h4>1.2.4. App \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc784\ud3ec\ud2b8 \ud558\uae30<\/h4>\n<ul>\n<li>src\/App.js \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc5f4\uace0 \uc544\ub798\uc640 \uac19\uc774 \ucf54\ub4dc\ub97c \uc218\uc815\ud574\ubcf4\uc790.<br \/>\n\uc774\ub54c \uac01\uac01 \ub2e4\ub978 \ubc29\uc2dd\uc73c\ub85c \ub0b4\ubcf4\ub0b8 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubd88\ub7ec\uc62c\ub54c\uc758 \ucc28\uc774\uc810\uc744 \uae30\uc5b5\ud558\uc790.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import &#39;.\/styles.css&#39;;\n**import { Picture } from &#39;.\/Picture&#39;;\nimport Member from &#39;.\/Member&#39;;**\n\nexport default function App() {\n return (\n \t&lt;div className=&quot;App&quot;&gt;\n \t\t&lt;Member \/&gt;\n \t\t&lt;Picture \/&gt;\n \t&lt;\/div&gt;\n );\n}\n<\/code><\/pre>\n<h3>1.3. <strong>\u00a0\ubb38\uc81c<\/strong><\/h3>\n<blockquote>\n<p><strong>Info<\/strong>: \uc790\uc2e0\ub9cc\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4\ubcf4\uc790<\/p>\n<\/blockquote>\n<p>  \uc8fc\uc5b4\uc9c4 \uc18c\uc2a4 \uc774\ubbf8\uc9c0\ub97c \ud65c\uc6a9\ud558\uac70\ub098 \uc9c1\uc811 \uc6d0\ud558\ub294 \uc774\ubbf8\uc9c0\ub97c \ud65c\uc6a9\ud574\ub3c4 \ub41c\ub2e4.<br \/>\n  \uac74\uac15\ud55c \ud654\uba74\uacfc \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4\ubcf4\uc790.<\/p>\n<ul>\n<li>\uc18c\uc2a4\uc774\ubbf8\uc9c0<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">http:\/\/qwerew.cafe24.com\/images\/pet-2.jpg\nhttp:\/\/qwerew.cafe24.com\/images\/pet-3.jpg\nhttp:\/\/qwerew.cafe24.com\/images\/pet-4.jpg\n<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/p\/sandbox\/2-1-zy4n5c?from-embed=&#038;layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm06vzkv60006356i8auqtht4%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm06vzkv60002356idyxbeacp%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm06vzkv60003356ipnfpw3mb%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm06vzkv60005356iodq0rgw6%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm06vzkv60002356idyxbeacp%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm06vzkv60001356idez2ueg0%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%257D%255D%252C%2522id%2522%253A%2522cm06vzkv60002356idyxbeacp%2522%252C%2522activeTabId%2522%253A%2522cm06vzkv60001356idez2ueg0%2522%257D%252C%2522cm06vzkv60005356iodq0rgw6%2522%253A%257B%2522id%2522%253A%2522cm06vzkv60005356iodq0rgw6%2522%252C%2522activeTabId%2522%253A%2522cm06vzqvi000v356iojsr77i4%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm06vzkv60004356igsh2eymu%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522cm06vzqvi000v356iojsr77i4%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm06vzkv60003356ipnfpw3mb%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cm06vzkv60003356ipnfpw3mb%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D\">\u25b6 \uac74\uac15\ud55c\ud654\uba74<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. \ub9ac\uc561\ud2b8\ucef4\ud3ec\ub10c\ud2b8 1.1. \ub9ac\uc561\ud2b8 \uc571 \uad6c\uc870 1.1.1. \uc774\ubbf8\uc9c0 \ub9ac\uc18c\uc2a4 \uc8fc\uc18c \uc218\uc5c5\uc5d0 \uc0ac\uc6a9\ud560 \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc758 \uc8fc\uc18c \uc785\ub2c8\ub2e4. http:\/\/qwerew.cafe24.com\/images\/pet-1.jpg http:\/\/qwerew.cafe24.com\/images\/pet-2.jpg http:\/\/qwerew.cafe24.com\/images\/pet-3.jpg http:\/\/qwerew.cafe24.com\/images\/pet-4.jpg http:\/\/qwerew.cafe24.com\/images\/pet-5.jpg http:\/\/qwerew.cafe24.com\/images\/pet-6.jpg http:\/\/qwerew.cafe24.com\/images\/pet-7.jpg http:\/\/qwerew.cafe24.com\/images\/pet-8.jpg 1.1.2. \ub9ac\uc561\ud2b8 \uc571\uc758 \ud3f4\ub354 \uad6c\uc131 \ub9ac\uc561\ud2b8 \uc571\uc758 \ud3f4\ub354\uc640 \ud30c\uc77c\uc758 \uad6c\uc131\uacfc \uc5ed\ud560\uc744 \uc54c\uc544\ubd05\uc2dc\ub2e4. react-test\/ |-**node_modules**\/ # \uc758\uc874\uc131 \ud30c\uc77c\uc744 \ub2f4\uc740 \ud3f4\ub354 |- **src**\/ |- **App.js** # \ucd5c\uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8 |- **index.js** # \uc571 \uc9c4\uc785\uc810 &#8230; <a title=\"\ucef4\ud3ec\ub10c\ud2b8\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=142\" aria-label=\"\ucef4\ud3ec\ub10c\ud2b8\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-142","post","type-post","status-publish","format-standard","hentry","category-react-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/142","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=142"}],"version-history":[{"count":2,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/142\/revisions"}],"predecessor-version":[{"id":2242,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/142\/revisions\/2242"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}