graphQl

1. ๊ฐœ๋ฐœ๋ฐฐ๊ฒฝ

ํŽ˜์ด์Šค๋ถ์ด ๊ฐœ๋ฐœํ•œ Query Language

  • Query ๋ž€ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์ •๋ณด๋ฅผ ์š”์ฒญํ•˜๋Š” ๊ฒƒ์œผ๋กœ, Query Language๋Š” ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ์–ธ์–ด ๋ผ๊ณ  ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.

GraphQL์€ REST API์˜ ๋‹จ์ ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ๋˜์—ˆ๋Š”๋ฐ, ๊ฐ€์žฅ ํฐ ์žฅ์ ์œผ๋กœ Endpoint๊ฐ€ "ํ•˜๋‚˜" ๋ผ๋Š” ์ ์ด๋‹ค.

Rest API๋Š” ์ •์˜๋œ ์—ฌ๋Ÿฌ Endpoint์— ์•ก์„ธ์Šคํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ง‘ํ•ด์•ผ ํ•œ๋‹ค. ํด๋ผ์ด์–ธํŠธ์—์„œ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋Š” ์–ธ์ œ๋“  ๋ณ€ํ™”ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, Rest API๋Š” ๊ณ ์ •๋˜์–ด ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ง‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ•„์š”์ด์ƒ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›๊ฑฐ๋‚˜(Overfetching), ํ•„์š”ํ•œ ์ •๋ณด๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.(Underfetching)

Endpoint๋ฅผ ํ•˜๋‚˜๋กœ ์„ค์ •ํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ๊ตฌ์ถ•ํ•œ๋‹ค๋ฉด, ์—ฌ๋Ÿฌ Endpoint์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตฌ์ถ•ํ•˜์ง€ ์•Š์•„๋„ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์œ ์—ฐํ•˜๊ฒŒ ๋Œ€์ฒ˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

2. GraphQl ์„œ๋ฒ„์–ธ์–ด์™€ ํด๋ผ์ด์–ธํŠธ ์ข…๋ฅ˜

์„œ๋ฒ„์–ธ์–ด ์ข…๋ฅ˜

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

  • ํŒŒ์ด์ฌ

  • ๋ฃจ๋น„

  • ์ž๋ฐ”

  • C#

  • ์Šค์นผ๋ผ

  • Go

  • PHP

ํด๋ผ์ด์–ธํŠธ ์ข…๋ฅ˜

  1. Apollo

  2. Relay

3. GraphQL ์˜ ํšจ์œจ์„ฑ

1. URL, View๋ฅผ ์ •์˜ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค.

  • API๋ฅผ ๋งŒ๋“œ๋Š” ์‹œ๊ฐ„์ด ๋งค์šฐ ์ ˆ์•ฝ๋œ๋‹ค.

2. ํ”„๋ก ํŠธ์—”๋“œ์—์„œ fetch๋กœ API๋ฅผ ๊ฐ€์ ธ์˜ค์ง€ ์•Š์•„๋„ ๋œ๋‹ค.

  • ํ”„๋ก ํŠธ์—”๋“œ ์ชฝ์—์„œ Fetch๋กœ API๋ฅผ ๊ฐ€์ ธ์™€ JSON, Response๋“ฑ์„ ์ž‘์—…ํ•˜์ง€ ์•Š์•„๋„ ๋œ๋‹ค.

  • ๋Œ€ํ‘œ์ ์œผ๋กœ Apollo๋ฅผ ํ™œ์šฉํ•˜๋ฉด, fetch, JSON ์ž‘์—…์„ ๋ชจ๋‘ ์ง€์›ํ•˜์—ฌ ์ค€๋‹ค.

3. React์™€ ํ•จ๊ป˜ ์“ฐ๋ฉด ๋งค์šฐ ๋†’์€ ํšจ์œจ์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.

  • End-Point๊ฐ€ ํ•˜๋‚˜ ์ด๊ณ , ๋งŽ์€ ๋ถ€๋ถ„์„ ์…‹ํŒ…ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค

  • React ๋˜ํ•œ ํŽ˜์ด์Šค๋ถ์ด ๊ฐœ๋ฐœํ–ˆ๊ธฐ ๋•Œ๋ฌธ์—, React์™€ ํ˜ธํ™˜ํ•˜๋Š” ๋‹ค์–‘ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์กด์žฌํ•˜๊ณ , ์ปค๋ฎค๋‹ˆํ‹ฐ ์ง€์›๋„ ์žˆ๋‹ค.

4. ๋ฆฌ๋•์Šค๋ฅผ ๋Œ€์ฒดํ•  ์ˆ˜ ์žˆ๋‹ค!

(๋” ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ฆฌ๋•์Šค๋ฅผ ๋Œ€์ฒดํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด ์‹ ๊ธฐํ–ˆ๋‹ค.)

GraphQL + Apollo ์กฐํ•ฉ์˜ ํšจ์œจ

  • GraphQL๋กœ Local state๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.

Last updated