{"id":50645,"date":"2024-08-10T11:38:58","date_gmt":"2024-08-10T02:38:58","guid":{"rendered":"https:\/\/m9js.shop\/blog\/development\/how-to-handle-and-optimize-api-requests-using-the-chaining-pattern"},"modified":"2024-08-10T11:38:58","modified_gmt":"2024-08-10T02:38:58","slug":"how-to-handle-and-optimize-api-requests-using-the-chaining-pattern","status":"publish","type":"post","link":"https:\/\/m9js.shop\/blog\/development\/how-to-handle-and-optimize-api-requests-using-the-chaining-pattern","title":{"rendered":"\uccb4\uc774\ub2dd \ud328\ud134\uc744 \uc774\uc6a9\ud55c API \uc694\uccad \ud578\ub4e4\ub9c1 \ubc0f \ucd5c\uc801\ud654 \ubc29\ubc95"},"content":{"rendered":"<ul class=\"toc_post_list\">\n<li>\n<h2>\ubaa9\ucc28<\/h2>\n<ul>\n<li><a href=\"#%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%84-%ec%9d%b4%ec%9a%a9%ed%95%9c-api-%ec%9a%94%ec%b2%ad-%ed%95%b8%eb%93%a4%eb%a7%81-%eb%b0%8f-%ec%b5%9c%ec%a0%81%ed%99%94-%eb%b0%a9%eb%b2%95-rNtnSYFQzG\">\uccb4\uc774\ub2dd \ud328\ud134\uc744 \uc774\uc6a9\ud55c API \uc694\uccad \ud578\ub4e4\ub9c1 \ubc0f \ucd5c\uc801\ud654 \ubc29\ubc95<\/a><\/li>\n<li><a href=\"#1-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%98-%ec%9d%b4%ed%95%b4-rNtnSYFQzG\">1. \uccb4\uc774\ub2dd \ud328\ud134\uc758 \uc774\ud574<\/a><\/li>\n<li><a href=\"#2-api-%ec%9a%94%ec%b2%ad%ec%9d%98-%ea%b8%b0%eb%b3%b8-%ea%b5%ac%ec%a1%b0-rNtnSYFQzG\">2. API \uc694\uccad\uc758 \uae30\ubcf8 \uad6c\uc870<\/a><\/li>\n<li><a href=\"#3-%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-api-%ec%9a%94%ec%b2%ad-%ec%b2%98%eb%a6%ac-rNtnSYFQzG\">3. \uccb4\uc774\ub2dd \ud328\ud134\uc744 \ud65c\uc6a9\ud55c API \uc694\uccad \ucc98\ub9ac<\/a><\/li>\n<li><a href=\"#4-%ec%97%90%eb%9f%ac-%ed%95%b8%eb%93%a4%eb%a7%81%ea%b3%bc-%ec%b2%b4%ec%9d%b4%eb%8b%9d-rNtnSYFQzG\">4. \uc5d0\ub7ec \ud578\ub4e4\ub9c1\uacfc \uccb4\uc774\ub2dd<\/a><\/li>\n<li><a href=\"#5-%ec%84%b1%eb%8a%a5-%ec%b5%9c%ec%a0%81%ed%99%94-rNtnSYFQzG\">5. \uc131\ub2a5 \ucd5c\uc801\ud654<\/a><\/li>\n<li><a href=\"#6-%ec%8b%a4%ec%a0%9c-%ec%82%ac%eb%a1%80-%ec%97%b0%ea%b5%ac-rNtnSYFQzG\">6. \uc2e4\uc81c \uc0ac\ub840 \uc5f0\uad6c<\/a><\/li>\n<li><a href=\"#7-%ec%b5%9c%ec%8b%a0-%eb%8f%99%ed%96%a5-%eb%b0%8f-%ea%b8%b0%ec%88%a0-rNtnSYFQzG\">7. \ucd5c\uc2e0 \ub3d9\ud5a5 \ubc0f \uae30\uc220<\/a><\/li>\n<li><a href=\"#8-%ea%b2%b0%eb%a1%a0-%eb%b0%8f-%ec%9a%94%ec%95%bd-rNtnSYFQzG\">8. \uacb0\ub860 \ubc0f \uc694\uc57d<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h1 id=\"%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%84-%ec%9d%b4%ec%9a%a9%ed%95%9c-api-%ec%9a%94%ec%b2%ad-%ed%95%b8%eb%93%a4%eb%a7%81-%eb%b0%8f-%ec%b5%9c%ec%a0%81%ed%99%94-%eb%b0%a9%eb%b2%95-rNtnSYFQzG\">\uccb4\uc774\ub2dd \ud328\ud134\uc744 \uc774\uc6a9\ud55c API \uc694\uccad \ud578\ub4e4\ub9c1 \ubc0f \ucd5c\uc801\ud654 \ubc29\ubc95<\/h1>\n<p>\ud604\ub300\uc758 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c\uc5d0\uc11c API(Application Programming Interface)\ub294 \ud544\uc218\uc801\uc778 \uc694\uc18c\ub85c \uc790\ub9ac \uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc591\ud55c \uc11c\ube44\uc2a4\uc640 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc11c\ub85c \uc5f0\uacb0\ub418\uace0 \ub370\uc774\ud130\ub97c \uc8fc\uace0\ubc1b\uae30 \uc704\ud574 API\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uadf8\ub7ec\ub098 API \uc694\uccad\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\uace0 \ucd5c\uc801\ud654\ud558\ub294 \uac83\uc740 \uac1c\ubc1c\uc790\uc5d0\uac8c \ud070 \ub3c4\uc804 \uacfc\uc81c\uac00 \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud2b9\ud788, \uccb4\uc774\ub2dd \ud328\ud134\uc744 \ud65c\uc6a9\ud558\uba74 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud6a8\uacfc\uc801\uc73c\ub85c \ud574\uacb0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubcf8 \uae00\uc5d0\uc11c\ub294 \uccb4\uc774\ub2dd \ud328\ud134\uc744 \uc774\uc6a9\ud55c API \uc694\uccad \ud578\ub4e4\ub9c1 \ubc0f \ucd5c\uc801\ud654 \ubc29\ubc95\uc5d0 \ub300\ud574 \uae4a\uc774 \uc788\uac8c \ub2e4\ub8e8\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"1-%ec%b2%b4%ec%9d%b4%eb%8b%9d-%ed%8c%a8%ed%84%b4%ec%9d%98-%ec%9d%b4%ed%95%b4-rNtnSYFQzG\">1. \uccb4\uc774\ub2dd \ud328\ud134\uc758 \uc774\ud574<\/h2>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc740 \uba54\uc11c\ub4dc \ud638\ucd9c\uc744 \uc5f0\uc18d\uc801\uc73c\ub85c \uc5f0\uacb0\ud558\uc5ec \uc0ac\uc6a9\ud558\ub294 \ud504\ub85c\uadf8\ub798\ubc0d \uae30\ubc95\uc785\ub2c8\ub2e4. \uc774 \ud328\ud134\uc740 \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \ub192\uc774\uace0, \ubcf5\uc7a1\ud55c \ub85c\uc9c1\uc744 \uac04\uacb0\ud558\uac8c \ud45c\ud604\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. \uccb4\uc774\ub2dd \ud328\ud134\uc740 \uc8fc\ub85c \uac1d\uccb4 \uc9c0\ud5a5 \ud504\ub85c\uadf8\ub798\ubc0d\uc5d0\uc11c \uc0ac\uc6a9\ub418\uba70, JavaScript, Python, Java \ub4f1 \ub2e4\uc591\ud55c \uc5b8\uc5b4\uc5d0\uc11c \uc9c0\uc6d0\ub429\ub2c8\ub2e4.<\/p>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc758 \uac00\uc7a5 \ud070 \uc7a5\uc810\uc740 \ucf54\ub4dc\uc758 \ud750\ub984\uc744 \uba85\ud655\ud558\uac8c \ud558\uace0, \uc911\ubcf5 \ucf54\ub4dc\ub97c \uc904\uc77c \uc218 \uc788\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc5ec\ub7ec \uac1c\uc758 \uba54\uc11c\ub4dc\ub97c \uc5f0\uc18d\uc801\uc73c\ub85c \ud638\ucd9c\ud560 \ub54c, \uac01 \uba54\uc11c\ub4dc\uac00 \ubc18\ud658\ud558\ub294 \uac1d\uccb4\ub97c \ub2e4\uc74c \uba54\uc11c\ub4dc\uc758 \ud638\ucd9c\uc5d0 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ucf54\ub4dc\uc758 \uae38\uc774\ub97c \uc904\uc774\uace0, \uac00\ub3c5\uc131\uc744 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc740 API \uc694\uccad\uc744 \ucc98\ub9ac\ud560 \ub54c\ub3c4 \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc5ec\ub7ec \uac1c\uc758 API \uc694\uccad\uc744 \uc21c\ucc28\uc801\uc73c\ub85c \ucc98\ub9ac\ud574\uc57c \ud560 \uacbd\uc6b0, \uccb4\uc774\ub2dd \ud328\ud134\uc744 \ud1b5\ud574 \ucf54\ub4dc\uc758 \ubcf5\uc7a1\uc131\uc744 \uc904\uc774\uace0, \uc5d0\ub7ec \ucc98\ub9ac\ub97c \uac04\ud3b8\ud558\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"2-api-%ec%9a%94%ec%b2%ad%ec%9d%98-%ea%b8%b0%eb%b3%b8-%ea%b5%ac%ec%a1%b0-rNtnSYFQzG\">2. API \uc694\uccad\uc758 \uae30\ubcf8 \uad6c\uc870<\/h2>\n<p>API \uc694\uccad\uc740 \uc77c\ubc18\uc801\uc73c\ub85c HTTP \ud504\ub85c\ud1a0\ucf5c\uc744 \ud1b5\ud574 \uc774\ub8e8\uc5b4\uc9d1\ub2c8\ub2e4. \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \uc11c\ubc84\uc5d0 \uc694\uccad\uc744 \ubcf4\ub0b4\uace0, \uc11c\ubc84\ub294 \uc774\uc5d0 \ub300\ud55c \uc751\ub2f5\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4. API \uc694\uccad\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \uae30\ubcf8 \uad6c\uc870\ub97c \uac00\uc9d1\ub2c8\ub2e4:<\/p>\n<ul>\n<li><strong>HTTP \uba54\uc11c\ub4dc:<\/strong> GET, POST, PUT, DELETE \ub4f1<\/li>\n<li><strong>URL:<\/strong> \uc694\uccad\ud560 API\uc758 \uc5d4\ub4dc\ud3ec\uc778\ud2b8<\/li>\n<li><strong>\ud5e4\ub354:<\/strong> \uc694\uccad\uc5d0 \ub300\ud55c \uba54\ud0c0\ub370\uc774\ud130 (\uc608: \uc778\uc99d \uc815\ubcf4)<\/li>\n<li><strong>\ubcf8\ubb38:<\/strong> POST \ub610\ub294 PUT \uc694\uccad \uc2dc \uc804\uc1a1\ud560 \ub370\uc774\ud130<\/li>\n<\/ul>\n<p>\uc608\ub97c \ub4e4\uc5b4, \uc0ac\uc6a9\uc790\uc758 \uc815\ubcf4\ub97c \uac00\uc838\uc624\ub294 GET \uc694\uccad\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \ud615\ud0dc\ub97c \uac00\uc9d1\ub2c8\ub2e4:<\/p>\n<pre><code>GET \/api\/users\/1 HTTP\/1.1\nHost: example.com\nAuthorization: Bearer token<\/code><\/pre>\n<p>\uc774\uc640 \uac19\uc740 \uae30\ubcf8 \uad6c\uc870\ub97c \uc774\ud574\ud558\ub294 \uac83\uc740 API \uc694\uccad\uc744 \ud6a8\uacfc\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\ub294 \ub370 \ud544\uc218\uc801\uc785\ub2c8\ub2e4. \uccb4\uc774\ub2dd \ud328\ud134\uc744 \uc801\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc774\ub7ec\ud55c \uae30\ubcf8 \uad6c\uc870\ub97c \ubc14\ud0d5\uc73c\ub85c \uc5ec\ub7ec \uac1c\uc758 \uc694\uccad\uc744 \uc5f0\uacb0\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<h2 id=\"3-%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-api-%ec%9a%94%ec%b2%ad-%ec%b2%98%eb%a6%ac-rNtnSYFQzG\">3. \uccb4\uc774\ub2dd \ud328\ud134\uc744 \ud65c\uc6a9\ud55c API \uc694\uccad \ucc98\ub9ac<\/h2>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc744 \ud65c\uc6a9\ud558\uc5ec API \uc694\uccad\uc744 \ucc98\ub9ac\ud558\ub294 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. \uba3c\uc800, \uac01 API \uc694\uccad\uc744 \uba54\uc11c\ub4dc\ub85c \uc815\uc758\ud558\uace0, \uc774 \uba54\uc11c\ub4dc\ub4e4\uc774 \uc11c\ub85c \uc5f0\uacb0\ub420 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc0ac\uc6a9\uc790\uc758 \uc815\ubcf4\ub97c \uac00\uc838\uc628 \ud6c4, \ud574\ub2f9 \uc0ac\uc6a9\uc790\uc758 \uac8c\uc2dc\uae00\uc744 \uac00\uc838\uc624\ub294 \ubc29\uc2dd\uc73c\ub85c \uccb4\uc774\ub2dd\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre><code>class ApiClient {\n    constructor(baseURL) {\n        this.baseURL = baseURL;\n    }\n\n    getUser(userId) {\n        return fetch(`${this.baseURL}\/users\/${userId}`)\n            .then(response =&gt; response.json())\n            .then(data =&gt; {\n                this.user = data;\n                return this; \/\/ \uccb4\uc774\ub2dd\uc744 \uc704\ud574 \ud604\uc7ac \uac1d\uccb4 \ubc18\ud658\n            });\n    }\n\n    getPosts() {\n        return fetch(`${this.baseURL}\/users\/${this.user.id}\/posts`)\n            .then(response =&gt; response.json())\n            .then(data =&gt; {\n                this.posts = data;\n                return this; \/\/ \uccb4\uc774\ub2dd\uc744 \uc704\ud574 \ud604\uc7ac \uac1d\uccb4 \ubc18\ud658\n            });\n    }\n}\n\n\/\/ \uc0ac\uc6a9 \uc608\uc2dc\nconst apiClient = new ApiClient('https:\/\/jsonplaceholder.typicode.com');\napiClient.getUser(1).getPosts().then(client =&gt; {\n    console.log(client.posts);\n});<\/code><\/pre>\n<p>\uc704\uc758 \uc608\uc2dc\uc5d0\uc11c ApiClient \ud074\ub798\uc2a4\ub294 \uc0ac\uc6a9\uc790\uc758 \uc815\ubcf4\ub97c \uac00\uc838\uc624\ub294 getUser \uba54\uc11c\ub4dc\uc640 \ud574\ub2f9 \uc0ac\uc6a9\uc790\uc758 \uac8c\uc2dc\uae00\uc744 \uac00\uc838\uc624\ub294 getPosts \uba54\uc11c\ub4dc\ub97c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uac01 \uba54\uc11c\ub4dc\ub294 \ub370\uc774\ud130\ub97c \uac00\uc838\uc628 \ud6c4 \ud604\uc7ac \uac1d\uccb4\ub97c \ubc18\ud658\ud558\uc5ec \uccb4\uc774\ub2dd\uc774 \uac00\ub2a5\ud558\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/p>\n<h2 id=\"4-%ec%97%90%eb%9f%ac-%ed%95%b8%eb%93%a4%eb%a7%81%ea%b3%bc-%ec%b2%b4%ec%9d%b4%eb%8b%9d-rNtnSYFQzG\">4. \uc5d0\ub7ec \ud578\ub4e4\ub9c1\uacfc \uccb4\uc774\ub2dd<\/h2>\n<p>API \uc694\uccad\uc744 \ucc98\ub9ac\ud560 \ub54c \uc5d0\ub7ec\ub294 \ud53c\ud560 \uc218 \uc5c6\ub294 \uc694\uc18c\uc785\ub2c8\ub2e4. \ub530\ub77c\uc11c \uccb4\uc774\ub2dd \ud328\ud134\uc744 \uc0ac\uc6a9\ud560 \ub54c \uc5d0\ub7ec \ud578\ub4e4\ub9c1\uc744 \uc801\uc808\ud788 \uad6c\ud604\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \uc5d0\ub7ec\uac00 \ubc1c\uc0dd\ud588\uc744 \ub54c, \uc774\ub97c \uc801\uc808\ud788 \ucc98\ub9ac\ud558\uc9c0 \uc54a\uc73c\uba74 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc608\uae30\uce58 \uc54a\uac8c \uc885\ub8cc\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc5d0\uc11c \uc5d0\ub7ec \ud578\ub4e4\ub9c1\uc744 \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n<pre><code>class ApiClient {\n    \/\/ ... \uc774\uc804 \ucf54\ub4dc \uc0dd\ub7b5\n\n    getUser(userId) {\n        return fetch(`${this.baseURL}\/users\/${userId}`)\n            .then(response =&gt; {\n                if (!response.ok) {\n                    throw new Error('\uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \uac00\uc838\uc624\ub294 \ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.');\n                }\n                return response.json();\n            })\n            .then(data =&gt; {\n                this.user = data;\n                return this;\n            })\n            .catch(error =&gt; {\n                console.error(error);\n            });\n    }\n\n    \/\/ ... \ub098\uba38\uc9c0 \ucf54\ub4dc \uc0dd\ub7b5\n}<\/code><\/pre>\n<p>\uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c getUser \uba54\uc11c\ub4dc\ub294 \uc751\ub2f5\uc774 \uc131\uacf5\uc801\uc774\uc9c0 \uc54a\uc744 \uacbd\uc6b0 \uc5d0\ub7ec\ub97c \ubc1c\uc0dd\uc2dc\ud0b5\ub2c8\ub2e4. \uc774\ub97c catch \ube14\ub85d\uc5d0\uc11c \ucc98\ub9ac\ud558\uc5ec \uc5d0\ub7ec \uba54\uc2dc\uc9c0\ub97c \ucd9c\ub825\ud569\ub2c8\ub2e4. \uc774\ub807\uac8c \ud558\uba74 \uccb4\uc774\ub2dd \uc911\uc5d0 \ubc1c\uc0dd\ud55c \uc5d0\ub7ec\ub97c \uc801\uc808\ud788 \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"5-%ec%84%b1%eb%8a%a5-%ec%b5%9c%ec%a0%81%ed%99%94-rNtnSYFQzG\">5. \uc131\ub2a5 \ucd5c\uc801\ud654<\/h2>\n<p>API \uc694\uccad\uc758 \uc131\ub2a5\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc804\ubc18\uc801\uc778 \uc131\ub2a5\uc5d0 \ud070 \uc601\ud5a5\uc744 \ubbf8\uce69\ub2c8\ub2e4. \uccb4\uc774\ub2dd \ud328\ud134\uc744 \uc0ac\uc6a9\ud560 \ub54c \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud558\ub294 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n<ul>\n<li><strong>\ubcd1\ub82c \uc694\uccad:<\/strong> \uc5ec\ub7ec \uac1c\uc758 API \uc694\uccad\uc744 \ub3d9\uc2dc\uc5d0 \ubcf4\ub0b4\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4. Promise.all()\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc5ec\ub7ec \uc694\uccad\uc744 \ubcd1\ub82c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<li><strong>\uce90\uc2f1:<\/strong> \uc774\ubbf8 \uac00\uc838\uc628 \ub370\uc774\ud130\ub97c \uce90\uc2f1\ud558\uc5ec \ubd88\ud544\uc694\ud55c API \uc694\uccad\uc744 \uc904\uc774\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/li>\n<li><strong>\uc9c0\uc5f0 \ub85c\ub529:<\/strong> \ud544\uc694\ud55c \ub370\uc774\ud130\ub9cc \uc694\uccad\ud558\uc5ec \ucd08\uae30 \ub85c\ub529 \uc2dc\uac04\uc744 \uc904\uc774\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/li>\n<\/ul>\n<p>\uc608\ub97c \ub4e4\uc5b4, \uc5ec\ub7ec \uac1c\uc758 \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \ub3d9\uc2dc\uc5d0 \uac00\uc838\uc624\ub294 \uacbd\uc6b0 \ub2e4\uc74c\uacfc \uac19\uc774 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n<pre><code>const userIds = [1, 2, 3];\nPromise.all(userIds.map(id =&gt; apiClient.getUser(id)))\n    .then(users =&gt; {\n        console.log(users);\n    })\n    .catch(error =&gt; {\n        console.error(error);\n    });<\/code><\/pre>\n<p>\uc704\uc758 \uc608\uc2dc\uc5d0\uc11c Promise.all()\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc5ec\ub7ec \uac1c\uc758 \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \ub3d9\uc2dc\uc5d0 \uac00\uc838\uc635\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc131\ub2a5\uc744 \ud06c\uac8c \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"6-%ec%8b%a4%ec%a0%9c-%ec%82%ac%eb%a1%80-%ec%97%b0%ea%b5%ac-rNtnSYFQzG\">6. \uc2e4\uc81c \uc0ac\ub840 \uc5f0\uad6c<\/h2>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc744 \ud65c\uc6a9\ud55c API \uc694\uccad \ud578\ub4e4\ub9c1\uc758 \uc2e4\uc81c \uc0ac\ub840\ub97c \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ud55c \uc2a4\ud0c0\ud2b8\uc5c5\uc5d0\uc11c\ub294 \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \uae30\ubc18\uc73c\ub85c \ub9de\ucda4\ud615 \ucd94\ucc9c \uc11c\ube44\uc2a4\ub97c \uc81c\uacf5\ud558\uace0\uc790 \ud588\uc2b5\ub2c8\ub2e4. \uc774\ub4e4\uc740 \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \uac00\uc838\uc628 \ud6c4, \ud574\ub2f9 \uc0ac\uc6a9\uc790\uc758 \uad00\uc2ec\uc0ac\uc5d0 \ub9de\ub294 \ucf58\ud150\uce20\ub97c \ucd94\ucc9c\ud558\ub294 API\ub97c \ud638\ucd9c\ud574\uc57c \ud588\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc774 \uacfc\uc815\uc5d0\uc11c \uccb4\uc774\ub2dd \ud328\ud134\uc744 \ud65c\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \uac00\uc838\uc624\uace0, \uadf8\uc5d0 \ub530\ub978 \ucd94\ucc9c \ucf58\ud150\uce20\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \ucc98\ub9ac\ud588\uc2b5\ub2c8\ub2e4. \uc774\ub4e4\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \ubc29\uc2dd\uc73c\ub85c \uad6c\ud604\ud588\uc2b5\ub2c8\ub2e4:<\/p>\n<pre><code>apiClient.getUser(userId)\n    .then(client =&gt; client.getRecommendations())\n    .then(recommendations =&gt; {\n        console.log(recommendations);\n    })\n    .catch(error =&gt; {\n        console.error(error);\n    });<\/code><\/pre>\n<p>\uc774 \uc2a4\ud0c0\ud2b8\uc5c5\uc740 \uccb4\uc774\ub2dd \ud328\ud134\uc744 \ud1b5\ud574 \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \ub192\uc774\uace0, \uc720\uc9c0\ubcf4\uc218\ub97c \uc6a9\uc774\ud558\uac8c \ud588\uc2b5\ub2c8\ub2e4. \ub610\ud55c, \uc5d0\ub7ec \ud578\ub4e4\ub9c1\uacfc \uc131\ub2a5 \ucd5c\uc801\ud654\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uac1c\uc120\ud560 \uc218 \uc788\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"7-%ec%b5%9c%ec%8b%a0-%eb%8f%99%ed%96%a5-%eb%b0%8f-%ea%b8%b0%ec%88%a0-rNtnSYFQzG\">7. \ucd5c\uc2e0 \ub3d9\ud5a5 \ubc0f \uae30\uc220<\/h2>\n<p>API \uc694\uccad \ud578\ub4e4\ub9c1 \ubc0f \ucd5c\uc801\ud654\uc640 \uad00\ub828\ub41c \ucd5c\uc2e0 \ub3d9\ud5a5\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n<ul>\n<li><strong>GraphQL:<\/strong> RESTful API\uc758 \ub300\uc548\uc73c\ub85c \ub5a0\uc624\ub974\uace0 \uc788\ub294 GraphQL\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \ud544\uc694\ud55c \ub370\uc774\ud130\ub9cc \uc694\uccad\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uc5ec \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud569\ub2c8\ub2e4.<\/li>\n<li><strong>\ube44\ub3d9\uae30 \ud504\ub85c\uadf8\ub798\ubc0d:<\/strong> async\/await \uad6c\ubb38\uc744 \ud65c\uc6a9\ud55c \ube44\ub3d9\uae30 \ud504\ub85c\uadf8\ub798\ubc0d\uc740 \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \ub192\uc774\uace0, \uc5d0\ub7ec \ud578\ub4e4\ub9c1\uc744 \uac04\ud3b8\ud558\uac8c \ud569\ub2c8\ub2e4.<\/li>\n<li><strong>API \uac8c\uc774\ud2b8\uc6e8\uc774:<\/strong> \uc5ec\ub7ec \uac1c\uc758 API\ub97c \ud1b5\ud569\ud558\uc5ec \uad00\ub9ac\ud560 \uc218 \uc788\ub294 API \uac8c\uc774\ud2b8\uc6e8\uc774\ub294 \uc131\ub2a5\uacfc \ubcf4\uc548\uc744 \uac15\ud654\ud558\ub294 \ub370 \ub3c4\uc6c0\uc744 \uc90d\ub2c8\ub2e4.<\/li>\n<\/ul>\n<p>\uc774\ub7ec\ud55c \ucd5c\uc2e0 \uae30\uc220\ub4e4\uc740 API \uc694\uccad \ud578\ub4e4\ub9c1 \ubc0f \ucd5c\uc801\ud654\uc5d0 \ud070 \uc601\ud5a5\uc744 \ubbf8\uce58\uace0 \uc788\uc73c\uba70, \uac1c\ubc1c\uc790\ub4e4\uc740 \uc774\ub97c \uc801\uadf9\uc801\uc73c\ub85c \ud65c\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"8-%ea%b2%b0%eb%a1%a0-%eb%b0%8f-%ec%9a%94%ec%95%bd-rNtnSYFQzG\">8. \uacb0\ub860 \ubc0f \uc694\uc57d<\/h2>\n<p>\uccb4\uc774\ub2dd \ud328\ud134\uc740 API \uc694\uccad \ud578\ub4e4\ub9c1 \ubc0f \ucd5c\uc801\ud654\uc5d0 \ub9e4\uc6b0 \uc720\uc6a9\ud55c \uae30\ubc95\uc785\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \ub192\uc774\uace0, \ubcf5\uc7a1\ud55c \ub85c\uc9c1\uc744 \uac04\uacb0\ud558\uac8c \ud45c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, \uc5d0\ub7ec \ud578\ub4e4\ub9c1\uacfc \uc131\ub2a5 \ucd5c\uc801\ud654\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uac1c\uc120\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ubcf8 \uae00\uc5d0\uc11c\ub294 \uccb4\uc774\ub2dd \ud328\ud134\uc758 \uc774\ud574\ubd80\ud130 \uc2dc\uc791\ud558\uc5ec, API \uc694\uccad\uc758 \uae30\ubcf8 \uad6c\uc870, \uccb4\uc774\ub2dd \ud328\ud134\uc744 \ud65c\uc6a9\ud55c \uc694\uccad \ucc98\ub9ac, \uc5d0\ub7ec \ud578\ub4e4\ub9c1, \uc131\ub2a5 \ucd5c\uc801\ud654, \uc2e4\uc81c \uc0ac\ub840 \uc5f0\uad6c, \ucd5c\uc2e0 \ub3d9\ud5a5\uae4c\uc9c0 \ud3ed\ub113\uac8c \ub2e4\ub8e8\uc5c8\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ub0b4\uc6a9\uc744 \ubc14\ud0d5\uc73c\ub85c \uac1c\ubc1c\uc790\ub4e4\uc740 \ubcf4\ub2e4 \ud6a8\uc728\uc801\uc73c\ub85c API \uc694\uccad\uc744 \ucc98\ub9ac\ud558\uace0 \ucd5c\uc801\ud654\ud560 \uc218 \uc788\uc744 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<p>\uc55e\uc73c\ub85c\ub3c4 \uccb4\uc774\ub2dd \ud328\ud134\uacfc \uac19\uc740 \uc720\uc6a9\ud55c \uae30\ubc95\ub4e4\uc744 \ud65c\uc6a9\ud558\uc5ec \ub354\uc6b1 \ubc1c\uc804\ub41c \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c \ud658\uacbd\uc744 \ub9cc\ub4e4\uc5b4 \ub098\uac00\uae38 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ubaa9\ucc28 \uccb4\uc774\ub2dd \ud328\ud134\uc744 \uc774\uc6a9\ud55c API \uc694\uccad \ud578\ub4e4\ub9c1 \ubc0f \ucd5c\uc801\ud654 \ubc29\ubc95 1. \uccb4\uc774\ub2dd \ud328\ud134\uc758 \uc774\ud574 2. [&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,2058,2443],"class_list":["post-50645","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-api","tag-application","tag-restful"],"acf":[],"_links":{"self":[{"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/posts\/50645","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=50645"}],"version-history":[{"count":0,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/posts\/50645\/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=50645"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/categories?post=50645"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/tags?post=50645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}