๐ โโ๏ธ GraphQL์ WordPress ์ฝ์ด์ ํฌํจํด์๋ ์ ๋๋ ์ด์
์ ๋ฐ์ดํธ 01/05/2024: Gato GraphQL vs WP REST API ๋น๊ต๋ฅผ ํ์ธํด ๋ณด์ธ์.
๋ค, ์ ๋ชฉ์ ์ ํํ๊ฒ ์ฝ์ผ์ จ์ต๋๋ค. ์ ์์ ์ด WordPress์ฉ GraphQL ์๋ฒ์ ์ ์์์์๋ ๋ถ๊ตฌํ๊ณ , WordPress๊ฐ GraphQL์ ๊ธฐ๋ณธ ํ์ฌํด์ผ ํ๋์ง์ ๋ํ ์๊ฐ์ด ๋ฐ๋์์ต๋๋ค.
์ผ๋ง ์ ๊น์ง๋ง ํด๋ ์ ๋ GraphQL์ด WordPress ์ฝ์ด์ ํฌํจ๋์ด์ผ ํ๋ค๊ณ ๋ฏฟ์์ต๋๋ค. ๊ทธ ์ด์ ๋ ๊ธฐ์ฌ์๋ค์ด WP REST API๋ฅผ ์ํ ๊ธฐ๋ฅ(๋ฐฐ์น ์์ ๋ฑ) ๊ตฌํ์ ์๊ฐ๊ณผ ๋ ธ๋ ฅ์ ์๊ณ ์์๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ด๋ GraphQL์ด ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ํ๋ ๊ธฐ๋ฅ์ ๋๋ค.
๊ทธ๋ฌ๋ ์ต๊ทผ์ ์๋ก์ด ์ ๋ณด๋ฅผ ์ ํ๊ณ ๋ค์ ์๊ฐํ๊ฒ ๋์์ผ๋ฉฐ, ์ด์ ๋ ์ถ๊ฐ๋๋ ์ํ์ฑ ๋๋ฌธ์ WordPress๊ฐ GraphQL์ ๊ธฐ๋ณธ ํ์ฌํด์๋ ์ ๋๋ค๊ณ ์๊ฐํฉ๋๋ค.

๋ค์์ ๊ทธ ์ด์ ๋ค์ ๋๋ค.
1. 80/20 ๋ฒ์น์ ์ถฉ์กฑํ์ง ๋ชปํ๋ค
์ญ์ฌ์ ์ผ๋ก, ํน์ ๊ธฐ๋ฅ์ด WordPress ์ฝ์ด์ ์ถ๊ฐ๋๋ ๊ฒ์ 80/20 ๋ฒ์น์ ์ถฉ์กฑํ๋ ๊ฒฝ์ฐ์๋ง ํด๋นํฉ๋๋ค. ์ฆ, ์ฌ์ฉ์์ 80% ์ด์์ด ํด๋น ๊ธฐ๋ฅ์ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
GraphQL์ ๊ฒฝ์ฐ๋ ์ด๋จ๊น์? WordPress 4.7์ WP REST API๊ฐ ๋์ ๋ ์ ๋ก๋ฅผ ๋ฐํ์ผ๋ก ์๊ฐํด ๋ณด๋ฉด, ๋ต์ "์๋์ค"๋ผ๊ณ ์๊ฐํฉ๋๋ค.
K. Adam White(WP REST API ์ด๊ธฐ ๊ฐ๋ฐ ๋ฐ ๋ฆด๋ฆฌ์ค์ ์ฃผ์ ๋ฆฌ๋)๋ ๊ทธ์ ๊ฐ์ฐ WordPress as Data, 5 Years In์์, ๊ธฐ์ฌ์๋ค์ REST API๊ฐ ์ฝ์ด์ ํจ๊ป ์ถ์๋๋ฉด ๋๋ฆฌ ์ฌ์ฉ๋ ๊ฒ์ด๋ผ๊ณ ๊ธฐ๋ํ๋ค๊ณ ๋งํ์ต๋๋ค. ๊ทธ๋ฌ๋ ๊ทธ๋ฐ ์ผ์ ์ผ์ด๋์ง ์์์ต๋๋ค. ๊ฐ๋ฐ์๋ค์ ์ด์ ๊ณผ ๊ฐ์ ๋ฐฉ์์ผ๋ก WordPress ์ฌ์ดํธ๋ฅผ ๊ณ์ ๋ง๋ค์์ผ๋ฉฐ, "ํค๋๋ฆฌ์ค"๋ REST API์๋ ๊ฑฐ์ ์ฃผ๋ชฉํ์ง ์์์ต๋๋ค.
์ํฉ์ด ๋ฐ๋ ๊ฒ์ ๋์ค์, WordPress 5.0์์ REST API๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๋ Gutenberg ํธ์ง๊ธฐ๊ฐ ๋์ ๋์์ ๋์์ต๋๋ค. ๊ทธ๋ ๋ค๋ฉด Gutenberg๊ฐ GraphQL์ WordPress ์ฝ์ด์ ์ถ๊ฐํ๋ ๊ฒ์ ์ ๋นํํ ์ ์์๊น์?

2. ํค๋๋ฆฌ์ค๋ ์ด๋ฏธ REST API๋ก ์ถฉ์กฑ๋๊ณ ์๋ค
WordPress ํธ์ง๊ธฐ๋ ๋ค์ดํฐ๋ธ GraphQL ์๋ฒ๋ก ๊ฐํ๋ ์ ์์ผ๋ฉฐ, ๋ธ๋ก ๊ฐ๋ฐ์๋ค์ด (๊ธฐ์กด REST API์ ๋ํ์ฌ) GraphQL์ ์ฌ์ฉํ์ฌ ๋ธ๋ก์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์๊ฒ ๋ฉ๋๋ค. ๋ํ ํ ๋ง์ ํ๋ฌ๊ทธ์ธ์ด GraphQL์ ์ฌ์ฉํ์ฌ ์์ฒด ๋ด๋ถ ๊ธฐ๋ฅ์ ๊ฐํํ ์๋ ์์ต๋๋ค. ์ด๊ฒ๋ค์ GraphQL์ WordPress ์ฝ์ด์ ์ถ๊ฐํ๋ ๊ฐ๋ ฅํ ์ด์ ์ ๋๋ค.
๊ทธ๋ฌ๋ WordPress์๋ ์ด๋ฏธ REST API๊ฐ ์์ผ๋ฉฐ, GraphQL๋ก ํ ์ ์๋ ๋ชจ๋ ๊ฒ์ REST๋ก๋ ํ ์ ์์ต๋๋ค. REST์ ๋ํ์ฌ GraphQL์ ๋์ ํ๋ ๊ฒ์ ์ด๋ฏธ Toyota๋ฅผ ์ด์ ํ๊ณ ์๋๋ฐ BMW๋ฅผ ์ฌ๋ ๊ฒ๊ณผ ๊ฐ์ต๋๋ค. ๋ชฉ์ ์ง์ ๋ ๋นจ๋ฆฌ ๋์ฐฉํ ์ ์๊ณ , ์ด์ ๊ฒฝํ๋ ๋ ๋งค๋ ฅ์ ์ผ ๊ฒ์ ๋๋ค. ๊ทธ๋ฌ๋ ๋ ์ฐจ ๋ชจ๋ ์ํ๋ ๊ณณ์ผ๋ก ๋ฐ๋ ค๋ค ์ค ๊ฒ์ ๋๋ค.
GraphQL์ด ์ด์ ์๋ ์ฌ์ฉํ ์ ์์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ๊ฒ์ด ์๋๊ธฐ ๋๋ฌธ์, ์ฝ์ด์์ ํฌํจ์ ์์ ํ ์ ๋นํ๋์ง ์์ต๋๋ค. GraphQL์ API์์ ์ํธ์์ฉ ๊ฒฝํ์ ๋ถ๋ช ํ ํฅ์์ํค๊ฒ ์ง๋ง, ์ด๋ ํ๋ฌ๊ทธ์ธ ์์ญ์ผ๋ก ์ถฉ๋ถํ ๊ณ ๋ ค๋ ์ ์์ต๋๋ค.

3. WordPress ํ
๋ง์ ํ๋ฌ๊ทธ์ธ์ webonyx/graphql-php๋ฅผ ์ฌ์ฉํ ์ ์๋ค
๊ณต๊ฐ ํ๋ฌ๊ทธ์ธ์ ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ๊ธฐ ์ํด WPGraphQL์ด๋ Gato GraphQL์ ์ค์นํ๋๋ก ์น์ฌ์ดํธ์ ์๊ตฌํ ์ ์์ต๋๋ค. ๊ทธ๋ ๊ฒ ํ๋ฉด ์ ์ฌ์ ์ธ ๋๋ฌ ๋ฒ์๊ฐ ์ค์ด๋ค๊ธฐ ๋๋ฌธ์ ๋๋ค. ๋ฐ๋ผ์ ๊ณต๊ฐ ํ๋ฌ๊ทธ์ธ์ GraphQL์ ์์กดํ ์ ์์ผ๋ฉฐ, ์ด๊ฒ์ ์ ๋ง ์์ฌ์ด ์ผ์ ๋๋ค.
์ ๋ ์ด ๋ฌธ์ ์ ๋ํด ๊น์ด ๊ณ ๋ฏผํ์ฌ ์ ์ฌ์ ์ธ ํด๊ฒฐ์ฑ ์ ์๊ฐํด ๋์ต๋๋ค. ๋ฐ๋ก GraphQL API Private์ ๋๋ค. ์ด๊ฒ์ ํ๋ฌ๊ทธ์ธ์ด ์์ฒด ์ฉ๋๋ก ๋ด์ฅํ ์ ์๋ ๋ ๋ฆฝํ GraphQL ์์ง์ผ๋ก, Composer ํจํค์ง๋ก ๋ฐฐํฌ๋ฉ๋๋ค. (์ด ํ๋ก์ ํธ๋ ์์ง ์์ํ์ง ์์์ต๋๋ค.)
๊ทธ๋ฐ๋ฐ ๋ช ์ฃผ ํ, GraphQL ๊ธฐ๋ฐ์ WordPress ํ๋ฌ๊ทธ์ธ์ด ์ถ์๋์์ต๋๋ค. ์์ฑ์๊ฐ ์ด๋ป๊ฒ ํ๋์ง ๊ถ๊ธํ์ต๋๋ค. WPGraphQL์ด๋ Gato GraphQL์ ๋ด๋ถ์ ์ผ๋ก ์ฌ์ฉํ๊ณ ์์๊น์? ๊ทธ๋์ ์์ค ์ฝ๋๋ฅผ ํ์ธํ๋๋, ์ง์ webonyx/graphql-php๋ฅผ ์ฌ์ฉํ๊ณ ์์์ต๋๋ค!
์ด๊ฒ์ ํฅ๋ฏธ๋ก์ด ํด๊ฒฐ์ฑ ์ผ๋ก, ์ฝ๊ฐ์ ๋ ธ๋ ฅ์ผ๋ก ๊ฐ๋ฐ์๋ค์ด ํ์ฌ๋ ํ ๋ง์ ํ๋ฌ๊ทธ์ธ์ ์ํด GraphQL์ ์ ๊ทผํ ์ ์์์ ๋ณด์ฌ์ค๋๋ค.
์ด ํ๋ฌ๊ทธ์ธ์ GraphQL์ ์ฌ์ฉํ์ฌ WordPress(๊ฒ์๋ฌผ, ์ฌ์ฉ์, ๋๊ธ ๋ฑ)์ ๋ฐ์ดํฐ ์ํฐํฐ๊ฐ ์๋ ์์ฒด ๋ฐ์ดํฐ ์ํฐํฐ๋ฅผ ๊ฐ์ ธ์ต๋๋ค. ๋ฐ๋ผ์ WPGraphQL๊ณผ Gato GraphQL(๊ทธ๋ฆฌ๊ณ ๊ฒฐ๊ตญ์๋ GraphQL API Private)์ด ํ๋ ๊ฒ์ฒ๋ผ WordPress ๋ฐ์ดํฐ ๋ชจ๋ธ์ ํฌํจํ๋ GraphQL ์คํค๋ง๋ฅผ ์ฌ๊ตฌ์ฑํ ํ์๊ฐ ์์ต๋๋ค. ๊ทธ๋ฐ ์๋ฏธ์์, webonyx/graphql-php์ ์์กดํ๋ ๊ฒ์ ํฉ๋ฆฌ์ ์
๋๋ค.

4. GraphQL์๋ ์ถ๊ฐ์ ์ธ ์ํ์ด ์๋ค
์์ ์ธ ๊ฐ์ง ๋ฌธ์ ๋ ๋ชจ๋ GraphQL์ด WordPress๋ฅผ ๊ฐํํ์ง๋ง, ๊ทธ๋ ๊ฒ๊น์ง ์ค๋๋ ฅ ์๋ ๊ฒ์ ์๋์ ์์ฌํฉ๋๋ค. ์ด ๊ด์ ์์ ๋ณด๋ฉด, ์ฌ์ ํ GraphQL์ WordPress ์ฝ์ด์ ์ถ๊ฐํ ์ ์์ผ๋ฉฐ, ๊ทธ๋ก๋ถํฐ ํํ์ ๋ฐ๊ฑฐ๋ ์๋ฌด ์ผ๋ ์ผ์ด๋์ง ์์ ์ ์์ต๋๋ค.
๊ทธ๋ฌ๋ ์ด ๋ค ๋ฒ์งธ ๋ฌธ์ ๋ GraphQL์ด WordPress์ ํฐ ๊ฐ์น๋ฅผ ์ถ๊ฐํ์ง ์๋๋ค๋ฉด, ์ถ๊ฐ์ ์ธ ์ํ์ด ์๊ธฐ ๋๋ฌธ์ ์ถ๊ฐํด์๋ ์ ๋๋ค๋ ๊ฒ์ ์์ฌํฉ๋๋ค.
GraphQL์ (๋ค๋ฅธ ๊ฒ๋ค ์ค์์๋) ๋ค์๊ณผ ๊ฐ์ ๊ณต๊ฒฉ ๋ฒกํฐ์ ์ทจ์ฝํฉ๋๋ค:
- ๋จ์ผ ์๋ํฌ์ธํธ๊ฐ ์น์ฌ์ดํธ์ ๋ชจ๋ ์ ๋ณด์ ๋ํ ์ ๊ทผ์ ์ ๊ณตํ๋ฏ๋ก, ๋น๊ณต๊ฐ ๋ฐ์ดํฐ๊ฐ ์๋์น ์๊ฒ ๋ ธ์ถ๋ ์ ์์ต๋๋ค.
- ์ฟผ๋ฆฌ๊ฐ ๋งค์ฐ ๋ณต์กํด์ง ์ ์์ผ๋ฉฐ, ์น ์๋ฒ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์๋ฒ์ ๊ณผ๋ถํ๋ฅผ ์ค ์ ์์ต๋๋ค.
- ๋์ผํ ๋ฎคํ ์ด์ ์ ๋จ์ผ ์ฟผ๋ฆฌ์์ ์ฌ๋ฌ ๋ฒ ์คํํ ์ ์์ผ๋ฉฐ, ์ฌ๋ฌ ์ฟผ๋ฆฌ๋ฅผ ๋จ์ผ ์์ฒญ์์ ํจ๊ป ์คํํ ์ ์์ด ๊ณต๊ฒฉ์๊ฐ ๋ง์ ์ฌ์ฉ์ ์ด๋ฆ/๋น๋ฐ๋ฒํธ ์กฐํฉ์ ์๋ํ์ฌ ๋ฐฑ์๋ ์ ๊ทผ์ ์๋ํ ์ ์์ต๋๋ค.
์ด๋ฌํ ๊ณต๊ฒฉ์ ์ ๋ง ์ฌ๊ฐํ ํผํด๋ฅผ ์ค ์ ์์ต๋๋ค. ์ฌ์ด๋ฒ๋ณด์ ์ฐ๊ตฌ์ Dolev Farhi๋ ๋ฐํ Damn GraphQL - Defending and Attacking APIs์์ ๋ณต์กํ ์ฟผ๋ฆฌ ๋ฐฐ์น๋ก WPGraphQL ์๋ํฌ์ธํธ๋ฅผ ๊ณต๊ฒฉํ์ฌ 30์ด ์ด๋ด์ WordPress ์ฌ์ดํธ๋ฅผ ๋ค์ด์ํค๋ ๋ฐ ์ฑ๊ณตํ์ต๋๋ค.
WPGraphQL ํ์ ์ฆ์ ๋ฌธ์ ๋ฅผ ์์ ํ์ต๋๋ค. ๊ทธ๋ฌ๋ ๋ค๋ฅธ ์ทจ์ฝ์ ์ด ๋ฐ์ํ์ง ์๋๋ค๊ณ ์ด๋ป๊ฒ ํ์ ํ ์ ์์๊น์? (WPGraphQL๋ฟ๋ง ์๋๋ผ Gato GraphQL๋ ํฌํจํ์ฌ)
์ด๋ฌํ ๊ณต๊ฒฉ์ GraphQL์์๋ ์ผ์ด๋ ์ ์์ง๋ง, REST์์๋ ์ผ์ด๋์ง ์์ต๋๋ค. ์๋ํ๋ฉด GraphQL์ด REST๋ณด๋ค ๋ ๊ฐ๋ ฅํ๊ธฐ ๋๋ฌธ์ ๋๋ค. REST์์๋ ์ฟผ๋ฆฌ๊ฐ ์ฌ์ ์ ์ ์๋์ด ์๋ฒ์ ์ ์ฅ๋์ง๋ง, GraphQL์์๋ (persisted queries๋ฅผ ์ฌ์ฉํ์ง ์๋ ํ) ๋ฐํ์์ ํด๋ผ์ด์ธํธ๋ก๋ถํฐ ์ ๊ณต๋ฉ๋๋ค.
์น์ฌ์ดํธ ๊ด๋ฆฌ์๊ฐ ์๋ํฌ์ธํธ์ ์ ๊ทผํ ์ ์๋ ์ฌ๋์ด๋ ๋ ธ์ถ๋๋ ๋ฐ์ดํฐ๋ฅผ ์ค์ ํ๋ ๋ฐ ์ํํ๋ฉด ๋์ ์ผ์ด ๋ฐ์ํ ์ ์์ต๋๋ค. ๊ธฐ์ ์ ์ต์ํ์ง ์์ ์๋ฐฑ๋ง ๋ช ์ ์ฌ๋๋ค์ด ์ฌ์ฉํ๋ WordPress์ ์ธ๊ธฐ๋ฅผ ๊ฐ์ํ๋ฉด, ๋์ ์ผ์ด ๋ฐ์ํ ๊ฐ๋ฅ์ฑ์ด ๋งค์ฐ ๋์ต๋๋ค.

๋ง๋ฌด๋ฆฌ
ํ์คํ ๋ง์๋๋ฆฌ์ง๋ง, ์ ๋ WordPress์์ GraphQL์ ์ฌ์ฉํ์ง ๋ง๋ผ๊ณ ์ฃผ์ฅํ๋ ๊ฒ์ด ์๋๋๋ค(๋ฌผ๋ก ๊ทธ๋ฐ ๋ง์ ํ๋ ๊ฒ์ด ์๋๋๋ค!). ์ฑ ์๊ฐ ์๊ฒ GraphQL์ ์ฌ์ฉํ์๋ ๊ฒ์ ๋๋ค. GraphQL์ ๊ฐ๋ ฅํ๋ฉฐ, ๊ทธ๊ฒ์ ์ํํ๊ธฐ๋ ํฉ๋๋ค. GraphQL์ ์ฌ์ฉํ ๋๋ ์์ ์ด ๋ฌด์์ ํ๊ณ ์๋์ง ํ์คํ ์๊ณ ์์ด์ผ ํฉ๋๋ค.
GraphQL์ WordPress ์ฝ์ด์ ํ์ฌํ๋ฉด ๋ง์ ์ฌ๋๋ค์ ์์ ๋ค์ด๊ฐ๊ฒ ๋๊ณ , ๊ทธ ์ค ๋ง์ ์ด๋ค์ ๊ทธ ์ํ์ฑ์ ์ธ์งํ์ง ๋ชปํ๊ณ ์ ์ ํ ์กฐ์น๋ฅผ ์ทจํ์ง ์์ ๊ฒ์ ๋๋ค. ์ด๋ ์ ์ฌ์ ์ธ ์ฌ์์ ์์ธ์ด ๋ฉ๋๋ค. ๋ฐ๋ผ์ ์ง๊ธ ์ ์ ์๊ฒฌ์ผ๋ก๋, ์ด๋ฅผ ํผํด์ผ ํ๋ค๊ณ ์๊ฐํฉ๋๋ค.