๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
"๊ณต๋ถ€" ๐‘Ÿ๐‘’๐‘๐‘œ๐‘Ÿ๐‘‘/๐น๐‘Ÿ๐‘œ๐‘›๐‘ก๐‘’๐‘›๐‘‘

[TIL] REST-API์™€ GraphQL-API์˜ ์ฐจ์ด์ 

by เท† Yoni เท† 2023. 2. 28.
728x90

[์ด๋ฏธ์ง€ ์ถœ์ฒ˜] https://graphql.org/

GraphQL์ด๋ž€?

GraphQL์€ ์ตœ๊ทผ ๊ฐœ๋ฐœ์ž๋“ค ์‚ฌ์ด์—์„œ ๋น ๋ฅธ ์†๋„๋กœ ์ธ๊ธฐ๊ฐ€ ์ƒ์Šน ์ค‘์ด๋‹ค.
์ด GraphQL์€ 2012๋…„์— ํŽ˜์ด์Šค๋ถ์—์„œ ๋งŒ๋“  ์ฟผ๋ฆฌ ์–ธ์–ด์ด๋‹ค.
SQL์˜ QL์ด Query Language์„ ์˜๋ฏธํ•˜๋Š”๋ฐ SQL์€ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์‹œ์Šคํ…œ์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ด ๋ชฉ์ ์ด๋ผ๋ฉด, ์ด GraphQL์€ ์›น ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์„ ๋ชฉ์ ์œผ๋กœ ๋งŒ๋“  ์ฟผ๋ฆฌ ์–ธ์–ด์ธ ๊ฒƒ์ด๋‹ค. ์ด GraphQL์€ ํ˜„์žฌ Facebook, Airbnb, Github ๋“ฑ์˜ ์œ ๋ช…ํ•œ ์‚ฌ์ดํŠธ์—์„œ ์‚ฌ์šฉ ์ค‘์ธ ํ†ต์‹  ๋ฐฉ๋ฒ•์ด๋ผ๊ณ  ํ•œ๋‹ค.

 

REST-API๋ฅผ ๋‘๊ณ  ์™œ??

๊ทธ๋ ‡๋‹ค๋ฉด ์‚ฌ๋žŒ๋“ค์ด ํ†ต์ƒ์ ์œผ๋กœ ๋งŽ์ด๋“ค ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” REST-API๋ฅผ ๋‘๊ณ  ์™œ GraphQL์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ธ์ง€ ๊ถ๊ธˆํ–ˆ๋‹ค.
REST-API์™€ GraphQL์˜ ์ฐจ์ด์ ์œผ๋กœ๋Š” ํฌ๊ฒŒ 3๊ฐ€์ง€๊ฐ€ ์กด์žฌํ•œ๋‹ค.

1. ํ•จ์ˆ˜ ์ด๋ฆ„์˜ ์ฐจ์ด

๋งŒ์ผ ๋„ค์ด๋ฒ„์—์„œ 1๋ฒˆ ๊ฒŒ์‹œ๊ธ€ ์กฐํšŒ๋ผ๋Š” API๊ฐ€ ์žˆ๋‹ค๋ฉด,

REST-API์—์„  https://naver.com/board/1 ์ด๋Ÿฐ์‹์œผ๋กœ API ์ด๋ฆ„์ด ํ™ˆํŽ˜์ด์ง€ ์ฃผ์†Œ์ฒ˜๋Ÿผ ์ƒ๊ฒผ๋‹ค.

ํ•˜์ง€๋งŒ, GraphQL์—์„  API ์ด๋ฆ„์ด board(1) ์ด๋ ‡๊ฒŒ ์ผ๋ฐ˜์ ์ธ ํ•จ์ˆ˜์ฒ˜๋Ÿผ ์ƒ๊ฒผ๋‹ค.

 

  axios (REST-API) apollo-client (GraphQL-API)
์กฐํšŒ READ GET QUERY
์ƒ์„ฑ CREATE POST MUTATION
์ˆ˜์ • UPDATE PUT
์‚ญ์ œ DELETE DELETE

 

axios ์š”์ฒญ ์˜ˆ์‹œ

import axios from 'axios'

const result = axios.get(API ์ด๋ฆ„ ์ž…๋ ฅ)
const result = axios.post(API ์ด๋ฆ„ ์ž…๋ ฅ)
const result = axios.put(API ์ด๋ฆ„ ์ž…๋ ฅ)
const result = axios.delete(API ์ด๋ฆ„ ์ž…๋ ฅ)

 

apollo-client ์š”์ฒญ ์˜ˆ์‹œ

import { useMutation, useQuery } from '@apollo/client'

const result = useMutation(API ์ด๋ฆ„ ์ž…๋ ฅ)
const result = useQuery(API ์ด๋ฆ„ ์ž…๋ ฅ)

 

2. response ๊ฒฐ๊ณผ๋ฌผ์˜ ์ฐจ์ด

์‚ฌ์‹ค ์ด ํŠน์ง•์ด GraphQL์˜ ๊ฐ€์žฅ ํฐ ์žฅ์ ์ด ์•„๋‹๊นŒ ์‹ถ๋‹ค.

REST-API๋Š” response ๊ฒฐ๊ณผ๋กœ ๋ฐฑ์—”๋“œ์—์„œ ๋ณด๋‚ด์ฃผ๋Š” ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์•ผ๋งŒ ํ•œ๋‹ค.

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

RESTful์˜ ๊ฒฝ์šฐ๋Š” ํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค ๋ณ„๋กœ ๋ณ„๋„ ์š”์ฒญ์„ ๋ณด๋‚ด์•ผ ํ–ˆ๋‹ค๋ฉด, GraphQL์€ ์›ํ•˜๋Š” ์ •๋ณด๋ฅผ ํ•˜๋‚˜์˜ ์ฟผ๋ฆฌ์— ๋ชจ๋‘ ๋‹ด์•„ ์š”์ฒญ์„ ๋ณด๋‚ผ ์ˆ˜ ์žˆ์–ด HTTP ์š”์ฒญ ํšŸ์ˆ˜๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค. ๋˜ํ•œ, HTTP์˜ ์‘๋‹ต ์‚ฌ์ด์ฆˆ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค. ์ด GraphQL์„ Facebook์ด ๊ฐœ๋ฐœํ•œ ์ดˆ๊ธฐ ์ด์œ  ์ค‘ ํ•˜๋‚˜๊ฐ€ ๋ชจ๋ฐ”์ผ ์‚ฌ์šฉ์˜ ์ฆ๊ฐ€ ๋•Œ๋ฌธ์ด๋ผ๊ณ  ํ•œ๋‹ค. ๋ชจ๋ฐ”์ผ์—์„œ ํ†ต์‹ ์„ ํšจ์œจ์ ์œผ๋กœ ํ•˜๊ธฐ ์œ„ํ•ด์„  ๋ฐ์ดํ„ฐ ์‚ฌ์ด์ฆˆ๋ฅผ ์ตœ์†Œํ™”ํ•˜์—ฌ ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์˜ ๋ถ€๋‹ด์„ ์ค„์—ฌ์ค˜์•ผ ํ•˜๊ธฐ์— ์‘๋‹ต ์‚ฌ์ด์ฆˆ๋ฅผ ์ค„์—ฌ์ค„ ์ˆ˜ ์žˆ๋Š” GraphQL์„ ๊ฐœ๋ฐœํ•œ ๊ฒƒ์ด๋‹ค.

 

3. ์„ค์น˜ํ•ด์•ผ ํ•  ํ”„๋กœ๊ทธ๋žจ์˜ ์ฐจ์ด

ํ†ต์‹  ๋ฐฉ๋ฒ•์˜ ์ฐจ์ด๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ๋‹น์—ฐํžˆ ์„ค์น˜ํ•ด์•ผ ํ•  ํ”„๋กœ๊ทธ๋žจ๋„ ๋‹ค๋ฅด๋‹ค.

ํ”„๋กœ์ ํŠธ๋ฅผ ํ•ด๋ณธ ์‚ฌ๋žŒ๋“ค์€ ์•Œ๊ฒ ์ง€๋งŒ, REST-API๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„  axios๋ฅผ ์„ค์น˜ํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.

GraphQL์€ axios ๋Œ€์‹  apollo-client๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.

 

๊ทธ๋Ÿผ REST-API๋Š” ๋ชฐ๋ผ๋„ ๋˜๋‚˜์š”?

๋ฌผ๋ก  ์•„๋‹ˆ๋‹ค. GraphQL๋„ ๋‹น์—ฐํžˆ ๋‹จ์ ์ด ์กด์žฌํ•œ๋‹ค.

 

1. ํŒŒ์ผ ์—…๋กœ๋“œ ๐Ÿ˜ข

GraphQL์€ ์›์น™์ ์œผ๋กœ multipart/from-data ํ˜•์‹์„ ๋ฐ›์„ ์ˆ˜ ์—†๊ณ  application/json ํ˜•์‹๋งŒ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค. File ์ „์†ก ๋“ฑ Text๋งŒ์œผ๋กœ๋Š” ํ•˜๊ธฐ ํž˜๋“  ๋‚ด์šฉ๋“ค์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋ณต์žกํ•ด์ง€๋Š” ๊ฒƒ์ด๋‹ค. GraphQL์˜ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•  ๋•Œ ํŒŒ์ผ ์ „์†ก์ด ์•„์˜ˆ ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ, multipart๋ฅผ json์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ๋Š” ๋ฏธ๋“ค์›จ์–ด๋‚˜ ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ด์„œ ๊นŒ๋‹ค๋กญ๋‹ค๋Š” ๋‹จ์ ์ด ์กด์žฌํ•œ๋‹ค.

 

2. Query์˜ ํฌ๊ธฐ ๐Ÿ˜ข

๊ณ ์ •๋œ ์š”์ฒญ๊ณผ ์‘๋‹ต๋งŒ ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋„ Query๋ฅผ ๋ชจ๋‘ ์ž‘์„ฑํ•ด์ฃผ์–ด์•ผ ํ•˜๊ธฐ์— REST-API๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋ณด๋‹ค ํฌ๊ธฐ๊ฐ€ ๋” ์ปค์ง„๋‹ค๋Š” ๋‹จ์ ์ด ์กด์žฌํ•œ๋‹ค.

 

3. ๋ณต์žกํ•œ ์บ์‹ฑ ๐Ÿ˜ข

HTTP์˜ ์บ์‹ฑ ์ „๋žต์€ ๊ฐ๊ฐ์˜ URL์— ์ €๋งˆ๋‹ค์˜ ์ •์ฑ…์„ ์„ค์ •ํ•˜๋Š” ํ˜•์‹์œผ๋กœ ์ด๋ฃจ์–ด์ง„๋‹ค.

๋ฐ˜๋ฉด์—, GraphQL์€ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ํ•˜๋‚˜์˜ URL์„ ๋‘๊ณ  ์—ฌ๊ธฐ์— ์ฟผ๋ฆฌ๋ฅผ ์ „์†กํ•˜์—ฌ ์‘๋‹ต์„ ๋ฐ›๋Š” ํ˜•์‹์œผ๋กœ ์ž‘๋™๋œ๋‹ค. ๊ทธ๋ž˜์„œ GraphQL์€ HTTP์—์„œ ์ œ๊ณตํ•˜๋Š” ์บ์‹ฑ ์ „๋žต์„ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. ๋”ฐ๋ผ์„œ, GraphQL๋งŒ์˜ ์บ์‹ฑ ๋ฐฉ์‹์„ ์ฐพ์•„์•ผ ํ•œ๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ๋‹ค.

 

๋”ฐ๋ผ์„œ, ์ƒํ™ฉ์— ๋”ฐ๋ผ REST-API๊ฐ€ ๋” ํšจ์œจ์ ์ธ ๊ฒฝ์šฐ๊ฐ€ ์กด์žฌํ•œ๋‹ค.

๊ทธ๋ฆฌ๊ณ ,  ํ˜„์žฌ๊นŒ์ง€๋Š” ์•„์ง REST ๋ฐฉ์‹์ด ๋” ๋„๋ฆฌ ์“ฐ์ด๊ณ  ์žˆ์–ด์„œ REST-API์˜ ์‚ฌ์šฉ๋ฒ•๋„ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•œ๋‹ค. ๋˜ํ•œ, Open API๋“ค์ด ๋Œ€๋ถ€๋ถ„ REST-API๋กœ ์ œ๊ณต๋œ๋‹ค.

728x90

๋Œ“๊ธ€