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
ํด๋ผ์ด์ธํธ ์ข
๋ฅ
Apollo
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