LUCATHREE.COM

โ† Back to list
๐Ÿง TIL

[๋ฐฑ์—”๋“œ ๊ธฐ๋ณธ ๊ฐœ๋… ์ •๋ฆฌ] GraphQL

์ž‘์„ฑ์ผ:
TILTerms

GraphQL

GraphQL์€ 2015๋…„์— ํŽ˜์ด์Šค๋ถ์— ์˜ํ•ด ๊ณต๊ฐœ๋œ ์ฟผ๋ฆฌ ์–ธ์–ด(Query Language)๋กœ ํด๋ผ์ด์–ธํŠธ ์ค‘์‹ฌ์ ์œผ๋กœ ์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ •ํ™•ํ•˜๊ฒŒ ์š”์ฒญํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.

ํƒ„์ƒ ๋ฐฐ๊ฒฝ โ€” REST API์˜ ํ•œ๊ณ„

REST API๋Š” ์˜ค๋žซ๋™์•ˆ ์›น์˜ ํ‘œ์ค€์ฒ˜๋Ÿผ ์‚ฌ์šฉ๋˜์—ˆ์ง€๋งŒ ํ”„๋ก ํŠธ์—”๋“œ๊ฐ€ ๋ณ„๋„์˜ ๊ฐœ๋ฐœ ๋ถ„์•ผ๋กœ ๋ถ„๋ฆฌ๋˜๊ณ  ์ค‘์š”์„ฑ๊ณผ ๋ณต์žก๋„๊ฐ€ ์˜ฌ๋ผ๊ฐ€๋ฉด์„œ REST๊ฐ€ ๊ฐ€์ง„ ๊ตฌ์กฐ์  ์ œ์•ฝ์€ ํ•œ๊ณ„๋ฅผ ๋“œ๋Ÿฌ๋‚ด๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.
REST๋Š” ์ž์› ์ค‘์‹ฌ(Resource Oriented)์œผ๋กœ, URI๋กœ ๋ช…ํ™•ํ•œ ๋ฆฌ์†Œ์Šค๋ฅผ ํ‘œํ˜„ํ•˜๊ณ  HTTP ๋ฉ”์†Œ๋“œ๋กœ ํ–‰๋™์„ ๋‚˜ํƒ€๋‚ธ๋‹ค. ์ด ๊ตฌ์กฐ๋Š” ๋‹จ์ˆœํ•˜๊ณ  ์ง๊ด€์ ์ด์ง€๋งŒ ์„œ๋น„์Šค๊ฐ€ ์ปค์ง€๋ฉด์„œ ๋ฐœ์ƒํ•˜๋Š” ๋‹จ์ ๋“ค์ด ์žˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋‹ค์Œ ๋ฐ์ดํ„ฐ๋ฅผ ํ•„์š”๋กœ ํ•œ๋‹ค๊ณ  ํ•˜์ž.
  • ์‚ฌ์šฉ์ž ์ด๋ฆ„
  • ์‚ฌ์šฉ์ž๊ฐ€ ์ž‘์„ฑํ•œ ๊ฒŒ์‹œ๊ธ€ ๋ชฉ๋ก
  • ๊ฐ ๊ฒŒ์‹œ๊ธ€์— ๋‹ฌ๋ฆฐ ๋Œ“๊ธ€ ์ˆ˜
REST ๋ฐฉ์‹์ด๋ผ๋ฉด ๊ฐ ๋ฆฌ์†Œ์Šค์— ๋Œ€ํ•ด ์•„๋ž˜์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ ๋ฒˆ์˜ ์š”์ฒญ์„ ํ•ด์•ผ ํ•œ๋‹ค.
  1. /users/1 โ†’ ์ด๋ฆ„์„ ํฌํ•จํ•œ ์‚ฌ์šฉ์ž ์ „์ฒด ์ •๋ณด
  1. /users/1/posts โ†’ ๊ฒŒ์‹œ๊ธ€ ๋ชฉ๋ก
  1. ๊ฐ ๊ฒŒ์‹œ๊ธ€๋งˆ๋‹ค /posts/:id/comments โ†’ ๋Œ“๊ธ€ ์ˆ˜
ย 
๊ฒฐ๊ตญ, over-fetching(ํ•„์š” ์ด์ƒ์˜ ๋ฐ์ดํ„ฐ)๊ณผ under-fetching(ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค ๋ชป ๋ฐ›๋Š” ํ˜„์ƒ)์ด ๋ฐ˜๋ณต๋œ๋‹ค. ์ด๋Ÿฐ ๋น„ํšจ์œจ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋“ฑ์žฅํ•˜๊ฒŒ ๋œ ๊ฒƒ์ด GraphQL์ด๋‹ค.

GraphQL์˜ ํ•ต์‹ฌ ๊ฐœ๋…

GraphQL์€ API์˜ ๋™์ž‘ ๋ฐฉ์‹์„ ๋ฐ์ดํ„ฐ ์งˆ์˜(Query) ์ค‘์‹ฌ์œผ๋กœ ๋ฐ”๊พผ๋‹ค.
REST์ฒ˜๋Ÿผ ์ž์› ๋‹จ์œ„๋กœ ์š”์ฒญํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ํด๋ผ์ด์–ธํŠธ๊ฐ€ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ์˜ ๊ตฌ์กฐ๋ฅผ ์ง์ ‘ ์„ ์–ธํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.
์•ž์„œ REST API์—์„œ ์—ฌ๋Ÿฌ๋ฒˆ์˜ ์š”์ฒญ์„ ๋ณด๋‚ด์•ผํ–ˆ๋˜ ๋ฐ์ดํ„ฐ๋ฅผ ์–ป๋Š” ๊ณผ์ •์ด GraphQL์—์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ์ฟผ๋ฆฌ ํ•œ๋ฒˆ์œผ๋กœ ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋ฉฐ ์ •ํ™•ํžˆ ํ•„์š”๋กœ ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋“ค๋งŒ ์š”์ฒญํ•  ์ˆ˜ ์žˆ๋‹ค.
์š”์ฒญ
{ user(id: 1) { name posts { title commentCount } } }
์‘๋‹ต
{ "data": { "user": { "name": "Lucas", "posts": [ { "title": "GraphQL", "commentCount": 12 }, { "title": "REST API vs GraphQL", "commentCount": 5 } ] } } }

์Šคํ‚ค๋งˆ (Schema)

GraphQL ์„œ๋ฒ„ ๊ตฌํ˜„์„ ์œ„ํ•ด์„œ๋Š” API์˜ ๊ทœ์น™์„ ์ •์˜ํ•œ ๊ณ„์•ฝ์„œ์ด์ž, ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ์˜ ์ฒญ์‚ฌ์ง„์ธ ์Šคํ‚ค๋งˆ ์ •์˜๊ฐ€ ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•˜๋‹ค. ์Šคํ‚ค๋งˆ์—๋Š” ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ฟผ๋ฆฌ์™€ ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด ๋ช…์„ธ๋˜๋ฉฐ ์ด๋ฅผ ํ†ตํ•ด ์ž๋™ ๋ฌธ์„œํ™”, ํƒ€์ž… ๊ฒ€์ฆ, ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜ ์ƒ์Šน ๋“ฑ์˜ ์ด์ ์„ ์ทจํ•  ์ˆ˜ ์žˆ๋‹ค.
์˜ˆ์‹œ
type User { id: ID! name: String! posts: [Post!]! } type Post { id: ID! title: String! commentCount: Int! } type Query { user(id: ID!): User }

REST์™€์˜ ์ฐจ์ด

ํŠน์ง•
REST
GraphQL
๋ฐ์ดํ„ฐ ๊ตฌ์กฐ
๊ณ ์ •๋œ ์—”๋“œํฌ์ธํŠธ ๊ธฐ๋ฐ˜
ํด๋ผ์ด์–ธํŠธ ์ •์˜ํ˜• ์ฟผ๋ฆฌ ๊ธฐ๋ฐ˜
ํ†ต์‹  ๋ฐฉ์‹
HTTP Method ์ค‘์‹ฌ
Query/Mutation ์ค‘์‹ฌ
๋ฐ์ดํ„ฐ ์š”์ฒญ
ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์—ฌ๋Ÿฌ ์—”๋“œํฌ์ธํŠธ์— ์š”์ฒญ์„ ๋ณด๋‚ด์•ผ ํ•จ
๋‹จ์ผ ์—”๋“œํฌ์ธํŠธ์— ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ฟผ๋ฆฌ ์–ธ์–ด๋กœ ์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ๋ฅผ ๋ช…์‹œ
์‘๋‹ต ๋ฐ์ดํ„ฐ
ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ ์™ธ์— ์ถ”๊ฐ€ ์ •๋ณด๊ฐ€ ํฌํ•จ๋  ์ˆ˜ ์žˆ์Œ
์š”์ฒญํ•œ ๋ฐ์ดํ„ฐ๋งŒ ๋ฐ›์Œ (Over-fetching ๋ฌธ์ œ ํ•ด๊ฒฐ)
๋ฒ„์ „ ๊ด€๋ฆฌ
/v1, /v2 ๋“ฑ์œผ๋กœ ๋ถ„๋ฆฌ
์Šคํ‚ค๋งˆ ๋ณ€๊ฒฝ์œผ๋กœ ๋Œ€์‘
๋ฌธ์„œํ™”
Swagger/OpenAPI
Schema ์ž์ฒด๊ฐ€ ๋ฌธ์„œ

Mutation

Mutation์€ GraphQL์—์„œ ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ์— ์‚ฌ์šฉ๋˜๋Š” ์–‘์‹์œผ๋กœ REST์˜ POST, PUT, DELETE ๋ฉ”์†Œ๋“œ์— ํ•ด๋‹นํ•˜๋Š” ๊ฐœ๋…์ด๋‹ค.
์š”์ฒญ
mutation { createPost(input: { title: "์ƒˆ ๊ธ€", userId: 1 }) { id title } }
์‘๋‹ต
{ "data": { "createPost": { "id": 42, "title": "์ƒˆ ๊ธ€" } } }
mutation์—์„œ๋„ ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ • ํ›„ ๋‹ค์‹œ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ๋ฐ›๋Š” ํ๋ฆ„์„ ๋”ฐ๋ฅธ๋‹ค.

๋‹จ์ 

๋ฌผ๋ก  GraphQL์ด ์™„๋ฒฝํ•œ ๋Œ€์•ˆ์€ ์•„๋‹ˆ๋ฉฐ ์•„๋ž˜์™€ ๊ฐ™์€ ๋‹จ์ ๋“ค์„ ๊ฐ€์ง„๋‹ค.
  • ์—”๋“œํฌ์ธํŠธ๊ฐ€ ํ•˜๋‚˜๋ฟ์ด๊ธฐ ๋•Œ๋ฌธ์— ์บ์‹ฑ ๊ตฌํ˜„์ด ์–ด๋ ต๋‹ค.
  • ๋ฐ์ดํ„ฐ ์ฟผ๋ฆฌ ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ์„œ๋ฒ„ ๋ณต์žก๋„๊ฐ€ ๋†’์•„์ง„๋‹ค.
  • ๋‹จ์ˆœํ•œ API์—” ์˜คํžˆ๋ ค ๊ณผํ•œ ์„ ํƒ์ผ ์ˆ˜ ์žˆ๋‹ค.
ย 
โ‡’ React ๊ธฐ๋ฐ˜ ๋Œ€์‹œ๋ณด๋“œ, ๋ชจ๋ฐ”์ผ ์•ฑ ๊ฐ™์ด ํ”„๋ก ํŠธ์—”๋“œ ๊ทœ๋ชจ๊ฐ€ ํฌ๊ณ  ๋น„์ค‘์ด ๋†’์€ ๋งŽ์€ ํ™˜๊ฒฝ์— ์ ํ•ฉํ•˜๋ฉฐ ๋‹จ์ˆœํ•œ CRUD ์œ„์ฃผ์˜ ์„œ๋น„์Šค์—์„œ๋Š” ์—ฌ์ „ํžˆ REST๊ฐ€ ํšจ์œจ์ ์ด๋‹ค.