โ† ๋ชจ๋“  ๊ธ€

graphql

Read GraphQL docs

Exploring the concept of GraphQL and its benefits

2024.07.293 min read

GraphQL์„ ์Šคํ„ฐ๋””ํ•˜๊ฒŒ ๋œ ๋ฐฐ๊ฒฝ

์ œํ’ˆ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ ๋งŽ์€ ๊ธฐ๋Šฅ์ด ํ•„์š” ํ•˜์˜€๊ณ  ๊ทธ์— ๋”ฐ๋ผ ๋งŽ์€ API๋ฅผ ์—ฐ๋™ํ•˜์—ฌ ๊ฐœ๋ฐœํ•˜์˜€๋Š”๋ฐ ์‹œ๊ฐ„์ด ์ง€๋‚˜ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ API๊ฐ€ ์ถ”๊ฐ€๋˜๊ฑฐ๋‚˜ ๋ณ€๊ฒฝ๋˜๋Š” ์ผ๋“ค์ด ๋งŽ์•„์ง€๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
์ด๊ฒƒ์€ ๊ฒฐ๊ตญ API ์ŠคํŽ™์ด ์ถ”๊ฐ€๋˜๊ฑฐ๋‚˜ ๋ณ€๊ฒฝ๋˜๋Š” ์ผ์ด ๋ฐœ์ƒํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•˜์˜€๊ณ  ๊ทธ์— ๋”ฐ๋ผ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋‹ค๋ฃจ์–ด์•ผ ํ•  ์—”๋“œ ํฌ์ธํŠธ์— ๋Œ€ํ•œ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์œ ์ง€๋ณด์ˆ˜ํ•˜๋Š” ๊ฒƒ์€ ์‰ฝ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.
๋”๊ตฐ๋‹ค๋‚˜ API ์ŠคํŽ™์„ ๋ฌธ์„œ๋กœ ์ •๋ฆฌํ•˜๋Š” ๊ฒƒ์€ ์ฒ˜์Œ์—” ์‰ฌ์šธ์ง€ ๋ชฐ๋ผ๋„ ์ง€์†์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์€ ์ ˆ๋Œ€ ์‰ฌ์šด ์ผ์ด ์•„๋‹ˆ์˜€์Šต๋‹ˆ๋‹ค.

์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ์— ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋“ค์„ GraphQL์„ ๋„์ž…ํ•˜๋ฏ€๋กœ์จ ํ•ด๊ฒฐ ํ•  ์ˆ˜ ์žˆ์ง€ ์•Š์„๊นŒ ์ƒ๊ฐํ•˜์—ฌ ๋ฌธ์„œ๋“ค์„ ์ฝ๊ณ  ๊ฐ€์žฅ ์ธ์ƒ ๊นŠ์—ˆ๋˜ ๋ถ€๋ถ„๋“ค์„ ์š”์•ฝ ํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

GraphQL ์ด๋ž€

ํด๋ผ์ด์–ธํŠธ์—์„œ ์ดํ•ด ํ•  ์ˆ˜ ์žˆ๋Š” ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ๋น„์Šทํ•œ ์˜ˆ๋กœ SQL์ด ์žˆ๋Š”๋ฐ ์งˆ์˜๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์‹œ์ ์— ์ •ํ™•ํžˆ ์–ด๋–ค ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜ํ™˜ ํ•˜๋Š”์ง€ ์ดํ•ด ํ•  ์ˆ˜ ์žˆ์Œ์„ ๋œปํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  GraphQL์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์•„๋‹Œ ์ŠคํŽ™์„ ์ •์˜ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ •์˜๋œ ์ŠคํŽ™์— ๋”ฐ๋ผ ์–ธ์–ด์— ๋งž๊ฒŒ ๊ฐœ๋ฐœ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
GraphQL ๋ฐฉ์‹์œผ๋กœ ๊ฐœ๋ฐœํ•˜๋ ค๋ฉด GraphQL ํด๋ผ์ด์–ธํŠธ์™€ GraphQL ์„œ๋ฒ„๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
GraphQL ์„œ๋ฒ„๋Š” ์–ธ์–ด๋งˆ๋‹ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋งŽ์ด ์กด์žฌํ•˜๊ณ  ํด๋ผ์ด์–ธํŠธ๋กœ์„œ๋Š” ์ œ์ผ ์œ ๋ช…ํ•œ ๊ฒƒ์€ Relay์™€ Apollo๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

Relay VS Apollo

Relay๋Š” ๋ฉ”ํƒ€์—์„œ ๊ฐœ๋ฐœํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ GraphQL์„ ์„ค๊ณ„ํ•˜๊ณ  ์„œ๋น„์Šค์— ์ ๊ทน์ ์œผ๋กœ ๋„์ž…ํ•œ ํšŒ์‚ฌ๋‹ต๊ฒŒ ์ž์‹ ๋“ค์˜ ์ฒ ํ•™์— ๋งž๊ฒŒ ๊ฐœ๋ฐœ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
์ œ์ผ ์ƒ์œ„์— ์ฟผ๋ฆฌ๊ฐ€ ์กด์žฌํ•˜๊ณ  ํ•ด๋‹น ์ฟผ๋ฆฌ๋ฅผ ํ”„๋ ˆ๊ทธ๋จผํŠธ๋กœ ์Šฌ๋ผ์ด์Šคํ•˜์—ฌ ๊ฐ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.
์ด๋Ÿฌํ•œ ๊ตฌ์กฐ๋Š” ์Šค์ผ€์ผ๋ง์— ์ ํ•ฉํ•œ ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค. ์„œ๋น„์Šค๊ฐ€ ์ปค์ง€๋”๋ผ๋„ ์Šฌ๋ผ์ด์Šค๋œ ํ”„๋ ˆ๊ทธ๋จผํŠธ๋ฅผ ํ†ตํ•ด ์บ์‹œ ํžˆํŠธ๋ฅผ ๊ทน๋Œ€ํ™” ์‹œํ‚ต๋‹ˆ๋‹ค.
๋‹ค๋งŒ ์ปดํฌ๋„ŒํŠธ์— ํ•˜๋‚˜์˜ ํ”„๋ ˆ๊ทธ๋จผํŠธ๋ฅผ ๋Œ€์‘ํ•˜์—ฌ ์„ ์–ธํ•˜๋Š” ๋ฐฉ์‹์„ ์ทจํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ปจ๋ฒค์…˜์ด ๊นŒ๋‹ค๋กญ๊ณ  Relay๋งŒ์˜ ๋””๋ ‰ํ‹ฐ๋ธŒ๊ฐ€ ์กด์žฌํ•˜์—ฌ ๋Ÿฌ๋‹์ปค๋ธŒ๊ฐ€ ์ ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  SSR์„ ๊ณต์‹์ ์œผ๋กœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ์ง€์›ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋ณ„๋„์˜ ๋ผ์šฐํ„ฐ ์ž‘์—…์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

Apollo๋Š” Relay์™€ ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ๋Šฅ์„ ๋น„์Šทํ•˜๊ฒŒ ์ œ๊ณตํ•˜์ง€๋งŒ ํŠน์ • ์ปจ๋ฒค์…˜์— ๊ณ ์ •๋˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋„๋ก ์œ ์—ฐ์„ฑ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
SSR ๋˜ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ ˆ๋ฒจ์—์„œ ๊ณต์‹ ์ง€์›ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๋Œ€๋žต์ ์ธ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ ์–ด๋–ค ๊ฒƒ์„ ์„ ํƒ ํ•  ์ง€๋Š” ์ œํ’ˆ์˜ ์ŠคํŽ™ ๋‚ด์—์„œ SSR์˜ ํ•„์š”์„ฑ์— ๋”ฐ๋ผ ๊ฒฐ์ •๋˜๋ฆฌ๋ผ ์ƒ๊ฐ๋ฉ๋‹ˆ๋‹ค.

GraphQL์„ ๋„์ž…ํ•˜๋ฉด ์ข‹์€ ์ 

์—”๋“œํฌ์ธํŠธ๋ฅผ ํ•˜๋‚˜๋กœ ํ†ตํ•ฉ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ํด๋ผ์ด์–ธํŠธ์—์„œ ์š”์ฒญํ•˜๋Š” ์‹œ์ ์— ์–ด๋–ค ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š”์ง€ ์ดํ•ด ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
Rest API๋ฅผ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋ฉด ํ”ํžˆ ๋งˆ์ฃผํ•˜๋Š” ์–ธ๋”ํŒจ์นญ(๋ฐ์ดํ„ฐ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ API๋ฅผ ํ˜ธ์ถœ)๊ณผ ์˜ค๋ฒ„ํŒจ์นญ(API ์‘๋‹ต์— ๋ถˆํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๊นŒ์ง€ ํฌํ•จ)์„ ์—†์•จ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋˜ํ•œ GraphQL ์„œ๋ฒ„์—์„œ ์ œ๊ณตํ•˜๋Š” Playground ์‚ฌ์ดํŠธ๋ฅผ ํ†ตํ•ด ๋ณ„๋„์˜ ๋ฌธ์„œ ์—†์ด๋„ ๋ฐ์ดํ„ฐ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (๋ณ„๋„์˜ ์ฝ”๋“œ ์ž‘์„ฑ์„ ํ•˜์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค)
๊ทธ๋ฆฌ๊ณ  GraphQL ์„œ๋ฒ„๊ฐ€ ์ค‘๊ฐ„์—์„œ ๋ฐฑ์—”๋“œ API๋ฅผ ํ†ตํ•ฉํ•˜์—ฌ ์ œ๊ณตํ•˜๋ฏ€๋กœ ์‹œ์Šคํ…œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์— ์œ ๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ์ธํ„ฐํŽ˜์ด์Šค ๋‚ด์—์„œ ๋ฐ์ดํ„ฐ๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅธ ์ถœ์ฒ˜๋ฅผ ๊ฐ€์ง„๋‹ค๊ณ  ํ•˜๋”๋ผ๋„ ํด๋ผ์ด์–ธํŠธ๋Š”
ํ•ด๋‹น ๋ถ€๋ถ„์—์„œ ์‹ ๊ฒฝ ์“ธ ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

ํ•˜๋‚˜์˜ GraphQL ๋ฐ์ดํ„ฐ๊ฐ€ ํ•˜๋‚˜์˜ ๋‚ด๋ถ€ API๋ฅผ ํ†ตํ•ด ์ œ๊ณตํ•˜๋‹ค๊ฐ€ ๋ถ„๋ฆฌ๋œ ์—ฌ๋Ÿฌ๊ฐœ์˜ ๋‚ด๋ถ€ API๋ฅผ ์กฐํ•ฉํ•˜์—ฌ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ด ๋ง์€ ๋ฐฑ์—”๋“œ์—์„œ ์‹œ์Šคํ…œ์˜ ์œ ์—ฐ์„ฑ์ด ์ƒ๊น€์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
๋ณ„๋„์˜ ์—”๋“œ ํฌ์ธํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์•„๋„ ๋˜๋ฉฐ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์š”์ฒญํ•˜๋Š” ์ฟผ๋ฆฌ์— ๋Œ€ํ•ด์„œ ๊ฐ๊ฐ€์˜ ์†์„ฑ ๋ณ„๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณตํ•˜๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

GraphQL์„ ๋„์ž…ํ•˜๋ฉด์„œ ์กฐ์‹ฌํ•ด์•ผ ํ•  ์ 

GraphQL์€ ํ•œ๋ฒˆ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์„ค๊ณ„ํ•˜๋ฉด ๋˜๋Œ๋ฆฌ๊ธฐ๊ฐ€ ์‰ฝ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ณต์‹๋ฌธ์„œ์—๋„ ์‹œ์Šคํ…œ์˜ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ํ•œ๋ฒˆ์— ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•˜์ง€ ์•Š๊ณ  ์ ์ง„์ ์ธ ๋„์ž…์„ ํ†ตํ•ด ์‹ค์ˆ˜๋ฅผ ์ค„์—ฌ๋‚˜๊ฐ€๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
GraphQL ์„œ๋ฒ„๊ฐ€ ๋ฐฑ์—”๋“œ ์„œ๋ฒ„ ์•ž๋‹จ์— ์กด์žฌํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ์˜ ์š”์ฒญ์„ ๋ฐ›๋Š” ์—ญํ™œ์„ ํ•˜๊ฒŒ ๋˜๋ฏ€๋กœ ์ธํ”„๋ผ๋ฅผ ์ž˜ ๊ด€๋ฆฌํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.
์‹ค์ œ๋กœ ์–ด๋–ค ์„œ๋น„์Šค์—์„œ GraphQL์„ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ๋งŽ์€ ์š”์ฒญ์ด ํ•œ๋ฒˆ์— ๋ฐ€๋ ค GraphQL ์„œ๋ฒ„ ์˜ค๋ฅ˜๊ฐ€ ํด๋ผ์ด์–ธํŠธ์— ๊ทธ๋Œ€๋กœ ๋…ธ์ถœ๋œ ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.