{"id":2063,"date":"2026-07-17T11:34:03","date_gmt":"2026-07-17T11:34:03","guid":{"rendered":"https:\/\/wayhope.kro.kr\/?p=2063"},"modified":"2026-08-31T07:32:53","modified_gmt":"2026-08-31T07:32:53","slug":"%ed%98%84%ec%97%85-%ed%94%84%eb%a1%a0%ed%8a%b8%ec%97%94%eb%93%9c-%ea%b0%9c%eb%b0%9c-%ec%9e%90%eb%ac%b8","status":"publish","type":"post","link":"https:\/\/wayhope.kro.kr\/?p=2063","title":{"rendered":"\ud604\uc5c5 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c \uc790\ubb38"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">\ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c \uad6c\uc870\uc5d0 \ub300\ud574 \uc790\ubb38\ubc1b\uace0 \uc815\ub9ac\ud55c \ub0b4\uc6a9<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\ucd5c\uadfc\uc5d0 \ud504\ub860\ud2b8\uc5d4\ub4dc \ucabd\uc744 \ub2e4\uc2dc \ubcf4\uace0 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React\ub97c \uc2dc\uc791\uc73c\ub85c Vue\ub3c4 \ucc3e\uc544\ubcf4\uace0 SPA, CSR, SSR, \uc0c1\ud0dc \uad00\ub9ac \uac19\uc740 \uac83\ub3c4 \uac19\uc774 \ubcf4\ub2e4 \ubcf4\ub2c8 \uac1c\ubcc4\uc801\uc73c\ub85c\ub294 \ub300\ucda9 \uc54c\uaca0\ub294\ub370 \uc11c\ub85c \uc5f0\uacb0\ud574\uc11c \uc0dd\uac01\ud558\ub824\ub2c8\uae4c \uc870\uae08 \uaf2c\uc600\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud2b9\ud788 React\uc640 Next.js\uc758 \uad00\uacc4\uac00 \uadf8\ub7ac\ub2e4. \ub458 \ub2e4 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c \ub9ce\uc774 \ubcf4\uc774\ub294\ub370 \uc815\ud655\ud788 \uc5b4\ub514\uae4c\uc9c0\uac00 React\uace0 \uc5b4\ub514\ubd80\ud130 Next.js\uc778\uc9c0 \uc560\ub9e4\ud588\ub2e4. SPA\uc640 CSR\ub3c4 \ube44\uc2b7\ud558\uac8c \ub290\uaef4\uc84c\uace0 Redux\ub3c4 \uc774\ub984\uc740 \ub9ce\uc774 \ubd24\ub294\ub370 \uc65c \uad73\uc774 \ud544\uc694\ud55c\uc9c0\ub294 \uc798 \uc640\ub2ff\uc9c0 \uc54a\uc558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub798\uc11c \uadf8\ub0e5 \uc2e4\uc81c\ub85c \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub85c\uc81d\ud2b8\ub97c \ud558\uace0 \uc788\ub294 \uce5c\uad6c\ud55c\ud14c \ubb3c\uc5b4\ubd24\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubb38\uc11c\ub9cc \uacc4\uc18d \ucc3e\uc544\ubcf4\ub294 \uac83\ubcf4\ub2e4 \uc9c1\uc811 \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e4\uc5b4\ubcf8 \uc0ac\ub78c\uc774 \uc5b4\ub5a4 \uae30\uc900\uc73c\ub85c \uae30\uc220\uc744 \ub098\ub204\ub294\uc9c0 \ub4e4\uc5b4\ubcf4\ub294 \uac8c \ube60\ub97c \uac83 \uac19\uc558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc544\ub798 \ub0b4\uc6a9\uc740 \uce5c\uad6c\uac00 \ud574\uc900 \ub9d0\uc744 \uadf8\ub300\ub85c \uc62e\uae34 \uac74 \uc544\ub2c8\ub2e4. \uc774\uc57c\uae30\ub97c \ub4e3\uace0 \ub098\uc11c \ub0b4\uac00 \uc774\ud574\ud55c \ub0b4\uc6a9\uc744 \ub2e4\uc2dc \uc815\ub9ac\ud588\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\uc77c\ub2e8 HTML CSS JavaScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uacb0\uad6d \uc6f9\uc758 \uae30\ubcf8\uc740 \uc5ec\uae30\uc11c \uc2dc\uc791\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML\uc774 \uad6c\uc870\ub97c \ub9cc\ub4e4\uace0 CSS\uac00 \uc2a4\ud0c0\uc77c\uc744 \ub2f4\ub2f9\ud55c\ub2e4. JavaScript\ub294 \ub3d9\uc791\uc744 \ucc98\ub9ac\ud558\uace0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\uac70\ub098 \ud654\uba74\uc744 \ubc14\uafb8\ub294 \ub370 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub108\ubb34 \uae30\ubcf8\uc801\uc778 \ub0b4\uc6a9\uc774\ub77c \uc774\ubbf8 \uc54c\uace0 \uc788\ub2e4\uace0 \uc0dd\uac01\ud588\ub294\ub370 React\ub97c \ub2e4\uc2dc \ubcf4\uba74\uc11c \uc624\ud788\ub824 \uc774 \ubd80\ubd84\uc744 \ud55c\ubc88 \uc9da\uace0 \ub118\uc5b4\uac00\ub294 \uac8c \ub3c4\uc6c0\uc774 \ub410\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript\ub9cc \uac00\uc9c0\uace0\ub3c4 DOM\uc744 \uc9c1\uc811 \uc870\uc791\ud574\uc11c \uc6f9 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>JavaScript -&gt; DOM \uc9c1\uc811 \uc870\uc791\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc791\uc740 \ud398\uc774\uc9c0\ub77c\uba74 \uc774\uac78\ub85c\ub3c4 \ucda9\ubd84\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubb38\uc81c\ub294 \uaddc\ubaa8\uac00 \ucee4\uc84c\uc744 \ub54c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubc84\ud2bc \ud558\ub098 \ub20c\ub800\uc744 \ub54c \ud2b9\uc815 DOM\uc744 \ubc14\uafb8\uace0, \ub2e4\ub978 \ub370\uc774\ud130\uac00 \ubc14\ub00c\uba74 \ub610 \ub2e4\ub978 \ubd80\ubd84\uc744 \uc218\uc815\ud558\uace0, \uadf8 \uacb0\uacfc\uc5d0 \ub9de\ucdb0 \ub2e4\ub978 UI\uae4c\uc9c0 \ubc14\uafd4\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ucc98\uc74c\uc5d0\ub294 \ubcc4\uac70 \uc544\ub2cc\ub370 \uc774\ub7f0 \ucf54\ub4dc\uac00 \uacc4\uc18d \uc313\uc774\uba74 \uc5b4\ub290 \uc21c\uac04\ubd80\ud130 \uc5b4\ub514\ub97c \uc218\uc815\ud574\uc57c \ud558\ub294\uc9c0 \ucc3e\ub294 \uac83 \uc790\uccb4\uac00 \uc77c\uc774 \ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React\ub098 Vue\ub97c \uc4f0\ub294 \uc774\uc720\ub3c4 \uacb0\uad6d \uc774\ub7f0 \ubb38\uc81c\uc640 \uc5f0\uacb0\ub418\uc5b4 \uc788\uc5c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">React\uc640 Vue<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">React\uc640 Vue\ub97c \ubcf4\uba74\uc11c \uac00\uc7a5 \uba3c\uc800 \uc774\ud574\ud55c \uac74 \ucef4\ud3ec\ub10c\ud2b8\ub77c\ub294 \uac1c\ub150\uc774\uc5c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud654\uba74\uc744 \ud558\ub098\uc758 \ud070 \ub369\uc5b4\ub9ac\ub85c \ub9cc\ub4e4\uc5b4 \ub193\ub294 \ub300\uc2e0 \ud544\uc694\ud55c \ub2e8\uc704\ub85c \ucabc\uac1c\uc11c \uad00\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub9ac\uace0 DOM\uc744 \uc9c1\uc811 \ucc3e\uc544\uac00\uc11c \uc218\uc815\ud558\ub294 \uac83\ubcf4\ub2e4\ub294 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub410\uc744 \ub54c \uc5b4\ub5a4 UI\uac00 \ub098\uc640\uc57c \ud558\ub294\uc9c0\ub97c \ucf54\ub4dc\ub85c \ud45c\ud604\ud558\ub294 \ucabd\uc5d0 \uac00\uae5d\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>State -&gt; UI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ucc98\uc74c React\ub97c \ubcfc \ub54c\ub294 \uc774\uac8c \ubcc4\uac70 \uc544\ub2cc \uac83\ucc98\ub7fc \ubcf4\uc600\ub294\ub370 \uc0dd\uac01\ubcf4\ub2e4 \ubc29\ud5a5 \uc790\uccb4\uac00 \ub2ec\ub790\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\uc804\uc5d0\ub294<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;\uc774 \uac12\uc774 \ubc14\ub00c\uc5c8\uc73c\ub2c8\uae4c \uc774 DOM\uc744 \uc218\uc815\ud574\uc57c \ud55c\ub2e4.&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub77c\ub294 \uc2dd\uc73c\ub85c \uc0dd\uac01\ud588\ub2e4\uba74 React\uc5d0\uc11c\ub294<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;\uc0c1\ud0dc\uac00 \uc774 \uac12\uc774\uba74 UI\ub294 \uc774\ub807\uac8c \uc0dd\uaca8\uc57c \ud55c\ub2e4.&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5d0 \uac00\uae4c\uc6e0\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React\uc640 Vue\uac00 \uc138\ubd80\uc801\uc73c\ub85c \uc5b4\ub5bb\uac8c \ub2e4\ub978\uc9c0\ub294 \ub354 \uacf5\ubd80\ud574\uc57c\uaca0\uc9c0\ub9cc, \uc77c\ub2e8 \uc774 \ucc28\uc774\ub97c \uc774\ud574\ud558\uace0 \ub098\ub2c8 \uc65c \uc774\ub7f0 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub098 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \ub4f1\uc7a5\ud588\ub294\uc9c0\ub294 \uc5b4\ub290 \uc815\ub3c4 \uc774\ud574\uac00 \ub410\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub9ac\uace0 React\ub294 \ubcf4\ud1b5 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\ub77c\uace0 \ud558\uace0 Vue\ub294 \ud504\ub808\uc784\uc6cc\ud06c\uc5d0 \uac00\uae4c\uc6b4 \uac83\uc73c\ub85c \uc124\uba85\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ucc98\uc74c\uc5d0\ub294 \ub458 \ub2e4 \uadf8\ub0e5 \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\ub77c\uace0 \uc0dd\uac01\ud588\ub294\ub370, \uc2e4\uc81c\ub85c \ud504\ub85c\uc81d\ud2b8\ub97c \uad6c\uc131\ud560 \ub54c \uae30\ubcf8\uc801\uc73c\ub85c \uc81c\uacf5\ud558\ub294 \ubc94\uc704\uc5d0\uc11c \ucc28\uc774\uac00 \uc788\ub2e4\ub294 \uc815\ub3c4\ub85c \uc774\ud574\ud588\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">React\uc5d0\uc11c \uc774\ubca4\ud2b8 \ucc98\ub9ac<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">React\ub97c \uc4f4\ub2e4\uace0 \ube0c\ub77c\uc6b0\uc800 \uc774\ubca4\ud2b8\uac00 \uc0ac\ub77c\uc9c0\ub294 \uac74 \ub2f9\uc5f0\ud788 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubc84\ud2bc\uc744 \ub204\ub974\uba74 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ud074\ub9ad \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud558\uace0 \ud0a4\ubcf4\ub4dc\ub97c \ub204\ub974\uba74 \ud0a4\ubcf4\ub4dc \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ucc28\uc774\ub294 \uadf8\uac78 \ucf54\ub4dc\uc5d0\uc11c \ub2e4\ub8e8\ub294 \ubc29\uc2dd\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript\uc5d0\uc11c\ub294 \uc9c1\uc811 <code>addEventListener()<\/code>\ub97c \ubd99\uc77c \uc218 \uc788\uc9c0\ub9cc React\uc5d0\uc11c\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc548\uc5d0\uc11c \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\ub97c \uc5f0\uacb0\ud558\uace0 \uadf8 \uacb0\uacfc\ub85c \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud558\ub294 \ubc29\uc2dd\uc774 \uc77c\ubc18\uc801\uc774\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Browser Event -&gt; Event Handler -&gt; State Update -&gt; UI Update\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uacb0\uad6d \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud55c\ub2e4\ub294 \uc0ac\uc2e4 \uc790\uccb4\ub294 \ub611\uac19\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React\uac00 \uadf8 \uc704\uc5d0\uc11c UI\uc640 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uae30 \ud3b8\ud55c \ud615\ud0dc\ub97c \uc81c\uacf5\ud55c\ub2e4\uace0 \ubcf4\ub294 \uac8c \uc774\ud574\ud558\uae30 \uc26c\uc6e0\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">React\ub9cc \uc54c\uba74 \ub418\ub294 \uc904 \uc54c\uc558\ub294\ub370<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uac1c\uc778\uc801\uc73c\ub85c\ub294 \uc774 \ubd80\ubd84\uc5d0\uc11c \uc0dd\uac01\uc774 \uc880 \ubc14\ub00c\uc5c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ucc98\uc74c React\ub97c \uacf5\ubd80\ud560 \ub54c\ub294 React \ubb38\ubc95\uc744 \uc5b4\ub290 \uc815\ub3c4 \uc775\ud788\uba74 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\ub3c4 \ub300\ubd80\ubd84 \ud560 \uc218 \uc788\ub2e4\uace0 \uc0dd\uac01\ud588\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7f0\ub370 \uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8 \uc774\uc57c\uae30\ub97c \ub4e4\uc5b4\ubcf4\ub2c8 React \uc790\uccb4\ub294 \uc804\uccb4\uc5d0\uc11c \ubcf4\uba74 \ud55c \ubd80\ubd84\uc774\uc5c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e4\ub2e4 \ubcf4\uba74 \ub77c\uc6b0\ud305\uc774 \ud544\uc694\ud558\uace0 \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \ubc1b\uc544\uc640\uc57c \ud55c\ub2e4. \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud574\uc57c \ud558\uace0 API \uc694\uccad\ub3c4 \ud574\uc57c \ud55c\ub2e4. TypeScript\ub97c \uc0ac\uc6a9\ud55c\ub2e4\uba74 \ud0c0\uc785\ub3c4 \uad00\ub9ac\ud574\uc57c \ud558\uace0 CSS\ub098 UI \ucef4\ud3ec\ub10c\ud2b8 \ubb38\uc81c\ub3c4 \ub530\ub85c \uc0dd\uae34\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub300\ucda9 \ubcf4\uba74 \uc774\ub7f0 \uac83\ub4e4\uc774 \ubd99\ub294\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>HTML \/ CSS \/ JavaScript -&gt; React -&gt; Routing \/ State \/ API \/ TypeScript \/ UI \/ Performance\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ubb3c\ub860 \ubaa8\ub4e0 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc804\ubd80 \uc0ac\uc6a9\ud558\ub294 \uac74 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud544\uc694\ud55c \uac78 \uac00\uc838\ub2e4 \uc4f0\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \uc804\uc5ed\uc5d0\uc11c \uacf5\uc720\ud574\uc57c \ud558\ub294 \uc0c1\ud0dc\uac00 \ub9ce\uc73c\uba74 Redux \uac19\uc740 \uc0c1\ud0dc \uad00\ub9ac \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uace0, \uc11c\ubc84\uc5d0\uc11c \ubc1b\uc544\uc628 \ub370\uc774\ud130\ub97c \uad00\ub9ac\ud558\ub294 \ub370\ub294 React Query\ub098 SWR \uac19\uc740 \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTTP \uc694\uccad\ub3c4 \ub9c8\ucc2c\uac00\uc9c0\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub0e5 <code>fetch()<\/code>\ub97c \uc368\ub3c4 \ub418\uace0 Axios \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub7f0 \uac78 \ubcf4\ub2e4 \ubcf4\ub2c8 React \ubb38\ubc95\ubcf4\ub2e4 \uc624\ud788\ub824 \uc8fc\ubcc0 \uae30\uc220\uc744 \uc54c\uc544\uc57c \ud560 \uac8c \ub354 \ub9ce\uaca0\ub2e4\ub294 \uc0dd\uac01\uc774 \ub4e4\uc5c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">SPA\ub294 React\uac00 \uc544\ub2c8\ub2e4<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uac74 \ucc98\uc74c\uc5d0 \uaf64 \ud5f7\uac08\ub838\ub358 \ubd80\ubd84\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">SPA\ub97c \ucc98\uc74c \ubd24\uc744 \ub54c\ub294 React \uac19\uc740 \uae30\uc220\uc758 \ud55c \uc885\ub958\uc778 \uc904 \uc54c\uc558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7f0\ub370 SPA\ub294 Single Page Application\uc758 \uc57d\uc790\uace0 \ud2b9\uc815 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ub9d0\ud558\ub294 \uac8c \uc544\ub2c8\uc5c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc5b4\ub5a4 \ubc29\uc2dd\uc73c\ub85c \uad6c\uc131\ud558\ub290\ub0d0\uc5d0 \ub300\ud55c \uac1c\ub150\uc5d0 \uac00\uae5d\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uae30\uc874 \uc6f9\uc5d0\uc11c\ub294 \ud398\uc774\uc9c0\ub97c \uc774\ub3d9\ud558\uba74 \uc11c\ubc84\uc5d0 \uc694\uccad\ud558\uace0 \uc11c\ubc84\uac00 \uc0c8\ub85c\uc6b4 HTML\uc744 \ubcf4\ub0b4\uc8fc\ub294 \ubc29\uc2dd\uc774 \uc77c\ubc18\uc801\uc774\uc5c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Browser -&gt; Server -&gt; HTML -&gt; Browser\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">SPA\uc5d0\uc11c\ub294 \ucc98\uc74c\uc5d0 HTML\uacfc JavaScript\ub97c \ubc1b\uc740 \ub2e4\uc74c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c JavaScript\uac00 \ud654\uba74 \uc804\ud658\uc744 \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Browser -&gt; HTML + JavaScript -&gt; Application -&gt; \ud654\uba74 \ubcc0\uacbd\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub798\uc11c \uc8fc\uc18c\uac00 \ubc14\ub00c\ub354\ub77c\ub3c4 \ub9e4\ubc88 \uc644\uc804\ud788 \uc0c8\ub85c\uc6b4 HTML \ud398\uc774\uc9c0\ub97c \ubc1b\ub294 \uac8c \uc544\ub2c8\ub77c \ud604\uc7ac \uc2e4\ud589 \uc911\uc778 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ud544\uc694\ud55c UI\ub9cc \ubc14\uafb8\ub294 \ubc29\uc2dd\uc774 \uac00\ub2a5\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\uae30\uc11c React\ub97c \uc0ac\uc6a9\ud55c\ub2e4\uace0 \ubb34\uc870\uac74 SPA\uac00 \ub418\ub294 \uac74 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React\ub294 UI\ub97c \ub9cc\ub4dc\ub294 \uae30\uc220\uc774\uace0 SPA\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\uc131\ud558\ub294 \ubc29\uc2dd\uc5d0 \ub300\ud55c \uac1c\ub150\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uac78 \ubd84\ub9ac\ud574\uc11c \uc0dd\uac01\ud558\ub2c8\uae4c CSR\uacfc SSR\ub3c4 \uc870\uae08 \ub35c \ud5f7\uac08\ub838\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">CSR\uacfc SSR<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSR\uc740 Client Side Rendering\uc774\uace0 SSR\uc740 Server Side Rendering\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSR\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c JavaScript\ub97c \uc2e4\ud589\ud558\uba74\uc11c UI\ub97c \uad6c\uc131\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Browser -&gt; HTML -&gt; JavaScript -&gt; React -&gt; UI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">SSR\uc740 \uc11c\ubc84\uc5d0\uc11c HTML\uc744 \ub9cc\ub4e4\uc5b4\uc11c \ube0c\ub77c\uc6b0\uc800\ub85c \uc804\ub2ec\ud558\ub294 \ubc29\uc2dd\uc774\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Browser -&gt; Server -&gt; Data -&gt; HTML -&gt; Browser\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ucc98\uc74c\uc5d0\ub294 SSR\uc774 CSR\ubcf4\ub2e4 \ubc1c\uc804\ub41c \ubc29\uc2dd\uc778 \uc904 \uc54c\uc558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7f0\ub370 \uaf2d \uadf8\ub7f0 \uac74 \uc544\ub2c8\uc5c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5b4\ub5a4 \ubc29\uc2dd\uc774 \ub354 \uc88b\uc740\uc9c0\uac00 \uc544\ub2c8\ub77c \uc11c\ube44\uc2a4\uc5d0 \ub530\ub77c \uc120\ud0dd\ud558\ub294 \ubb38\uc81c\uc600\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ucd08\uae30 \ud654\uba74\uc744 \uc5b4\ub5bb\uac8c \ubcf4\uc5ec\uc904\uc9c0, \uac80\uc0c9 \uc5d4\uc9c4\uc5d0 \uc5b4\ub5a4 \uc2dd\uc73c\ub85c \ub178\ucd9c\ub418\uc5b4\uc57c \ud558\ub294\uc9c0, \uc11c\ubc84\uc5d0\uc11c \uc5b4\ub290 \uc815\ub3c4 \ucc98\ub9ac\ub97c \ud560\uc9c0 \uac19\uc740 \uc870\uac74\uc5d0 \ub530\ub77c \ub2ec\ub77c\uc9c4\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub798\uc11c CSR\uacfc SSR\uc744 \ub193\uace0 \uc5b4\ub290 \ud558\ub098\uac00 \ubb34\uc870\uac74 \uc6b0\uc704\uc5d0 \uc788\ub2e4\uace0 \uc0dd\uac01\ud558\uba74 \uc548 \ub41c\ub2e4\uace0 \ud588\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Next.js\ub294 React\uc758 \ub2e4\ub978 \uc774\ub984\uc774 \uc544\ub2c8\uc5c8\ub2e4<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Next.js\ub3c4 \ucc98\uc74c\uc5d0\ub294 \uc880 \uc560\ub9e4\ud588\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React\uc5d0 SSR \uae30\ub2a5\uc744 \ubd99\uc5ec\uc8fc\ub294 \ub3c4\uad6c \uc815\ub3c4\ub85c \uc0dd\uac01\ud558\uace0 \uc788\uc5c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc2e4\uc81c\ub85c SSR\ub3c4 \uc9c0\uc6d0\ud558\uc9c0\ub9cc \uadf8\uac83\ub9cc \ud558\ub294 \uac74 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React\ub97c \uae30\ubc18\uc73c\ub85c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \ub54c \ud544\uc694\ud55c \uc5ec\ub7ec \uae30\ub2a5\uc744 \ud558\ub098\uc758 \ud504\ub808\uc784\uc6cc\ud06c \uc548\uc5d0\uc11c \uc81c\uacf5\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub77c\uc6b0\ud305\uc774\ub098 \uc11c\ubc84 \uae30\ub2a5, \ub80c\ub354\ub9c1 \ubc29\uc2dd, \ube4c\ub4dc\uc640 \ucd5c\uc801\ud654 \uac19\uc740 \ubd80\ubd84\ub3c4 \uac19\uc774 \ub2e4\ub8ec\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub798\uc11c \ub2e8\uc21c\ud788<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React + SSR = Next.js\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub77c\uace0 \uc0dd\uac01\ud558\uba74 \ubd80\uc871\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc880 \ub354 \uc815\ud655\ud558\uac8c\ub294 React\ub97c \uae30\ubc18\uc73c\ub85c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\uc131\ud558\uae30 \uc704\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub77c\uace0 \ubcf4\ub294 \uac8c \ub9de\uc744 \uac83 \uac19\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \ubd80\ubd84\uc740 React\uc640 Next.js\ub97c \uc2e4\uc81c\ub85c \uac19\uc774 \uc0ac\uc6a9\ud574\ubcf4\uba74 \ub354 \uba85\ud655\ud574\uc9c8 \uac83 \uac19\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \uac83\ub3c4 \uc0dd\uac01\ubcf4\ub2e4 \ubcf5\uc7a1\ud558\ub2e4<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c\ub294 \uc11c\ubc84\uc640 \ub370\uc774\ud130\ub97c \uc8fc\uace0\ubc1b\ub294 \uc77c\uc774 \ub9ce\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \ud558\ub098 \uac00\uc838\uc628\ub2e4\uace0 \ud558\uba74 \ucc98\uc74c\uc5d0\ub294 \uadf8\ub0e5 \uc774\ub807\uac8c \uc0dd\uac01\ud588\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React -&gt; HTTP Request -&gt; Server -&gt; Response -&gt; UI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7f0\ub370 \uc2e4\uc81c\ub85c\ub294 \uc5ec\uae30\uc11c \ub05d\ub098\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc694\uccad\ud558\ub294 \ub3d9\uc548 \ub85c\ub529\uc744 \ubcf4\uc5ec\uc918\uc57c \ud560 \uc218\ub3c4 \uc788\uace0 \uc2e4\ud328\ud588\uc744 \ub54c \ucc98\ub9ac\ub3c4 \ud574\uc57c \ud55c\ub2e4. \ubc1b\uc740 \ub370\uc774\ud130\ub97c \uc5bc\ub9c8\ub098 \uc624\ub798 \uc0ac\uc6a9\ud560\uc9c0\ub3c4 \uc0dd\uac01\ud574\uc57c \ud558\uace0 \ub2e4\uc2dc \uc694\uccad\ud574\uc57c \ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uce90\uc2f1\ub3c4 \ud544\uc694\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Request -&gt; Loading -&gt; Success \/ Error\n                       |\n                       -&gt; Cache \/ Refetch \/ Retry\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub798\uc11c \uc11c\ubc84\uc5d0\uc11c \uac00\uc838\uc628 \ub370\uc774\ud130\uc640 \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\ubd80\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uc0c1\ud0dc\ub97c \uad73\uc774 \uac19\uc740 \ubc29\uc2dd\uc73c\ub85c \uad00\ub9ac\ud558\uc9c0 \uc54a\ub294 \uacbd\uc6b0\uac00 \ub9ce\ub2e4\uace0 \ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React Query\ub098 SWR\uc744 \uc0ac\uc6a9\ud558\ub294 \uc774\uc720\ub3c4 \uc5ec\uae30\uc5d0\uc11c \uc774\ud574\ud560 \uc218 \uc788\uc5c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\uc804\uc5d0\ub294 \uadf8\ub0e5 \ub370\uc774\ud130\ub97c \ubcc0\uc218\uc5d0 \ub123\uc73c\uba74 \ub418\ub294 \uac70 \uc544\ub2cc\uac00 \uc2f6\uc5c8\ub294\ub370, \uc11c\ubc84 \ub370\uc774\ud130\ub294 \ub370\uc774\ud130 \uc790\uccb4\ubcf4\ub2e4 \uadf8 \ub370\uc774\ud130\ub97c \uc5b4\ub5bb\uac8c \uac00\uc838\uc624\uace0 \uc720\uc9c0\ud560\uc9c0\uac00 \ub354 \uadc0\ucc2e\uc740 \ubb38\uc81c\uc600\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Axios REST GraphQL\uc740 \uac19\uc740 \uc885\ub958\uac00 \uc544\ub2c8\ub2e4<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uac83\ub3c4 \ucc98\uc74c\uc5d0\ub294 \uc804\ubd80 API \ud1b5\uc2e0\uacfc \uad00\ub828\ub41c \uae30\uc220\uc774\ub77c \ud55c\uaebc\ubc88\uc5d0 \ubb36\uc5b4\ub1a8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7f0\ub370 \uc5ed\ud560\uc774 \ub2e4\ub974\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Axios\ub294 HTTP \uc694\uccad\uc744 \ubcf4\ub0b4\uae30 \uc704\ud55c \ud074\ub77c\uc774\uc5b8\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">REST\ub294 API\ub97c \uc124\uacc4\ud558\ub294 \ubc29\uc2dd\uc774\uace0 GraphQL\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \ud544\uc694\ud55c \ub370\uc774\ud130\ub97c \uc9c8\uc758\ud560 \uc218 \uc788\ub3c4\ub85d \ub9cc\ub4e0 API \ubc29\uc2dd\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub798\uc11c \uc608\ub97c \ub4e4\uc5b4 REST API\ub97c \uc0ac\uc6a9\ud55c\ub2e4\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \uad6c\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React -&gt; React Query -&gt; Axios -&gt; REST API -&gt; Server\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">GraphQL\uc744 \uc0ac\uc6a9\ud55c\ub2e4\uba74 \uc911\uac04\uc5d0 GraphQL Client \ub4f1\uc744 \ub458 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React -&gt; GraphQL Client -&gt; GraphQL API -&gt; Server\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uacb0\uad6d Axios\uc640 React Query\ub97c \uac19\uc740 \uc5ed\ud560\uc774\ub77c\uace0 \ubcf4\uba74 \uc548 \ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub7f0 \uc2dd\uc73c\ub85c \uae30\uc220 \uc774\ub984\ub9cc \uc678\uc6b0\ub294 \uac8c \uc544\ub2c8\ub77c \uac01\uac01 \uc5b4\ub290 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub294\uc9c0\ub97c \ubcf4\ub294 \uac8c \uc911\uc694\ud558\ub2e4\ub294 \uc0dd\uac01\uc774 \ub4e4\uc5c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Redux\ub294 \ubaa8\ub4e0 \uc0c1\ud0dc\ub97c \ub123\ub294 \uacf3\uc774 \uc544\ub2c8\ub2e4<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Redux\ub294 \uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uacf5\uc720\ud574\uc57c \ud558\ub294 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud560 \ub54c \uc0ac\uc6a9\ud558\ub294 \ub3c4\uad6c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \uc5ec\ub7ec \ud654\uba74\uc5d0\uc11c \uac19\uc740 \uc0c1\ud0dc\ub97c \uc0ac\uc6a9\ud55c\ub2e4\uba74 \uc911\uc559\uc5d0\uc11c \uad00\ub9ac\ud560 \ud544\uc694\uac00 \uc0dd\uae38 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Component A \/ Component B \/ Component C -&gt; Store\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7f0\ub370 \uc774\uac83\ub3c4 \ubaa8\ub4e0 \uc0c1\ud0dc\ub97c Redux\uc5d0 \ub123\ub294\ub2e4\ub294 \uc758\ubbf8\ub294 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ucef4\ud3ec\ub10c\ud2b8 \uc548\uc5d0\uc11c\ub9cc \uc0ac\uc6a9\ud558\ub294 \uac12\ub3c4 \uc788\uace0 \uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uac00 \uac19\uc774 \uc0ac\uc6a9\ud558\ub294 \uac12\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc11c\ubc84\uc5d0\uc11c \ubc1b\uc544\uc628 \ub370\uc774\ud130\ub294 \ub610 \uc131\uaca9\uc774 \ub2e4\ub974\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Local State -&gt; Component \ub0b4\ubd80\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uc0c1\ud0dc\nGlobal State -&gt; \uc5ec\ub7ec Component\uac00 \uacf5\uc720\ud558\ub294 \uc0c1\ud0dc\nServer State -&gt; Server\uc5d0\uc11c \uac00\uc838\uc628 \uc0c1\ud0dc\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud2b9\ud788 \uc11c\ubc84 \uc0c1\ud0dc\ub294 \uce90\uc2f1\uc774\ub098 \uc7ac\uc694\uccad \uac19\uc740 \ubb38\uc81c\uac00 \uc788\uc5b4\uc11c React Query\ub098 SWR\ucc98\ub7fc \uc11c\ubc84 \uc0c1\ud0dc \uc790\uccb4\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud55c \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\uac00 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub798\uc11c Redux\ub97c \ud558\ub098\uc758 \uac70\ub300\ud55c \uc800\uc7a5\uc18c\ucc98\ub7fc \uc0dd\uac01\ud558\uae30\ubcf4\ub2e4\ub294 &#8220;\uc774 \uc0c1\ud0dc\uac00 \uc5b4\ub5a4 \uc885\ub958\uc778\uac00?&#8221;\ubd80\ud130 \ud310\ub2e8\ud558\ub294 \uac8c \ub9de\ub294 \uac83 \uac19\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">TypeScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">TypeScript\ub294 JavaScript\uc5d0 \uc815\uc801 \ud0c0\uc785 \uc2dc\uc2a4\ud15c\uc744 \ucd94\uac00\ud55c \uc5b8\uc5b4\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React\uc640 \uac19\uc774 \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\uac00 \ub9ce\uace0 Props\ub098 API \uc751\ub2f5\ucc98\ub7fc \uad6c\uc870\uac00 \uc815\ud574\uc9c4 \ub370\uc774\ud130\ub97c \ud0c0\uc785\uc73c\ub85c \ud45c\ud604\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React + TypeScript\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ucc98\uc74c\uc5d0\ub294 JavaScript\uc5d0 \ud0c0\uc785 \ubb38\ubc95\uc774 \uc870\uae08 \ucd94\uac00\ub41c \uc815\ub3c4\ub77c\uace0 \uc0dd\uac01\ud588\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7f0\ub370 \ud504\ub85c\uc81d\ud2b8\uac00 \ucee4\uc9c0\uba74 \uc774\uc57c\uae30\uac00 \ub2ec\ub77c\uc9c4\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud2b9\ud788 \ub2e4\ub978 \uc0ac\ub78c\uc774 \ub9cc\ub4e0 \ucf54\ub4dc\ub098 API \ub370\uc774\ud130\ub97c \ub2e4\ub8e8\ub2e4 \ubcf4\uba74 \uc5b4\ub5a4 \uac12\uc774 \ub4e4\uc5b4\uc624\ub294\uc9c0 \ucf54\ub4dc\ub9cc \ubcf4\uace0 \ud655\uc2e4\ud558\uc9c0 \uc54a\uc740 \uacbd\uc6b0\uac00 \uc0dd\uae34\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub7f0 \ubd80\ubd84\uc744 \ud0c0\uc785\uc73c\ub85c \uba85\ud655\ud558\uac8c \ub9cc\ub4e4\uc5b4\ub450\uba74 \uac1c\ubc1c\ud558\uba74\uc11c \ud655\uc778\ud574\uc57c \ud560 \uc815\ubcf4\uac00 \uc904\uc5b4\ub4e0\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubb3c\ub860 TypeScript\ub97c \uc4f4\ub2e4\uace0 \ubaa8\ub4e0 \ubb38\uc81c\uac00 \ud574\uacb0\ub418\ub294 \uac74 \uc544\ub2c8\uc9c0\ub9cc \uaddc\ubaa8\uac00 \ucee4\uc9c8\uc218\ub85d \ud0c0\uc785 \uc815\ubcf4\uac00 \uc788\ub294 \ucabd\uc774 \uad00\ub9ac\ud558\uae30 \ud3b8\ud558\ub2e4\ub294 \uac74 \uc774\ud574\ud560 \uc218 \uc788\uc5c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">CSS\ub294 React\uac00 \ub2f4\ub2f9\ud558\ub294 \uac8c \uc544\ub2c8\ub2e4<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">React\ub97c \uacf5\ubd80\ud558\ub2e4 \ubcf4\uba74 \uc774\uac83\ub3c4 \uc740\uadfc\ud788 \ud5f7\uac08\ub9b0\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React\uac00 UI\ub97c \ub9cc\ub4e0\ub2e4\uace0 \ud574\uc11c \uc2a4\ud0c0\uc77c\ub9c1\uae4c\uc9c0 \ud574\uc8fc\ub294 \uac74 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React\ub294 UI \uad6c\uc870\uc640 \uc0c1\ud0dc \ubcc0\ud654 \ucabd\uc774\uace0 CSS\ub294 \uc2a4\ud0c0\uc77c\uc744 \ub2f4\ub2f9\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud544\uc694\ud558\uba74 CSS\ub97c \uc9c1\uc811 \uc791\uc131\ud560 \uc218\ub3c4 \uc788\uace0 Tailwind CSS\ub098 Bootstrap \uac19\uc740 \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">UI \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud544\uc694\ud558\uba74 \ubcc4\ub3c4\uc758 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React -&gt; UI \uad6c\uc870\nCSS -&gt; Style\nCSS Framework -&gt; Styling\nUI Library -&gt; Component\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc560\ub2c8\uba54\uc774\uc158\ub3c4 \ub9c8\ucc2c\uac00\uc9c0\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS\ub85c \ucc98\ub9ac\ud560 \uc218\ub3c4 \uc788\uace0 \ud544\uc694\ud55c \uacbd\uc6b0 \ubcc4\ub3c4\uc758 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uacb0\uad6d \ud504\ub860\ud2b8\uc5d4\ub4dc\ub77c\ub294 \uc774\ub984 \uc548\uc5d0 \uc0dd\uac01\ubcf4\ub2e4 \uc5ec\ub7ec \ubd84\uc57c\uac00 \uc11e\uc5ec \uc788\uc5c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\uc131\ub2a5\uc740 \uc77c\ub2e8 \uce21\uc815\ubd80\ud130<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">React\uc5d0\uc11c \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74 \ub80c\ub354\ub9c1\uc774 \ub2e4\uc2dc \ubc1c\uc0dd\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>State Update -&gt; Render -&gt; Reconciliation -&gt; DOM Update\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub807\ub2e4\uace0 \ub80c\ub354\ub9c1\uc774 \ubc1c\uc0dd\ud558\ub294 \uac83 \uc790\uccb4\ub97c \uc131\ub2a5 \ubb38\uc81c\ub85c \ubcf4\uba74 \uc548 \ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc2e4\uc81c\ub85c \ub290\ub9b0 \ubd80\ubd84\uc774 \uc788\ub294\uc9c0\ub97c \uba3c\uc800 \ubd10\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud070 \ub9ac\uc2a4\ud2b8\ub97c \ud55c\uaebc\ubc88\uc5d0 \uadf8\ub9ac\uac70\ub098, \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub108\ubb34 \ubcf5\uc7a1\ud558\uac70\ub098, \uc785\ub825 \uc774\ubca4\ud2b8\uac00 \uc9c0\ub098\uce58\uac8c \uc790\uc8fc \ubc1c\uc0dd\ud558\uac70\ub098, \uc774\ubbf8\uc9c0\uac00 \ud070 \uacbd\uc6b0\ucc98\ub7fc \uc2e4\uc81c \ubcd1\ubaa9\uc774 \uc0dd\uae30\ub294 \uc9c0\uc810\uc740 \ub2e4\uc591\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\uc5d0 \ub530\ub77c \uba54\ubaa8\uc774\uc81c\uc774\uc158\uc774\ub098 \ucf54\ub4dc \uc2a4\ud50c\ub9ac\ud305, Lazy Loading, Virtualization, \uc774\ubbf8\uc9c0 \ucd5c\uc801\ud654 \ub4f1\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc785\ub825 \uc774\ubca4\ud2b8\ub77c\uba74 Debouncing\uc774\ub098 Throttling\uc774 \ud544\uc694\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Measure -&gt; Bottleneck \ud655\uc778 -&gt; \uc6d0\uc778 \ud30c\uc545 -&gt; \ud544\uc694\ud55c \ucd5c\uc801\ud654 \uc801\uc6a9\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \ubd80\ubd84\uc740 \ub2e4\ub978 \uac1c\ubc1c\uc5d0\uc11c\ub3c4 \ube44\uc2b7\ud558\ub2e4\uace0 \uc0dd\uac01\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ucd5c\uc801\ud654 \uae30\ubc95\uc744 \uc54c\uace0 \uc788\ub2e4\ub294 \uc774\uc720\ub9cc\uc73c\ub85c \uba3c\uc800 \uc801\uc6a9\ud560 \ud544\uc694\ub294 \uc5c6\ub2e4. \uc2e4\uc81c\ub85c \ub290\ub9b0 \ubd80\ubd84\uc774 \uc5b4\ub514\uc778\uc9c0\ubd80\ud130 \ud655\uc778\ud558\ub294 \uac8c \uc21c\uc11c\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">JSP\uc640 \ube44\uad50\ud574\ubcf4\ub2c8<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JSP\ub97c \uc5b4\ub290 \uc815\ub3c4 \uc54c\uace0 \uc788\uc5b4\uc11c \ube44\uad50\ud558\ub2c8\uae4c \uc774\ucabd\uc740 \uc774\ud574\uac00 \ube68\ub790\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JSP\ub294 \uc11c\ubc84\uc5d0\uc11c HTML\uc744 \ub9cc\ub4e4\uc5b4\uc11c \ube0c\ub77c\uc6b0\uc800\uc5d0 \uc804\ub2ec\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Browser -&gt; Java Server -&gt; JSP -&gt; HTML -&gt; Browser\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">React SPA\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c JavaScript\uac00 \uc2e4\ud589\ub418\uace0 React\uac00 UI\ub97c \uad6c\uc131\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Browser -&gt; HTML + JavaScript -&gt; React -&gt; UI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Next.js\ub294 React\ub97c \uae30\ubc18\uc73c\ub85c \ud558\uba74\uc11c \uc11c\ubc84\uc5d0\uc11c \ub80c\ub354\ub9c1\ud558\ub294 \ubc29\uc2dd\ub3c4 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Browser -&gt; Next.js Server -&gt; React -&gt; HTML -&gt; Browser\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ubb3c\ub860 \uc2e4\uc81c \ub3d9\uc791\uc740 \uc774\uac83\ubcf4\ub2e4 \ubcf5\uc7a1\ud558\uc9c0\ub9cc \ud070 \ubc29\ud5a5\ub9cc \ub193\uace0 \ubcf4\uba74 HTML\uc744 \uc5b4\ub514\uc5d0\uc11c \ub9cc\ub4e4\uace0 \uc5b4\ub5a4 \ubd80\ubd84\uc744 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ucc98\ub9ac\ud558\ub294\uc9c0\ub97c \ube44\uad50\ud574\ubcf4\ub294 \uac8c \uc774\ud574\ud558\uae30 \ud3b8\ud588\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\uc804\uc5d0 JSP\ub97c \ubcf4\uba74\uc11c \uc11c\ubc84\uc5d0\uc11c HTML\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\ub0b4\ub294 \uad6c\uc870\ub97c \uc775\ud614\uae30 \ub54c\ubb38\uc5d0 SSR\uc774\ub77c\ub294 \uac1c\ub150\ub3c4 \uc644\uc804\ud788 \uc0c8\ub85c\uc6b4 \ub290\ub08c\uc740 \uc544\ub2c8\uc5c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\uc790\ubb38\uc744 \ubc1b\uace0 \ub098\uc11c<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ubc88\uc5d0 \uc790\ubb38\uc744 \ubc1b\uace0 \ub098\uc11c \uac00\uc7a5 \ud06c\uac8c \ub2ec\ub77c\uc9c4 \uac74 \uac01\uac01\uc758 \uae30\uc220\uc744 \ubcf4\ub294 \uae30\uc900\uc774\uc5c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ucc98\uc74c\uc5d0\ub294 React, Vue, Next.js\ub97c \uc804\ubd80 \ube44\uc2b7\ud55c \uc885\ub958\uc758 \uae30\uc220\uc774\ub77c\uace0 \uc0dd\uac01\ud588\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7f0\ub370 \ud558\ub098\uc529 \uc5ed\ud560\uc744 \ub098\ub220\ubcf4\ub2c8\uae4c \uc560\ucd08\uc5d0 \uc11c\ub85c \uac19\uc740 \uc790\ub9ac\uc5d0 \uc788\ub294 \uae30\uc220\uc774 \uc544\ub2c8\uc5c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React\ub294 UI\ub97c \ub9cc\ub4dc\ub294 \ucabd\uc774\uace0 Redux\ub294 \uc0c1\ud0dc \uad00\ub9ac\uc5d0 \uc0ac\uc6a9\ud55c\ub2e4. React Query\ub098 SWR\uc740 \uc11c\ubc84 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\ub294 \ub370 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Axios\ub294 HTTP Client\uace0 REST\uc640 GraphQL\uc740 API\ub97c \uad6c\uc131\ud558\ub294 \ubc29\uc2dd\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">SPA\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uad6c\uc870\uc5d0 \ub300\ud55c \uac1c\ub150\uc774\uace0 CSR\uacfc SSR\uc740 \ub80c\ub354\ub9c1 \ubc29\uc2dd\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next.js\ub294 React\ub97c \uae30\ubc18\uc73c\ub85c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uae30 \uc704\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \uc815\ub3c4\ub85c \ub098\ub220\ub193\uc73c\ub2c8 \ucc98\uc74c\ubcf4\ub2e4 \ud6e8\uc52c \ub35c \ubcf5\uc7a1\ud588\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc804\uccb4\ub97c \uc544\uc8fc \ub2e8\uc21c\ud558\uac8c \uadf8\ub824\ubcf4\uba74 \uc774\ub7f0 \ub290\ub08c\uc774\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Browser -&gt; HTML \/ CSS \/ JavaScript -&gt; React -&gt; UI \/ State -&gt; API -&gt; Server\n                                      |\n                                      -&gt; Routing \/ Server State \/ TypeScript \/ UI Library\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8\uac00 \uc774\ub807\uac8c \ub531 \ub5a8\uc5b4\uc9c0\ub294 \uad6c\uc870\ub85c \ub9cc\ub4e4\uc5b4\uc9c0\ub294 \uac74 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5b4\ub5a4 \ud504\ub85c\uc81d\ud2b8\ub294 React\ub9cc \uc0ac\uc6a9\ud558\uae30\ub3c4 \ud558\uace0, \uc5b4\ub5a4 \ud504\ub85c\uc81d\ud2b8\ub294 Next.js\ub97c \uc0ac\uc6a9\ud55c\ub2e4. \uc0c1\ud0dc \uad00\ub9ac\ub3c4 Redux\uac00 \ud544\uc694\ud55c \uacbd\uc6b0\uac00 \uc788\uace0 \uad73\uc774 \ud544\uc694\ud558\uc9c0 \uc54a\uc740 \uacbd\uc6b0\ub3c4 \uc788\uc744 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uacb0\uad6d \uae30\uc220 \uc774\ub984 \uc790\uccb4\ubcf4\ub2e4 \uc5b4\ub5a4 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ud558\ub294\uc9c0\ub97c \ubcf4\ub294 \uac8c \uc911\uc694\ud558\ub2e4\ub294 \uc0dd\uac01\uc774 \ub4e4\uc5c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc544\uc9c1 \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub85c\uc81d\ud2b8\ub97c \uc9c1\uc811 \uae4a\uac8c \ub9cc\ub4e4\uc5b4\ubcf8 \ub2e8\uacc4\ub294 \uc544\ub2c8\ub77c\uc11c \uc2e4\uc81c\ub85c \uc0ac\uc6a9\ud574\ubcf4\uba74 \uc9c0\uae08 \uc0dd\uac01\uacfc \ub2ec\ub77c\uc9c0\ub294 \ubd80\ubd84\ub3c4 \uc788\uc744 \uac83 \uac19\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub798\ub3c4 \uc801\uc5b4\ub3c4 \uc9c0\uae08\uae4c\uc9c0 \ub530\ub85c\ub530\ub85c \ubcf4\uace0 \uc788\ub358 React, SPA, CSR, SSR, \uc0c1\ud0dc \uad00\ub9ac, API \uac19\uc740 \uac83\ub4e4\uc774 \uc5b4\ub290 \uc704\uce58\uc5d0\uc11c \uc5f0\uacb0\ub418\ub294\uc9c0\ub294 \uc5b4\ub290 \uc815\ub3c4 \uc7a1\ud78c \uac83 \uac19\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc77c\ub2e8 \uc9c0\uae08\uc740 \uc774 \uc815\ub3c4\ub85c \uc815\ub9ac\ud558\uace0 \ub118\uc5b4\uac00\ub824\uace0 \ud55c\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c \uad6c\uc870\uc5d0 \ub300\ud574 \uc790\ubb38\ubc1b\uace0 \uc815\ub9ac\ud55c \ub0b4\uc6a9 \ucd5c\uadfc\uc5d0 \ud504\ub860\ud2b8\uc5d4\ub4dc \ucabd\uc744 \ub2e4\uc2dc \ubcf4\uace0 \uc788\ub2e4. React\ub97c \uc2dc\uc791\uc73c\ub85c Vue\ub3c4 \ucc3e\uc544\ubcf4\uace0 SPA, CSR, SSR, \uc0c1\ud0dc \uad00\ub9ac \uac19\uc740 \uac83\ub3c4 \uac19\uc774 \ubcf4\ub2e4 \ubcf4\ub2c8 \uac1c\ubcc4\uc801\uc73c\ub85c\ub294 \ub300\ucda9 \uc54c\uaca0\ub294\ub370 \uc11c\ub85c \uc5f0\uacb0\ud574\uc11c \uc0dd\uac01\ud558\ub824\ub2c8\uae4c \uc870\uae08 \uaf2c\uc600\ub2e4. \ud2b9\ud788 React\uc640 Next.js\uc758 \uad00\uacc4\uac00 \uadf8\ub7ac\ub2e4. \ub458 \ub2e4 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c \ub9ce\uc774 \ubcf4\uc774\ub294\ub370 \uc815\ud655\ud788 \uc5b4\ub514\uae4c\uc9c0\uac00 React\uace0 \uc5b4\ub514\ubd80\ud130 Next.js\uc778\uc9c0 \uc560\ub9e4\ud588\ub2e4. SPA\uc640 CSR\ub3c4 \ube44\uc2b7\ud558\uac8c \ub290\uaef4\uc84c\uace0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[],"class_list":["post-2063","post","type-post","status-publish","format-standard","hentry","category-dev-notes"],"_links":{"self":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/2063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2063"}],"version-history":[{"count":3,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/2063\/revisions"}],"predecessor-version":[{"id":2106,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/2063\/revisions\/2106"}],"wp:attachment":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}