{"id":193,"date":"2026-06-26T13:33:17","date_gmt":"2026-06-26T13:33:17","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=193"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"%ec%8b%9c%ec%9e%91","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=193","title":{"rendered":"\uc2dc\uc791"},"content":{"rendered":"<p><video controls width=\"100%\"><source src=\"https:\/\/www.youtube.com\/watch?v=LXcIB-ygPXU\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2>1.<strong>\ub9ac\uc561\ud2b8\uc18c\uac1c<\/strong><\/h2>\n<h3>1.1.<strong>\ub9ac\uc561\ud2b8\ub780?<\/strong><\/h3>\n<blockquote>\n<p><strong>Info<\/strong>: <a href=\"https:\/\/ko.react.dev\/\"><strong>\ud83d\udd17 \ub9ac\uc561\ud2b8\uacf5\uc2dd\ucee4\ubba4\ub2c8\ud2f0<\/strong><\/a><\/p>\n<\/blockquote>\n<ul>\n<li>JavaScript \ub77c\uc774\ube0c\ub7ec\ub9ac <\/li>\n<li>UI(\uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4)\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574 Facebook\uc5d0\uc11c \uac1c\ubc1c.<\/li>\n<li>\ud398\uc774\uc2a4\ubd81\uacfc \uac1c\ubc1c\uc790,\uae30\uc5c5,\ub2e8\uccb4\uc5d0 \uc758\ud574 \uc720\uc9c0\ubcf4\uc218\ub428.<\/li>\n<li>\ub9ac\uc561\ud2b8\ub294 \uc2f1\uae00 \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc774\ub098 \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0 \uc0ac\uc6a9\ub418\uae30\ub3c4 \ud568.<\/li>\n<\/ul>\n<h3>1.2.<strong>\ub9ac\uc561\ud2b8\uc758 \ud2b9\uc9d5<\/strong><\/h3>\n<blockquote>\n<p><strong>Info<\/strong>: <\/p>\n<\/blockquote>\n<ul>\n<li><strong>JSX<\/strong> (javascript extension)\ub77c\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud655\uc7a5\ubb38\ubc95\uc744 \uc0ac\uc6a9\ud55c\ub2e4.\n<ul>\n<li>\uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 \ubc14\ub85c JSX\ub97c \ud574\uc11d\ud560\uc218 \uc5c6\uc73c\uba70 \ubc14\ubca8\uc774\ub77c\ub294 \ud2b8\ub79c\uc2a4\ucef4\ud30c\uc77c\ub7ec\ub97c \uc774\uc6a9\ud574\uc11c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \ubcc0\ud658\ud6c4 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0 \uc801\uc6a9\ud55c\ub2e4.<br \/>\n\u2022 <a href=\"https:\/\/babeljs.io\/repl\"><strong>https:\/\/babeljs.io\/repl<\/strong><\/a>\u00a0\uc5d0\uc11c \ubcc0\ud658\ub418\ub294 \uacfc\uc815\uc744 \ubcfc\uc218\uc788\ub2e4<\/li>\n<\/ul>\n<\/li>\n<li><strong>SPA\u00a0<\/strong>(Single Page Application) \uc774\ub2e4.\n<ul>\n<li>\ubaa8\ubc14\uc77c\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\ub2e4. (ReactNative)<\/li>\n<\/ul>\n<\/li>\n<li><strong>\ucef4\ud3ec\ub10c\ud2b8\ub85c<\/strong> \uad6c\uc870\ud654\ub41c \ud0dc\uadf8\ub97c \ud55c\ubc29\uc5d0 \ub300\ub7c9\uc0dd\uc0b0 \ud560\uc218 \uc788\ub2e4.<\/li>\n<li><strong>\uac00\uc0c1DOM(VirtualDOM) <\/strong>\uae30\uc220\uc744 \uc0ac\uc6a9\ud558\uc5ec UI\ub97c \ud654\uba74\uc5d0 \uadf8\ub824\uc900\ub2e4.<br \/>\n\uc774\ub294 \uc2e4\uc81cDOM\uc758 \uac00\ubcbc\uc6b4 \uc0ac\ubcf8\uc744 \ud65c\uc6a9\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \uc571 \ub85c\ub529 \uc18d\ub3c4\ub97c \uac1c\uc120\ud560\uc218 \uc788\ub2e4.<\/li>\n<\/ul>\n<h3>1.3.<strong>\ub9ac\uc561\ud2b8\uc758 \ud0c4\uc0dd\ubc30\uacbd<\/strong><\/h3>\n<ol>\n<li>\uc6f9\ud398\uc774\uc9c0\ub294 HTML,CSS,JS \ud30c\uc77c\ub85c \uad6c\uc131\ub418\uba70 \uc77c\ubc18\uc801\uc73c\ub85c \uc544\ub798\uc640 \uac19\uc774 \ub9cc\ub4e4\uc5b4 \uc9c4\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/01-12.png\" alt=\"\"><\/p>\n<ol>\n<li>\uc810\uc810 \uc6f9\uc774 \ubcf5\uc7a1\ud574 \uc9c0\uba74\uc11c \ud30c\uc77c\uc758 \uac2f\uc218\uc640 \ucf54\ub4dc\uc758 \uc218\uac00 \uae38\uc5b4\uc9c0\uba70\u00a0**\uc720\uc9c0\ubcf4\uc218\uac00 \uc5b4\ub824\uc6cc\uc9c0\uae30 \uc2dc\uc791\ud588\ub2e4.<br \/>\n**\uc624\ub958\ubc1c\uc0dd\uc2dc \uc218\ucc9c \uc904\uc758 \ucf54\ub4dc\ub97c \ud655\uc778\ud574\uc57c \ud560 \uacbd\uc6b0\ub3c4 \uc788\uace0 \ucf54\ub4dc\ub07c\ub9ac \uc758\uc874\uc131\uc774 \uae4a\uc5b4\uc9c0\uace0 \ubcf5\uc7a1\ud574\uc84c\ub2e4.<br \/>\n\ub610\ud55c \uc218\ub9ce\uc740 javascript \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ubd88\ub7ec\uc640\uc11c \uc0ac\uc6a9\ud558\ub2e4 \ubcf4\ub2c8 \ub77c\uc774\ube0c\ub7ec\ub9ac \uac1d\uccb4\ub4e4\ub07c\ub9ac \uc774\ub984\uc774 \uac19\uc544 \ucda9\ub3cc\ud558\ub294 \uacbd\uc6b0\ub3c4 \uc788\uace0 \uad00\ub9ac\uac00 \uc5b4\ub824\uc6cc \uc84c\ub2e4.<br \/>\n\uc544\ub798\uc758 \uadf8\ub9bc\uc744 \ubcf4\uc790.<br \/>\n\uc6b0\ub9ac\uc758 \ud504\ub85c\uc81d\ud2b8\uc640 \uc644\uc804 \ub611\uac19\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/02-7.png\" alt=\"\"><\/p>\n<ol>\n<li><code>React<\/code>\u00a0\ub294 \uc5ec\ub7ec html \ubb38\uc11c\ub97c \ub2e8\uc77c js\ud30c\uc77c\uc744 \uc0ac\uc6a9\ud574 \uac1c\ubc1c\ud560\uc218 \uc788\uc5b4 \uc774\ub7f0 \ubb38\uc81c\uac00 \uac1c\uc120\ub418\uc5c8\ub2e4.<\/li>\n<\/ol>\n<h3>1.4.\ub9ac\uc561\ud2b8\uc758 \uc8fc\uc694\uac1c\ub150<\/h3>\n<h4>1.4.1.<strong>SPA vs MPA<\/strong><\/h4>\n<blockquote>\n<p><strong>Info<\/strong>: \ub9ac\uc561\ud2b8\ub97c \uc811\ud558\ub2e4 \ubcf4\uba74 \uc885\uc885 SPA\uc640 MPA \ub77c\ub294 \ub2e8\uc5b4\ub97c \ub9cc\ub098\uac8c \ub41c\ub2e4.<\/p>\n<\/blockquote>\n<p>  \uc678\uad6d\uc5b4 \uc774\ub2e4 \ubcf4\ub2c8 \uad49\uc7a5\ud788 \uc5b4\ub835\uace0 \ub0ae\uc124\uac8c \ub290\uaef4\uc9c0\ub294\ub370 \ub450\uac1c\uc758 \ucc28\uc774\uc810\uc744 \uc9da\uc5b4\ubcf4\uc790.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/03-7.png\" alt=\"\"><\/p>\n<p>  <strong> SPA \ub294 html \ud398\uc774\uc9c0 \ud558\ub098\ub9cc \ub9cc\ub4dc\ub294\uac70\ub2e4.<\/strong><br \/>\n  <strong> MPA \ub294 html \ud398\uc774\uc9c0 \uc5ec\ub7ec\uac1c \ub9cc\ub4dc\ub294\uac70\ub2e4.<\/strong><\/p>\n<hr>\n<ul>\n<li>\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \ub2e4\uc591\ud55c \uc815\ubcf4\ub97c \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc81c\uacf5\ud558\ubbc0\ub85c \ucf58\ud150\uce20\uc758 \ub0b4\uc6a9\uc774\ub098 \ub514\uc790\uc778\uc758 \ubcc0\uacbd\uc774 \uc788\uc744\ub54c \uc9c0\uae08\uae4c\uc9c0\ub294 HTML \ud398\uc774\uc9c0\ub97c \uac01\uac01 \uac1c\ubc1c\ud588\ub2e4. \u21d2 <strong>MPA<\/strong><\/li>\n<li>\ucf58\ud150\uce20\uc758 \ub0b4\uc6a9\uacfc \ub514\uc790\uc778\uc774 \ub2e4\ub974\uac70\ub098 \ub9d0\uac70\ub098 HTML \ud398\uc774\uc9c0\ub294 \ud558\ub098\ub85c \uac1c\ubc1c\ud55c\ub2e4.\u21d2 <strong>SPA<\/strong><\/li>\n<\/ul>\n<h4>1.4.2.<strong>SPA vs MPA \ube44\uad50\ud45c<\/strong><\/h4>\n<blockquote>\n<p><strong>Info<\/strong>: \uc5b4\ub5a4\uac83\uc774 \ub354 \uc88b\uc744\uae4c?<\/p>\n<\/blockquote>\n<p>  \uc0c1\ud669\uc5d0 \ub9de\uac8c \uace0\ub824\ud558\ub418 \ucd5c\uc545\ub9cc \ud53c\ud558\ub294 \uac83\uc774 \ud604\uc2e4\uc801\uc774\ub77c\uace0 \uc0dd\uac01\ud55c\ub2e4.<br \/>\n(\ub2e8 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uac8c\ub294 \ucd5c\uace0\ub77c\uace0 \uc5b4\ud544\ud558\ub294\uac83\uc774 \ubf40\uc778\ud2b8)<br \/>\n  \uc544\ub798 \ube44\uad50\ud45c\ub97c \ubcf4\uace0 \uc11c\ube44\uc2a4 \ud504\ub85c\uc81d\ud2b8\uc758 \ubaa9\uc801, \uc694\uad6c\uc0ac\ud56d, \uc6b4\uc601 \ubc0f \uac1c\ubc1c\ud658\uacbd \ub4f1\uc744 \uace0\ub824\ud558\uc5ec \uacb0\uc815\ud558\uc790<\/p>\n<div style=\"display:grid;grid-template-columns:repeat(2,1fr);gap:1rem\">\n<div>\n<p>SPA (\uc2f1\uae00 \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158)<br \/>\n<strong>\uc124\uba85<\/strong>: \ub2e8\uc77c HTML \ud398\uc774\uc9c0\uc5d0\uc11c \ub3d9\uc801\uc73c\ub85c \ucf58\ud150\uce20\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158.<br \/>\n<strong>\ub85c\ub529 \uc2dc\uac04<\/strong>: \ucd08\uae30 \ub85c\ub529 \uc2dc\uac04\uc740 \ubaa8\ub4e0 \ub9ac\uc18c\uc2a4\ub97c \ud55c \ubc88\uc5d0 \ub85c\ub4dc\ud558\uae30 \ub54c\ubb38\uc5d0 \uc624\ub798 \uac78\ub9b4 \uc218 \uc788\uc74c.<br \/>\n<strong>\uc0ac\uc6a9\uc790 \uacbd\ud5d8<\/strong>: \uc804\uccb4 \ud398\uc774\uc9c0 \ub9ac\ub85c\ub4dc \uc5c6\uc774 \ube60\ub978 \uc751\ub2f5 \uc18d\ub3c4\uc640 \ubd80\ub4dc\ub7ec\uc6b4 \uc0ac\uc6a9\uc790 \uc778\ud130\ub799\uc158 \uc81c\uacf5.<br \/>\n<strong>SEO<\/strong>: \uac80\uc0c9 \uc5d4\uc9c4 \ucd5c\uc801\ud654(SEO)\ub97c \uc704\ud574 \ucd94\uac00 \uc791\uc5c5 \ud544\uc694\ud560 \uc218 \uc788\uc74c.<br \/>\n<strong>\uac1c\ubc1c \ubc0f \uc720\uc9c0\ubcf4\uc218<\/strong>: \ucd08\uae30 \ub85c\ub529 \uc774\ud6c4 \uc11c\ubc84 \uc694\uccad\uc744 \uc904\uc5ec \ub124\ud2b8\uc6cc\ud06c \ud2b8\ub798\ud53d\uc744 \uc808\uc57d\ud568.<br \/>\n\uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ucef4\ud3ec\ub10c\ud2b8\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0ac\uc774\ub4dc \ub77c\uc6b0\ud305\uc73c\ub85c \uac1c\ubc1c \ubc0f \uc720\uc9c0\ubcf4\uc218\uac00 \uac04\ub2e8\ud568.<br \/>\n<strong>\uc131\ub2a5<\/strong>: \uac00\uc0c1 DOM\uc744 \ud65c\uc6a9\ud558\uc5ec \ucd08\uae30 \ub85c\ub529 \uc774\ud6c4 \uc131\ub2a5 \ud5a5\uc0c1\ub428(\uba54\ubaa8\ub9ac \uc0ac\uc6a9\ub7c9\uc740 \ub192\uc544\uc9c8 \uc218 \uc788\uc74c).<\/p>\n<\/div>\n<div>\n<p>MPA (\uba40\ud2f0 \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158)<br \/>\n<strong>\uc124\uba85<\/strong>: \uc5ec\ub7ec \uac1c\uc758 HTML \ud398\uc774\uc9c0\ub85c \uad6c\uc131\ub41c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158.<br \/>\n<strong>\ub85c\ub529 \uc2dc\uac04<\/strong>: \uac01\uac01\uc758 \ud398\uc774\uc9c0\uac00 \ub3c5\ub9bd\uc801\uc73c\ub85c \ub85c\ub4dc\ub418\uae30 \ub54c\ubb38\uc5d0 \ucd08\uae30 \ub85c\ub529 \uc2dc\uac04\uc774 \ube60\ub984.<br \/>\n<strong>\uc0ac\uc6a9\uc790 \uacbd\ud5d8<\/strong>: \ud398\uc774\uc9c0 \uc804\ud658 \uc2dc \uc57d\uac04\uc758 \uc9c0\uc5f0\uacfc \uc911\ub2e8\uc774 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc74c.<br \/>\n\uac1c\ubcc4 \ud398\uc774\uc9c0\ub97c \uc27d\uac8c \ud06c\ub864\ub9c1\ud558\uace0 \uc778\ub371\uc2f1\ud560 \uc218 \uc788\uc5b4 SEO\uc5d0 \uc720\ub9ac\ud568.<br \/>\n<strong>SEO<\/strong>: \ub124\ube44\uac8c\uc774\uc158 \uc2dc \uc804\uccb4 \ud398\uc774\uc9c0 \ub9ac\ub85c\ub4dc\ub85c \uc778\ud574 \uc11c\ubc84 \uc694\uccad\ub7c9 \ubc0f \ub124\ud2b8\uc6cc\ud06c \ud2b8\ub798\ud53d \uc99d\uac00\ud568.<br \/>\n<strong>\uac1c\ubc1c \ubc0f \uc720\uc9c0\ubcf4\uc218<\/strong>: \uc11c\ubc84 \ucabd\uc5d0\uc11c \uac01\uac01\uc758 \ud398\uc774\uc9c0\ub97c \ucc98\ub9ac\ud558\uae30 \ub54c\ubb38\uc5d0 \ubcf5\uc7a1\uc131\uacfc \ube44\uc6a9 \ubc1c\uc0dd \uac00\ub2a5\uc131 \uc788\uc74c.<br \/>\n<strong>\uc131\ub2a5<\/strong>: \uc804\uccb4 \ud398\uc774\uc9c0 \ub9ac\ub85c\ub4dc\ub85c \uc778\ud574 \uc131\ub2a5 \uc800\ud558\ub420 \uc218 \uc788\uc73c\ub098 \uba54\ubaa8\ub9ac \uc0ac\uc6a9\ub7c9\uc740 \ub0ae\uc544\uc9d0<\/p>\n<\/div>\n<\/div>\n<h4>1.4.3.<strong>SPA \uce5c\uad6c\ub4e4<\/strong><\/h4>\n<p>\ub9ac\uc561\ud2b8 \uc678\uc5d0\ub3c4 SPA \uac1c\ubc1c\ud234\uc774 \uc0c1\ub2f9\ud788 \ub9ce\ub2e4.<br \/>\n\uadf8\uc911 \uc138\uacc4\uc801\uc73c\ub85c \uc720\uba85\ud55c \uac1c\ubc1c\uc790 \ucee4\ubba4\ub2c8\ud2f0\uc778 \uc2a4\ud0dd\uc624\ubc84\ud50c\ub85c\uc5d0\uc11c 2024\ub144 \uc124\ubb38\uc870\uc0ac \uc2e4\uc2dc\uacb0\uacfc\uc5d0 \ub7ad\ud06c\ub41c \uba87\uac00\uc9c0 \ud234\uc744 \uc54c\uc544\ubcf4\uc790.<br \/>\n<a href=\"https:\/\/survey.stackoverflow.co\/2024\/technology#most-popular-technologies-webframe-prof\">\ud83d\udd17 \uc2a4\ud0dd\uc624\ubc84\ud50c\ub85c_\uc6f9\ud504\ub808\uc784\uc6cc\ud06c\ubd80\ubd84<\/a><br \/>\nAngular, Vue.js \ub4f1\uc774 \uc788\ub2e4.<\/p>\n<h3>1.5.<strong>\ucef4\ud3ec\ub10c\ud2b8<\/strong><\/h3>\n<blockquote>\n<p><strong>Info<\/strong>: \uc5ec\ub7ec\ubc88 \uc0ac\uc6a9\ub418\ub294 UI\ub97c \ud0dc\uadf8\ub85c \ub9cc\ub4e4\uc5b4\uc11c \uc0ac\uc6a9\ud558\ub294 \uae30\uc220<\/p>\n<\/blockquote>\n<p>  \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc640 \uc720\uc0ac\ud558\uac8c \uc0dd\uae34\u00a0<strong>jsx<\/strong>\u00a0\ub77c\ub294 \ubb38\ubc95\uc744 \uc0ac\uc6a9<br \/>\n  <strong>\ub124\uc774\ubc84 \ub610\ud55c \ub9ac\uc561\ud2b8\ub85c \uac1c\ubc1c \ub418\uc5c8\uc73c\uba70 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud655\uc778\ud560\uc218 \uc788\ub2e4<\/strong><br \/>\n  \uc544\ub798\uc758 \uc0c9\uce60\ub41c \ube14\ub85d\uc740 \ub124\uc774\ubc84\uc758 \ucef4\ud3ec\ub10c\ud2b8 \ub2e8\uc704\uc774\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/04-1.jpg\" alt=\"\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/05-1.jpg\" alt=\"\"><\/p>\n<h3>1.6.<strong>\uac00\uc0c1DOM<\/strong><\/h3>\n<blockquote>\n<p><strong>Info<\/strong>: javascript\ub85c \uac1c\ubc1c\ud55c \ud654\uba74\uc744 \uadf8\ub9ac\uae30 \uc704\ud574 \uae30\uc874\uc758 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 DOM \uc774\ub77c\ub294 \uae30\uc220\uc744 \uc0ac\uc6a9\ud588\ub2e4.<br \/>\n\ub9ac\uc561\ud2b8\uc5d0\uc11c\ub294 DOM \ub300\uc2e0 VirtualDOM \uc744 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n<\/blockquote>\n<hr>\n<p>  <strong>DOM\uacfc VirtualDOM \uc740 \ubb50\uac00 \ub2e4\ub97c\uae4c?<\/strong><\/p>\n<div style=\"display:grid;grid-template-columns:repeat(2,1fr);gap:1rem\">\n<div>\n<hr>\n<p>DOM<br \/>\n\ud398\uc774\uc9c0\uc758 \uac1d\uccb4\ub97c \ud45c\ud604\ud558\ub294 \ubc29\uc2dd<br \/>\nHTML \ubc0f XML \ubb38\uc11c\ub97c \uacc4\uce35\uc801 \ud2b8\ub9ac \uad6c\uc870\ub85c<br \/>\n\ub9cc\ub4e4\uc5b4 JavaScript\ub098 \ub2e4\ub978 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4<br \/>\n\uac00 DOM \uad6c\uc870\uc5d0 \uc811\uadfc\ud558\uc5ec \ubb38\uc11c \uad6c\uc870, \uc2a4\ud0c0<br \/>\n\uc77c, \ub0b4\uc6a9 \ub4f1\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\uac8c \ucc98\ub9ac\ud55c\ub2e4.<\/p>\n<hr>\n<p>\ubb38\uc81c<br \/>\n\ub300\uaddc\ubaa8 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \uc218\ub9ce\uc740 \ub370\uc774\ud130\uc640 \uc694\uc18c\uac00 \ub3d9\uc801\uc73c\ub85c \ubcc0\ud654\ud558\uba70 \uc774 \ub54c \ub9e4\ubc88 DOM \uc870\uc791\uc774 \uc77c\uc5b4\ub098\uba74 \uc131\ub2a5\uc0c1 \uc774\uc288\uac00 \ubc1c\uc0dd\ud55c\ub2e4.<\/p>\n<\/div>\n<div>\n<hr>\n<p>Virtual DOM<br \/>\n\uac00\uc0c1 DOM\uc740 \uc2e4\uc81c DOM\uc758 \uac00\ubcbc\uc6b4 \uc0ac\ubcf8\uc73c<br \/>\n\ub85c \uba54\ubaa8\ub9ac \uc0c1\uc5d0 \uc874\uc7ac\ud558\uba70, \ub370\uc774\ud130 \uc5c5\ub370\uc774\ud2b8<br \/>\n\uc2dc \uc2e4\uc81c DOM\uc5d0 \uc9c1\uc811 \ubc18\uc601\ud558\ub294 \ub300\uc2e0 \uac00\uc0c1<br \/>\nDOM\uc5d0\uc11c \ucc98\ub9ac\ud55c\ub2e4.<\/p>\n<hr>\n<p>\ud574\uacb0<br \/>\n\uc5c5\ub370\uc774\ud2b8 \uc2dc \uc804\uccb4 UI\ub97c Virtual DOM\uc5d0 \ub9ac\ub80c\ub354\ub9c1\ud55c\ub2e4.<br \/>\n\uc774\uc804 Virtual DOM\uacfc \ud604\uc7ac Virtual DOM\uc744 \ube44\uad50(diffing)\ud558\uc5ec  \ubc14\ub010 \ubd80\ubd84\ub9cc \uc2e4\uc81c(DOM\uc5d0 \uc801\uc6a9<br \/>\n(Reconciliation)\ud55c\ub2e4.<br \/>\n\uc27d\uac8c \ub9d0\ud574 \ud398\uc774\uc9c0 \uc804\uccb4\ub97c \uc0c8\ub85c\uace0\uce58\ub294 \uac83\uc774 \uc544\ub2c8\ub77c \uac31\uc2e0\ub41c \ubd80\ubd84\ub9cc \uc0c8\ub85c\uace0\uce58\ub294 \ubc29\uc2dd\uc774\ub2e4.<\/p>\n<\/div>\n<\/div>\n<h3>1.7.<strong>\ube4c\ub4dc<\/strong><\/h3>\n<blockquote>\n<p><strong>Info<\/strong>: \ub9ac\uc561\ud2b8\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \uc6f9\uc744 \uac1c\ubc1c\ud558\ub294 \uae30\uc220\uc774\ub2e4.<\/p>\n<\/blockquote>\n<p>  \uc6f9\ube0c\ub77c\uc6b0\uc800\ub294 html\ub9cc \uc774\ud574\ud560\uc218 \uc788\uc73c\ubbc0\ub85c \ub9ac\uc561\ud2b8\ub85c \uac1c\ubc1c\ud55c \ud398\uc774\uc9c0\ub294 \ucd5c\uc885\uc801\uc73c\ub85c html \ud615\uc2dd\uc73c\ub85c \ube4c\ub4dc\ud558\ub294 \uacfc\uc815\uc744 \uac70\uccd0\uc57c \ud55c\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/06-5.png\" alt=\"\"><\/p>\n<p>  \uadf8\ub7fc \uc885\uad6d\uc5d0 \ubc14\uafc0\uac83\uc744 \uc560\ucd08\uc5d0 html\ub85c \ud558\uc9c0 \uc65c \ub9ac\uc561\ud2b8\ub85c \ud558\ub294\uc9c0 \uad81\uae08\ud560\uc218 \uc788\ub2e4.<br \/>\n  \uc704\uc5d0\uc11c \uc5b8\uae09\ud55c SPA\ubc29\uc2dd\uc758 \uc7a5\uc810\uacfc \ub354\ubd88\uc5b4 \uc608\uc804 \uc6f9\uac1c\ubc1c \ubc29\uc2dd\uc5d0\uc11c \ub9e4\uc6b0 \ubc88\uac70\ub86d\ub358 \ubc18\ubcf5\uc801\uc778 \ud37c\ube14\ub9ac\uc2f1 \uc791\uc5c5\uc744 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ud568\uc218\uc640 \ubc18\ubcf5\ubb38,\uc81c\uc5b4\ubb38 \ub4f1\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud55c\ubc88\uc5d0 \ub05d\ub0bc\uc218 \uc788\ub2e4.<\/p>\n<p>\uadf8\ub7fc \uc774\uc81c \ub9ac\uc561\ud2b8 \uac1c\ubc1c\ud658\uacbd\uc744 \uc124\uc815\ud574 \ubcf4\uc790.<\/p>\n<hr>\n<h2>2.<strong>\ub9ac\uc561\ud2b8 \uac1c\ubc1c\ud658\uacbd \uc124\uce58<\/strong><\/h2>\n<blockquote>\n<p><strong>Info<\/strong>: \uc55e\uc11c \uc124\uba85\ud588\ub4ef \ub9ac\uc561\ud2b8 \uac1c\ubc1c\uc2dc \ube4c\ub4dc\ub77c\ub294 \uacfc\uc815\uc774 \ud544\uc694\ud558\ub2e4.<\/p>\n<\/blockquote>\n<p>  \ube4c\ub4dc\ub294 \uc6f9\ud329\uc774\ub77c\ub294 \ubc88\ub4e4\ub7ec (\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \uac1c\ubc1c\ud55c \uc6f9\ud398\uc774\uc9c0\ub97c html\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \ud234) \ub97c \uc0ac\uc6a9\ud558\uac8c \ub41c\ub2e4. \uc544\ub798\ub294 \uc6f9\ud329\uc758 \uacf5\uc2dd \ubb38\uc11c \ub9c1\ud06c\uc774\ub2e4.<br \/>\n  <a href=\"https:\/\/webpack.kr\/\">\ud83d\udd17 \uc6f9\ud329\uacf5\uc2dd\uc0ac\uc774\ud2b8<\/a><br \/>\n  \uc704 \uacf5\uc2dd\ubb38\uc11c\ub97c \uc0b4\ud3b4\ubcf4\uba74 \uc544\ub798 \ub9c1\ud06c\uc758 \uc548\ub0b4 \ub9c1\ud06c\uac00 \uc788\ub2e4.<br \/>\n  <a href=\"https:\/\/webpack.kr\/guides\/getting-started\/#basic-setup\">\ud83d\udd17\uc6f9\ud329\uae30\ubcf8\uc124\uce58\ubc29\ubc95<\/a><br \/>\n  \uc7a0\uae50 \uc0b4\ud3b4 \ubcf4\uba74 javascript \ubaa8\ub4c8\uc744 \ucef4\ud30c\uc77c(\ud574\uc11d)\ud560\ub54c \uc0ac\uc6a9\ub418\ub294 \uac83\uc774 \uc6f9\ud329\uc774\ub77c\uace0 \ud55c\ub2e4.<br \/>\n  \uadf8\ub9ac\uace0 \uc571\uc758 \ud658\uacbd\uc124\uc815 \ubc29\ubc95\uc744 \uc548\ub0b4\ud558\uace0 \uc788\ub294\ub370 \uc5b4\ub514\uc5d0 \uc788\ub294 \ud30c\uc77c\uc744 \uc5b4\ub514\ub85c \uc800\uc7a5\ud574\uc57c \ud558\ub294\uc9c0\uc5d0 \ub300\ud55c \ud658\uacbd \uc124\uc815\uc744 \uc5b4\ub5bb\uac8c \ud558\ub77c\uace0 \uc801\ud600\uc788\ub2e4.<br \/>\n  \uc6f9\ud329\uc740 \uc27d\uac8c \ub9d0\ud558\uc790\uba74 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubb38\uc11c \ub0b4\uc5d0 html \ubfd0 \uc544\ub2c8\ub77c \uc6f9\uc11c\ube44\uc2a4\uc5d0 \ud544\uc694\ud55c \ubaa8\ub4e0 \ub9ac\uc18c\uc2a4 \ud30c\uc77c\uc744 \ubaa8\ub450 \ub123\uc5b4 \uac1c\ubc1c\ud55c\ud6c4 (\ub180\ub78d\uac8c\ub3c4 \uadf8\uac83\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4)<br \/>\n  \uc2e4\uc81c \uc6f9\uc11c\ube44\uc2a4\uac00 \uac00\ub2a5\ud55c html \ub85c \ud574\uc11d\ud574\uc8fc\ub294 \ub3c4\uad6c\uc774\ub2e4. \uc544\ub798\uc758 \uadf8\ub9bc\uc744 \ubcf4\uba74 \uc27d\uac8c \uc774\ud574\ud560\uc218 \uc788\uc744\uac83\uc774\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/07.jpg\" alt=\"\ucc38 \uc798\uadf8\ub838\uc8e0?\"><\/p>\n<p>  <strong>\uc6f9\ud329\uc73c\ub85c \uac1c\ubc1c\ud574\ubcf4\uba74 \ub9ac\uc561\ud2b8\uc758 \ub3d9\uc791 \ubc29\uc2dd\uc774 \ub354\uc6b1 \uc798 \uc774\ud574\ub418\ubbc0\ub85c \uacf5\ubd80\ud574\ubcf4\uae38 \ucd94\ucc9c\ud55c\ub2e4.<\/strong><\/p>\n<h3>2.1.<strong>\u00a0Node \uc124\uce58<\/strong><\/h3>\n<blockquote>\n<p><strong>Info<\/strong>: <strong>NodeJs<\/strong> \ub294 <strong>\uad6c\uae00\uc5d0\uc11c \uac1c\ubc1c\ud55c<\/strong> \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc6f9\ube0c\ub77c\uc6b0\uc800\uac00 \uc544\ub2cc \ub2e4\ub978 \ud658\uacbd\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\ud560\uc218 \uc788\ub3c4\ub85d \ud558\ub294 <strong>\uc2e4\ud589\ud658\uacbd<\/strong>\uc774\ub2e4.<\/p>\n<\/blockquote>\n<p>  NodeJs \uc5d0\ub294 NPM(NodejsPackageManager) \uc774\ub77c\ub294 \ubaa8\ub4c8\uc774 \ud3ec\ud568\ub418\uc5b4 \uc788\ub294\ub370 \uc774 \ubaa8\ub4c8\uc5d0 \uc6f9\ud329\uc774 \ud3ec\ud568\ub418\uc5b4 \uc788\ub2e4.\u00a0<br \/>\n  <strong>\ub610\ud55c \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8 \uac1c\ubc1c\uc2dc \uae30\ubcf8 \ud658\uacbd\uc744 \uc124\uc815\uc744 \uc27d\uac8c \ub3c4\uc640\uc8fc\ub294 \ucf54\ub4dc(boilerplate)\uac00 \uc788\uc5b4 \uc704\uc758 \uc6f9\ud329 \ud658\uacbd\uc124\uc815\uc5d0\uc11c \ubcf8 \uac83\ucc98\ub7fc<\/strong>\u00a0\u00a0<strong>\ubcf5\uc7a1\ud55c \uacfc\uc815\uc744 \uac70\uce58\uc9c0 \uc54a\uc544\ub3c4 \ub41c\ub2e4.<\/strong><br \/>\n  <strong>NODEJS \ub97c \uc124\uce58\ud558\uc5ec \uc9c4\ud589\ud55c\ub2e4.<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/08-3.png\" alt=\"\"><\/p>\n<p><a href=\"https:\/\/nodejs.org\/en\/\">\ud83d\udd17 NodeJs \uc124\uce58\ud558\ub7ec \uac00\uae30<\/a><br \/>\n<strong>LTS \ubc84\uc804(\uac00\uc7a5 \uc548\uc804\ud55c \ubc84\uc804)\uc744 \ub2e4\uc6b4\ub85c\ub4dc \ud55c\ub2e4.<\/strong><br \/>\n\uc124\uce58\ud504\ub85c\uadf8\ub7a8\uc758 \ub2e4\uc6b4\ub85c\ub4dc\uac00 \uc644\ub8cc\ub418\uba74 \uc2e4\ud589\ud558\uc5ec \uc124\uce58\ub97c \uc9c4\ud589\ud55c\ub2e4. (\uacc4\uc18d \ub2e4\uc74c\uc744 \ub204\ub974\uba74 \ub41c\ub2e4)<br \/>\nnode.js\ub97c \uc124\uce58\ud558\uba74 npm\ub3c4 \uac19\uc774 \uc124\uce58\ub41c\ub2e4.<br \/>\n\uc124\uce58\uc644\ub8cc \ud6c4 pc\ub97c \uc7ac\ubd80\ud305\ud55c\ub2e4.<\/p>\n<p>VSCode\ub97c \uc2e4\ud589\ud6c4 \ud130\ubbf8\ub110\uc744 \uc5f4\uace0 \uc544\ub798\uc758 \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud558\uc5ec \uc124\uce58\ub97c \ud655\uc778\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-shell\">npm -v\nnode -v\n<\/code><\/pre>\n<blockquote>\n<p>[ VSCode\uc5d0\uc11c \ud130\ubbf8\ub110 \ucc3d \uc5f4\uae30 ]<\/p>\n<\/blockquote>\n<ul>\n<li>\uc708\ub3c4\uc6b0 :\u00a0<code>ctrl + j<\/code><\/li>\n<li>\ub9e5 :\u00a0<code>cmd + j<\/code><\/li>\n<\/ul>\n<p>\uc544\ub798 \uadf8\ub9bc\ucc98\ub7fc \ubc84\uc804 \ud655\uc778\uc774 \ub418\uba74 \uc131\uacf5\ud55c \uac83\uc774\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/09-1.png\" alt=\"\"><\/p>\n<h3>2.2.<strong>\u00a0\ub9ac\uc561\ud2b8 \uc571 \uc124\uce58<\/strong><\/h3>\n<blockquote>\n<p>\ub178\ub4dcJS \uc2dc\uc2a4\ud15c \uc124\uce58\uac00 \uc644\ub8cc \ub418\uc5c8\uc73c\uba74 \uc774\uc81c PC\uc5d0\uc11c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uae30\ubc18\uc758 \ud504\ub85c\uadf8\ub7a8\uc744 \uac1c\ubc1c\ud558\uace0 \uc2e4\ud589\ud560\uc218 \uc788\ub294 \ud658\uacbd\uc774 \uac16\ucdb0\uc9c0\uac8c \ub41c \uac83\uc774\ub2e4.<\/p>\n<\/blockquote>\n<p>  (\uc124\uce58\ud558\uae30 \uc804\uc5d0\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub9cc \uc2e4\ud589\ud560\uc218 \uc788\uc5c8\ub2e4)<\/p>\n<p>  \uc55e\uc11c \uc124\uba85\ud588\ub4ef\uc774, \ub9ac\uc561\ud2b8\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uacc4\uc5f4\uc758 JSX\ub77c\ub294 \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud558\uba70, \ud30c\uc77c \ud615\uc2dd\uc740 \uc8fc\ub85c <code>.js<\/code>, <code>.jsx<\/code>, <code>.ts<\/code>, <code>.tsx<\/code>\ub85c \uc0dd\uc131\ub41c\ub2e4.<br \/>\n  \uc6b0\ub9ac\ub294 \uc774 \ub9ac\uc561\ud2b8\ub97c \uc0ac\uc6a9\ud574 \uc6f9\ud398\uc774\uc9c0\ub97c \uac1c\ubc1c\ud560 \uac83\uc774\ub2e4.<br \/>\n  \ud558\uc9c0\ub9cc \ud06c\ub86c, \uc0ac\ud30c\ub9ac, \uc5e3\uc9c0 \uac19\uc740 \uc6f9 \ube0c\ub77c\uc6b0\uc800\ub294 \uc8fc\ub85c <code>.html<\/code> \ud655\uc7a5\uc790 \ud30c\uc77c\uc744 \uc5f4\uc5b4\ubcf4\ub294 \ubdf0\uc5b4 \uc5ed\ud560\uc744 \ud558\uae30 \ub54c\ubb38\uc5d0, \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc2dc \uc0ac\uc6a9\ud558\ub294 <code>.js<\/code>, <code>.jsx<\/code>, <code>.ts<\/code>, <code>.tsx<\/code> \uac19\uc740 \ud655\uc7a5\uc790 \ud30c\uc77c\uc744 \uc9c1\uc811 \uc77d\uace0 \ud574\uc11d\ud560 \uc218 \uc5c6\ub2e4.<br \/>\n  \ub530\ub77c\uc11c \uc6f9\ud329\uc774\ub77c\ub294 \ubc88\ub4e4\ub7ec\ub97c \uc0ac\uc6a9\ud558\uc5ec, \uc774\ub7ec\ud55c \ud30c\uc77c\ub4e4\uc744 <code>.html<\/code>, <code>.js<\/code>, <code>.css<\/code> \ud615\uc2dd\uc73c\ub85c \ubcc0\ud658(\ucef4\ud30c\uc77c)\ud55c \ud6c4 \ubc30\ud3ec\ud574\uc57c \ud55c\ub2e4.<br \/>\n  \uc5ec\uae30\uae4c\uc9c0 \uc774\uc804\uc5d0 \uc0b4\ud3b4\ubd24\ub358 \ub0b4\uc6a9\uc774\ub2e4.<\/p>\n<p>   NodeJS\ub97c \uc124\uce58\ud558\uba74 NPM(Node Package Manager) \uc774 \ud568\uaed8 \uc124\uce58 \ub418\ub294\ub370 \uc774 <strong>NPM <\/strong> \uc5d0 \ub9ac\uc561\ud2b8\uc571\uc744 \uc27d\uac8c \ub9cc\ub4e4\uc218 \uc788\uac8c\ud558\ub294  <strong>\ubcf4\uc77c\ub7ec\ud50c\ub808\uc774\ud2b8<\/strong> (Boiler Plate) \uac00 \uc788\ub2e4. <\/p>\n<p>  \ud130\ubbf8\ub110 \ucc3d\uc5d0 <code>npx create-react-app .<\/code> \uba85\ub839\uc5b4\ub97c \ud55c\ubc88\ub9cc \uc785\ub825\ud558\uba74 \ub9ac\uc561\ud2b8 \uac1c\ubc1c\ud658\uacbd\uc774 \ub69d\ub531 \uc0dd\uc131\ub41c\ub2e4.<\/p>\n<h4>2.2.1. \uac1c\ubc1c\ud658\uacbd\uc124\uce58<\/h4>\n<ol>\n<li>\ube48\ud3f4\ub354 \uc0dd\uc131<\/li>\n<\/ol>\n<ul>\n<li>\ud3f4\ub354\uc758 \uacbd\ub85c\ub098 \ud3f4\ub354\uba85\uc5d0 \ud55c\uae00,\ud2b9\uc218\ubb38\uc790\uac00 \ud45c\ud568\ub418\uc5b4 \uc788\uc73c\uba74 \uc548\ub41c\ub2e4<\/li>\n<li>\ud3f4\ub354\uba85\uc740 Kabab-case \ub9cc \ud5c8\uc6a9\ub41c\ub2e4. \uc608) myapp ,app1, my-app, react-app \u2026<\/li>\n<li>\ubc18\ub4dc\uc2dc \ube48 \ud3f4\ub354 \uc774\uc5b4\uc57c \ud55c\ub2e4.<\/li>\n<\/ul>\n<ol>\n<li>vscode \uc2e4\ud589<\/li>\n<li>1\ubc88\uc758 \ud3f4\ub354\ub97c vscode \ub85c \uc5f0\ub2e4. \uc774\ub54c \ubc18\ub4dc\uc2dc \uc544\ub798\uc758 \uc774\ubbf8\uc9c0\ub97c \ubcf4\uace0 \uadf8\ub300\ub85c \ud55c\ub2e4<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/10.gif\" alt=\"\ud0d0\uc0c9\uae30\uc5d0\uc11c \ud3f4\ub354\ub97c \uc120\ud0dd\ud6c4 VSCode \uc758 \uc5d0\ub514\ud130 \ucc3d\uc73c\ub85c \ub4dc\ub798\uadf8 \ub4dc\ub86d\ud558\uc5ec \uc5f0\ub2e4\"><\/p>\n<ol>\n<li>vscode\uc5d0\uc11c \ud130\ubbf8\ub110 \uc2e4\ud589<\/li>\n<\/ol>\n<ul>\n<li>\ub2e8\ucd95\ud0a4 :\u00a0<code>ctrl + J<\/code> \/ <code>cmd + J<\/code><\/li>\n<\/ul>\n<ol>\n<li>\ud130\ubbf8\ub110 \ucc3d\uc5d0 \uc544\ub798 \uba85\ub839\uc5b4 \uc785\ub825\ud6c4 \uc5d4\ud130\ud0a4\ub97c \ub204\ub978\ub2e4.<\/li>\n<\/ol>\n<ul>\n<li><code>npx create-react-app . <\/code><\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/11-1.png\" alt=\"\uc774\ub7f0 \ud654\uba74\uc774 \ub098\uc624\uba74\uc11c \uc124\uce58\uac00 \uc9c4\ud589\ub41c\ub2e4, \ub05d\ub0a0\ub54c \uae4c\uc9c0 \uae30\ub2e4\ub9b0\ub2e4.\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/12.png\" alt=\"\uc774 \ud654\uba74\uc774 \ub098\uc624\uba74 \uc124\uce58\uac00 \ub05d\ub0ac\ub2e4. \uc774\uc81c \uc571\uc744 \uc2e4\ud589\ud574\ubcf4\uc790\"><\/p>\n<ol>\n<li>\ud130\ubbf8\ub110 \ucc3d\uc5d0 \uc544\ub798\uc758 \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud6c4 \uc5d4\ud130\ud0a4\ub97c \ub204\ub978\ub2e4.<br \/>\n  <strong><code>npm start<\/code><\/strong><\/li>\n<li>\uc544\ub798\uc640 \uc774\ubbf8\uc9c0\uc640 \uac19\uc740 \uc6f9\ube0c\ub77c\uc6b0\uc800 \ucc3d\uc774  \uc2e4\ud589\ub418\uace0 \ud130\ubbf8\ub110\uc5d0\ub294  \uba54\uc2dc\uc9c0\uac00 \ucd9c\ub825\ub41c\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/13.png\" alt=\"\"><\/p>\n<h3><strong>2.3. \ub9ac\uc561\ud2b8\uc571 \uc218\uc815<\/strong><\/h3>\n<blockquote>\n<p>\ub9ac\uc561\ud2b8 \uc571\uc744 \uc218\uc815\ud574\ubcf4\uc790.<\/p>\n<\/blockquote>\n<p>  src\/App.js\u00a0\uc758 \ub0b4\uc6a9\uc744 \uc218\uc815\ud558\uba74 \ud654\uba74\uc5d0 \ubc14\ub85c \ubc18\uc601\ub41c\ub2e4<br \/>\n  \uc6b0\uc120 \uc218\uc815 \uc804\uc5d0 \uac1c\ubc1c\uc2dc \ud3b8\uc758\ub97c \uc704\ud55c \ud658\uacbd\uc124\uc815\uc744 \uc9c4\ud589\ud55c\ub2e4.<\/p>\n<h4><strong>2.3.1. VSCode \uc5d0\uc11c jsx \ud30c\uc77c \uc790\ub3d9\uc644\uc131 \uc124\uc815\ud558\uae30<\/strong><\/h4>\n<ol>\n<li><code>ctrl<\/code>\u00a0+ <code>shift\u00a0<\/code>+\u00a0<code>p<\/code>\u00a0( <code>\u21e7<\/code> +<code>\u2318<\/code>+ <code>P<\/code>)\ub97c \ub20c\ub7ec \uc544\ub798 \uc774\ubbf8\uc9c0\uc640 \uac19\uc740 setting.json \uc744 \ucc3e\uc544\uc11c \uc5f0\ub2e4<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%A2%80%ED%95%B4%EB%9D%BC\/assets\/imgs\/2024-04-08_145540.jpg\" alt=\"\"><\/p>\n<ol>\n<li><code>ctrl<\/code>\u00a0\u00a0+ <code>F<\/code>\u00a0\u00a0(<code>\u2318<\/code>+<code>F<\/code>)\ub97c \ub20c\ub7ec \uac80\uc0c9\ucc3d\uc744 \uc5f4\uace0\u00a0<code>emmet.inclu<\/code>\u00a0\ub97c \uac80\uc0c9\ud55c\ub2e4.<\/li>\n<li>\uac80\uc0c9 \uacb0\uacfc\ub85c \ud45c\uc2dc\ub418\ub294 \ud0a4\uc5d0 \uadf8\ub9bc\uacfc \uac19\uc740 \uac12\uc744 \ub123\uace0 \uc800\uc7a5\ud55c\ub2e4.<\/li>\n<\/ol>\n<pre><code class=\"language-json\">&quot;emmet.includeLanguages&quot;: { &quot;javascript&quot;: &quot;javascriptreact&quot; },\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%A2%80%ED%95%B4%EB%9D%BC\/assets\/imgs\/2024-04-08_145745.jpg\" alt=\"\"><\/p>\n<ol>\n<li>\uac80\uc0c9\uacb0\uacfc\uac00 \uc5c6\uc744 \uacbd\uc6b0 \uc704\uc758 \uc18c\uc2a4 \ucf54\ub4dc\ub97c json \ud30c\uc77c \ub9e8 \uccab\uc904\uc5d0 \uadf8\ub9bc\ucc98\ub7fc \ucd94\uac00\ud55c\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%A2%80%ED%95%B4%EB%9D%BC\/assets\/imgs\/2024-04-08_172203.jpg\" alt=\"vue-html\uc740 \uc548\uc368\ub3c4 \ub41c\ub2e4.\"><\/p>\n<h4><strong>2.3.2. src\/App.js \uc218\uc815\ud558\uae30<\/strong><\/h4>\n<p>src\/App.js \ud30c\uc77c\uc744 \uc5f4\uace0 \uc544\ub798\uc640 \uac19\uc774 \uc218\uc815\ud574\ubcf4\uc790<\/p>\n<pre><code class=\"language-javascript\">import logo from &#39;.\/logo.svg&#39;;\nimport &#39;.\/App.css&#39;;\n\nfunction App() {\n  return (\n    &lt;div className=&quot;App&quot;&gt;\n      &lt;header className=&quot;App-header&quot;&gt;\n        &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; \/&gt;\n        &lt;h1&gt;\uc774\uac8c \ub9ac\uc561\ud2b8\uc57c?&lt;\/h1&gt;\n        &lt;a\n          className=&quot;App-link&quot;\n          href=&quot;http:\/\/naver.com&quot;\n          target=&quot;_blank&quot;\n          rel=&quot;noopener noreferrer&quot;\n        &gt;\n          \ubc30\uc6b0\uc790\ub9ac\uc561\ud2b8\n        &lt;\/a&gt;\n      &lt;\/header&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/14.png\" alt=\"\uc2e4\ud589\ud654\uba74\"><\/p>\n<p>src\/App.css \ud30c\uc77c\uc744 \uc5f4\uace0 \uc544\ub798\uc640 \uac19\uc774 \uc218\uc815\ud574\ubcf4\uc790<\/p>\n<pre><code class=\"language-css\">.App-header {\n  background-color: #570a25;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(10px + 2vmin);\n  color: white;\n}\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/15.png\" alt=\"\uc2e4\ud589\ud654\uba74\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1.\ub9ac\uc561\ud2b8\uc18c\uac1c 1.1.\ub9ac\uc561\ud2b8\ub780? Info: \ud83d\udd17 \ub9ac\uc561\ud2b8\uacf5\uc2dd\ucee4\ubba4\ub2c8\ud2f0 JavaScript \ub77c\uc774\ube0c\ub7ec\ub9ac UI(\uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4)\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574 Facebook\uc5d0\uc11c \uac1c\ubc1c. \ud398\uc774\uc2a4\ubd81\uacfc \uac1c\ubc1c\uc790,\uae30\uc5c5,\ub2e8\uccb4\uc5d0 \uc758\ud574 \uc720\uc9c0\ubcf4\uc218\ub428. \ub9ac\uc561\ud2b8\ub294 \uc2f1\uae00 \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc774\ub098 \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0 \uc0ac\uc6a9\ub418\uae30\ub3c4 \ud568. 1.2.\ub9ac\uc561\ud2b8\uc758 \ud2b9\uc9d5 Info: JSX (javascript extension)\ub77c\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud655\uc7a5\ubb38\ubc95\uc744 \uc0ac\uc6a9\ud55c\ub2e4. \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 \ubc14\ub85c JSX\ub97c \ud574\uc11d\ud560\uc218 \uc5c6\uc73c\uba70 \ubc14\ubca8\uc774\ub77c\ub294 \ud2b8\ub79c\uc2a4\ucef4\ud30c\uc77c\ub7ec\ub97c \uc774\uc6a9\ud574\uc11c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \ubcc0\ud658\ud6c4 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0 \uc801\uc6a9\ud55c\ub2e4. \u2022 https:\/\/babeljs.io\/repl\u00a0\uc5d0\uc11c \ubcc0\ud658\ub418\ub294 \uacfc\uc815\uc744 \ubcfc\uc218\uc788\ub2e4 SPA\u00a0(Single &#8230; <a title=\"\uc2dc\uc791\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=193\" aria-label=\"\uc2dc\uc791\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-193","post","type-post","status-publish","format-standard","hentry","category-react-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/193","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=193"}],"version-history":[{"count":2,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/193\/revisions"}],"predecessor-version":[{"id":2238,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/193\/revisions\/2238"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}