{"id":475,"date":"2024-11-05T08:40:26","date_gmt":"2024-11-04T23:40:26","guid":{"rendered":"https:\/\/reasty.net\/?p=475"},"modified":"2024-11-18T23:32:20","modified_gmt":"2024-11-18T14:32:20","slug":"01-%eb%a6%ac%ec%95%a1%ed%8a%b8-%ea%b0%9c%eb%b0%9c-%ec%a4%80%eb%b9%84","status":"publish","type":"post","link":"https:\/\/reasty.net\/?p=475","title":{"rendered":"01. \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc900\ube44"},"content":{"rendered":"\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">01-1. \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c \uc774\ud574\ud558\uae30<\/h2>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">&#8211; <strong>SPA (Single Page Application)<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud558\ub098\uc758 \ud398\uc774\uc9c0\ub85c \ub3d9\uc791. \ucc45\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \uae5c\ube61\uc784\uc73c\ub85c \uc124\uba85\ud558\uace0 \uc788\uc74c.<br>\ubc31\uc5d4\ub4dc\uc5d0\uc11c \ubc1b\uc740 JSON \ub370\uc774\ud130\ub97c \ud574\uc11d\ud558\uc5ec \ud604\uc7ac \ud654\uba74\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \uc0c8\ub85c \uc694\uccad\ud55c \ubd80\ubd84\ub9cc \ub3d9\uc801\uc73c\ub85c \ud654\uba74\uc744 \uc0dd\uc131<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">&#8211; <strong>MPA (Multi Page Application)<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\ub7ec \ud398\uc774\uc9c0\ub85c \ub3d9\uc791.<br>\uc0ac\uc6a9\uc790 \uc694\uccad\uc774 \uc788\uc744 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 HTML\uc744 \uc804\ub2ec\ubc1b\ub294 \uae30\uc874 \ubc29\uc2dd<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">&#8220;<strong>\ub9ac\uc561\ud2b8&#8221;<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\ub9ac\uc561\ud2b8<\/strong>\ub294 &#8216;\uc2f1\uae00 \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ud504\ub7f0\ud2b8\uc5d4\ub4dc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c&#8217;<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">&#8211; <strong>\ud504\ub7f0\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \ub3d9\uc791\ud558\ub294 \ud15c\ud50c\ub9bf \uc5d4\uc9c4<br>(\uc694\uc998\uc5d4 \uc6f9\uc5b4\uc148\ube14\ub3c4 \uc788\ub358\ub370&#8230;)<br>\ub9ac\uc561\ud2b8, \uc575\uade4\ub7ec, \ubdf0 \ub4f1 \ud504\ub7f0\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac1d\uccb4\ub97c DOM \uac1d\uccb4\ub85c \uc804\ud658\ud55c\ub2e4.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">&#8211; <strong>\ub9ac\uc561\ud2b8 \ubc84\uc804 18 \ud2b9\uc9d5<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ub3d9\uc2dc\uc131, \uc790\ub3d9 \uc77c\uad04\ucc98\ub9ac, \ud2b8\ub79c\uc9c0\uc158, \ud5a5\uc0c1\ub41c \uc11c\ubc84-\uce21 \ub80c\ub354\ub9c1<br>  =&gt; Next.js \uac19\uc740 \ub9ac\uc561\ud2b8 \uae30\ubc18 \ud504\ub808\uc784\uc6cc\ud06c\ub4e4\uc758 \uae30\ub2a5 \ud5a5\uc0c1..<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">01-2. \uc708\ub3c4\uc6b0\uc5d0\uc11c \ub9ac\uc561\ud2b8 \uac1c\ubc1c \ud658\uacbd \ub9cc\ub4e4\uae30<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\uc124\uce58\ud574\uc57c \ud558\ub294 \ud504\ub85c\uadf8\ub7a8 \ubaa9\ub85d<\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<ul class=\"wp-block-list\">\n<li>Node.js &#8211; \uc6f9 \uc11c\ubc84 \uac1c\ubc1c \ud50c\ub7ab\ud3fc (\ud50c\ub7ab\ud3fc?)<\/li>\n\n\n\n<li>VSCode &#8211; \uc18c\uc2a4 \ucf54\ub4dc \ud3b8\uc9d1\uae30<\/li>\n\n\n\n<li>scoop &#8211; \uc708\ub3c4\uc6b0\uc6a9 \uc124\uce58 \ud504\ub85c\uadf8\ub7a8 (\uad8c\uc7a5? \uc77c\ubc18\uc801\uc778\uac00?)<\/li>\n\n\n\n<li>Homebrew &#8211; macOS\uc6a9 \uc124\uce58 \ud504\ub85c\uadf8\ub7a8<\/li>\n\n\n\n<li>touch &#8211; \ud30c\uc77c \uad8c\ub9ac \uc720\ud2f8 (\uc635\uc158)<\/li>\n\n\n\n<li>Chrome &#8211; \uc6f9 \ube0c\ub77c\uc6b0\uc800 (\uad8c\uc7a5, \ub098\ub294 Edge \uc4f8\ub798..)<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>&gt; #env:SCOOP='C:\\Scoop'\n&gt; Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -scope CurrentUser\n&gt; iwr -useb get.scoop.sh | iex<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"577\" src=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-1024x577.png\" alt=\"\" class=\"wp-image-508\" srcset=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-1024x577.png 1024w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-300x169.png 300w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-768x433.png 768w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-624x351.png 624w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image.png 1115w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">(\ud55c\ubc88\uc5d0 \ub420 \ub9ac\uac00 \uc5c6\uc9c0&#8230;)<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">\uc704\uc758 \ub9c1\ud06c \uc124\uba85\ub300\ub85c \ub2e4\uc2dc \uc124\uce58..<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&gt; irm get.scoop.sh -outfile 'install.ps1'\n&gt; .\\install.ps1 -RunAsAdmin<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"717\" height=\"405\" src=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-1.png\" alt=\"\" class=\"wp-image-512\" srcset=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-1.png 717w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-1-300x169.png 300w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-1-624x352.png 624w\" sizes=\"auto, (max-width: 717px) 100vw, 717px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\ud734..<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(\ud68c\uc0ac \ubcf4\uc548 \uc815\ucc45\uc0c1(?) \ubb34\uc870\uac74 \uad00\ub9ac\uc790 \uad8c\ud55c \ubd80\uc5ec&#8230; (\uc774\uac8c \uc65c \ubb34\uc2a8 \ubcf4\uc548 \uc815\ucc45\uc774\uc9c0??))<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">git\uacfc aria2 \ub77c\ub294 \ud504\ub85c\uadf8\ub7a8\uc744 \ucd94\uac00 \uc124\uce58(\uc65c??)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&gt; scoop install git aria2<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/aria2.github.io\/\">aria2<\/a> &#8211; \uacbd\ub7c9 \uba40\ud2f0-\ud504\ub85c\ud1a0\ucf5c &amp; \uba40\ud2f0-\uc18c\uc2a4 \ucee4\ub9e8\ub4dc\ub77c\uc778 \ub2e4\uc6b4\ub85c\ub4dc \ub3c4\uad6c. (\ubb54 \uc18c\ub9ac\ub798&#8230;)<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Node.js \ub294 \uc774\ubbf8 \uc124\uce58\ub418\uc5b4 \uc788\uc73c\ub2c8 \ud328\uc2a4..<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"716\" src=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-4-1024x716.png\" alt=\"\" class=\"wp-image-527\" srcset=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-4-1024x716.png 1024w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-4-300x210.png 300w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-4-768x537.png 768w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-4-624x437.png 624w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-4.png 1115w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">(\ub418\ub358 \uac83\ub3c4 \uc548\ub418\ub124..)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"924\" height=\"1024\" src=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-5-924x1024.png\" alt=\"\" class=\"wp-image-532\" srcset=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-5-924x1024.png 924w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-5-271x300.png 271w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-5-768x851.png 768w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-5-624x692.png 624w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-5.png 1115w\" sizes=\"auto, (max-width: 924px) 100vw, 924px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">(\ub2e4\uc74c \ub0a0 \ub2e4\uc2dc \uc124\uce58 \uc2dc\ub3c4\ud558\ub2c8 \uc131\uacf5.. (\uc11c\ubc84\uc624\ub958\uc600\ub098?))<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">VS Code \ub3c4 \uc124\uce58\ub418\uc5b4 \uc788\uc5b4\uc11c \ud328\uc2a4..<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">touch \ud504\ub85c\uadf8\ub7a8 \uc124\uce58 &#8211; macOS\ub098 \ub9ac\ub205\uc2a4\uc5d0\uc11c \uac04\ub2e8\ud55c \uba85\ub839\uc73c\ub85c \ud30c\uc77c\uc774\ub098 \ub514\ub809\ud130\ub9ac\ub97c \ub9cc\ub4e4\uc5b4 \uc8fc\ub294 \uc720\ud2f8\ub9ac\ud2f0 (\uadf8\ub0e5 \ud574\ub2f9 OS\uc758 \uba85\ub839\uc5b4\uac00 \ub354 \uac04\ub2e8\ud558\uc9c0 \uc54a\ub098? \uc77c\ub2e8 \uc124\uce58&#8230;)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&gt; scoop install touch<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Chrome \uc124\uce58\ub3c4 \ud328\uc2a4.. (\ub09c Edge\uc788\uac8c Edge \uc4f8\ub798)<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">01-3. macOS\uc5d0\uc11c \ub9ac\uc561\ud2b8 \uac1c\ubc1c \ud658\uacbd \ub9cc\ub4e4\uae30<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">(\ub9e5 \uc368\ubcf8\uc9c0 13\ub144 \uc9c0\ub0ac\ub124&#8230;)<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">01-4. VSCode \uac1c\ubc1c \ud658\uacbd \uc124\uc815\ud558\uae30<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud504\ub9ac\ud2f0\uc5b4 &#8211; \ucf54\ub4dc \uc815\ub82c<\/li>\n\n\n\n<li>\ud14c\uc77c\uc708\ub4dcCSS &#8211; CSS \uc2a4\ud0c0\uc77c\ub9c1<\/li>\n\n\n\n<li>\ud5e4\ub4dc\uc708\ub4dc &#8211; \ud14c\uc77c\uc708\ub4dcCSS \ud074\ub798\uc2a4 \ubd84\ub958\uae30<\/li>\n\n\n\n<li>\ud3ec\uc2a4\ud2b8CSS &#8211; CSS \uad6c\ubb38 \uac15\uc870 \ud45c\uc2dc<\/li>\n\n\n\n<li>\ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \ucef4\ud30c\uc77c\ub7ec<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">\ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \ucef4\ud30c\uc77c\ub7ec \uc124\uce58\ud558\uae30<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&gt; npm i -g typescript ts-node<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">\ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub85c\uadf8\ub7a8 \ub9cc\ub4e4\uace0 \ucef4\ud30c\uc77c\ud558\uae30<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>console.log(\"Hello world!\");<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"628\" src=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-6-1024x628.png\" alt=\"\" class=\"wp-image-538\" srcset=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-6-1024x628.png 1024w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-6-300x184.png 300w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-6-768x471.png 768w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-6-624x382.png 624w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-6.png 1090w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">(\uc74c&#8230;\uc5b4&#8230; \uadf8\ub798..)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-8-1024x518.png\" alt=\"\" class=\"wp-image-541\" srcset=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-8-1024x518.png 1024w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-8-300x152.png 300w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-8-768x389.png 768w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-8-624x316.png 624w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-8.png 1517w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">(\u314b\u314b\u314b\u314b\u314b \ud68c\uc0ac\ucef4\uc5d0\uc11c\ub294 \ub2e4\ub978 \uc5d0\ub7ec\uac00 \ub728\ub124..)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc2a4\ud130\ub514\uba64\ubc84\uc758 \ub3c4\uc6c0\uc73c\ub85c tsconfig.json \ud30c\uc77c\uc744 \uc544\ub798\uc640 \uac19\uc774 \ubcc0\uacbd\ud558\ub2c8 \uc815\uc0c1 \uc791\ub3d9!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"$schema\": \"https:\/\/json.schemastore.org\/tsconfig\",\n  \"display\": \"Node 16\",\n\n  \"compilerOptions\": {\n    \"lib\": &#91;\"es2021\"],\n    \"module\": \"Node16\",\n    \"target\": \"CommonJS\",\n\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"moduleResolution\": \"node\"\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">(tsconfig.json \ud30c\uc77c \ucc3e\ub294\ub370\ub3c4 \ud55c\ucc38 \uac78\ub9bc&#8230;)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(\uc704\uc758 \uc5d0\ub7ec \ub0b4\uc6a9\uc744 \ucc3e\uc544\ubd10\ub3c4 CommonJS\ub85c \ubcc0\uacbd\ud558\ub77c\ub294 \uacf5\uc2dd \ubb38\uc11c\ub294 \uc544\uc9c1 \ucc3e\uc9c0 \ubabb\ud568. \ub610\ud55c VSCode\uc5d0\uc11c\ub294 \uacbd\uace0 \uba54\uc138\uc9c0\uac00&#8230; &#8230; \ubb34\uc2a8 \ubb38\uc81c\uc77c\uae4c?)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1002\" height=\"768\" src=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-10.png\" alt=\"\" class=\"wp-image-548\" srcset=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-10.png 1002w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-10-300x230.png 300w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-10-768x589.png 768w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-10-624x478.png 624w\" sizes=\"auto, (max-width: 1002px) 100vw, 1002px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">\ud504\ub9ac\ud2f0\uc5b4\ub85c \uc18c\uc2a4 \uc815\ub9ac\ud574 \ubcf4\uae30<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  singleQuote: true,\n  semi: false,\n}<\/code><\/pre>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">01-5. \uccab \ubc88\uc9f8 \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8 \ub9cc\ub4e4\uae30<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&gt; npx create-react-app &#91;\ud504\ub85c\uc81d\ud2b8\uba85] --template typescript<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">\ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"610\" src=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-11-1024x610.png\" alt=\"\" class=\"wp-image-559\" srcset=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-11-1024x610.png 1024w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-11-300x179.png 300w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-11-768x458.png 768w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-11-624x372.png 624w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-11.png 1463w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">\uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc2e4\ud589\ud558\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">package.json \ud30c\uc77c\uc758 &#8220;scripts&#8221; \ud56d\ubaa9\uc5d0 \uba85\ub839\uc5b4\uac00 \uc815\uc758\ub418\uc5b4 \uc788\uc74c<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&gt; npm run start # \uac1c\ubc1c \ubaa8\ub4dc\n&gt; npm run build # \ube4c\ub4dc \ubaa8\ub4dc(=\ubc30\ud3ec \ubaa8\ub4dc, \ud504\ub85c\ub355\uc158 \ubaa8\ub4dc)<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">\uc6f9\ud329\uacfc \ubc88\ub4e4\ud30c\uc77c<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc6f9\ud329(webpack) &#8211; \ud504\ub7f0\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ub300\ud45c\uc801\uc778 \ubaa8\ub4c8(javascript, \uc774\ubbf8\uc9c0, css, html \ub4f1) \ubc88\ub4e4\ub7ec. \ub2e4\uc591\ud55c \uc785\ub825 \ubaa8\ub4c8\uc744 \uacb0\ud569\ud558\uc5ec \ub2e8\uc21c\ud55c \ud615\ud0dc\uc758 \ubaa8\ub4c8\ub85c \ubcc0\ud658\ud574 \uc8fc\ub294 \uc5ed\ud560\uc744 \ud55c\ub2e4.<br>[\ube44\uc2b7\ud55c \ubaa8\ub4c8 \ubc88\ub4e4\ub7ec\ub85c vite \uac00 \uc788\ub2e4.]<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubc88\ub4e4(bundle) &#8211; \uc6f9\ud329\uc758 \uacb0\uacfc\ubb3c. main \uc774\ub098 chunk\ub77c\ub294 \ub2e8\uc5b4\uac00 \uc788\ub294 \ud30c\uc77c\ub4e4<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">\ube4c\ub4dc \ubaa8\ub4dc\ub85c \uc2e4\ud589\ud558\uae30<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>> npm run build            # \ud504\ub85c\uc81d\ud2b8 \ube4c\ub4dc \n> npm install -g serve     # \uc6f9 \uc11c\ubc84 \uc5ed\ud560\uc744 \ud558\ub294 serve \ud504\ub85c\uadf8\ub7a8 \uc124\uce58\n> serve -s build<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"860\" src=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-12-1024x860.png\" alt=\"\" class=\"wp-image-565\" srcset=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-12-1024x860.png 1024w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-12-300x252.png 300w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-12-768x645.png 768w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-12-624x524.png 624w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-12.png 1352w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">\uac1c\ubc1c \ubaa8\ub4dc\ub85c \uc2e4\ud589\ud558\uae30<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>> npm start    # \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\ub97c \ube4c\ub4dc\ud558\uc5ec \ubc88\ub4e4 \ud30c\uc77c\ub85c \ub9cc\ub4e0 \ud6c4, \uc774\ub97c \ubc18\uc601\ud55c index.html \ud30c\uc77c\uc744 \uc0dd\uc131<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">(npm run start \uc640 npm start\uc758 \ucc28\uc774\uc810\uc740 \ubb58\uae4c?)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(build \ubaa8\ub4dc\uc640 \uac1c\ubc1c\ubaa8\ub4dc\uc77c\ub54c\uc758 \uba85\ud655\ud55c \ucc28\uc774\uc810\uc740? \ub9b4\ub9ac\uc988 \ubaa8\ub4dc\uc640 \ub514\ubc84\uadf8 \ubaa8\ub4dc\uc758 \ucc28\uc774\ucc98\ub7fc \ucd5c\uc801\ud654 \uac19\uc740 \uc791\uc5c5\uc774 \uc774\ub8e8\uc5b4 \uc9c8\uae4c?)<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">\uc18c\uc2a4 \ucf54\ub4dc \uc218\uc815\ud574 \ubcf4\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud56b \ubaa8\ub4c8 \uad50\uccb4(HMR, hot module replacement) &#8211; \uc18c\uc2a4 \ucf54\ub4dc\ub97c \uc218\uc815\ud558\uac70\ub098 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\uba74 \ubcc0\uacbd \uc0ac\ud56d\uc774 \uc989\uac01 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ubc18\uc601\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function App() {\n  console.log('App called.')\n  return &lt;h1>Hello world!&lt;\/h1>\n}<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Node.js\uc6a9 \uc678\ubd80 \ud328\ud0a4\uc9c0 \uc124\uce58\ud558\ub294 \ubc29\ubc95<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>npm i &#8211;save : \uc2e4\ud589\uc5d0 \ud544\uc694\ud55c \ud328\ud0a4\uc9c0 \uc124\uce58. pakcage.json \ud30c\uc77c\uc758 <strong>&#8216;dependencies&#8217; <\/strong>\ud56d\ubaa9\uc5d0 \ub4f1\ub85d\ub428. \ub2e8\ucd95\uba85\ub839 &#8216;-S&#8217;<\/li>\n\n\n\n<li>npm i &#8211;save-dev : \uac1c\ubc1c\uc5d0 \ud544\uc694\ud55c \ud328\ud0a4\uc9c0 \uc124\uce58. pakcage.json \ud30c\uc77c\uc758 <strong>&#8216;devDependencies&#8217;<\/strong> \ud56d\ubaa9\uc5d0 \ub4f1\ub85d\ub428. \ub2e8\ucd95\uba85\ub839 &#8216;-D&#8217;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \uac1c\ubc1c\ub41c \ud328\ud0a4\uc9c0\ub97c \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub824\uba74 @types\/\ub85c \uc2dc\uc791\ud558\ub294 \ud0c0\uc785 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ucd94\uac00\ub85c \uc124\uce58\ud574\uc57c \ud568.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>chance : \ub2e4\uc591\ud55c \uc885\ub958\uc758 \uac00\uc9dc \ub370\uc774\ud130\ub97c \uc81c\uacf5\ud574 \uc8fc\ub294 \ud328\ud0a4\uc9c0<\/li>\n\n\n\n<li>luxon : &#8216;2021\/10\/6&#8217;\ub0a0\uc9dc\ub97c &#8217;20\ubd84 \uc804&#8217;\uacfc \uac19\uc740 \ud615\ud0dc\ub85c \ub9cc\ub4e4\uc5b4 \uc8fc\ub294 \ud328\ud0a4\uc9c0<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>> npm i chance luxon\n> npm i -D @types\/chance @types\/luxon<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc124\uce58\uac00 \ub418\uba74 package.json \ud30c\uc77c\uc5d0 \ud574\ub2f9 \ud328\ud0a4\uc9c0 \uba85\uacfc \ubc84\uc804\uc774 \ucd94\uac00\ub41c\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"440\" height=\"1003\" src=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-13.png\" alt=\"\" class=\"wp-image-577\" srcset=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-13.png 440w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-13-132x300.png 132w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">\uac00\uc9dc \ub370\uc774\ud130 \uc0ac\uc6a9\ud574 \ubcf4\uae30<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>import * as D from '.\/data'\n\nexport default function App() {\n  console.log('App called.')\n\n  return (\n    &lt;div>\n      &lt;p>\n        {D.randomName()}, {D.randomDayMonthYear()}\n      &lt;\/p>\n      &lt;img src={D.randomAvatar()} height=\"50\" \/>\n      &lt;img src={D.randomImage()} height=\"300\" \/>\n    &lt;\/div>\n  )\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"476\" height=\"376\" src=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-14.png\" alt=\"\" class=\"wp-image-578\" srcset=\"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-14.png 476w, https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image-14-300x237.png 300w\" sizes=\"auto, (max-width: 476px) 100vw, 476px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">\ud504\ub85c\uc81d\ud2b8 \uc815\ub9ac\ud558\uae30<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>> rm -r -force node_modules\n> rm package-lock.json<\/code><\/pre>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>01-1. \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c \uc774\ud574\ud558\uae30 &#8211; SPA (Single Page Application) \ud558\ub098\uc758 \ud398\uc774\uc9c0\ub85c \ub3d9\uc791. \ucc45\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \uae5c\ube61\uc784\uc73c\ub85c \uc124\uba85\ud558\uace0 \uc788\uc74c.\ubc31\uc5d4\ub4dc\uc5d0\uc11c \ubc1b\uc740 JSON \ub370\uc774\ud130\ub97c \ud574\uc11d\ud558\uc5ec \ud604\uc7ac \ud654\uba74\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \uc0c8\ub85c \uc694\uccad\ud55c \ubd80\ubd84\ub9cc \ub3d9\uc801\uc73c\ub85c \ud654\uba74\uc744 \uc0dd\uc131 &#8211; MPA (Multi Page Application) \uc5ec\ub7ec \ud398\uc774\uc9c0\ub85c \ub3d9\uc791.\uc0ac\uc6a9\uc790 \uc694\uccad\uc774 \uc788\uc744 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 HTML\uc744 \uc804\ub2ec\ubc1b\ub294 \uae30\uc874 \ubc29\uc2dd &#8220;\ub9ac\uc561\ud2b8&#8221; \ub9ac\uc561\ud2b8\ub294 &#8216;\uc2f1\uae00 \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ud504\ub7f0\ud2b8\uc5d4\ub4dc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c&#8217; &#8211; \ud504\ub7f0\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \ub3d9\uc791\ud558\ub294&#8230; <a href=\"https:\/\/reasty.net\/?p=475\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[63],"tags":[64,65],"class_list":["post-475","post","type-post","status-publish","format-standard","hentry","category-react","tag-do-it----with-","tag-65"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"01-1. \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c \uc774\ud574\ud558\uae30 - SPA (Single Page Application) \ud558\ub098\uc758 \ud398\uc774\uc9c0\ub85c \ub3d9\uc791. \ucc45\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \uae5c\ube61\uc784\uc73c\ub85c \uc124\uba85\ud558\uace0 \uc788\uc74c.\ubc31\uc5d4\ub4dc\uc5d0\uc11c \ubc1b\uc740 JSON \ub370\uc774\ud130\ub97c \ud574\uc11d\ud558\uc5ec \ud604\uc7ac \ud654\uba74\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \uc0c8\ub85c \uc694\uccad\ud55c \ubd80\ubd84\ub9cc \ub3d9\uc801\uc73c\ub85c \ud654\uba74\uc744 \uc0dd\uc131 - MPA (Multi Page Application) \uc5ec\ub7ec \ud398\uc774\uc9c0\ub85c \ub3d9\uc791.\uc0ac\uc6a9\uc790 \uc694\uccad\uc774 \uc788\uc744 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 HTML\uc744 \uc804\ub2ec\ubc1b\ub294 \uae30\uc874 \ubc29\uc2dd &quot;\ub9ac\uc561\ud2b8&quot; \ub9ac\uc561\ud2b8\ub294 &#039;\uc2f1\uae00 \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ud504\ub7f0\ud2b8\uc5d4\ub4dc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c&#039;\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Reasty\"\/>\n\t<meta name=\"google-site-verification\" content=\"jcPlHP_CH1l7BsKhhCYbJmc3sJMEMI_aCypCiUfTjdw\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/reasty.net\/?p=475\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<meta property=\"og:locale\" content=\"ko_KR\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Reasty&#039;s Programming Memories - \ub808\uc2a4\ud2f0\uc758 \ud504\ub85c\uadf8\ub798\ubc0d \ub178\ud558\uc6b0 \ub178\uc6e8\uc5b4\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"01. \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc900\ube44 - Reasty&#039;s Programming Memories\" \/>\n\t\t<meta property=\"og:description\" content=\"01-1. \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c \uc774\ud574\ud558\uae30 - SPA (Single Page Application) \ud558\ub098\uc758 \ud398\uc774\uc9c0\ub85c \ub3d9\uc791. \ucc45\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \uae5c\ube61\uc784\uc73c\ub85c \uc124\uba85\ud558\uace0 \uc788\uc74c.\ubc31\uc5d4\ub4dc\uc5d0\uc11c \ubc1b\uc740 JSON \ub370\uc774\ud130\ub97c \ud574\uc11d\ud558\uc5ec \ud604\uc7ac \ud654\uba74\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \uc0c8\ub85c \uc694\uccad\ud55c \ubd80\ubd84\ub9cc \ub3d9\uc801\uc73c\ub85c \ud654\uba74\uc744 \uc0dd\uc131 - MPA (Multi Page Application) \uc5ec\ub7ec \ud398\uc774\uc9c0\ub85c \ub3d9\uc791.\uc0ac\uc6a9\uc790 \uc694\uccad\uc774 \uc788\uc744 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 HTML\uc744 \uc804\ub2ec\ubc1b\ub294 \uae30\uc874 \ubc29\uc2dd &quot;\ub9ac\uc561\ud2b8&quot; \ub9ac\uc561\ud2b8\ub294 &#039;\uc2f1\uae00 \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ud504\ub7f0\ud2b8\uc5d4\ub4dc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c&#039;\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/reasty.net\/?p=475\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2024-11-04T23:40:26+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2024-11-18T14:32:20+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/reastykim\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@reastykim\" \/>\n\t\t<meta name=\"twitter:title\" content=\"01. \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc900\ube44 - Reasty&#039;s Programming Memories\" \/>\n\t\t<meta name=\"twitter:description\" content=\"01-1. \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c \uc774\ud574\ud558\uae30 - SPA (Single Page Application) \ud558\ub098\uc758 \ud398\uc774\uc9c0\ub85c \ub3d9\uc791. \ucc45\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \uae5c\ube61\uc784\uc73c\ub85c \uc124\uba85\ud558\uace0 \uc788\uc74c.\ubc31\uc5d4\ub4dc\uc5d0\uc11c \ubc1b\uc740 JSON \ub370\uc774\ud130\ub97c \ud574\uc11d\ud558\uc5ec \ud604\uc7ac \ud654\uba74\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \uc0c8\ub85c \uc694\uccad\ud55c \ubd80\ubd84\ub9cc \ub3d9\uc801\uc73c\ub85c \ud654\uba74\uc744 \uc0dd\uc131 - MPA (Multi Page Application) \uc5ec\ub7ec \ud398\uc774\uc9c0\ub85c \ub3d9\uc791.\uc0ac\uc6a9\uc790 \uc694\uccad\uc774 \uc788\uc744 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 HTML\uc744 \uc804\ub2ec\ubc1b\ub294 \uae30\uc874 \ubc29\uc2dd &quot;\ub9ac\uc561\ud2b8&quot; \ub9ac\uc561\ud2b8\ub294 &#039;\uc2f1\uae00 \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ud504\ub7f0\ud2b8\uc5d4\ub4dc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c&#039;\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@reastykim\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=475#blogposting\",\"name\":\"01. \\ub9ac\\uc561\\ud2b8 \\uac1c\\ubc1c \\uc900\\ube44 - Reasty's Programming Memories\",\"headline\":\"01. \\ub9ac\\uc561\\ud2b8 \\uac1c\\ubc1c \\uc900\\ube44\",\"author\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/?author=1#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/reasty.net\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/image.png\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=475\\\/#articleImage\",\"width\":1115,\"height\":628},\"datePublished\":\"2024-11-05T08:40:26+09:00\",\"dateModified\":\"2024-11-18T23:32:20+09:00\",\"inLanguage\":\"ko-KR\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=475#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=475#webpage\"},\"articleSection\":\"React, Do it! \\ub9ac\\uc561\\ud2b8\\ub85c \\uc6f9\\uc571 \\ub9cc\\ub4e4\\uae30 with \\ud0c0\\uc785\\uc2a4\\ud06c\\ub9bd\\ud2b8, \\ub9ac\\uc561\\ud2b8\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=475#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net#listItem\",\"position\":1,\"name\":\"\\ud648\",\"item\":\"https:\\\/\\\/reasty.net\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?cat=9#listItem\",\"name\":\"Study\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?cat=9#listItem\",\"position\":2,\"name\":\"Study\",\"item\":\"https:\\\/\\\/reasty.net\\\/?cat=9\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?cat=63#listItem\",\"name\":\"React\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net#listItem\",\"name\":\"\\ud648\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?cat=63#listItem\",\"position\":3,\"name\":\"React\",\"item\":\"https:\\\/\\\/reasty.net\\\/?cat=63\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=475#listItem\",\"name\":\"01. \\ub9ac\\uc561\\ud2b8 \\uac1c\\ubc1c \\uc900\\ube44\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?cat=9#listItem\",\"name\":\"Study\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=475#listItem\",\"position\":4,\"name\":\"01. \\ub9ac\\uc561\\ud2b8 \\uac1c\\ubc1c \\uc900\\ube44\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?cat=63#listItem\",\"name\":\"React\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/reasty.net\\\/#person\",\"name\":\"Reasty\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=475#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5b441925fb88cfa3ff962d797c048671a3ef20a01d85a4de1feadc32d00b2d89?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Reasty\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?author=1#author\",\"url\":\"https:\\\/\\\/reasty.net\\\/?author=1\",\"name\":\"Reasty\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=475#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5b441925fb88cfa3ff962d797c048671a3ef20a01d85a4de1feadc32d00b2d89?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Reasty\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=475#webpage\",\"url\":\"https:\\\/\\\/reasty.net\\\/?p=475\",\"name\":\"01. \\ub9ac\\uc561\\ud2b8 \\uac1c\\ubc1c \\uc900\\ube44 - Reasty's Programming Memories\",\"description\":\"01-1. \\ub9ac\\uc561\\ud2b8 \\ud504\\ub808\\uc784\\uc6cc\\ud06c \\uc774\\ud574\\ud558\\uae30 - SPA (Single Page Application) \\ud558\\ub098\\uc758 \\ud398\\uc774\\uc9c0\\ub85c \\ub3d9\\uc791. \\ucc45\\uc5d0\\uc11c\\ub294 \\ube0c\\ub77c\\uc6b0\\uc800\\uc758 \\uae5c\\ube61\\uc784\\uc73c\\ub85c \\uc124\\uba85\\ud558\\uace0 \\uc788\\uc74c.\\ubc31\\uc5d4\\ub4dc\\uc5d0\\uc11c \\ubc1b\\uc740 JSON \\ub370\\uc774\\ud130\\ub97c \\ud574\\uc11d\\ud558\\uc5ec \\ud604\\uc7ac \\ud654\\uba74\\uc5d0\\uc11c \\uc0ac\\uc6a9\\uc790\\uac00 \\uc0c8\\ub85c \\uc694\\uccad\\ud55c \\ubd80\\ubd84\\ub9cc \\ub3d9\\uc801\\uc73c\\ub85c \\ud654\\uba74\\uc744 \\uc0dd\\uc131 - MPA (Multi Page Application) \\uc5ec\\ub7ec \\ud398\\uc774\\uc9c0\\ub85c \\ub3d9\\uc791.\\uc0ac\\uc6a9\\uc790 \\uc694\\uccad\\uc774 \\uc788\\uc744 \\ub54c\\ub9c8\\ub2e4 \\uc0c8\\ub85c\\uc6b4 HTML\\uc744 \\uc804\\ub2ec\\ubc1b\\ub294 \\uae30\\uc874 \\ubc29\\uc2dd \\\"\\ub9ac\\uc561\\ud2b8\\\" \\ub9ac\\uc561\\ud2b8\\ub294 '\\uc2f1\\uae00 \\ud398\\uc774\\uc9c0 \\uc560\\ud50c\\ub9ac\\ucf00\\uc774\\uc158\\uc744 \\ub9cc\\ub4dc\\ub294 \\ud504\\ub7f0\\ud2b8\\uc5d4\\ub4dc \\uc790\\ubc14\\uc2a4\\ud06c\\ub9bd\\ud2b8 \\ud504\\ub808\\uc784\\uc6cc\\ud06c'\",\"inLanguage\":\"ko-KR\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/?p=475#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/?author=1#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/?author=1#author\"},\"datePublished\":\"2024-11-05T08:40:26+09:00\",\"dateModified\":\"2024-11-18T23:32:20+09:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/reasty.net\\\/#website\",\"url\":\"https:\\\/\\\/reasty.net\\\/\",\"name\":\"Reasty's Programming Memories\",\"description\":\"\\ub808\\uc2a4\\ud2f0\\uc758 \\ud504\\ub85c\\uadf8\\ub798\\ubc0d \\ub178\\ud558\\uc6b0 \\ub178\\uc6e8\\uc5b4\",\"inLanguage\":\"ko-KR\",\"publisher\":{\"@id\":\"https:\\\/\\\/reasty.net\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"01. \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc900\ube44 - Reasty's Programming Memories","description":"01-1. \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c \uc774\ud574\ud558\uae30 - SPA (Single Page Application) \ud558\ub098\uc758 \ud398\uc774\uc9c0\ub85c \ub3d9\uc791. \ucc45\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \uae5c\ube61\uc784\uc73c\ub85c \uc124\uba85\ud558\uace0 \uc788\uc74c.\ubc31\uc5d4\ub4dc\uc5d0\uc11c \ubc1b\uc740 JSON \ub370\uc774\ud130\ub97c \ud574\uc11d\ud558\uc5ec \ud604\uc7ac \ud654\uba74\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \uc0c8\ub85c \uc694\uccad\ud55c \ubd80\ubd84\ub9cc \ub3d9\uc801\uc73c\ub85c \ud654\uba74\uc744 \uc0dd\uc131 - MPA (Multi Page Application) \uc5ec\ub7ec \ud398\uc774\uc9c0\ub85c \ub3d9\uc791.\uc0ac\uc6a9\uc790 \uc694\uccad\uc774 \uc788\uc744 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 HTML\uc744 \uc804\ub2ec\ubc1b\ub294 \uae30\uc874 \ubc29\uc2dd \"\ub9ac\uc561\ud2b8\" \ub9ac\uc561\ud2b8\ub294 '\uc2f1\uae00 \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ud504\ub7f0\ud2b8\uc5d4\ub4dc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c'","canonical_url":"https:\/\/reasty.net\/?p=475","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"jcPlHP_CH1l7BsKhhCYbJmc3sJMEMI_aCypCiUfTjdw","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/reasty.net\/?p=475#blogposting","name":"01. \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc900\ube44 - Reasty's Programming Memories","headline":"01. \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc900\ube44","author":{"@id":"https:\/\/reasty.net\/?author=1#author"},"publisher":{"@id":"https:\/\/reasty.net\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/reasty.net\/wp-content\/uploads\/2024\/11\/image.png","@id":"https:\/\/reasty.net\/?p=475\/#articleImage","width":1115,"height":628},"datePublished":"2024-11-05T08:40:26+09:00","dateModified":"2024-11-18T23:32:20+09:00","inLanguage":"ko-KR","mainEntityOfPage":{"@id":"https:\/\/reasty.net\/?p=475#webpage"},"isPartOf":{"@id":"https:\/\/reasty.net\/?p=475#webpage"},"articleSection":"React, Do it! \ub9ac\uc561\ud2b8\ub85c \uc6f9\uc571 \ub9cc\ub4e4\uae30 with \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8, \ub9ac\uc561\ud2b8"},{"@type":"BreadcrumbList","@id":"https:\/\/reasty.net\/?p=475#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/reasty.net#listItem","position":1,"name":"\ud648","item":"https:\/\/reasty.net","nextItem":{"@type":"ListItem","@id":"https:\/\/reasty.net\/?cat=9#listItem","name":"Study"}},{"@type":"ListItem","@id":"https:\/\/reasty.net\/?cat=9#listItem","position":2,"name":"Study","item":"https:\/\/reasty.net\/?cat=9","nextItem":{"@type":"ListItem","@id":"https:\/\/reasty.net\/?cat=63#listItem","name":"React"},"previousItem":{"@type":"ListItem","@id":"https:\/\/reasty.net#listItem","name":"\ud648"}},{"@type":"ListItem","@id":"https:\/\/reasty.net\/?cat=63#listItem","position":3,"name":"React","item":"https:\/\/reasty.net\/?cat=63","nextItem":{"@type":"ListItem","@id":"https:\/\/reasty.net\/?p=475#listItem","name":"01. \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc900\ube44"},"previousItem":{"@type":"ListItem","@id":"https:\/\/reasty.net\/?cat=9#listItem","name":"Study"}},{"@type":"ListItem","@id":"https:\/\/reasty.net\/?p=475#listItem","position":4,"name":"01. \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc900\ube44","previousItem":{"@type":"ListItem","@id":"https:\/\/reasty.net\/?cat=63#listItem","name":"React"}}]},{"@type":"Person","@id":"https:\/\/reasty.net\/#person","name":"Reasty","image":{"@type":"ImageObject","@id":"https:\/\/reasty.net\/?p=475#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/5b441925fb88cfa3ff962d797c048671a3ef20a01d85a4de1feadc32d00b2d89?s=96&d=mm&r=g","width":96,"height":96,"caption":"Reasty"}},{"@type":"Person","@id":"https:\/\/reasty.net\/?author=1#author","url":"https:\/\/reasty.net\/?author=1","name":"Reasty","image":{"@type":"ImageObject","@id":"https:\/\/reasty.net\/?p=475#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/5b441925fb88cfa3ff962d797c048671a3ef20a01d85a4de1feadc32d00b2d89?s=96&d=mm&r=g","width":96,"height":96,"caption":"Reasty"}},{"@type":"WebPage","@id":"https:\/\/reasty.net\/?p=475#webpage","url":"https:\/\/reasty.net\/?p=475","name":"01. \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc900\ube44 - Reasty's Programming Memories","description":"01-1. \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c \uc774\ud574\ud558\uae30 - SPA (Single Page Application) \ud558\ub098\uc758 \ud398\uc774\uc9c0\ub85c \ub3d9\uc791. \ucc45\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \uae5c\ube61\uc784\uc73c\ub85c \uc124\uba85\ud558\uace0 \uc788\uc74c.\ubc31\uc5d4\ub4dc\uc5d0\uc11c \ubc1b\uc740 JSON \ub370\uc774\ud130\ub97c \ud574\uc11d\ud558\uc5ec \ud604\uc7ac \ud654\uba74\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \uc0c8\ub85c \uc694\uccad\ud55c \ubd80\ubd84\ub9cc \ub3d9\uc801\uc73c\ub85c \ud654\uba74\uc744 \uc0dd\uc131 - MPA (Multi Page Application) \uc5ec\ub7ec \ud398\uc774\uc9c0\ub85c \ub3d9\uc791.\uc0ac\uc6a9\uc790 \uc694\uccad\uc774 \uc788\uc744 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 HTML\uc744 \uc804\ub2ec\ubc1b\ub294 \uae30\uc874 \ubc29\uc2dd \"\ub9ac\uc561\ud2b8\" \ub9ac\uc561\ud2b8\ub294 '\uc2f1\uae00 \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ud504\ub7f0\ud2b8\uc5d4\ub4dc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c'","inLanguage":"ko-KR","isPartOf":{"@id":"https:\/\/reasty.net\/#website"},"breadcrumb":{"@id":"https:\/\/reasty.net\/?p=475#breadcrumblist"},"author":{"@id":"https:\/\/reasty.net\/?author=1#author"},"creator":{"@id":"https:\/\/reasty.net\/?author=1#author"},"datePublished":"2024-11-05T08:40:26+09:00","dateModified":"2024-11-18T23:32:20+09:00"},{"@type":"WebSite","@id":"https:\/\/reasty.net\/#website","url":"https:\/\/reasty.net\/","name":"Reasty's Programming Memories","description":"\ub808\uc2a4\ud2f0\uc758 \ud504\ub85c\uadf8\ub798\ubc0d \ub178\ud558\uc6b0 \ub178\uc6e8\uc5b4","inLanguage":"ko-KR","publisher":{"@id":"https:\/\/reasty.net\/#person"}}]},"og:locale":"ko_KR","og:site_name":"Reasty's Programming Memories - \ub808\uc2a4\ud2f0\uc758 \ud504\ub85c\uadf8\ub798\ubc0d \ub178\ud558\uc6b0 \ub178\uc6e8\uc5b4","og:type":"article","og:title":"01. \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc900\ube44 - Reasty's Programming Memories","og:description":"01-1. \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c \uc774\ud574\ud558\uae30 - SPA (Single Page Application) \ud558\ub098\uc758 \ud398\uc774\uc9c0\ub85c \ub3d9\uc791. \ucc45\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \uae5c\ube61\uc784\uc73c\ub85c \uc124\uba85\ud558\uace0 \uc788\uc74c.\ubc31\uc5d4\ub4dc\uc5d0\uc11c \ubc1b\uc740 JSON \ub370\uc774\ud130\ub97c \ud574\uc11d\ud558\uc5ec \ud604\uc7ac \ud654\uba74\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \uc0c8\ub85c \uc694\uccad\ud55c \ubd80\ubd84\ub9cc \ub3d9\uc801\uc73c\ub85c \ud654\uba74\uc744 \uc0dd\uc131 - MPA (Multi Page Application) \uc5ec\ub7ec \ud398\uc774\uc9c0\ub85c \ub3d9\uc791.\uc0ac\uc6a9\uc790 \uc694\uccad\uc774 \uc788\uc744 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 HTML\uc744 \uc804\ub2ec\ubc1b\ub294 \uae30\uc874 \ubc29\uc2dd &quot;\ub9ac\uc561\ud2b8&quot; \ub9ac\uc561\ud2b8\ub294 '\uc2f1\uae00 \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ud504\ub7f0\ud2b8\uc5d4\ub4dc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c'","og:url":"https:\/\/reasty.net\/?p=475","article:published_time":"2024-11-04T23:40:26+00:00","article:modified_time":"2024-11-18T14:32:20+00:00","article:publisher":"https:\/\/facebook.com\/reastykim","twitter:card":"summary_large_image","twitter:site":"@reastykim","twitter:title":"01. \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc900\ube44 - Reasty's Programming Memories","twitter:description":"01-1. \ub9ac\uc561\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c \uc774\ud574\ud558\uae30 - SPA (Single Page Application) \ud558\ub098\uc758 \ud398\uc774\uc9c0\ub85c \ub3d9\uc791. \ucc45\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \uae5c\ube61\uc784\uc73c\ub85c \uc124\uba85\ud558\uace0 \uc788\uc74c.\ubc31\uc5d4\ub4dc\uc5d0\uc11c \ubc1b\uc740 JSON \ub370\uc774\ud130\ub97c \ud574\uc11d\ud558\uc5ec \ud604\uc7ac \ud654\uba74\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \uc0c8\ub85c \uc694\uccad\ud55c \ubd80\ubd84\ub9cc \ub3d9\uc801\uc73c\ub85c \ud654\uba74\uc744 \uc0dd\uc131 - MPA (Multi Page Application) \uc5ec\ub7ec \ud398\uc774\uc9c0\ub85c \ub3d9\uc791.\uc0ac\uc6a9\uc790 \uc694\uccad\uc774 \uc788\uc744 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 HTML\uc744 \uc804\ub2ec\ubc1b\ub294 \uae30\uc874 \ubc29\uc2dd &quot;\ub9ac\uc561\ud2b8&quot; \ub9ac\uc561\ud2b8\ub294 '\uc2f1\uae00 \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ud504\ub7f0\ud2b8\uc5d4\ub4dc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c'","twitter:creator":"@reastykim"},"aioseo_meta_data":{"post_id":"475","title":null,"description":null,"keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2024-11-04 23:40:35","updated":"2025-06-04 03:16:22","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/reasty.net\" title=\"\ud648\">\ud648<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/reasty.net\/?cat=9\" title=\"Study\">Study<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/reasty.net\/?cat=63\" title=\"React\">React<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t01. \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc900\ube44\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"\ud648","link":"https:\/\/reasty.net"},{"label":"Study","link":"https:\/\/reasty.net\/?cat=9"},{"label":"React","link":"https:\/\/reasty.net\/?cat=63"},{"label":"01. \ub9ac\uc561\ud2b8 \uac1c\ubc1c \uc900\ube44","link":"https:\/\/reasty.net\/?p=475"}],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/reasty.net\/index.php?rest_route=\/wp\/v2\/posts\/475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reasty.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reasty.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reasty.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reasty.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=475"}],"version-history":[{"count":48,"href":"https:\/\/reasty.net\/index.php?rest_route=\/wp\/v2\/posts\/475\/revisions"}],"predecessor-version":[{"id":579,"href":"https:\/\/reasty.net\/index.php?rest_route=\/wp\/v2\/posts\/475\/revisions\/579"}],"wp:attachment":[{"href":"https:\/\/reasty.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reasty.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reasty.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}