{"id":50812,"date":"2024-08-10T17:07:02","date_gmt":"2024-08-10T08:07:02","guid":{"rendered":"https:\/\/m9js.shop\/blog\/development\/leveraging-the-chaining-pattern-to-optimize-network-requests"},"modified":"2024-08-10T17:07:02","modified_gmt":"2024-08-10T08:07:02","slug":"leveraging-the-chaining-pattern-to-optimize-network-requests","status":"publish","type":"post","link":"https:\/\/m9js.shop\/blog\/development\/leveraging-the-chaining-pattern-to-optimize-network-requests","title":{"rendered":"\ub124\ud2b8\uc6cc\ud06c \uc694\uccad \ucd5c\uc801\ud654\ub97c \uc704\ud55c \uccb4\uc774\ub2dd \ud328\ud134\uc758 \ud65c\uc6a9"},"content":{"rendered":"<ul class=\"toc_post_list\">\n<li>\n<h2>\ubaa9\ucc28<\/h2>\n<ul>\n<li><a href=\"#%eb%84%a4%ed%8a%b8%ec%9b%8c%ed%81%ac-%ec%9a%94%ec%b2%ad-%ec%b5%9c%ec%a0%81%ed%99%94%eb%a5%bc-%ec%9c%84%ed%95%9c-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%98-%ed%99%9c%ec%9a%a9-aWrqWVXrCO\">\ub124\ud2b8\uc6cc\ud06c \uc694\uccad \ucd5c\uc801\ud654\ub97c \uc704\ud55c \uccb4\uc774\ub2dd \ud328\ud134\uc758 \ud65c\uc6a9<\/a><\/li>\n<li><a href=\"#1-%eb%84%a4%ed%8a%b8%ec%9b%8c%ed%81%ac-%ec%9a%94%ec%b2%ad%ec%9d%98-%ec%9d%b4%ed%95%b4-aWrqWVXrCO\">1. \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc758 \uc774\ud574<\/a><\/li>\n<li><a href=\"#2-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%98-%ea%b0%9c%eb%85%90-aWrqWVXrCO\">2. \uccb4\uc774\ub2dd \ud328\ud134\uc758 \uac1c\ub150<\/a><\/li>\n<li><a href=\"#3-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%98-%ec%9e%a5%ec%a0%90-aWrqWVXrCO\">3. \uccb4\uc774\ub2dd \ud328\ud134\uc758 \uc7a5\uc810<\/a><\/li>\n<li><a href=\"#4-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%84-%ed%99%9c%ec%9a%a9%ed%95%9c-%eb%84%a4%ed%8a%b8%ec%9b%8c%ed%81%ac-%ec%9a%94%ec%b2%ad-%ec%b5%9c%ec%a0%81%ed%99%94-aWrqWVXrCO\">4. \uccb4\uc774\ub2dd \ud328\ud134\uc744 \ud65c\uc6a9\ud55c \ub124\ud2b8\uc6cc\ud06c \uc694\uccad \ucd5c\uc801\ud654<\/a><\/li>\n<li><a href=\"#5-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ea%b3%bc-promise-aWrqWVXrCO\">5. \uccb4\uc774\ub2dd \ud328\ud134\uacfc Promise<\/a><\/li>\n<li><a href=\"#6-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%98-%ed%95%9c%ea%b3%84-aWrqWVXrCO\">6. \uccb4\uc774\ub2dd \ud328\ud134\uc758 \ud55c\uacc4<\/a><\/li>\n<li><a href=\"#7-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ea%b3%bc-async-await-aWrqWVXrCO\">7. \uccb4\uc774\ub2dd \ud328\ud134\uacfc async\/await<\/a><\/li>\n<li><a href=\"#8-%ea%b2%b0%eb%a1%a0-aWrqWVXrCO\">8. \uacb0\ub860<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h1 id=\"%eb%84%a4%ed%8a%b8%ec%9b%8c%ed%81%ac-%ec%9a%94%ec%b2%ad-%ec%b5%9c%ec%a0%81%ed%99%94%eb%a5%bc-%ec%9c%84%ed%95%9c-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%98-%ed%99%9c%ec%9a%a9-aWrqWVXrCO\">\ub124\ud2b8\uc6cc\ud06c \uc694\uccad \ucd5c\uc801\ud654\ub97c \uc704\ud55c \uccb4\uc774\ub2dd \ud328\ud134\uc758 \ud65c\uc6a9<\/h1>\n<p>\ud604\ub300\uc758 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \ub2e4\uc591\ud55c \uc678\ubd80 API\uc640\uc758 \uc0c1\ud638\uc791\uc6a9\uc744 \ud1b5\ud574 \uae30\ub2a5\uc744 \ud655\uc7a5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc0c1\ud638\uc791\uc6a9\uc740 \uc885\uc885 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \ud3ec\ud568\ud558\uba70, \uc774 \uc694\uccad\ub4e4\uc774 \ube44\ud6a8\uc728\uc801\uc73c\ub85c \ucc98\ub9ac\ub420 \uacbd\uc6b0 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc5d0 \ubd80\uc815\uc801\uc778 \uc601\ud5a5\uc744 \ubbf8\uce60 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \ub124\ud2b8\uc6cc\ud06c \uc694\uccad \ucd5c\uc801\ud654\ub294 \uc6f9 \uac1c\ubc1c\uc5d0\uc11c \ub9e4\uc6b0 \uc911\uc694\ud55c \uc694\uc18c\ub85c \uc790\ub9ac \uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ubcf8 \uae00\uc5d0\uc11c\ub294 &#8216;\uccb4\uc774\ub2dd \ud328\ud134&#8217;\uc744 \ud65c\uc6a9\ud55c \ub124\ud2b8\uc6cc\ud06c \uc694\uccad \ucd5c\uc801\ud654 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc2ec\ub3c4 \uc788\uac8c \ub2e4\ub8e8\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"1-%eb%84%a4%ed%8a%b8%ec%9b%8c%ed%81%ac-%ec%9a%94%ec%b2%ad%ec%9d%98-%ec%9d%b4%ed%95%b4-aWrqWVXrCO\">1. \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc758 \uc774\ud574<\/h2>\n<p>\ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc11c\ubc84\uc5d0 \ub370\uc774\ud130\ub97c \uc694\uccad\ud558\uac70\ub098 \uc11c\ubc84\uac00 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \ub370\uc774\ud130\ub97c \uc804\uc1a1\ud558\ub294 \uacfc\uc815\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \uc774 \uacfc\uc815\uc740 HTTP \ud504\ub85c\ud1a0\ucf5c\uc744 \ud1b5\ud574 \uc774\ub8e8\uc5b4\uc9c0\uba70, \ub2e4\uc591\ud55c \uba54\uc11c\ub4dc(GET, POST, PUT, DELETE \ub4f1)\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc8fc\uace0\ubc1b\uc2b5\ub2c8\ub2e4. \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc758 \uc131\ub2a5\uc740 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc804\ubc18\uc801\uc778 \uc131\ub2a5\uc5d0 \ud070 \uc601\ud5a5\uc744 \ubbf8\uce58\ubbc0\ub85c, \uc774\ub97c \ucd5c\uc801\ud654\ud558\ub294 \ubc29\ubc95\uc744 \uc774\ud574\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n<p>\ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc758 \uc131\ub2a5\uc744 \uc800\ud558\uc2dc\ud0ac \uc218 \uc788\ub294 \uc694\uc778\uc740 \uc5ec\ub7ec \uac00\uc9c0\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc694\uccad\uc758 \uc218\uac00 \ub9ce\uac70\ub098, \uc751\ub2f5 \uc2dc\uac04\uc774 \uae38\uac70\ub098, \ub370\uc774\ud130\uc758 \ud06c\uae30\uac00 \ud074 \uacbd\uc6b0 \uc131\ub2a5 \uc800\ud558\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc694\uccad\uc744 \ucd5c\uc18c\ud654\ud558\uace0, \uc751\ub2f5 \uc2dc\uac04\uc744 \ub2e8\ucd95\uc2dc\ud0a4\uba70, \ub370\uc774\ud130\uc758 \ud06c\uae30\ub97c \uc904\uc774\ub294 \ubc29\ubc95\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc740 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub294 \ub370 \uc720\uc6a9\ud55c \uae30\ubc95 \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uccb4\uc774\ub2dd \ud328\ud134\uc740 \uc5ec\ub7ec \uac1c\uc758 \ube44\ub3d9\uae30 \uc694\uccad\uc744 \uc21c\ucc28\uc801\uc73c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uac01 \uc694\uccad\uc774 \uc644\ub8cc\ub41c \ud6c4 \ub2e4\uc74c \uc694\uccad\uc744 \uc2e4\ud589\ud568\uc73c\ub85c\uc368, \ubd88\ud544\uc694\ud55c \uc694\uccad\uc744 \uc904\uc774\uace0 \uc751\ub2f5 \uc2dc\uac04\uc744 \ub2e8\ucd95\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"2-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%98-%ea%b0%9c%eb%85%90-aWrqWVXrCO\">2. \uccb4\uc774\ub2dd \ud328\ud134\uc758 \uac1c\ub150<\/h2>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc740 \uc5ec\ub7ec \uac1c\uc758 \ube44\ub3d9\uae30 \uc791\uc5c5\uc744 \uc21c\ucc28\uc801\uc73c\ub85c \uc2e4\ud589\ud558\ub294 \ud504\ub85c\uadf8\ub798\ubc0d \ud328\ud134\uc785\ub2c8\ub2e4. \uc774 \ud328\ud134\uc740 \uc8fc\ub85c JavaScript\uc640 \uac19\uc740 \ube44\ub3d9\uae30 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\uc5d0\uc11c \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uccb4\uc774\ub2dd \ud328\ud134\uc744 \uc0ac\uc6a9\ud558\uba74 \uac01 \uc791\uc5c5\uc774 \uc644\ub8cc\ub41c \ud6c4 \ub2e4\uc74c \uc791\uc5c5\uc744 \uc2e4\ud589\ud560 \uc218 \uc788\uc73c\uba70, \uc774\ub97c \ud1b5\ud574 \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \ub192\uc774\uace0 \uc624\ub958\ub97c \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc758 \uae30\ubcf8 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n<pre><code>\nfunction firstTask() {\n    return new Promise((resolve, reject) =&gt; {\n        \/\/ \uccab \ubc88\uc9f8 \uc791\uc5c5 \uc218\ud589\n        resolve(result);\n    });\n}\n\nfunction secondTask(result) {\n    return new Promise((resolve, reject) =&gt; {\n        \/\/ \ub450 \ubc88\uc9f8 \uc791\uc5c5 \uc218\ud589\n        resolve(finalResult);\n    });\n}\n\nfirstTask()\n    .then(result =&gt; secondTask(result))\n    .then(finalResult =&gt; {\n        \/\/ \ucd5c\uc885 \uacb0\uacfc \ucc98\ub9ac\n    })\n    .catch(error =&gt; {\n        \/\/ \uc624\ub958 \ucc98\ub9ac\n    });\n<\/code><\/pre>\n<p>\uc704\uc758 \uc608\uc81c\uc5d0\uc11c \ubcfc \uc218 \uc788\ub4ef\uc774, \uccab \ubc88\uc9f8 \uc791\uc5c5\uc774 \uc644\ub8cc\ub41c \ud6c4\uc5d0\ub9cc \ub450 \ubc88\uc9f8 \uc791\uc5c5\uc774 \uc2e4\ud589\ub429\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ubc29\uc2dd\uc73c\ub85c \uccb4\uc774\ub2dd \ud328\ud134\uc744 \ud65c\uc6a9\ud558\uba74 \ube44\ub3d9\uae30 \uc791\uc5c5 \uac04\uc758 \uc758\uc874\uc131\uc744 \uba85\ud655\ud558\uac8c \ud45c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"3-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%98-%ec%9e%a5%ec%a0%90-aWrqWVXrCO\">3. \uccb4\uc774\ub2dd \ud328\ud134\uc758 \uc7a5\uc810<\/h2>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc740 \uc5ec\ub7ec \uac00\uc9c0 \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uccab\uc9f8, \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc774 \ud5a5\uc0c1\ub429\ub2c8\ub2e4. \uac01 \uc791\uc5c5\uc774 \uba85\ud655\ud558\uac8c \uad6c\ubd84\ub418\uc5b4 \uc788\uc5b4, \ucf54\ub4dc \ud750\ub984\uc744 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub458\uc9f8, \uc624\ub958 \ucc98\ub9ac\uac00 \uc6a9\uc774\ud574\uc9d1\ub2c8\ub2e4. \uccb4\uc774\ub2dd \ud328\ud134\uc5d0\uc11c\ub294 \uac01 \uc791\uc5c5\uc5d0\uc11c \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \uc624\ub958\ub97c \uc911\uc559 \uc9d1\uc911\uc2dd\uc73c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc14b\uc9f8, \ube44\ub3d9\uae30 \uc791\uc5c5 \uac04\uc758 \uc758\uc874\uc131\uc744 \uba85\ud655\ud558\uac8c \ud45c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac01 \uc791\uc5c5\uc774 \uc774\uc804 \uc791\uc5c5\uc758 \uacb0\uacfc\uc5d0 \uc758\uc874\ud558\ubbc0\ub85c, \ucf54\ub4dc\uc758 \ud750\ub984\uc744 \uc27d\uac8c \ucd94\uc801\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub137\uc9f8, \uc131\ub2a5 \ucd5c\uc801\ud654\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4. \uccb4\uc774\ub2dd \ud328\ud134\uc744 \uc0ac\uc6a9\ud558\uba74 \ubd88\ud544\uc694\ud55c \uc694\uccad\uc744 \uc904\uc774\uace0, \uc751\ub2f5 \uc2dc\uac04\uc744 \ub2e8\ucd95\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"4-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%84-%ed%99%9c%ec%9a%a9%ed%95%9c-%eb%84%a4%ed%8a%b8%ec%9b%8c%ed%81%ac-%ec%9a%94%ec%b2%ad-%ec%b5%9c%ec%a0%81%ed%99%94-aWrqWVXrCO\">4. \uccb4\uc774\ub2dd \ud328\ud134\uc744 \ud65c\uc6a9\ud55c \ub124\ud2b8\uc6cc\ud06c \uc694\uccad \ucd5c\uc801\ud654<\/h2>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc744 \ud65c\uc6a9\ud558\uc5ec \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \ucd5c\uc801\ud654\ud558\ub294 \ubc29\ubc95\uc740 \uc5ec\ub7ec \uac00\uc9c0\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uccab\uc9f8, \uc694\uccad \uc218\ub97c \uc904\uc774\ub294 \uac83\uc785\ub2c8\ub2e4. \uc5ec\ub7ec \uac1c\uc758 \uc694\uccad\uc744 \ud558\ub098\ub85c \ubb36\uc5b4 \ucc98\ub9ac\ud568\uc73c\ub85c\uc368, \ub124\ud2b8\uc6cc\ud06c \ub300\uc5ed\ud3ed\uc744 \uc808\uc57d\ud558\uace0 \uc751\ub2f5 \uc2dc\uac04\uc744 \ub2e8\ucd95\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ub458\uc9f8, \uc694\uccad \uac04\uc758 \uc758\uc874\uc131\uc744 \uba85\ud655\ud788 \ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uac01 \uc694\uccad\uc774 \uc774\uc804 \uc694\uccad\uc758 \uacb0\uacfc\uc5d0 \uc758\uc874\ud558\ub3c4\ub85d \uc124\uacc4\ud568\uc73c\ub85c\uc368, \ubd88\ud544\uc694\ud55c \uc694\uccad\uc744 \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc14b\uc9f8, \uc624\ub958 \ucc98\ub9ac\ub97c \uc911\uc559 \uc9d1\uc911\uc2dd\uc73c\ub85c \uad00\ub9ac\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uccb4\uc774\ub2dd \ud328\ud134\uc744 \uc0ac\uc6a9\ud558\uba74 \uac01 \uc694\uccad\uc5d0\uc11c \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \uc624\ub958\ub97c \ud55c \uacf3\uc5d0\uc11c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc608\ub97c \ub4e4\uc5b4, \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \uac00\uc838\uc624\ub294 API\uc640 \ud574\ub2f9 \uc0ac\uc6a9\uc790\uc758 \uac8c\uc2dc\uae00 \uc815\ubcf4\ub97c \uac00\uc838\uc624\ub294 API\uac00 \uc788\ub2e4\uace0 \uac00\uc815\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774 \uacbd\uc6b0, \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \uba3c\uc800 \uac00\uc838\uc628 \ud6c4\uc5d0\uc57c \uac8c\uc2dc\uae00 \uc815\ubcf4\ub97c \uc694\uccad\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \uccb4\uc774\ub2dd \ud328\ud134\uc73c\ub85c \uad6c\ud604\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n<pre><code>\nfunction fetchUserData(userId) {\n    return fetch(`https:\/\/api.example.com\/users\/${userId}`)\n        .then(response =&gt; response.json());\n}\n\nfunction fetchUserPosts(userId) {\n    return fetch(`https:\/\/api.example.com\/users\/${userId}\/posts`)\n        .then(response =&gt; response.json());\n}\n\nfetchUserData(1)\n    .then(userData =&gt; {\n        console.log(userData);\n        return fetchUserPosts(userData.id);\n    })\n    .then(userPosts =&gt; {\n        console.log(userPosts);\n    })\n    .catch(error =&gt; {\n        console.error('Error:', error);\n    });\n<\/code><\/pre>\n<p>\uc704\uc758 \uc608\uc81c\uc5d0\uc11c \ubcfc \uc218 \uc788\ub4ef\uc774, \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \uac00\uc838\uc628 \ud6c4\uc5d0\uc57c \uac8c\uc2dc\uae00 \uc815\ubcf4\ub97c \uc694\uccad\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ubd88\ud544\uc694\ud55c \uc694\uccad\uc744 \uc904\uc774\uace0, \uc751\ub2f5 \uc2dc\uac04\uc744 \ub2e8\ucd95\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"5-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ea%b3%bc-promise-aWrqWVXrCO\">5. \uccb4\uc774\ub2dd \ud328\ud134\uacfc Promise<\/h2>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc740 JavaScript\uc758 Promise\uc640 \ubc00\uc811\ud55c \uad00\ub828\uc774 \uc788\uc2b5\ub2c8\ub2e4. Promise\ub294 \ube44\ub3d9\uae30 \uc791\uc5c5\uc758 \uc644\ub8cc \ub610\ub294 \uc2e4\ud328\ub97c \ub098\ud0c0\ub0b4\ub294 \uac1d\uccb4\ub85c, \uccb4\uc774\ub2dd \ud328\ud134\uc744 \uad6c\ud604\ud558\ub294 \ub370 \ub9e4\uc6b0 \uc720\uc6a9\ud569\ub2c8\ub2e4. Promise\ub97c \uc0ac\uc6a9\ud558\uba74 \ube44\ub3d9\uae30 \uc791\uc5c5 \uac04\uc758 \uc758\uc874\uc131\uc744 \uc27d\uac8c \ud45c\ud604\ud560 \uc218 \uc788\uc73c\uba70, \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>Promise\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uc138 \uac00\uc9c0 \uc0c1\ud0dc\ub97c \uac00\uc9d1\ub2c8\ub2e4:<\/p>\n<ul>\n<li><strong>\ub300\uae30(pending)<\/strong>: \ucd08\uae30 \uc0c1\ud0dc, \uc774\ud589\ub418\uc9c0\ub3c4 \uac70\ubd80\ub418\uc9c0\ub3c4 \uc54a\uc740 \uc0c1\ud0dc<\/li>\n<li><strong>\uc774\ud589(fulfilled)<\/strong>: \ube44\ub3d9\uae30 \uc791\uc5c5\uc774 \uc131\uacf5\uc801\uc73c\ub85c \uc644\ub8cc\ub41c \uc0c1\ud0dc<\/li>\n<li><strong>\uac70\ubd80(rejected)<\/strong>: \ube44\ub3d9\uae30 \uc791\uc5c5\uc774 \uc2e4\ud328\ud55c \uc0c1\ud0dc<\/li>\n<\/ul>\n<p>Promise\ub97c \uc0ac\uc6a9\ud558\uc5ec \uccb4\uc774\ub2dd \ud328\ud134\uc744 \uad6c\ud604\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n<pre><code>\nconst fetchData = (url) =&gt; {\n    return new Promise((resolve, reject) =&gt; {\n        fetch(url)\n            .then(response =&gt; {\n                if (!response.ok) {\n                    throw new Error('Network response was not ok');\n                }\n                return response.json();\n            })\n            .then(data =&gt; resolve(data))\n            .catch(error =&gt; reject(error));\n    });\n};\n\nfetchData('https:\/\/api.example.com\/data')\n    .then(data =&gt; {\n        console.log(data);\n    })\n    .catch(error =&gt; {\n        console.error('Error:', error);\n    });\n<\/code><\/pre>\n<p>\uc704\uc758 \uc608\uc81c\uc5d0\uc11c fetchData \ud568\uc218\ub294 URL\uc744 \uc778\uc790\ub85c \ubc1b\uc544 \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 Promise\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ube44\ub3d9\uae30 \uc791\uc5c5\uc744 \uccb4\uc774\ub2dd\ud558\uc5ec \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"6-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%98-%ed%95%9c%ea%b3%84-aWrqWVXrCO\">6. \uccb4\uc774\ub2dd \ud328\ud134\uc758 \ud55c\uacc4<\/h2>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc740 \ub9ce\uc740 \uc7a5\uc810\uc744 \uc81c\uacf5\ud558\uc9c0\ub9cc, \uba87 \uac00\uc9c0 \ud55c\uacc4\ub3c4 \uc874\uc7ac\ud569\ub2c8\ub2e4. \uccab\uc9f8, \ubcf5\uc7a1\ud55c \ub85c\uc9c1\uc744 \ucc98\ub9ac\ud558\uae30 \uc5b4\ub824\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\ub7ec \uac1c\uc758 \ube44\ub3d9\uae30 \uc791\uc5c5\uc774 \uc11c\ub85c \uc758\uc874\ud558\ub294 \uacbd\uc6b0, \ucf54\ub4dc\uac00 \ubcf5\uc7a1\ud574\uc9c8 \uc218 \uc788\uc73c\uba70 \uac00\ub3c5\uc131\uc774 \ub5a8\uc5b4\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ub458\uc9f8, \uc5d0\ub7ec \ucc98\ub9ac\uac00 \ubcf5\uc7a1\ud574\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac01 \uc791\uc5c5\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc624\ub958\ub97c \uc911\uc559 \uc9d1\uc911\uc2dd\uc73c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\uc9c0\ub9cc, \uc5ec\ub7ec \uac1c\uc758 \uc791\uc5c5\uc5d0\uc11c \ub3d9\uc2dc\uc5d0 \uc624\ub958\uac00 \ubc1c\uc0dd\ud558\ub294 \uacbd\uc6b0 \uc774\ub97c \uad00\ub9ac\ud558\uae30 \uc5b4\ub824\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc14b\uc9f8, \uc131\ub2a5 \uc800\ud558\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uccb4\uc774\ub2dd \ud328\ud134\uc740 \uac01 \uc791\uc5c5\uc774 \uc21c\ucc28\uc801\uc73c\ub85c \uc2e4\ud589\ub418\ubbc0\ub85c, \ubcd1\ub82c \ucc98\ub9ac\uac00 \ud544\uc694\ud55c \uacbd\uc6b0 \uc131\ub2a5 \uc800\ud558\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uacbd\uc6b0\uc5d0\ub294 Promise.all()\uacfc \uac19\uc740 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud558\uc5ec \ubcd1\ub82c \ucc98\ub9ac\ub97c \uace0\ub824\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<h2 id=\"7-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ea%b3%bc-async-await-aWrqWVXrCO\">7. \uccb4\uc774\ub2dd \ud328\ud134\uacfc async\/await<\/h2>\n<p>JavaScript\uc5d0\uc11c\ub294 async\/await \uad6c\ubb38\uc744 \uc0ac\uc6a9\ud558\uc5ec \ube44\ub3d9\uae30 \ucf54\ub4dc\ub97c \ub354 \uac04\uacb0\ud558\uac8c \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. async\/await\ub294 Promise \uae30\ubc18\uc758 \ube44\ub3d9\uae30 \ucf54\ub4dc\ub97c \ub3d9\uae30 \ucf54\ub4dc\ucc98\ub7fc \uc791\uc131\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uccb4\uc774\ub2dd \ud328\ud134\uc744 \ub354\uc6b1 \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>async\/await\ub97c \uc0ac\uc6a9\ud558\uc5ec \uccb4\uc774\ub2dd \ud328\ud134\uc744 \uad6c\ud604\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n<pre><code>\nconst fetchUserData = async (userId) =&gt; {\n    const response = await fetch(`https:\/\/api.example.com\/users\/${userId}`);\n    if (!response.ok) {\n        throw new Error('Network response was not ok');\n    }\n    return await response.json();\n};\n\nconst fetchUserPosts = async (userId) =&gt; {\n    const response = await fetch(`https:\/\/api.example.com\/users\/${userId}\/posts`);\n    if (!response.ok) {\n        throw new Error('Network response was not ok');\n    }\n    return await response.json();\n};\n\nconst getUserDataAndPosts = async (userId) =&gt; {\n    try {\n        const userData = await fetchUserData(userId);\n        console.log(userData);\n        const userPosts = await fetchUserPosts(userData.id);\n        console.log(userPosts);\n    } catch (error) {\n        console.error('Error:', error);\n    }\n};\n\ngetUserDataAndPosts(1);\n<\/code><\/pre>\n<p>\uc704\uc758 \uc608\uc81c\uc5d0\uc11c \ubcfc \uc218 \uc788\ub4ef\uc774, async\/await\ub97c \uc0ac\uc6a9\ud558\uba74 \ube44\ub3d9\uae30 \uc791\uc5c5\uc744 \ub354 \uac04\uacb0\ud558\uac8c \uc791\uc131\ud560 \uc218 \uc788\uc73c\uba70, \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"8-%ea%b2%b0%eb%a1%a0-aWrqWVXrCO\">8. \uacb0\ub860<\/h2>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc740 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad \ucd5c\uc801\ud654\uc5d0 \ub9e4\uc6b0 \uc720\uc6a9\ud55c \uae30\ubc95\uc785\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ube44\ub3d9\uae30 \uc791\uc5c5 \uac04\uc758 \uc758\uc874\uc131\uc744 \uba85\ud655\ud558\uac8c \ud45c\ud604\ud558\uace0, \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \ub192\uc774\uba70, \uc624\ub958 \ucc98\ub9ac\ub97c \uc6a9\uc774\ud558\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, async\/await \uad6c\ubb38\uc744 \uc0ac\uc6a9\ud558\uba74 \uccb4\uc774\ub2dd \ud328\ud134\uc744 \ub354\uc6b1 \uac04\uacb0\ud558\uac8c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ud558\uc9c0\ub9cc \uccb4\uc774\ub2dd \ud328\ud134\uc740 \ubcf5\uc7a1\ud55c \ub85c\uc9c1\uc774\ub098 \uc5d0\ub7ec \ucc98\ub9ac\uac00 \uc5b4\ub824\uc6b8 \uc218 \uc788\uc73c\uba70, \uc131\ub2a5 \uc800\ud558\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \ud55c\uacc4\ub3c4 \uc874\uc7ac\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc0c1\ud669\uc5d0 \ub530\ub77c \uc801\uc808\ud55c \ubc29\ubc95\uc744 \uc120\ud0dd\ud558\uc5ec \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \ucd5c\uc801\ud654\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc55e\uc73c\ub85c\ub3c4 \uc6f9 \uac1c\ubc1c \ubd84\uc57c\uc5d0\uc11c\ub294 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad \ucd5c\uc801\ud654\uac00 \uc911\uc694\ud55c \uc774\uc288\ub85c \ub0a8\uc544 \uc788\uc744 \uac83\uc785\ub2c8\ub2e4. \uccb4\uc774\ub2dd \ud328\ud134\uacfc \uac19\uc740 \uae30\ubc95\uc744 \ud65c\uc6a9\ud558\uc5ec \ud6a8\uc728\uc801\uc778 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294 \ub370 \uae30\uc5ec\ud560 \uc218 \uc788\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ubaa9\ucc28 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad \ucd5c\uc801\ud654\ub97c \uc704\ud55c \uccb4\uc774\ub2dd \ud328\ud134\uc758 \ud65c\uc6a9 1. \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc758 \uc774\ud574 2. \uccb4\uc774\ub2dd \ud328\ud134\uc758 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":33704,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1957],"tags":[2119],"class_list":["post-50812","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-api"],"acf":[],"_links":{"self":[{"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/posts\/50812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/comments?post=50812"}],"version-history":[{"count":0,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/posts\/50812\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/media\/33704"}],"wp:attachment":[{"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/media?parent=50812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/categories?post=50812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/tags?post=50812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}