{"id":87,"date":"2026-06-26T13:32:24","date_gmt":"2026-06-26T13:32:24","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=87"},"modified":"2026-06-26T13:32:24","modified_gmt":"2026-06-26T13:32:24","slug":"projects","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=87","title":{"rendered":"Projects"},"content":{"rendered":"<h1>06. Projects.jsx \u2014 \ud504\ub85c\uc81d\ud2b8 \uc139\uc158<\/h1>\n<h2>\uc774\ubc88 \ub2e8\uacc4\uc5d0\uc11c \ud560 \uc77c<\/h2>\n<p>\ud504\ub85c\uc81d\ud2b8 \ubaa9\ub85d\uc744 \ub370\uc774\ud130 \ubc30\uc5f4\ub85c \uad00\ub9ac\ud558\uace0,<br \/>\n<code>map<\/code>\uc73c\ub85c \ud654\uba74\uc5d0 \ucd9c\ub825\ud558\ub294 \ubc29\ubc95\uc744 \ubc30\uc6c1\ub2c8\ub2e4.<\/p>\n<hr>\n<h2>\ud53c\uadf8\ub9c8 \ub514\uc790\uc778 \ubd84\uc11d<\/h2>\n<pre><code>\u2502 \u2500\u2500\u2500 Projects \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 \u2502\n\u2502                                                   \u2502\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\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\n\u2502  \u2502 \u25cf Project 01         \u2502                       \u2502 \u2502\n\u2502  \u2502                      \u2502                       \u2502 \u2502\n\u2502  \u2502 \ub3d9\ub300\ubb38\uad6c\uccad             \u2502      \uc774\ubbf8\uc9c0 \uc601\uc5ed        \u2502 \u2502\n\u2502  \u2502                      \u2502                       \u2502 \u2502\n\u2502  \u2502 \uae30\uc220\uc2a4\ud0dd : html,css\u2026  \u2502                       \u2502 \u2502\n\u2502  \u2502 \ubc30\ud3ec\ub9e4\uccb4 : desktop\u2026   \u2502                       \u2502 \u2502\n\u2502  \u2502 \uc791\uc5c5\uae30\uac04 : 2\uc8fc         \u2502                       \u2502 \u2502\n\u2502  \u2502 \uae30\uc5ec\ub3c4   : 100%        \u2502                       \u2502 \u2502\n\u2502  \u2502                      \u2502                       \u2502 \u2502\n\u2502  \u2502 [\uae30\ud68d\uc11c] [\uae43\ud5c8\ube0c] [\ud398\uc774\uc9c0] \u2502                   \u2502 \u2502\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\n<\/code><\/pre>\n<table>\n<thead>\n<tr>\n<th>\uc694\uc18c<\/th>\n<th>\uac12<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\uc8fc\ud669 \uc810 \uc0c9\uc0c1<\/td>\n<td>#f26440<\/td>\n<\/tr>\n<tr>\n<td>Project \ubc88\ud638 \uc0c9<\/td>\n<td>#c7c7c7<\/td>\n<\/tr>\n<tr>\n<td>\ud504\ub85c\uc81d\ud2b8 \ud0c0\uc774\ud2c0<\/td>\n<td>32px<\/td>\n<\/tr>\n<tr>\n<td>\uc124\uba85 \ud14d\uc2a4\ud2b8<\/td>\n<td>18px, #555555<\/td>\n<\/tr>\n<tr>\n<td>\ubc84\ud2bc \ubc30\uacbd<\/td>\n<td>#000000<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h2>\uc0c8\ub85c\uc6b4 \uac1c\ub150: \ub370\uc774\ud130\uc640 \ud654\uba74 \ubd84\ub9ac<\/h2>\n<p>\ub370\uc774\ud130(\ubc30\uc5f4)\uc640 \ud654\uba74(JSX)\uc744 \ubd84\ub9ac\ud558\uba74:<\/p>\n<ul>\n<li>\ud504\ub85c\uc81d\ud2b8\uac00 \ub298\uc5b4\ub098\ub3c4 \ubc30\uc5f4\uc5d0 \ud56d\ubaa9\ub9cc \ucd94\uac00\ud558\uba74 \ub429\ub2c8\ub2e4<\/li>\n<li>\ucf54\ub4dc\uac00 \ud6e8\uc52c \uae54\ub054\ud574\uc9d1\ub2c8\ub2e4<\/li>\n<\/ul>\n<pre><code class=\"language-jsx\">\/\/ \ub370\uc774\ud130\ub9cc \ub530\ub85c (\ub0b4\uc6a9)\nconst PROJECTS = [\n  { id: 1, title: &#39;\ub3d9\ub300\ubb38\uad6c\uccad&#39;, ... },\n  { id: 2, title: &#39;\ub450 \ubc88\uc9f8 \ud504\ub85c\uc81d\ud2b8&#39;, ... }, \/\/ \ucd94\uac00\ub3c4 \uc26c\uc6c0\n]\n\n\/\/ \ud654\uba74\ub9cc \ub530\ub85c (\ud615\ud0dc)\n{PROJECTS.map((project) =&gt; (\n  &lt;ProjectItem project={project} \/&gt;\n))}\n<\/code><\/pre>\n<hr>\n<h2>STEP 1 \u2014 Projects.jsx \uc791\uc131<\/h2>\n<pre><code class=\"language-jsx\">\/\/ src\/components\/Projects.jsx\nimport SectionTitle from &#39;.\/SectionTitle&#39;\n\n\/* \u2500\u2500\u2500 \ud504\ub85c\uc81d\ud2b8 \ub370\uc774\ud130 (\ucef4\ud3ec\ub10c\ud2b8 \ubc16\uc5d0 \uc704\uce58) \u2500\u2500\u2500 *\/\n\/\/ \ub098\uc911\uc5d0 \ud504\ub85c\uc81d\ud2b8\ub97c \ucd94\uac00\ud560 \ub54c \uc774 \ubc30\uc5f4\uc5d0\ub9cc \ud56d\ubaa9\uc744 \ucd94\uac00\ud558\uba74 \ub429\ub2c8\ub2e4\nconst PROJECTS = [\n  {\n    id: 1,\n    number: &#39;Project 01&#39;,\n    title: &#39;\ub3d9\ub300\ubb38\uad6c\uccad&#39;,\n    stack: &#39;html, css, photoshop, figma&#39;,\n    deploy: &#39;desktop, mobile&#39;,\n    period: &#39;2\uc8fc&#39;,\n    contribution: &#39;100%&#39;,\n    browsers: &#39;Chrome \/ Edge \/ Opera \/ Safari&#39;,\n    pages: &#39;\uba54\uc778\ud398\uc774\uc9c0 \/ \uc811\uadfc\uc131 \uc900\uc218&#39;,\n    links: {\n      plan: &#39;#&#39;,\n      github: &#39;#&#39;,\n      live: &#39;#&#39;,\n    },\n  },\n  \/\/ \ud504\ub85c\uc81d\ud2b8 \ucd94\uac00 \uc2dc \uc5ec\uae30\uc5d0 \uac1d\uccb4\ub97c \ud558\ub098 \ub354 \uc791\uc131\ud558\uc138\uc694\n]\n\n\/* \u2500\u2500\u2500 \ud504\ub85c\uc81d\ud2b8 \ud55c \ud56d\ubaa9\uc744 \ubcf4\uc5ec\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8 \u2500\u2500\u2500 *\/\nconst ProjectItem = ({ project }) =&gt; {\n  return (\n    &lt;div className=&quot;project-item&quot;&gt;\n\n      {\/* \uc67c\ucabd: \uc124\uba85 *\/}\n      &lt;div className=&quot;project-desc&quot;&gt;\n\n        {\/* \ubc88\ud638 (\u25cf Project 01) *\/}\n        &lt;div className=&quot;project-number&quot;&gt;\n          &lt;span className=&quot;project-dot&quot; \/&gt;\n          &lt;span className=&quot;project-number__text&quot;&gt;{project.number}&lt;\/span&gt;\n        &lt;\/div&gt;\n\n        {\/* \ud504\ub85c\uc81d\ud2b8 \uc774\ub984 *\/}\n        &lt;h3 className=&quot;project-title&quot;&gt;{project.title}&lt;\/h3&gt;\n\n        {\/* \uc0c1\uc138 \uc815\ubcf4 *\/}\n        &lt;div className=&quot;project-info&quot;&gt;\n          &lt;div className=&quot;project-info__row&quot;&gt;\n            &lt;span className=&quot;project-info__label&quot;&gt;\uae30\uc220\uc2a4\ud0dd :&lt;\/span&gt;\n            &lt;span&gt;{project.stack}&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;div className=&quot;project-info__row&quot;&gt;\n            &lt;span className=&quot;project-info__label&quot;&gt;\ubc30\ud3ec\ub9e4\uccb4 :&lt;\/span&gt;\n            &lt;span&gt;{project.deploy}&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;div className=&quot;project-info__row&quot;&gt;\n            &lt;span className=&quot;project-info__label&quot;&gt;\uc791\uc5c5\uae30\uac04 :&lt;\/span&gt;\n            &lt;span&gt;{project.period}&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;div className=&quot;project-info__row&quot;&gt;\n            &lt;span className=&quot;project-info__label&quot;&gt;\ubcf8\uc778\uae30\uc5ec\ub3c4 :&lt;\/span&gt;\n            &lt;span&gt;{project.contribution}&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;div className=&quot;project-info__row&quot;&gt;\n            &lt;span className=&quot;project-info__label&quot;&gt;\ube0c\ub77c\uc6b0\uc800 \ud638\ud658\uc131 :&lt;\/span&gt;\n            &lt;span&gt;{project.browsers}&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;div className=&quot;project-info__row&quot;&gt;\n            &lt;span className=&quot;project-info__label&quot;&gt;\ud398\uc774\uc9c0\uc218 \/ \ud2b9\uc9d5 :&lt;\/span&gt;\n            &lt;span&gt;{project.pages}&lt;\/span&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        {\/* \ubc84\ud2bc 3\uac1c *\/}\n        &lt;div className=&quot;project-buttons&quot;&gt;\n          &lt;a href={project.links.plan}   className=&quot;project-btn&quot;&gt;\uae30\ud68d\uc11c \ubcf4\uae30&lt;\/a&gt;\n          &lt;a href={project.links.github} className=&quot;project-btn&quot;&gt;\uae43\ud5c8\ube0c \ubcf4\uae30&lt;\/a&gt;\n          &lt;a href={project.links.live}   className=&quot;project-btn&quot;&gt;\ud398\uc774\uc9c0 \ubcf4\uae30&lt;\/a&gt;\n        &lt;\/div&gt;\n\n      &lt;\/div&gt;\n\n      {\/* \uc624\ub978\ucabd: \uc774\ubbf8\uc9c0 \uc790\ub9ac *\/}\n      &lt;div className=&quot;project-image&quot;&gt;\n        {\/* \uc2e4\uc81c \uc774\ubbf8\uc9c0\uac00 \uc788\uc73c\uba74: &lt;img src=&quot;...&quot; alt=&quot;...&quot; \/&gt; *\/}\n      &lt;\/div&gt;\n\n    &lt;\/div&gt;\n  )\n}\n\n\/* \u2500\u2500\u2500 Projects \uba54\uc778 \ucef4\ud3ec\ub10c\ud2b8 \u2500\u2500\u2500 *\/\nconst Projects = () =&gt; {\n  return (\n    &lt;section className=&quot;projects&quot; id=&quot;projects&quot;&gt;\n\n      &lt;SectionTitle\n        title=&quot;Projects&quot;\n        subtitle=&quot;\ub048\uae30\uc640 \uc5f4\uc815\uc73c\ub85c \uc131\uc7a5\ud558\ub294 \uc624\uc131\uc758\uc785\ub2c8\ub2e4.&quot;\n      \/&gt;\n\n      {\/* PROJECTS \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud574\uc11c ProjectItem\uc744 \ucd9c\ub825 *\/}\n      {PROJECTS.map((project) =&gt; (\n        &lt;ProjectItem key={project.id} project={project} \/&gt;\n      ))}\n\n    &lt;\/section&gt;\n  )\n}\n\nexport default Projects\n<\/code><\/pre>\n<hr>\n<h2>\ucf54\ub4dc \uc124\uba85<\/h2>\n<h3>\uac1d\uccb4 \ubc30\uc5f4\uc5d0\uc11c <code>map<\/code> \uc0ac\uc6a9<\/h3>\n<pre><code class=\"language-jsx\">const PROJECTS = [\n  { id: 1, title: &#39;\ub3d9\ub300\ubb38\uad6c\uccad&#39;, ... },\n  { id: 2, title: &#39;\ub450 \ubc88\uc9f8 \ud504\ub85c\uc81d\ud2b8&#39;, ... },\n]\n\n{PROJECTS.map((project) =&gt; (\n  &lt;ProjectItem key={project.id} project={project} \/&gt;\n))}\n<\/code><\/pre>\n<ul>\n<li><code>project<\/code> \ub294 \ubc30\uc5f4\uc758 \uac01 \uac1d\uccb4 (\uc608: <code>{ id: 1, title: &#39;\ub3d9\ub300\ubb38\uad6c\uccad&#39; }<\/code>)<\/li>\n<li><code>project.id<\/code>, <code>project.title<\/code> \ucc98\ub7fc <code>.<\/code>\uc73c\ub85c \uac12\uc5d0 \uc811\uadfc<\/li>\n<li><code>key={project.id}<\/code> \u2014 \uac01 \ud56d\ubaa9\uc758 \uace0\uc720 \ubc88\ud638\ub97c key\ub85c \uc0ac\uc6a9<\/li>\n<\/ul>\n<h3>props\ub85c \uac1d\uccb4 \uc804\ub2ec<\/h3>\n<pre><code class=\"language-jsx\">\/\/ \ud1b5\uc9f8\ub85c \ub118\uae30\uae30\n&lt;ProjectItem project={project} \/&gt;\n\n\/\/ \ucef4\ud3ec\ub10c\ud2b8 \uc548\uc5d0\uc11c \uaebc\ub0b4 \uc4f0\uae30\nconst ProjectItem = ({ project }) =&gt; {\n  return &lt;h3&gt;{project.title}&lt;\/h3&gt;\n}\n<\/code><\/pre>\n<p>\uac1d\uccb4 \uc804\uccb4\ub97c <code>project<\/code> \ub77c\ub294 \uc774\ub984\uc73c\ub85c \uc804\ub2ec\ud558\uba74<br \/>\n\ucef4\ud3ec\ub10c\ud2b8 \uc548\uc5d0\uc11c <code>project.title<\/code>, <code>project.stack<\/code> \ub4f1\uc73c\ub85c \uc501\ub2c8\ub2e4.<\/p>\n<h3>\uc65c <code>PROJECTS<\/code> \ub97c \ub300\ubb38\uc790\ub85c?<\/h3>\n<p>\uad00\ub840\uc0c1 <strong>\ubcc0\ud558\uc9c0 \uc54a\ub294 \uc0c1\uc218 \ub370\uc774\ud130<\/strong>\ub294 \ub300\ubb38\uc790\ub85c \uc501\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">const PROJECTS = [...]  \/\/ \ub300\ubb38\uc790: \ubcc0\ud558\uc9c0 \uc54a\ub294 \ub370\uc774\ud130\nconst [active, setActive] = useState(&#39;Home&#39;)  \/\/ \uc18c\ubb38\uc790: \ubcc0\ud558\ub294 \uc0c1\ud0dc\n<\/code><\/pre>\n<hr>\n<h2>STEP 2 \u2014 CSS \ucd94\uac00<\/h2>\n<pre><code class=\"language-css\">\/* src\/index.css \uc5d0 \ucd94\uac00 *\/\n\n\/* \u2500\u2500 Projects \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 *\/\n\n.projects {\n  padding: 80px 24px;\n}\n\n\/* \ud504\ub85c\uc81d\ud2b8 \ud55c \ud56d\ubaa9: 2\ub2e8 \ub808\uc774\uc544\uc6c3 *\/\n.project-item {\n  display: grid;\n  grid-template-columns: 1fr 1fr;  \/* \uc124\uba85 50% : \uc774\ubbf8\uc9c0 50% *\/\n  margin-bottom: 40px;\n  border: 1px solid #f0f0f0;\n}\n\n\/* \uc67c\ucabd \uc124\uba85 \uc601\uc5ed *\/\n.project-desc {\n  padding: 40px;\n  background-color: #ffffff;\n}\n\n\/* \u25cf \ubc88\ud638 \ubd80\ubd84 *\/\n.project-number {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n\/* \uc8fc\ud669 \uc810 *\/\n.project-dot {\n  display: inline-block;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;  \/* \uc6d0 \ubaa8\uc591 *\/\n  background-color: #f26440;\n}\n\n\/* &quot;Project 01&quot; \ud14d\uc2a4\ud2b8 *\/\n.project-number__text {\n  font-size: 12px;\n  color: #c7c7c7;\n}\n\n\/* \ud504\ub85c\uc81d\ud2b8 \uc774\ub984 *\/\n.project-title {\n  font-size: 32px;\n  font-weight: 700;\n  color: #000;\n  margin-bottom: 24px;\n}\n\n\/* \uc0c1\uc138 \uc815\ubcf4 \ubaa9\ub85d *\/\n.project-info {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 32px;\n}\n\n\/* \uc815\ubcf4 \ud55c \uc904 *\/\n.project-info__row {\n  display: flex;\n  gap: 8px;\n  font-size: 18px;\n  color: #555555;\n}\n\n\/* \ub77c\ubca8 (\uae30\uc220\uc2a4\ud0dd :) *\/\n.project-info__label {\n  min-width: 140px;\n  flex-shrink: 0;  \/* \ub77c\ubca8\uc774 \uc904\uc5b4\ub4e4\uc9c0 \uc54a\uac8c *\/\n}\n\n\/* \ubc84\ud2bc 3\uac1c \ubb36\uc74c *\/\n.project-buttons {\n  display: flex;\n  gap: 16px;\n}\n\n\/* \uac80\uc815 \ubc84\ud2bc *\/\n.project-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 160px;\n  height: 52px;\n  background-color: #000;\n  color: #fff;\n  font-size: 18px;\n  transition: background-color 0.2s;\n}\n\n.project-btn:hover {\n  background-color: #333;\n}\n\n\/* \uc624\ub978\ucabd \uc774\ubbf8\uc9c0 \uc601\uc5ed *\/\n.project-image {\n  background-color: #e8e8e8;\n  min-height: 447px;\n}\n<\/code><\/pre>\n<hr>\n<h2>\ube0c\ub77c\uc6b0\uc800 \ud655\uc778<\/h2>\n<p>\uc800\uc7a5 \ud6c4 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c:<\/p>\n<ul>\n<li>&quot;Projects&quot; \ud070 \uc81c\ubaa9\uc774 \ubcf4\uc785\ub2c8\ub2e4<\/li>\n<li>\uc67c\ucabd\uc5d0 \ud504\ub85c\uc81d\ud2b8 \uc124\uba85, \uc624\ub978\ucabd\uc5d0 \ud68c\uc0c9 \uc774\ubbf8\uc9c0 \uc790\ub9ac\uac00 \uc788\uc2b5\ub2c8\ub2e4<\/li>\n<li>3\uac1c\uc758 \uac80\uc815 \ubc84\ud2bc\uc774 \ubcf4\uc785\ub2c8\ub2e4<\/li>\n<\/ul>\n<hr>\n<h2>\ud504\ub85c\uc81d\ud2b8 \ucd94\uac00\ud558\ub294 \ubc29\ubc95<\/h2>\n<p><code>PROJECTS<\/code> \ubc30\uc5f4\uc5d0 \uac1d\uccb4 \ud558\ub098\ub97c \ucd94\uac00\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \uc0c8 \ud56d\ubaa9\uc774 \uc0dd\uae41\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-jsx\">const PROJECTS = [\n  {\n    id: 1,\n    title: &#39;\ub3d9\ub300\ubb38\uad6c\uccad&#39;,\n    \/\/ ...\n  },\n  \/\/ \u2193 \uc774\ub807\uac8c \ucd94\uac00\n  {\n    id: 2,\n    number: &#39;Project 02&#39;,\n    title: &#39;\ub450 \ubc88\uc9f8 \ud504\ub85c\uc81d\ud2b8&#39;,\n    stack: &#39;React, CSS&#39;,\n    deploy: &#39;web&#39;,\n    period: &#39;1\uac1c\uc6d4&#39;,\n    contribution: &#39;80%&#39;,\n    browsers: &#39;Chrome \/ Edge&#39;,\n    pages: &#39;5\ud398\uc774\uc9c0&#39;,\n    links: { plan: &#39;#&#39;, github: &#39;#&#39;, live: &#39;#&#39; },\n  },\n]\n<\/code><\/pre>\n<hr>\n","protected":false},"excerpt":{"rendered":"<p>06. Projects.jsx \u2014 \ud504\ub85c\uc81d\ud2b8 \uc139\uc158 \uc774\ubc88 \ub2e8\uacc4\uc5d0\uc11c \ud560 \uc77c \ud504\ub85c\uc81d\ud2b8 \ubaa9\ub85d\uc744 \ub370\uc774\ud130 \ubc30\uc5f4\ub85c \uad00\ub9ac\ud558\uace0, map\uc73c\ub85c \ud654\uba74\uc5d0 \ucd9c\ub825\ud558\ub294 \ubc29\ubc95\uc744 \ubc30\uc6c1\ub2c8\ub2e4. \ud53c\uadf8\ub9c8 \ub514\uc790\uc778 \ubd84\uc11d \u2502 \u2500\u2500\u2500 Projects \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 \u2502 \u2502 \u2502 \u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\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 \u2502 \u2502 \u25cf Project 01 \u2502 \u2502 \u2502 \u2502 \u2502 \u2502 \u2502 \u2502 \u2502 \u2502 \ub3d9\ub300\ubb38\uad6c\uccad \u2502 \uc774\ubbf8\uc9c0 \uc601\uc5ed \u2502 \u2502 \u2502 \u2502 &#8230; <a title=\"Projects\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=87\" aria-label=\"Projects\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-87","post","type-post","status-publish","format-standard","hentry","category-react-resume"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/87","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=87"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/87\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=87"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=87"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}