{"id":90,"date":"2026-06-26T13:32:24","date_gmt":"2026-06-26T13:32:24","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=90"},"modified":"2026-06-26T13:32:38","modified_gmt":"2026-06-26T13:32:38","slug":"%ec%8b%9c%ec%9e%91%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=90","title":{"rendered":"\uc2dc\uc791\ud558\uae30"},"content":{"rendered":"<h1>1. \uc2dc\uc791\ud558\uae30 \uc804\uc5d0<\/h1>\n<p><Button label=\"\uc774\ub825\uc11c\ud398\uc774\uc9c0\uc81c\uc791 \uac00\uc774\ub4dc\" link=\"https:\/\/www.figma.com\/design\/IPVaMQdHydE6zTysOTTWtr\/%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4%ED%8E%98%EC%9D%B4%EC%A7%80%EA%B5%AC%EC%84%B1?node-id=5383-479&#038;t=7hSBsNQk9yx1oVYF-1\" style=\"solid\"><\/Button><br \/>\n<\/p>\n<p><a href=\"https:\/\/github.com\/qwerewqwerew\/figma-react-portfolio\">\uc644\uc131\ucf54\ub4dc<\/a><\/p>\n<p><a href=\"https:\/\/figma-react-portfolio.vercel.app\/\">\uc644\uc131\ud654\uba74<\/a><\/p>\n<h2>1.1. \uc774 \uad50\uc548\uc73c\ub85c \ub9cc\ub4e4 \uac83<\/h2>\n<p>\ud53c\uadf8\ub9c8 \ub514\uc790\uc778\uc744 \ubcf4\uace0 <strong>\ud3ec\ud2b8\ud3f4\ub9ac\uc624 \uc6f9\uc0ac\uc774\ud2b8<\/strong>\ub97c React\ub85c \uc9c1\uc811 \ub9cc\ub4e4\uc5b4\ubd05\ub2c8\ub2e4.<\/p>\n<pre><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  [\ub85c\uace0]    Home  AboutMe  Projects            \u2502  \u2190 \ub124\ube44\uac8c\uc774\uc158\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502                                              \u2502\n\u2502      Title                                   \u2502  \u2190 \ud788\uc5b4\ub85c\n\u2502      Subtitle                                \u2502\n\u2502  [Github]  [Resume]                          \u2502\n\u2502                                              \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  ABOUT ME                                    \u2502  \u2190 \uc18c\uac1c\n\u2502  \ud559\ub825 \/ \uc790\uaca9\uc0ac\ud56d \/ \uc778\uc801\uc0ac\ud56d                    \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  Projects                                    \u2502  \u2190 \ud504\ub85c\uc81d\ud2b8\n\u2502  [\uc124\uba85]            [\uc774\ubbf8\uc9c0]                   \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  contacts                                    \u2502  \u2190 \uc5f0\ub77d\ucc98\n\u2502  Name \/ Email \/ Message \/ [Submit]           \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  Thanks    X  IG  YT  LI   copyright         \u2502  \u2190 \ud478\ud130\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n<hr>\n<h2>1.2. \ub2e8\uacc4\ubcc4 \ud559\uc2b5 \uc21c\uc11c<\/h2>\n<table>\n<thead>\n<tr>\n<th>\ud30c\uc77c<\/th>\n<th>\ub0b4\uc6a9<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><a href=\".\/01_App.md\">01_App<\/a><\/td>\n<td>\uc804\uccb4 \uad6c\uc870 \uc870\ub9bd<\/td>\n<\/tr>\n<tr>\n<td><a href=\".\/02_CSS%EA%B8%B0%EC%B4%88.md\">02_CSS\uae30\ucd08<\/a><\/td>\n<td>\uc2a4\ud0c0\uc77c \ucd08\uae30\ud654<\/td>\n<\/tr>\n<tr>\n<td><a href=\".\/03_Nav.md\">03_Nav<\/a><\/td>\n<td>\ub124\ube44\uac8c\uc774\uc158 \ubc14<\/td>\n<\/tr>\n<tr>\n<td><a href=\".\/04_Hero.md\">04_Hero<\/a><\/td>\n<td>\ud788\uc5b4\ub85c \uc139\uc158<\/td>\n<\/tr>\n<tr>\n<td><a href=\".\/05_AboutMe.md\">05_AboutMe<\/a><\/td>\n<td>\uc18c\uac1c \uc139\uc158<\/td>\n<\/tr>\n<tr>\n<td><a href=\".\/06_Projects.md\">06_Projects<\/a><\/td>\n<td>\ud504\ub85c\uc81d\ud2b8 \uc139\uc158<\/td>\n<\/tr>\n<tr>\n<td><a href=\".\/07_Contact.md\">07_Contact<\/a><\/td>\n<td>\uc5f0\ub77d\ucc98 \ud3fc<\/td>\n<\/tr>\n<tr>\n<td><a href=\".\/08_Footer.md\">08_Footer<\/a><\/td>\n<td>\ud558\ub2e8 \ud478\ud130<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h2>1.3. React\ub97c \ubc30\uc6b0\uae30 \uc804 \uaf2d \uc54c\uc544\uc57c \ud560 \uac83<\/h2>\n<h3>1.3.1. \ucef4\ud3ec\ub10c\ud2b8\ub780?<\/h3>\n<p>\ub808\uace0 \ube14\ub85d\ucc98\ub7fc \ud654\uba74\uc744 <strong>\uc791\uc740 \uc870\uac01<\/strong>\uc73c\ub85c \ucabc\uac1c\uc11c \ub9cc\ub4dc\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4.<\/p>\n<pre><code>App (\uc804\uccb4 \ud398\uc774\uc9c0)\n\u251c\u2500\u2500 Nav         \u2190 \ub124\ube44\uac8c\uc774\uc158 \ube14\ub85d\n\u251c\u2500\u2500 Hero        \u2190 \ud788\uc5b4\ub85c \ube14\ub85d\n\u251c\u2500\u2500 AboutMe     \u2190 \uc18c\uac1c \ube14\ub85d\n\u251c\u2500\u2500 Projects    \u2190 \ud504\ub85c\uc81d\ud2b8 \ube14\ub85d\n\u251c\u2500\u2500 Contact     \u2190 \uc5f0\ub77d\ucc98 \ube14\ub85d\n\u2514\u2500\u2500 Footer      \u2190 \ud478\ud130 \ube14\ub85d\n<\/code><\/pre>\n<p>\uac01 \ube14\ub85d\uc744 \ub530\ub85c \ub9cc\ub4e4\uace0 \u2192 App\uc5d0\uc11c \uc870\ub9bd\ud569\ub2c8\ub2e4.<\/p>\n<h3>1.3.2. JSX\ub780?<\/h3>\n<p>React\uc5d0\uc11c \ud654\uba74\uc744 \uadf8\ub9ac\ub294 \ubb38\ubc95\uc785\ub2c8\ub2e4. HTML\ucc98\ub7fc \uc0dd\uacbc\uc9c0\ub9cc JavaScript \uc548\uc5d0 \uc501\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">\/\/ HTML\n&lt;div class=&quot;nav&quot;&gt;\uc548\ub155&lt;\/div&gt;\n\n\/\/ JSX (React)\n&lt;div className=&quot;nav&quot;&gt;\uc548\ub155&lt;\/div&gt;\n\/\/       \u2191 class \ub300\uc2e0 className\uc744 \uc501\ub2c8\ub2e4\n<\/code><\/pre>\n<h3>1.3.3. \ud30c\uc77c \uad6c\uc870<\/h3>\n<pre><code>src\/\n\u251c\u2500\u2500 main.jsx          \u2190 \uc571 \uc2dc\uc791\uc810\n\u251c\u2500\u2500 router.js         \u2190 \ub77c\uc6b0\ud130 \uc124\uc815\n\u251c\u2500\u2500 App.jsx           \u2190 \uc804\uccb4 \uc870\ub9bd\n\u251c\u2500\u2500 index.css         \u2190 \uc2a4\ud0c0\uc77c\n\u2514\u2500\u2500 components\/       \u2190 \uac01 \ube14\ub85d(\ucef4\ud3ec\ub10c\ud2b8) \ud30c\uc77c\ub4e4\n    \u251c\u2500\u2500 Nav.jsx\n    \u251c\u2500\u2500 Hero.jsx\n    \u2514\u2500\u2500 ...\n<\/code><\/pre>\n<hr>\n<h2>1.4. \ud504\ub85c\uc81d\ud2b8 \uc2e4\ud589<\/h2>\n<pre><code class=\"language-bash\">npm run dev\n<\/code><\/pre>\n<h2>1.5. \uc81c\ud50c\ub9b0 \uac00\uc785<\/h2>\n<ol>\n<li>\ubb34\ub8cc inspector \ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 \uc544\ub798\uc758 \uc11c\ube44\uc2a4\ub97c \uc2e0\uccad\ud55c\ub2e4.\n<ol>\n<li>\uc81c\ud50c\ub9b0 \uac00\uc785 -&gt; \ubb34\ub8cc\uc0ac\uc6a9\uc790\ub294 1\uac1c\uc758 \ud504\ub85c\uc81d\ud2b8\ub9cc \uc0dd\uc131\ud560\uc218 \uc788\ub2e4.<\/li>\n<li><a href=\"https:\/\/app.zeplin.io\/login\">\ud648\ud398\uc774\uc9c0<\/a><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_222859.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_222906.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_223115.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_223154.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_223205.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_223302.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_223315.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_223443.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_223508.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_223555.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_223621.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_223911.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_223654.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_224147.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_224047.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_223706.png\" alt=\"alt\"><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_224130.png\" alt=\"alt\"><\/li>\n<\/ol>\n<\/li>\n<li>\uc544\ub798\uc758 \uc21c\uc11c\ub300\ub85c \ud074\ub9ad\ud55c\ub2e4.<\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_223706.png\" alt=\"alt\"><\/li>\n<li>\uc6b0\uce21\uc758 \ucf54\ub4dc \uc2a4\ub2c8\ud3ab\uc774 \ubcf4\uc774\uc9c0 \uc54a\uc744 \uacbd\uc6b0 \ud655\uc7a5\ud504\ub85c\uadf8\ub7a8\uc744 \ucd94\uac00\ud55c\ub2e4.\n<ol>\n<li><a href=\"https:\/\/extensions.zeplin.io\/\">\ud655\uc7a5\ud504\ub85c\uadf8\ub7a8 \ud398\uc774\uc9c0<\/a><\/li>\n<li><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-02-26_224615.png\" alt=\"alt text\"><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>1. \uc2dc\uc791\ud558\uae30 \uc804\uc5d0 \uc644\uc131\ucf54\ub4dc \uc644\uc131\ud654\uba74 1.1. \uc774 \uad50\uc548\uc73c\ub85c \ub9cc\ub4e4 \uac83 \ud53c\uadf8\ub9c8 \ub514\uc790\uc778\uc744 \ubcf4\uace0 \ud3ec\ud2b8\ud3f4\ub9ac\uc624 \uc6f9\uc0ac\uc774\ud2b8\ub97c React\ub85c \uc9c1\uc811 \ub9cc\ub4e4\uc5b4\ubd05\ub2c8\ub2e4. \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 [\ub85c\uace0] Home AboutMe Projects \u2502 \u2190 \ub124\ube44\uac8c\uc774\uc158 \u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524 \u2502 \u2502 \u2502 Title \u2502 \u2190 \ud788\uc5b4\ub85c \u2502 Subtitle \u2502 \u2502 [Github] [Resume] \u2502 \u2502 \u2502 \u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524 \u2502 ABOUT ME \u2502 \u2190 \uc18c\uac1c \u2502 \ud559\ub825 \/ \uc790\uaca9\uc0ac\ud56d &#8230; <a title=\"\uc2dc\uc791\ud558\uae30\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=90\" 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":[11],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-react-resume"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/90","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=90"}],"version-history":[{"count":1,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":109,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/90\/revisions\/109"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}