{"id":251,"date":"2025-11-05T14:30:00","date_gmt":"2025-11-05T05:30:00","guid":{"rendered":"https:\/\/hed-g.me\/?p=251"},"modified":"2025-10-28T12:04:11","modified_gmt":"2025-10-28T03:04:11","slug":"api-%e1%84%8b%e1%85%ad%e1%84%8e%e1%85%a5%e1%86%bc-%e1%84%8e%e1%85%ac%e1%84%8c%e1%85%a5%e1%86%a8%e1%84%92%e1%85%aa","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=251","title":{"rendered":"API \u110b\u116d\u110e\u1165\u11bc \u110e\u116c\u110c\u1165\u11a8\u1112\u116a"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\uc131\ub2a5 \ubcd1\ubaa9\uc740 API \ud638\ucd9c\uc5d0\uc11c \uc2dc\uc791\ub41c\ub2e4<\/h2>\n\n\n\n<p>\ub300\ubd80\ubd84\uc758 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 API \uae30\ubc18\uc73c\ub85c \uc6c0\uc9c1\uc778\ub2e4.<\/p>\n\n\n\n<p>\ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9ce\uc544\uc9c0\uace0 \uc0c1\ud0dc\uac00 \ubcf5\uc7a1\ud574\uc9c8\uc218\ub85d, \uac19\uc740 \ub370\uc774\ud130\ub97c \uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uac00 <\/p>\n\n\n\n<p>\ub3d9\uc2dc\uc5d0 \uc694\uccad\ud558\ub294 \uc77c\uc774 \ubc1c\uc0dd\ud55c\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>\uc608\ub97c \ub4e4\uc5b4,<\/p>\n\n\n\n<p>A \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc720\uc800 \ud504\ub85c\ud544 \uc694\uccad,<\/p>\n\n\n\n<p>B \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc720\uc800 \uc54c\ub9bc \uc694\uccad,<\/p>\n\n\n\n<p>C \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud504\ub85c\ud544 \ud558\uc704 \uc815\ubcf4 \uc694\uccad<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>\uc774\ub54c \ud504\ub85c\ud544 \uc815\ubcf4\uac00 \uc11c\ub85c \ub2e4\ub978 \uc704\uce58\uc5d0\uc11c \uc911\ubcf5 \ud638\ucd9c\ub418\uba74 <\/p>\n\n\n\n<p>\ub2e4\uc74c\uacfc \uac19\uc740 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud55c\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc11c\ubc84 \ud2b8\ub798\ud53d \ub0ad\ube44<\/li>\n\n\n\n<li>\uc751\ub2f5 \uc9c0\uc5f0<\/li>\n\n\n\n<li>\uc0ac\uc6a9\uc790 \uccb4\uac10 \uc131\ub2a5 \uc800\ud558<\/li>\n<\/ul>\n\n\n\n<p>\uadf8\ub798\uc11c API \uc694\uccad \ucd5c\uc801\ud654\ub294 \uc131\ub2a5 \ud29c\ub2dd\uc758 \uc2dc\uc791\uc810\uc774 \ub41c\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc911\ubcf5 \uc694\uccad \ubc29\uc9c0(Deduplication)<\/h2>\n\n\n\n<p>React\uc758 \ub77c\uc774\ud504\uc0ac\uc774\ud074 \ud2b9\uc131\uc0c1, \uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uac00 \uac19\uc740 \uc2dc\uc810\uc5d0 \uac19\uc740 API\ub97c \ud638\ucd9c\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>\uc774\ub7f0 \uc0c1\ud669\uc744 \ud574\uacb0\ud558\ub824\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \ubc29\ubc95\uc774 \uc788\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><p>SWR \/ React Query\uc758 \uc694\uccad Deduplication<\/p>\ub3d9\uc77c\ud55c \ud0a4\ub85c \uc694\uccad\ud558\uba74 \ub0b4\ubd80\uc801\uc73c\ub85c \uce90\uc2dc\ub97c \uacf5\uc720, \uc911\ubcf5 \ub124\ud2b8\uc6cc\ud06c \ud638\ucd9c\uc744 <br>\ucc28\ub2e8\ud55c\ub2e4.<br><pre><code class=\"language-jsx\">const { data: user } = useSWR('\/api\/user', fetcher);<br>const { data: profile } = useSWR('\/api\/user', fetcher);<\/code><\/pre>\u2192 \ub450 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub3d9\uc2dc\uc5d0 \ud638\ucd9c\ud574\ub3c4 \ub124\ud2b8\uc6cc\ud06c\ub294 1\ud68c\ub9cc \ubc1c\uc0dd\ud55c\ub2e4<br><\/li>\n\n\n\n<li><p>Axios \uc694\uccad \ucde8\uc18c(Cancellation Token)<\/p>\uc694\uccad\uc774 \uc911\ubcf5\ub418\uc5c8\uac70\ub098, \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub41c \uacbd\uc6b0 \uae30\uc874 \uc694\uccad\uc744 <br>\ucde8\uc18c\ud55c\ub2e4. <span style=\"font-size: revert; letter-spacing: -0.1px;\">\uc911\ubcf5 \uc694\uccad \ubc29\uc9c0\ub294 \ubd88\ud544\uc694\ud55c \ub124\ud2b8\uc6cc\ud06c \uc18c\ubaa8\ub97c \ub9c9\uace0 UI\uc801\uc73c\ub85c \uc18d\ub3c4 \uc800\ud558\ub97c \ud574\uc18c.<\/span><br><pre><code class=\"language-jsx\">const controller = new AbortController();<br>axios.get('\/api\/data', { signal: controller.signal });<br>controller.abort();<\/code><\/pre><br><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\uce90\uc2f1(Caching)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\uce90\uc2f1?<\/h3>\n\n\n\n<p>\uce90\uc2dc\ub294 \ud55c \ubc88 \ubd88\ub7ec\uc628 \ub370\uc774\ud130\ub97c \uc77c\uc815 \uc2dc\uac04 \uc7ac\uc0ac\uc6a9\ud558\ub294 \uc804\ub7b5,<\/p>\n\n\n\n<p>API \uce90\uc2f1\uc5d0\ub294 \uc11c\ubc84 \uce90\uc2dc, CDN \uce90\uc2dc, \ud074\ub77c\uc774\uc5b8\ud2b8 \uce90\uc2dc\uac00 \uc788\ub2e4.<\/p>\n\n\n\n<p>\ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c\ub294 \ubcf4\ud1b5 \ud074\ub77c\uc774\uc5b8\ud2b8 \uce90\uc2dc\ub97c \ub2e4\ub8ec\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\uce90\uc2f1\uc744 \ud1b5\ud55c \uc804\ub7b5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><p>SWR \/ React Query\uc758 \uce90\uc2f1<\/p>key \uae30\ubc18\uc73c\ub85c \ub370\uc774\ud130 \uc800\uc7a5 \u2192 \uac19\uc740 \uc694\uccad \uc2dc \uc989\uc2dc \ubc18\ud658.<br><p>TTL \uc124\uc815\uc774 \uac00\ub2a5\ud558\ub2e4(staleTime, cacheTitme)<\/p><br><p>*SWR(Stale-While-Revalidate)<\/p>\uce90\uc2dc\ub41c \ub370\uc774\ud130\ub97c \uc989\uc2dc \ubcf4\uc5ec\uc8fc\uace0, \ubc31\uadf8\ub77c\uc6b4\ub4dc\uc5d0\uc11c \ucd5c\uc2e0\ud654.<br><code>useSWR('\/api\/posts', fetcher, { staleTime: 10000 });<\/code><br><\/li>\n\n\n\n<li><p>\ube0c\ub77c\uc6b0\uc800 \uce90\uc2dc \ud65c\uc6a9<\/p>Cache-Control, Etag \ud5e4\ub354\ub97c \uc0ac\uc6a9\ud558\uba74 \uc11c\ubc84 \uc751\ub2f5\uc744 \ube0c\ub77c\uc6b0\uc800\uac00 <br>\uc800\uc7a5\ud560 \uc218 \uc788\uc74c. React-Query\ub294 \ube0c\ub77c\uc6b0\uc800 \ud0ed \uac04 \uce90\uc2dc \uacf5\uc720\ub3c4 \uc9c0\uc6d0\ud55c\ub2e4.<br><\/li>\n\n\n\n<li><p>IndexedDB \/ localStorage \uce90\uc2dc<\/p>\uc624\ud504\ub77c\uc778 \uc9c0\uc6d0\uc774 \ud544\uc694\ud55c \uacbd\uc6b0, \ud074\ub77c\uc774\uc5b8\ud2b8 \uc601\uad6c \uc800\uc7a5\uc18c\ub97c \ud65c\uc6a9.<br>SWR + IndexedDB \ucee4\uc2a4\ud140 \uc2a4\ud1a0\ub9ac\uc9c0 \ud328\ud134\uc73c\ub85c \uc790\uc8fc \uc0ac\uc6a9\ub41c\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><br>\ubc30\uce6d(Batching)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\ubc30\uce6d \uc694\uccad<\/h3>\n\n\n\n<p>\uc5ec\ub7ec \uac1c\uc758 \uc791\uc740 \uc694\uccad\uc744 \ud569\uccd0 \ud55c \ubc88\uc5d0 \uc804\uc1a1\ud558\uba74 \ub124\ud2b8\uc6cc\ud06c \ud6a8\uc728\uc774 \ud06c\uac8c \ud5a5\uc0c1\ub428.<\/p>\n\n\n\n<p>\uc608\ub97c \ub4e4\uc5b4,<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>GraphQL Batching<br>GraphQL\uc5d0\uc11c\ub294 \uc5ec\ub7ec \ucffc\ub9ac\ub97c \ud55c \ubc88\uc758 POST\ub85c \ubb36\uc744 \uc218 \uc788\ub2e4.<br><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;\n  { \"query\": \"{ user { name } }\" },\n  { \"query\": \"{ posts { title } }\" }\n]<\/code><\/pre>\n\n\n\n<p>\u2192 \uc11c\ubc84\ub294 \uc5ec\ub7ec\ucffc\ub9ac\ub97c \ud55c \ubc88\uc758 POST\ub85c \ubb36\uc744 \uc218 \uc788\uc74c.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Custom Batch API<br>REST API\ub77c\ub3c4, \ubc31\uc5d4\ub4dc\uac00 \/batch \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \uc81c\uacf5\ud558\uba74 \ub2e4\uc74c\ucc98\ub7fc <br>\ubb36\uc744 \uc218 \uc788\ub2e4.<br><pre><code class=\"language-jsx\">{<br>  \"requests\": [<br>    { \"url\": \"\/api\/user\", \"method\": \"GET\" },<br>    { \"url\": \"\/api\/notifications\", \"method\": \"GET\" }<br>  ]<br>}<\/code><\/pre><br><\/li>\n\n\n\n<li>\ube0c\ub77c\uc6b0\uc800 \uc694\uccad \uc9c0\uc5f0 \ucc98\ub9ac<br>\uc77c\uc815 \uc2dc\uac04\ub3d9\uc548 \uc694\uccad\uc744 \ubaa8\uc544\uc11c \ubcf4\ub0b8\ub2e4.<br>e.g. \uc785\ub825 \uc790\ub3d9\uc644\uc131, \uac80\uc0c9 \uc81c\uc548 \ub4f1 \u2192 debounce or throttle\ub85c \ub124\ud2b8\uc6cc\ud06c \ud638\ucd9c \uac10\uc18c.<br><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ubcd1\ub82c vs \uc9c1\ub82c \uc694\uccad \ucd5c\uc801\ud654<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\ubcd1\ub82c \uc694\uccad<\/h3>\n\n\n\n<p>\uc11c\ub85c \uc758\uc874\ud558\uc9c0 \uc54a\ub294 \uc694\uccad\uc740 Promise.all\ub85c \ubcd1\ub82c \ucc98\ub9ac, \ub80c\ub354\ub9c1 \ube14\ub85c\ud0b9 \uc2dc\uac04\uc744 \ub2e8\ucd95\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const &#91;user, posts] = await Promise.all(&#91;\n  fetch('\/api\/user'),\n  fetch('\/api\/posts')\n]);<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\uc9c1\ub82c \uc694\uccad<\/h3>\n\n\n\n<p>\uc55e \uc694\uccad \uacb0\uacfc\uac00 \ub2e4\uc74c \uc694\uccad\uc758 \ud30c\ub77c\ubbf8\ud130\ub85c \ud544\uc694\ud55c \uacbd\uc6b0 \uc21c\ucc28 \uc9c4\ud589<\/p>\n\n\n\n<p>\ub2e8, React Query\uc5d0\uc11c\ub294 enabled \uc635\uc158\uc744 \ud1b5\ud574 \uc758\uc874\uc801 \uc694\uccad\uc744 \uae54\ub054\ud558\uac8c \ucc98\ub9ac \uac00\ub2a5.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const { data: user } = useQuery('user', fetchUser);\nconst { data: posts } = useQuery(&#91;'posts', user?.id], fetchPosts, {\n  enabled: !!user\n});<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc815\ub9ac\ud558\uc790\uba74<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc911\ubcf5 \uc694\uccad \ubc29\uc9c0: SWR \/ React Query deduping<\/li>\n\n\n\n<li>\ucd5c\uc2e0\uc131 \uc720\uc9c0: Stale-While-Revalidate, revalidateOnFocus<\/li>\n\n\n\n<li>\uc751\ub2f5 \uc18d\ub3c4 \ud5a5\uc0c1:\uce90\uc2f1, prefetching<\/li>\n\n\n\n<li>\uc11c\ubc84 \ubd80\ud558 \uc644\ud654: \ubc30\uce58 \uc694\uccad, debounce<\/li>\n\n\n\n<li>UX \uac1c\uc120: optimistic update, background sync<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc131\ub2a5 \ubcd1\ubaa9\uc740 API \ud638\ucd9c\uc5d0\uc11c \uc2dc\uc791\ub41c\ub2e4 \ub300\ubd80\ubd84\uc758 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 API \uae30\ubc18\uc73c\ub85c \uc6c0\uc9c1\uc778\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9ce\uc544\uc9c0\uace0 \uc0c1\ud0dc\uac00 \ubcf5\uc7a1\ud574\uc9c8\uc218\ub85d, \uac19\uc740 \ub370\uc774\ud130\ub97c \uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub3d9\uc2dc\uc5d0 \uc694\uccad\ud558\ub294 \uc77c\uc774 \ubc1c\uc0dd\ud55c\ub2e4. \uc608\ub97c \ub4e4\uc5b4, A \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc720\uc800 \ud504\ub85c\ud544 \uc694\uccad, B \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc720\uc800 \uc54c\ub9bc \uc694\uccad, C \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud504\ub85c\ud544 \ud558\uc704 \uc815\ubcf4 \uc694\uccad \uc774\ub54c \ud504\ub85c\ud544 \uc815\ubcf4\uac00 \uc11c\ub85c \ub2e4\ub978 \uc704\uce58\uc5d0\uc11c \uc911\ubcf5 \ud638\ucd9c\ub418\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud55c\ub2e4. \uadf8\ub798\uc11c API [&hellip;]<\/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":[44],"tags":[179,180,182,127,71,181],"class_list":["post-251","post","type-post","status-publish","format-standard","hentry","category-frontend","tag-api","tag-rest-api","tag-182","tag-127","tag-71","tag-181"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=251"}],"version-history":[{"count":1,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/251\/revisions"}],"predecessor-version":[{"id":252,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/251\/revisions\/252"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}