{"id":2004,"date":"2024-10-03T13:14:52","date_gmt":"2024-10-03T04:14:52","guid":{"rendered":"https:\/\/hyunsu.com\/wordpress\/?p=2004"},"modified":"2024-10-03T13:14:52","modified_gmt":"2024-10-03T04:14:52","slug":"graphql%ec%9d%98-%ed%8e%98%ec%9d%b4%ec%a7%95","status":"publish","type":"post","link":"https:\/\/hyunsu.com\/wordpress\/?p=2004","title":{"rendered":"GraphQL\uc758 \ud398\uc774\uc9d5"},"content":{"rendered":"\n<p>\ud398\uc774\uc9d5(Pagination)\uc740 \ub9ce\uc740 \uc591\uc758 \ub370\uc774\ud130\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uac00\uc838\uc624\uae30 \uc704\ud574 \ub370\uc774\ud130\ub97c \uc5ec\ub7ec \ud398\uc774\uc9c0\ub85c \ub098\ub204\uc5b4 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \uc81c\uacf5\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4. GraphQL\uc5d0\uc11c\ub3c4 \ub300\ub7c9\uc758 \ub370\uc774\ud130\ub97c \ub2e4\ub8f0 \ub54c \ud398\uc774\uc9d5\uc744 \uc801\uc6a9\ud558\uc5ec \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8 \uac04\uc758 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>GraphQL\uc5d0\uc11c\ub294 \ub450 \uac00\uc9c0 \uc8fc\uc694 \ud398\uc774\uc9d5 \ubc29\ubc95\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Offset-based pagination (\uc624\ud504\uc14b \uae30\ubc18 \ud398\uc774\uc9d5)<\/strong><\/li>\n\n\n\n<li><strong>Cursor-based pagination (\ucee4\uc11c \uae30\ubc18 \ud398\uc774\uc9d5)<\/strong><\/li>\n<\/ol>\n\n\n\n<p>\ub450 \ubc29\uc2dd \ubaa8\ub450 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \ub370\uc774\ud130\ub97c \ub098\ub204\uc5b4 \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \ub9cc\ud07c\ub9cc \ubc1b\uc544\uc62c \uc218 \uc788\uac8c \ud569\ub2c8\ub2e4. \uac01\uac01\uc758 \ubc29\uc2dd\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud574\ubcfc\uac8c\uc694.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Offset-based Pagination (\uc624\ud504\uc14b \uae30\ubc18 \ud398\uc774\uc9d5)<\/strong><\/h3>\n\n\n\n<p><strong>Offset-based pagination<\/strong>\uc740 \uc804\ud1b5\uc801\uc778 REST API\uc5d0\uc11c \ud754\ud788 \uc0ac\uc6a9\ud558\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4. \uc774 \ubc29\uc2dd\uc740 \ud398\uc774\uc9c0\ub2f9 \uba87 \uac1c\uc758 \ub370\uc774\ud130\ub97c \uac00\uc838\uc62c\uc9c0 \uacb0\uc815\ud558\uace0, \ud2b9\uc815 **\uc624\ud504\uc14b(offset)**\uc744 \uae30\uc900\uc73c\ub85c \ub370\uc774\ud130\ub97c \uc694\uccad\ud558\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1) \uae30\ubcf8 \uac1c\ub150<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>offset<\/strong>: \ub370\uc774\ud130\ub97c \uba87 \ubc88\uc9f8\ubd80\ud130 \uac00\uc838\uc62c\uc9c0 \uacb0\uc815\ud558\ub294 \uc22b\uc790\uc785\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>limit<\/strong>: \ud55c \ubc88\uc5d0 \uba87 \uac1c\uc758 \ub370\uc774\ud130\ub97c \uac00\uc838\uc62c\uc9c0 \uacb0\uc815\ud558\ub294 \uc22b\uc790\uc785\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2) \uc608\uc2dc<\/strong><\/h4>\n\n\n\n<p>\uc0ac\uc6a9\uc790 \ubaa9\ub85d\uc744 \ud398\uc774\uc9c0 \ub2e8\uc704\ub85c \uac00\uc838\uc624\ub294 \uc608\ub97c \ub4e4\uc5b4\ubcfc\uac8c\uc694.<\/p>\n\n\n\n<p><strong>GraphQL \ucffc\ub9ac<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>query getUsers($offset: Int!, $limit: Int!) {<br>  users(offset: $offset, limit: $limit) {<br>    id<br>    name<br>    email<br>  }<br>}<br><\/code><\/pre>\n\n\n\n<p>\uc774 \ucffc\ub9ac\ub294 <code>offset<\/code>\uacfc <code>limit<\/code> \uac12\uc744 \ubcc0\uc218\ub85c \ubc1b\uc544, \ud574\ub2f9 \ud398\uc774\uc9c0\uc758 \uc0ac\uc6a9\uc790 \ubaa9\ub85d\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, <code>offset: 0<\/code>\uacfc <code>limit: 10<\/code>\uc774\uba74 \uccab \ubc88\uc9f8 \ud398\uc774\uc9c0\uc758 10\uba85\uc758 \uc0ac\uc6a9\uc790\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3) \uc11c\ubc84 \ub9ac\uc878\ubc84 \uc608\uc2dc (Node.js)<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>const resolvers = {<br>  Query: {<br>    users: async (parent, { offset, limit }) => {<br>      return await User.find().skip(offset).limit(limit);<br>    }<br>  }<br>};<br><\/code><\/pre>\n\n\n\n<p>\uc774 \ub9ac\uc878\ubc84\uc5d0\uc11c\ub294 <code>skip()<\/code>\uacfc <code>limit()<\/code> \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud574 MongoDB\uc5d0\uc11c \ud574\ub2f9 \ubc94\uc704\uc758 \ub370\uc774\ud130\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\uc7a5\uc810:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uac04\ub2e8\ud558\uace0 \uc774\ud574\ud558\uae30 \uc26c\uc6b4 \ubc29\uc2dd\uc785\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\uae30\uc874\uc758 SQL \ub370\uc774\ud130\ubca0\uc774\uc2a4 \ub610\ub294 NoSQL \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0\uc11c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\ub2e8\uc810:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub370\uc774\ud130\uac00 \ub9ce\uc544\uc9c8\uc218\ub85d \uc624\ud504\uc14b\uc774 \ucee4\uc9c8 \uacbd\uc6b0, \uc131\ub2a5\uc774 \ub5a8\uc5b4\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud2b9\ud788 \uc624\ud504\uc14b\uc774 \ud074 \uacbd\uc6b0, \ucffc\ub9ac\uac00 \ub290\ub824\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub420 \uacbd\uc6b0, \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc815\ud655\ud55c \ud398\uc774\uc9c0\uc758 \ub370\uc774\ud130\ub97c \ubcf4\uc7a5\ubc1b\uc9c0 \ubabb\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Cursor-based Pagination (\ucee4\uc11c \uae30\ubc18 \ud398\uc774\uc9d5)<\/strong><\/h3>\n\n\n\n<p><strong>Cursor-based pagination<\/strong>\uc740 \ub354 \ud6a8\uc728\uc801\uc774\uace0 \uc131\ub2a5\uc774 \uc88b\uc740 \ubc29\uc2dd\uc73c\ub85c, \ud2b9\ud788 \ub300\ub7c9\uc758 \ub370\uc774\ud130\ub97c \ub2e4\ub8f0 \ub54c \uc801\ud569\ud569\ub2c8\ub2e4. **\ucee4\uc11c(cursor)**\ub294 \ud2b9\uc815 \ub370\uc774\ud130\ub97c \uc2dd\ubcc4\ud560 \uc218 \uc788\ub294 \uace0\uc720 \uac12(\uc608: \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc758 \uace0\uc720 ID)\uc744 \uc0ac\uc6a9\ud558\uc5ec, \ud574\ub2f9 \ucee4\uc11c\ub97c \uae30\uc900\uc73c\ub85c \ub2e4\uc74c \ud398\uc774\uc9c0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1) \uae30\ubcf8 \uac1c\ub150<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>cursor<\/strong>: \ud604\uc7ac \uc704\uce58\ub97c \ub098\ud0c0\ub0b4\ub294 \uac12(\uc608: \ub370\uc774\ud130\uc758 ID).<\/li>\n\n\n\n<li><strong>first\/last<\/strong>: \uba87 \uac1c\uc758 \ub370\uc774\ud130\ub97c \uac00\uc838\uc62c\uc9c0 \uacb0\uc815\ud558\ub294 \uac12\uc785\ub2c8\ub2e4. <code>first<\/code>\ub294 \ucc98\uc74c\ubd80\ud130 \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\uace0, <code>last<\/code>\ub294 \ub05d\uc5d0\uc11c\ubd80\ud130 \ub370\uc774\ud130\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2) \uc608\uc2dc<\/strong><\/h4>\n\n\n\n<p>\uc0ac\uc6a9\uc790 \ubaa9\ub85d\uc744 \ucee4\uc11c \uae30\ubc18\uc73c\ub85c \uac00\uc838\uc624\ub294 \uc608\ub97c \uc0b4\ud3b4\ubcfc\uac8c\uc694.<\/p>\n\n\n\n<p><strong>GraphQL \ucffc\ub9ac<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>query getUsers($first: Int!, $after: String) {<br>  users(first: $first, after: $after) {<br>    edges {<br>      node {<br>        id<br>        name<br>        email<br>      }<br>      cursor<br>    }<br>    pageInfo {<br>      endCursor<br>      hasNextPage<br>    }<br>  }<br>}<br><\/code><\/pre>\n\n\n\n<p>\uc774 \ucffc\ub9ac\uc5d0\uc11c\ub294 <code>first<\/code>\ub85c \ub370\uc774\ud130\ub97c \uba87 \uac1c \uac00\uc838\uc62c\uc9c0 \uacb0\uc815\ud558\uace0, <code>after<\/code>\ub85c \ud2b9\uc815 \ucee4\uc11c(\uc774\uc804 \ub370\uc774\ud130\uc758 \ub9c8\uc9c0\ub9c9 \uc544\uc774\ub514)\ub97c \uae30\uc900\uc73c\ub85c \ub370\uc774\ud130\ub97c \uc694\uccad\ud569\ub2c8\ub2e4. \uc11c\ubc84\ub294 \ud574\ub2f9 \ucee4\uc11c \uc774\ud6c4\uc758 \ub370\uc774\ud130\ub97c \ubc18\ud658\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3) \uc11c\ubc84 \ub9ac\uc878\ubc84 \uc608\uc2dc (Node.js)<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">javascript\ucf54\ub4dc \ubcf5\uc0ac<code>const resolvers = {\n  Query: {\n    users: async (parent, { first, after }) =&gt; {\n      const cursorCondition = after ? { _id: { $gt: after } } : {};\n      const users = await User.find(cursorCondition).limit(first);\n      \n      const edges = users.map(user =&gt; ({\n        node: user,\n        cursor: user._id \/\/ \ucee4\uc11c\ub97c ID\ub85c \uc0ac\uc6a9\n      }));\n\n      const hasNextPage = users.length === first;\n      const endCursor = hasNextPage ? users[users.length - 1]._id : null;\n\n      return {\n        edges,\n        pageInfo: {\n          endCursor,\n          hasNextPage\n        }\n      };\n    }\n  }\n};\n<\/code><\/pre>\n\n\n\n<p>\uc774 \uc608\uc2dc\uc5d0\uc11c <code>after<\/code> \uac12\uc774 \uc788\ub294 \uacbd\uc6b0 \ud574\ub2f9 \ucee4\uc11c(ID) \uc774\ud6c4\uc758 \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\uace0, <code>first<\/code> \uac12\uc5d0 \ub530\ub77c \ub370\uc774\ud130\ub97c \uc81c\ud55c\ud569\ub2c8\ub2e4. <strong><code>pageInfo<\/code><\/strong> \ud544\ub4dc\uc5d0\uc11c\ub294 \ub2e4\uc74c \ud398\uc774\uc9c0\uac00 \uc788\ub294\uc9c0 \uc5ec\ubd80\ub97c <code>hasNextPage<\/code>\ub85c \ubc18\ud658\ud558\uba70, \ub9c8\uc9c0\ub9c9 \ucee4\uc11c \uac12\uc744 <code>endCursor<\/code>\ub85c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\uc7a5\uc810:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub370\uc774\ud130\uac00 \ucd94\uac00\ub418\uac70\ub098 \uc0ad\uc81c\ub418\uc5b4\ub3c4 \ud398\uc774\uc9d5\uc5d0 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \ucee4\uc11c\ub97c \uae30\uc900\uc73c\ub85c \ud558\ubbc0\ub85c, \ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub418\ub354\ub77c\ub3c4 \uc62c\ubc14\ub978 \ud398\uc774\uc9c0\ub97c \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\uc624\ud504\uc14b \uae30\ubc18\ubcf4\ub2e4 \uc131\ub2a5\uc774 \ub6f0\uc5b4\ub0a9\ub2c8\ub2e4. \ud2b9\ud788 \uc624\ud504\uc14b\uc774 \ud070 \uacbd\uc6b0 \uc131\ub2a5 \uc800\ud558 \ubb38\uc81c\ub97c \ud53c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\ub2e8\uc810:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ucee4\uc11c\ub97c \uad00\ub9ac\ud574\uc57c \ud558\ubbc0\ub85c \uad6c\ud604\uc774 \ub354 \ubcf5\uc7a1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \ucee4\uc11c\ub85c \uc0ac\uc6a9\ud560 \uace0\uc720 \uac12(\uc608: ID)\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. \ud398\uc774\uc9d5 \uc120\ud0dd: Offset vs Cursor<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\uc5b8\uc81c <strong>Offset-based<\/strong>\ub97c \uc0ac\uc6a9\ud560\uae4c?<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uac04\ub2e8\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ub370\uc774\ud130 \uc591\uc774 \uc801\uace0, \ud398\uc774\uc9d5\uc758 \uc131\ub2a5\uc774 \ud06c\uac8c \uc911\uc694\ud558\uc9c0 \uc54a\uc740 \uacbd\uc6b0.<\/li>\n\n\n\n<li>\uc774\ubbf8 SQL \uae30\ubc18\uc758 \uc804\ud1b5\uc801\uc778 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc640 \uc5f0\ub3d9\ud558\uace0 \uc788\uace0, \uc624\ud504\uc14b \ubc29\uc2dd\uc744 \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc744 \ub54c.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\uc5b8\uc81c <strong>Cursor-based<\/strong>\ub97c \uc0ac\uc6a9\ud560\uae4c?<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub300\ub7c9\uc758 \ub370\uc774\ud130\ub97c \ucc98\ub9ac\ud558\uac70\ub098, \ub370\uc774\ud130\uac00 \uc790\uc8fc \ubcc0\uacbd\ub418\ub294 \uacbd\uc6b0.<\/li>\n\n\n\n<li>\uc131\ub2a5\uc774 \uc911\uc694\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ub370\uc774\ud130\uc758 \uc815\ud655\uc131\uacfc \uc131\ub2a5\uc744 \ubcf4\uc7a5\ud574\uc57c \ud560 \ub54c.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Relay \uc2a4\ud0c0\uc77c \ud398\uc774\uc9d5<\/strong><\/h3>\n\n\n\n<p><strong>Relay<\/strong>\ub294 GraphQL \ud074\ub77c\uc774\uc5b8\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc911 \ud558\ub098\ub85c, <strong>Cursor-based pagination<\/strong>\uc744 \uc0ac\uc6a9\ud560 \ub54c \uad8c\uc7a5\ub418\ub294 \ud398\uc774\uc9d5 \ubc29\uc2dd\uc785\ub2c8\ub2e4. Relay \uc2a4\ud0c0\uc77c \ud398\uc774\uc9d5\uc740 <strong>edges<\/strong>\uc640 <strong>pageInfo<\/strong> \uad6c\uc870\ub97c \uc0ac\uc6a9\ud558\uba70, GraphQL API \uc124\uacc4 \uc2dc \ubaa8\ubc94 \uc0ac\ub840\ub85c \ub9ce\uc774 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Relay \uc2a4\ud0c0\uc77c \ud398\uc774\uc9d5 \uad6c\uc870:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>edges<\/strong>: \ub370\uc774\ud130\ub97c \ub2f4\uace0 \uc788\ub294 \ubc30\uc5f4\uc774\uba70, \uac01 \ub370\uc774\ud130\ub294 <code>node<\/code>\uc640 <code>cursor<\/code>\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>pageInfo<\/strong>: \ud398\uc774\uc9c0 \uc815\ubcf4\ub97c \ub2f4\uace0 \uc788\uc73c\uba70, \ub2e4\uc74c \ud398\uc774\uc9c0\uac00 \uc788\ub294\uc9c0 \uc5ec\ubd80(<code>hasNextPage<\/code>)\uc640 \ub9c8\uc9c0\ub9c9 \ucee4\uc11c(<code>endCursor<\/code>) \ub4f1\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Relay \uc2a4\ud0c0\uc77c \ucffc\ub9ac:<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>query getUsers($first: Int!, $after: String) {<br>  users(first: $first, after: $after) {<br>    edges {<br>      node {<br>        id<br>        name<br>        email<br>      }<br>      cursor<br>    }<br>    pageInfo {<br>      endCursor<br>      hasNextPage<br>    }<br>  }<br>}<br><\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. \ud398\uc774\uc9d5\uc744 \ub354 \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud558\ub294 \ubc29\ubc95<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uc11c\ubc84\uc5d0\uc11c \ud398\uc774\uc9d5 \uc81c\ud55c \uc124\uc815<\/strong>: \uc11c\ubc84\uc5d0\uc11c <code>limit<\/code> \uac12\uc744 \uc81c\ud55c\ud558\uc5ec \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \ub108\ubb34 \ub9ce\uc740 \ub370\uc774\ud130\ub97c \uc694\uccad\ud558\ub294 \uac83\uc744 \ubc29\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ucd5c\ub300 100\uac1c\uc758 \ub370\uc774\ud130\ub9cc \ud55c \ubc88\uc5d0 \uac00\uc838\uc62c \uc218 \uc788\ub3c4\ub85d \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\ud544\ud130\ub9c1\uacfc \ud398\uc774\uc9d5 \uacb0\ud569<\/strong>: \ud398\uc774\uc9d5\uacfc \ud568\uaed8 \ub370\uc774\ud130 \ud544\ud130\ub9c1 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\uba74 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \ub354 \uc720\uc6a9\ud558\uac8c \ub370\uc774\ud130\ub97c \uc694\uccad\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ud2b9\uc815 \uc870\uac74\uc5d0 \ub9de\ub294 \ub370\uc774\ud130\ub97c \ud398\uc774\uc9d5\ud558\uc5ec \uac00\uc838\uc62c \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uce90\uc2f1<\/strong>: \ud398\uc774\uc9d5\ub41c \ub370\uc774\ud130\ub97c \uce90\uc2dc\ud558\uc5ec \uac19\uc740 \uc694\uccad\uc774 \ubc18\ubcf5\ub420 \ub54c \uc11c\ubc84 \uc790\uc6d0\uc744 \uc544\ub07c\uace0 \uc751\ub2f5 \uc2dc\uac04\uc744 \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\uacb0\ub860<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Offset-based pagination<\/strong>\uc740 \ub2e8\uc21c\ud55c \uad6c\ud604\uc73c\ub85c \uc2dc\uc791\ud558\uae30 \uc88b\uc9c0\ub9cc, \ub300\ub7c9\uc758 \ub370\uc774\ud130\ub97c \ub2e4\ub8f0 \ub54c\ub294 \uc131\ub2a5 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>Cursor-based pagination<\/strong>\uc740 \ub370\uc774\ud130\uc758 \uc815\ud655\uc131\uc744 \uc720\uc9c0\ud558\uba74\uc11c \ub354 \ub098\uc740 \uc131\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ud2b9\ud788 \ub370\uc774\ud130\uac00 \uc790\uc8fc \ubcc0\uacbd\ub418\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc720\ub9ac\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>Relay \uc2a4\ud0c0\uc77c<\/strong> \ud398\uc774\uc9d5\uc740 GraphQL API\uc5d0\uc11c \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \ud328\ud134\uc774\uba70, \uc131\ub2a5\uacfc \ud655\uc7a5\uc131\uc744 \ubaa8\ub450 \uace0\ub824\ud55c \uc88b\uc740 \uc120\ud0dd\uc785\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p>\ud398\uc774\uc9d5\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ub370\uc774\ud130 \ucc98\ub9ac \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud558\ub294 \uc911\uc694\ud55c \uae30\ubc95\uc774\ubbc0\ub85c, \uc0ac\uc6a9\ud558\ub824\ub294 \ub370\uc774\ud130\uc758 \uc591\uacfc \ud2b9\uc131\uc5d0 \ub9de\uac8c \ud398\uc774\uc9d5 \ubc29\uc2dd\uc744 \uc120\ud0dd\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud398\uc774\uc9d5(Pagination)\uc740 \ub9ce\uc740 \uc591\uc758 \ub370\uc774\ud130\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uac00\uc838\uc624\uae30 \uc704\ud574 \ub370\uc774\ud130\ub97c \uc5ec\ub7ec \ud398\uc774\uc9c0\ub85c \ub098\ub204\uc5b4 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \uc81c\uacf5\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4. GraphQL\uc5d0\uc11c\ub3c4 \ub300\ub7c9\uc758 \ub370\uc774\ud130\ub97c \ub2e4\ub8f0 \ub54c \ud398\uc774\uc9d5\uc744 \uc801\uc6a9\ud558\uc5ec \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8 \uac04\uc758 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. GraphQL\uc5d0\uc11c\ub294 \ub450 \uac00\uc9c0 \uc8fc\uc694 \ud398\uc774\uc9d5 \ubc29\ubc95\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4: \ub450 \ubc29\uc2dd \ubaa8\ub450 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \ub370\uc774\ud130\ub97c \ub098\ub204\uc5b4 \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \ub9cc\ud07c\ub9cc \ubc1b\uc544\uc62c \uc218 \uc788\uac8c \ud569\ub2c8\ub2e4. \uac01\uac01\uc758 \ubc29\uc2dd\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud574\ubcfc\uac8c\uc694. 1. Offset-based [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[],"class_list":["post-2004","post","type-post","status-publish","format-standard","hentry","category-coding"],"_links":{"self":[{"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/2004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2004"}],"version-history":[{"count":1,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/2004\/revisions"}],"predecessor-version":[{"id":2005,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/2004\/revisions\/2005"}],"wp:attachment":[{"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyunsu.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}