{"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>\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>\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><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>\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>\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>(\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>\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>\ud734..<\/p>\n\n\n\n<p>(\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>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><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>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>(\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>(\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>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>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>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>(\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>(\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>(\u314b\u314b\u314b\u314b\u314b \ud68c\uc0ac\ucef4\uc5d0\uc11c\ub294 \ub2e4\ub978 \uc5d0\ub7ec\uac00 \ub728\ub124..)<\/p>\n\n\n\n<p>\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>(tsconfig.json \ud30c\uc77c \ucc3e\ub294\ub370\ub3c4 \ud55c\ucc38 \uac78\ub9bc&#8230;)<\/p>\n\n\n\n<p>(\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>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>\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>\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>(npm run start \uc640 npm start\uc758 \ucc28\uc774\uc810\uc740 \ubb58\uae4c?)<\/p>\n\n\n\n<p>(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>\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>\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>\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><\/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_memberships_contains_paid_content":false,"footnotes":""},"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":[],"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}]}}