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๋ก ์ ๊ณต๋๋ค.
'"๊ณต๋ถ" ๐๐๐๐๐๐ > ๐น๐๐๐๐ก๐๐๐' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[TIL] React-Hooks ์์๋ณด๊ธฐ (0) | 2023.06.09 |
---|---|
[TIL] CSS / Sass / SCSS ์ฐจ์ด์ ์์๋ณด๊ธฐ (0) | 2023.06.03 |
UI์ UX๋? ๊ทธ๋ฆฌ๊ณ UI์ UX์ ๊ด๊ณ (0) | 2022.06.27 |
Github Pages ๋ฐฐํฌ ์ favicon ์ ์ฉ ์๋๋ ์ด์ (0) | 2022.04.12 |
[React error] Warning: Expected `onClick` listener to be a function, instead got a value of `object` type. (0) | 2022.04.05 |
๋๊ธ