๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Studying Web Development/Free Memo

GraphQL์ด๋ž€? ์“ฐ๋Š” ์ด์œ  ์š”์•ฝ์ •๋ฆฌ

by Esoolgnah 2022. 8. 10.
728x90

 

๐Ÿ“Œ GraphQL์ด๋ž€?

  • facebook์—์„œ ๋งŒ๋“  ์ƒˆ๋กœ์šด API ํ‘œ์ค€์–ธ์–ด
  • ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ์กฐ์ •, ๋ฐ์ดํ„ฐ ์ฃผ๊ณ  ๋ฐ›๊ธฐ ๊ฐ€๋Šฅ
  • Graph + Query Language

 

GraphQL์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ธํ„ฐํŽ˜์ด์Šค(API)๋ฅผ ์œ„ํ•œ ์ฟผ๋ฆฌ ์–ธ์–ด์ด์ž ์„œ๋ฒ„์ธก ๋Ÿฐํƒ€์ž„์œผ๋กœ ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์š”์ฒญํ•œ ๋งŒํผ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋ฐ ์šฐ์„  ์ˆœ์œ„๋ฅผ ๋‘ก๋‹ˆ๋‹ค.

GraphQL(์ดํ•˜ GQL)์€ Structed Query Language(์ดํ•˜ SQL)์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ฟผ๋ฆฌ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ GQL๊ณผ SQL์˜ ์–ธ์–ด์  ๊ตฌ์กฐ ์ฐจ์ด๋Š” ๋งค์šฐ ํฝ๋‹ˆ๋‹ค. ๋˜ํ•œ GQL๊ณผ SQL์ด ์‹ค์ „์—์„œ ์“ฐ์ด๋Š” ๋ฐฉ์‹์˜ ์ฐจ์ด๋„ ๋งค์šฐ ํฝ๋‹ˆ๋‹ค. GQL๊ณผ SQL์˜ ์–ธ์–ด์  ๊ตฌ์กฐ ์ฐจ์ด๊ฐ€ ํ™œ์šฉ ์ธก๋ฉด์—์„œ์˜ ์ฐจ์ด๋ฅผ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค. ์ด ๋‘˜์€ ์• ์ดˆ์— ํƒ„์ƒ ์‹œ๊ธฐ๋„ ๋‹ค๋ฅด๊ณ  ๋ฐฐ๊ฒฝ๋„ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

SQL์€ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์‹œ์Šคํ…œ์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ด ๋ชฉ์ ์ด๊ณ , GQL์€ ์›น ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ ๋ถ€ํ„ฐ ํšจ์œจ์ ์œผ๋กœ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ด ๋ชฉ์ ์ž…๋‹ˆ๋‹ค. SQL์˜ ๋ฌธ์žฅ(statement)์€ ์ฃผ๋กœ ๋ฐฑ์•ค๋“œ ์‹œ์Šคํ…œ์—์„œ ์ž‘์„ฑํ•˜๊ณ  ํ˜ธ์ถœ ํ•˜๋Š” ๋ฐ˜๋ฉด, GQL์˜ ๋ฌธ์žฅ์€ ์ฃผ๋กœ ํด๋ผ์ด์–ธํŠธ ์‹œ์Šคํ…œ์—์„œ ์ž‘์„ฑํ•˜๊ณ  ํ˜ธ์ถœ ํ•ฉ๋‹ˆ๋‹ค.

 

๐Ÿ“Œ GraphQL์„ ์“ฐ๋Š” ์ด์œ 

  • endpoint๊ฐ€ 1๊ฐœ์ž…๋‹ˆ๋‹ค. ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ ์‚ฌ์šฉ์ด ์ฆ๋Œ€ํ•˜๋Š” ์š”์ฆ˜, ํšจ๊ณผ์ ์ธ ๋ฐ์ดํ„ฐ ๋กœ๋”ฉ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  • ํ•œ๋ฒˆ์˜ ์š”์ฒญ์œผ๋กœ ์›ํ•˜๋Š” ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์š”์ฒญํ•ด์„œ ๊ฐ€์ ธ์˜ค๊ธฐ ๋•Œ๋ฌธ์— ๊ธฐ์กด์˜ REST API๋งŒ์„ ์‚ฌ์šฉํ•  ๋•Œ
    ๋ฐœ์ƒํ–ˆ๋˜ Overfetching์ด๋‚˜ Underfetching ๋“ฑ์˜ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  • ๊ธฐ์ข…์— ์ƒ๊ด€์—†๋Š” API๊ธฐ ๋•Œ๋ฌธ์— ํŠน์ •๊ธฐ์ข…์„ ์ฐจ๋ณ„ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. 

 

๐Ÿ“Œ Overfetching

์›ํ•˜๋Š” data ์ด์ƒ์˜ ์ •๋ณด๋ฅผ ์š”์ฒญํ•˜๋Š” ๊ฒƒ. data ์ „์ฒด ๋ฆฌ์†Œ์Šค ๋‚ญ๋น„ ๋ฐœ์ƒ

๐Ÿ“Œ Underfetching

์›ํ•˜๋Š” data์˜ ์ •๋ณด๋ฅผ ์š”์ฒญํ•˜๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ๋ฒˆ ์š”์ฒญ์„ ๋ณด๋‚ด๋Š” ๊ฒƒ. ๋„คํŠธ์›Œํฌ๋ฅผ ํ†ตํ•ด ์—ฌ๋Ÿฌ๋ฒˆ ์ ‘๊ทผํ•ด์„œ ๋ฆฌ์†Œ์Šค ๋‚ญ๋น„ ๋ฐœ์ƒ

 

 

์ฐธ๊ณ 

 

 

GraphQl ๋”ฐ๋ผ์žก๊ธฐ 1ํƒ„ - GraphQL ๊ฐœ๋…์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž.

ใ…ŽGraphQL.. ๋„๋Œ€์ฒด ๋„ˆ ๋ญ๋‹ˆ ??~~ Apllo๋ฅผ ๋ฐฐ์›Œ๋ณด๊ธฐ์ „์— GraphQL๋ถ€ํ„ฐ ๋งˆ์Šคํ„ฐ ํ•ด๋ณด์ž~~ ๊ทธ์ „์—... gql์€ database ๊ธฐ์ˆ  ์ธ๊ฐ€?? No..!! API์— ์ ‘๋ชฉ์‹œํ‚ฌ์ˆ˜ ์žˆ๋Š” queryํ˜• ์–ธ์–ด๋‹ค. gql์€ React๋‚˜ js ๊ฐœ๋ฐœ์‹œ์—๋งŒ ๊ฐ€๋Šฅํ•œ..

koras02.tistory.com

 

 

GraphQL(๊ทธ๋ž˜ํ”„ QL) ๊ฐœ๋…, ์‚ฌ์šฉ, ์šฉ์–ด, ์žฅ๋‹จ์  ๋ฐ ๋ฌด๋ฃŒ ๋‹ค์šด๋กœ๋“œ

GraphQL์ด๋ž€ ์ฟผ๋ฆฌ ์–ธ์–ด์ด๋ฉฐ, ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ธํ„ฐํŽ˜์ด์Šค(API) ์„œ๋ฒ„ ๋Ÿฐํƒ€์ž„์œผ๋กœ์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. swagger ๋ฐ javascript api ์–ธ์–ด ํ˜ธ์ถœ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

www.redhat.com

 

 

GraphQL ๊ฐœ๋…์žก๊ธฐ

GraphQL์€ ํŽ˜์ด์Šค๋ถ์—์„œ ๋งŒ๋“  ์ฟผ๋ฆฌ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. GrpahQL์€ ์š”์ฆ˜ ๊ฐœ๋ฐœ์ž๋“ค ์‚ฌ์ด์—์„œ ์ž์ฃผ ์ž…์— ์˜ค๋ฅด๋‚ด๋ฆฌ๊ณ  ์žˆ์œผ๋‚˜, 2019๋…„ 7์›” ๊ธฐ์ค€์œผ๋กœ ์–ผ๋ฆฌ์Šคํ…Œ์ด์ง€(early-stage)์ž„์€ ๋ถ„๋ช…ํ•ฉ๋‹ˆ๋‹ค. ๊ตญ๋‚ด์—์„œ GraphQL API๋ฅผ O

tech.kakao.com

 

 

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€