๋ธ”๋กœ๊ทธ

๐Ÿ›  WordPress ์ฝ”์–ด์— GraphQL API๊ฐ€ ์žˆ์–ด์•ผ ํ• ๊นŒ์š”?

Leonardo Losoviz
์ž‘์„ฑ์ž: Leonardo Losoviz ยท

2024๋…„ 05์›” 01์ผ ์—…๋ฐ์ดํŠธ: Gato GraphQL vs WP REST API ๋น„๊ต๋ฅผ ํ™•์ธํ•ด ๋ณด์„ธ์š”.

WordPress 5.7์ด ๊ณง ์ถœ์‹œ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ๋งŽ์€ ๋ฆด๋ฆฌ์Šค์—์„œ ๊ทธ๋ž˜์™”๋“ฏ์ด, WP REST API์—๋„ ๋ช‡ ๊ฐ€์ง€ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜๊ฐ€ ํŠนํžˆ ๋ˆˆ๊ธธ์„ ๋Œ์—ˆ์Šต๋‹ˆ๋‹ค: "Image Editor Accepts a List of Modifiers"์ž…๋‹ˆ๋‹ค.

WordPress 5.5์—์„œ ๋„์ž…๋œ /wp/v2/media/<id>/edit ์—”๋“œํฌ์ธํŠธ๋Š” ์ตœ์ƒ์œ„ ์ˆ˜์ค€์˜ ํšŒ์ „ ๋ฐ ํฌ๋กญ ์„ ์–ธ์„ ํ—ˆ์šฉํ•˜๋Š” ์ œํ•œ๋œ API๋ฅผ ๊ฐ–๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. 50124์—์„œ๋Š” ์ƒˆ๋กœ์šด modifiers ์š”์ฒญ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์ˆ˜์ • ๋ฐฐ์—ด์„ ํ—ˆ์šฉํ•จ์œผ๋กœ์จ ์ด API๊ฐ€ ๋”์šฑ ๊ฐ•๋ ฅํ•˜๊ณ  ์œ ์—ฐํ•ด์กŒ์Šต๋‹ˆ๋‹ค.

import apiFetch from '@wordpress/api-fetch';
 
const data = {
  modifiers: [
    {
      type: 'crop',
      args: {
        left  : 0,
        top   : 0,
        width : 80,
        height: 80
      }
    },
    {
      type: 'rotate',
      args: {
        angle: 90
      }
    }
  ]
};
apiFetch( { data, method: 'POST', path: '/wp/v2/media/5/edit' } );

์ด ๊ฐœ๋ฐœ์€ ์˜ค๋žœ ์‹œ๊ฐ„์— ๊ฑธ์ณ ์ง„ํ–‰๋˜์–ด ์™”์Šต๋‹ˆ๋‹ค.

๋จผ์ €, WordPress 5.5์—์„œ ์ด๋ฏธ์ง€ ํŽธ์ง‘ ์—”๋“œํฌ์ธํŠธ๊ฐ€ ๋„์ž…๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ด ์—”๋“œํฌ์ธํŠธ๋Š” ์ฒ˜์Œ์— ๋‹ค์†Œ ๊ฒฝ์ง๋˜์–ด ์žˆ์–ด, ์ด๋ฏธ์ง€์— ์ ์šฉํ•  ๋ชจ๋“  ์ž‘์—…์— ๊ด€ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ํ•œ๊บผ๋ฒˆ์— ์ „๋‹ฌํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์ด๋ฏธ์ง€๋ฅผ ํšŒ์ „ํ•˜๊ณ  ํฌ๊ธฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๋ ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ–ˆ์Šต๋‹ˆ๋‹ค:

{
  "x": 0,
  "y": 0,
  "width": 80,
  "height": 80,
  "rotate": 90
}

๊ทธ ๋‹ค์Œ, WordPress 5.6์—์„œ WP REST API์— ์ผ๊ด„ ์ฒ˜๋ฆฌ ์ž‘์—…์ด ๋„์ž…๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋งˆ์ง€๋ง‰์œผ๋กœ, ๊ณง ์ถœ์‹œ๋  WordPress 5.7์—์„œ๋Š” ์ด๋ฏธ์ง€์— ์ ์šฉํ•  ์ž‘์—…๋“ค์ด ๋ถ„๋ฆฌ๋˜์–ด "crop"๊ณผ "rotate" ์ž‘์—…์ด ๊ฐ๊ฐ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. ์ด ์ž‘์—…๋“ค์€ ๋‹จ๋…์œผ๋กœ ์‹คํ–‰ํ•  ์ˆ˜๋„ ์žˆ๊ณ , ์ผ๊ด„ ์ฒ˜๋ฆฌ๋ฅผ ํ†ตํ•ด ๊ฐ™์€ ์š”์ฒญ ๋‚ด์—์„œ ํ•จ๊ป˜ ์‹คํ–‰ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์•ž์„œ ์‚ดํŽด๋ณธ ๊ฒƒ์ฒ˜๋Ÿผ, ์—”๋“œํฌ์ธํŠธ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ์‹์ด ํ›จ์”ฌ ๋” ์„ธ๋ จ๋˜์–ด์กŒ์Šต๋‹ˆ๋‹ค:

{
  "modifiers": [
    {
      "type": "crop",
      "args": {
        "left"  : 0,
        "top"   : 0,
        "width" : 80,
        "height": 80
      }
    },
    {
      "type": "rotate",
      "args": {
        "angle": 90
      }
    }
  ]
}

์ด๋ฏธ ์กด์žฌํ•˜๋Š” ๊ฒƒ์„ ๋‹ค์‹œ ๋งŒ๋“ค๊ณ  ์žˆ๋Š” ๊ฑด ์•„๋‹๊นŒ์š”?

WP REST API๋Š” WordPress์˜ ์œ ์ผํ•œ API๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. (์ ์–ด๋„) ๋‘ ๊ฐ€์ง€ ๋Œ€์•ˆ์ด ์žˆ์Šต๋‹ˆ๋‹ค:

  • GraphQL, WPGraphQL์„ ํ†ตํ•ด
  • GraphQL + persisted queries, Gato GraphQL์„ ํ†ตํ•ด
    ๏ผˆโ˜๐Ÿฝ ์ด ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์˜ ํ˜ธ์ŠคํŠธ, ๋ฐ”๋กœ ์ €์ž…๋‹ˆ๋‹ค โ˜๐Ÿฝ๏ผ‰

GraphQL์€ ์ƒˆ๋กœ์šด ์œ ํ˜•์˜ API๋กœ, ์ผ๊ด„ ์ฒ˜๋ฆฌ ์ž‘์—…์— ํƒ์›”ํ•ฉ๋‹ˆ๋‹ค. GraphQL์„ ์‚ฌ์šฉํ•˜๋ฉด REST์—์„œ์ฒ˜๋Ÿผ ์ปค์Šคํ…€ ์†”๋ฃจ์…˜์„ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐ ์‹œ๊ฐ„๊ณผ ์—๋„ˆ์ง€๋ฅผ ์Ÿ์„ ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์‹ค์ œ๋กœ, REST๋Š” GraphQL์—์„œ ์ด ๊ธฐ๋Šฅ์„ "๋ณต์‚ฌ"ํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

REST๊ฐ€ GraphQL์„ ๋ณต์‚ฌํ•˜๊ณ  ์žˆ๋‹ค?

WP REST API์—์„œ ์ผ๊ด„ ์ฒ˜๋ฆฌ ์ž‘์—…์„ ์ง€์›ํ•˜๋Š” ๋ฐ๋Š” ์ตœ์†Œ 2๊ฐœ, ์•„๋งˆ๋„ 3๊ฐœ์˜ ๋ฆด๋ฆฌ์Šค ์‚ฌ์ดํด์ด ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๊ฒฐ์ฝ” ์งง์€ ์‹œ๊ฐ„์ด ์•„๋‹ˆ๋ฉฐ, ์—ฌ๋Ÿฌ ์‚ฌ๋žŒ์˜ ๊ธฐ์—ฌ๊ฐ€ ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.

WordPress๊ฐ€ GraphQL๋„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , ์ด๋ฏธ์ง€ ํŽธ์ง‘ ์—”๋“œํฌ์ธํŠธ๊ฐ€ REST ๋Œ€์‹  GraphQL์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ–ˆ๋‹ค๋ฉด, ์ด ์ปจํŠธ๋ฆฌ๋ทฐํ„ฐ๋“ค์€ ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์— ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ์—ˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ฐ API์˜ ์žฅ์ ์„ ํ•„์š”์— ๋”ฐ๋ผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด, WordPress๊ฐ€ ๋”์šฑ ๋ฐœ์ „ํ•˜๊ณ  ํ›จ์”ฌ ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœ๋  ์ˆ˜ ์žˆ์ง€ ์•Š์„๊นŒ์š”?

GraphQL์—์„œ์˜ ์ผ๊ด„ ์ฒ˜๋ฆฌ ์ž‘์—…

Gato GraphQL์ด ์ผ๊ด„ ์ฒ˜๋ฆฌ ์ž‘์—…์„ ์ง€์›ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ํ•˜๋‚˜๊ฐ€ ์•„๋‹ˆ๋ผ ์—ฌ๋Ÿฌ ๊ฐ€์ง€๋กœ ์†Œ๊ฐœํ•ด ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

์ฒซ ๋ฒˆ์งธ๋Š” ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค: ์ฟผ๋ฆฌ์˜ ๋ฃจํŠธ์— ์—ฌ๋Ÿฌ ํ•„๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋‹ค์Œ ์ฟผ๋ฆฌ๋Š” ์‚ฌ์šฉ์ž๋ฅผ ๋กœ๊ทธ์ธ์‹œํ‚ค๊ณ  ๋Œ“๊ธ€์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค:

mutation LogUserInAndAddCommentToPost {
  loginUser(
    by: { credentials: { usernameOrEmail: "test", password: "pass" } }
  ) {
    id
    name
  }
  addCommentToCustomPost(
    input: {
      customPostID: 1459
      commentAs: { html: "Adding a comment: bla bla bla" }
    }
  ) {
    id
    content
    date
  }
}

๏ผˆ์ฐธ๊ณ ๋กœ, ์ด๊ฒƒ์€ GraphiQL ํด๋ผ์ด์–ธํŠธ์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ๋Š” ์ด ํŠœํ† ๋ฆฌ์–ผ์„ ์ฐธ๊ณ ํ•˜์„ธ์š”.๏ผ‰

์ด ๋‘ ์ž‘์—…์€ ์„œ๋กœ ๋‹ค๋ฅธ ๊ฐ์ฒด์— ์ ์šฉ๋˜์—ˆ์ง€๋งŒ, ๊ฐ™์€ ๊ฐ์ฒด์— ์—ฌ๋Ÿฌ ์ž‘์—…์„ ์ ์šฉํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ์œผ๋กœ, ๊ฐ™์€ ๊ฒŒ์‹œ๋ฌผ์— ๋‘ ๊ฐœ์˜ ๋Œ“๊ธ€์„ ์ถ”๊ฐ€ํ•˜๋Š” ์ฟผ๋ฆฌ๋ฅผ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

mutation AddTwoCommentsToPost {
  firstComment: addCommentToCustomPost(
    input: {
      customPostID: 1459
      commentAs: { html: "This is my first response" }
    }
  ) {
    id
    content
    date
  }
  secondComment: addCommentToCustomPost(
    input: {
      customPostID: 1459
      commentAs: { html: "This is my second response" }
    }
  ) {
    id
    content
    date
  }
}

์ด ๋‘ ๋Œ“๊ธ€์€ ์ด๋ฏธ ์กด์žฌํ•˜๋Š” ๊ฒŒ์‹œ๋ฌผ์— ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๊ฒŒ์‹œ๋ฌผ๋„ ๋จผ์ € ์ƒ์„ฑํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” ์–ด๋–ป๊ฒŒ ๋ ๊นŒ์š”?

๊ทธ ๊ฒฝ์šฐ, ๊ฐ„๋‹จํ•œ ์ฟผ๋ฆฌ๋Š” ๋” ์ด์ƒ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์•„์ง ์ƒ์„ฑ๋˜์ง€ ์•Š์€ ๊ฒŒ์‹œ๋ฌผ์˜ ID๋ฅผ ๋ฏธ๋ฆฌ ์•Œ ์ˆ˜ ์—†๊ณ , ์ด๋ฅผ ๋‹ค๋ฅธ ์ž‘์—…์˜ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค๏ผˆํ•„๋“œ ์ธ์ˆ˜์˜ ?์— ์ฃผ๋ชฉํ•˜์„ธ์š”๏ผ‰:

mutation CreatePostAndAddTwoCommentsToPost {
  createPost(input: { title: "Some post" }) {
    id  # <= I don't know what this value will be
  }
  addCommentToCustomPost(input: {
    customPostID: ?,
    commentAs: { html: "Blah blah blah" }
  }) {
    id
    content
    date
  }
}

ํ•˜์ง€๋งŒ ๊ฑฑ์ •ํ•˜์ง€ ๋งˆ์„ธ์š”. Gato GraphQL์ด ํ•ด๊ฒฐํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ํ•˜๋‚˜๊ฐ€ ์•„๋‹ˆ๋ผ ๋‘ ๊ฐ€์ง€ ์†”๋ฃจ์…˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค!

GraphQL API๋Š” ์—ฌ๋Ÿฌ๋ถ„์„ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค

์ฒซ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์€ ๋‹ค์ค‘ ์ฟผ๋ฆฌ ์‹คํ–‰ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด ์ฟผ๋ฆฌ์—์„œ๋Š” ์ฒซ ๋ฒˆ์งธ ์ž‘์—…์„ ์‹คํ–‰ํ•˜๊ณ , ๋””๋ ‰ํ‹ฐ๋ธŒ @export๋ฅผ ํ†ตํ•ด ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋‚ด๋ณด๋‚ธ ๋‹ค์Œ, ์ด ๊ฐ’์„ ๋‘ ๋ฒˆ์งธ ์ฟผ๋ฆฌ์˜ ์ž…๋ ฅ์œผ๋กœ ์ฃผ์ž…ํ•ฉ๋‹ˆ๋‹ค:

mutation AddComment {
  addCommentToCustomPost(
    customPostID: 1459
    commentAs: { html: "Some insightful comment" }
  ) {
    id @export(as: "newCommentID")
    content
    date
  }
}
 
mutation AddResponseToComment @depends(on: "AddComment") {
  replyComment(
    parentCommentID: $newCommentID
    commentAs: { html: "Debunking your insightful comment" }
  ) {
    id
    date
    content
    parent {
      id
    }
  }
}

๋”์šฑ ์„ธ๋ จ๋œ ๋ฐฉ๋ฒ•์œผ๋กœ๋Š” ์ค‘์ฒฉ ๋ฎคํ…Œ์ด์…˜์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ์ฟผ๋ฆฌ์—์„œ๋Š” ์ฒซ ๋ฒˆ์งธ ์ž‘์—…์„ ์‹คํ–‰ํ•˜๊ณ , ๊ทธ ์•ˆ์— ๋‘ ๋ฒˆ์งธ ์ž‘์—…์„ ์ค‘์ฒฉ์‹œ์ผœ ์ฒซ ๋ฒˆ์งธ ์ž‘์—…์—์„œ ์ƒ์„ฑ๋œ ๊ฐ์ฒด์— ์ ์šฉํ•ฉ๋‹ˆ๋‹ค๏ผˆ๊ทธ๋ฆฌ๊ณ  ์„ธ ๋ฒˆ์งธ ์ž‘์—…์„ ์ค‘์ฒฉ์‹œํ‚ค๋Š” ์‹์œผ๋กœ ๊ณ„์†ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค๏ผ‰:

mutation AddCommentAndResponseAndResponse {
  addCommentToCustomPost(
    input: {
      customPostID: 1459
      commentAs: { html: "Some insightful comment" }
    }
  ) {
    id
    content
    date
    reply(input: { commentAs: { html: "Debunking your insightful comment" } }) {
      id
      date
      content
      parent {
        id
      }
      reply(input: { commentAs: { html: "No, it was right!" } }) {
        id
        date
        content
        parent {
          id
        }
      }
    }
  }
}

์ถ”๊ฐ€๋กœ, ์ผ๊ด„ ์ฒ˜๋ฆฌ ์ž‘์—…์€ ๋‹จ์ผ ์—”ํ‹ฐํ‹ฐ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ฐ™์€ ์š”์ฒญ ๋‚ด์—์„œ ์—ฌ๋Ÿฌ ์—”ํ‹ฐํ‹ฐ์— ๋™์‹œ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ์ฟผ๋ฆฌ์—์„œ๋Š” ์ƒˆ๋กœ์šด ๋Œ“๊ธ€๊ณผ ๊ทธ์— ๋Œ€ํ•œ ๋ชจ๋“  ๋‹ต๊ธ€์ด ์—ฌ๋Ÿฌ ๊ฒŒ์‹œ๋ฌผ์— ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค:

mutation AddCommentAndResponseToManyPosts {
  posts(ids: [1657, 1153, 1499, 1459]) {
    id
    addComment(input: { commentAs: { html: "Some insightful comment" } }) {
      id
      content
      date
      reply(
        input: { commentAs: { html: "Debunking your insightful comment" } }
      ) {
        id
        date
        content
        parent {
          id
        }
      }
    }
  }
}

๊ทธ๋ฆฌ๊ณ  ์ด ํ”Œ๋Ÿฌ๊ทธ์ธ์—๋Š” ๋˜ ํ•˜๋‚˜์˜ ๋น„์žฅ์˜ ๋ฌด๊ธฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค: ์ž„๋ฒ ๋“œ ํ•„๋“œ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ์ฒด ์ž์‹ ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ํ™œ์šฉํ•ด ๊ฐ ํ•„๋“œ ์ธ์ˆ˜์— ์ „๋‹ฌํ•  ์ฝ˜ํ…์ธ ๋ฅผ ์ปค์Šคํ„ฐ๋งˆ์ด์ฆˆํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

์ด ์ฟผ๋ฆฌ์—์„œ๋Š” ๋Œ“๊ธ€์— ์ƒ์„ฑ ๋Œ€์ƒ ๊ฐ์ฒด์˜ ์ •๋ณด๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค:

mutation AddCustomCommentAndResponseToManyPosts {
  posts(ids: [1657, 1153, 1499, 1459]) {
    id
    addComment(
      input: {
        commentAs: { html: "The post has ID {{ id }} and title {{ title }}" }
      }
    ) {
      id
      content
      date
      reply(
        input: {
          commentAs: {
            html: "The parent comment was posted on {{ dateStr(format: \"d/m/Y\") }}. Cool, right?"
          }
        }
      ) {
        id
        date
        content
        parent {
          id
        }
      }
    }
  }
}

ํ•„์š”์— ๋”ฐ๋ผ REST์™€ GraphQL์˜ ์žฅ์ ์„ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•˜๊ธฐ

Full Site Editing์ด ๊ฐœ๋ฐœ๋˜๊ณ  ํ™•์žฅ๋จ์— ๋”ฐ๋ผ, WordPress๋Š” ์ ์  ๋” ๊ทธ API๋“ค์— ์˜์กดํ•˜๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ธฐ์กด ๊ธฐ๋Šฅ์— ๊ด€ํ•ด์„œ๋Š”, REST API๊ฐ€ ์ง€๊ธˆ๊นŒ์ง€ ๋งค์šฐ ์ž˜ ์ž‘๋™ํ•ด ์™”์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ์—†๋Š” ๊ฒƒ์„ ๋‹ค์‹œ ๋งŒ๋“ค ํ•„์š”๋Š” ์—†์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์•ž์œผ๋กœ ๊ฐœ๋ฐœ๋  ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์— ๊ด€ํ•ด์„œ๋Š”, ํŠน์ • ๊ธฐ๋Šฅ์— ๋” ์ ํ•ฉํ•œ ๋ฐฉ์‹์— ๋”ฐ๋ผ REST์™€ GraphQL ์ค‘ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•ด ์‚ฌ์šฉํ•œ๋‹ค๋ฉด WordPress์— ๋” ๋งŽ์€ ์ด์ ์ด ์žˆ์ง€ ์•Š์„๊นŒ์š”?

๋‹ต์€ ์—ฌ๋Ÿฌ๋ถ„์—๊ฒŒ ๋‹ฌ๋ ค ์žˆ์Šต๋‹ˆ๋‹ค...

์—ฌ๋Ÿฌ๋ถ„์˜ ์˜๊ฒฌ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?


๋‰ด์Šค๋ ˆํ„ฐ ๊ตฌ๋…ํ•˜๊ธฐ

Gato GraphQL์˜ ๋ชจ๋“  ์—…๋ฐ์ดํŠธ๋ฅผ ๋†“์น˜์ง€ ๋งˆ์„ธ์š”.