โก ์งง๊ณ ๊ตต์ ์ ์ฒด 90๋ถ ๊ฐ์ข! ์ฌ์ดํธ์ ์ฝ๋๋ค์ ๋ณต๋ถํ๋ฉฐ ๋น ๋ฅด๊ฒ GraphQL์ ๋ฐฐ์ฐ๊ณ ์ํด๋ก ์ฌ์ฉ๋ฒ์ ์ตํ์ธ์.
GraphQL์ ๊ฐ๋ ๊ณผ ์ฌ์ฉ๋ฒ
Apollo๋ฅผ ์ด์ฉํด GraphQL ๋ฐฑ์๋ ์๋ฒ๋ฅผ ๊ตฌ์ถํ๊ธฐ
Apollo๋ฅผ ์ด์ฉํด GraphQL x ๋ฆฌ์กํธ ๊ธฐ๋ฐ ํ๋ก ํธ์๋ ๋ง๋ค๊ธฐ
์๋น์ค๋ฅผ ๊ตฌ์ฑํ๋ ์ํํธ์จ์ด๋ค๊ฐ์๋ ์์์ด ๋ง์ ๋ฐ์ดํฐ๊ฐ ์ค๊ณ ๊ฐ๋ฉฐ ์ํต์ด ์ด๋ค์ง๋๋ค. GraphQL์ ๊ทธ๋์ ๋๋ฆฌ ์ฌ์ฉ๋๋ REST API์๋ ๋ค๋ฅธ ๋ฐฉ์์ ์ ๋ณด๊ตํ์ด์์. ์๋น์ค์ ํน์ฑ์ ๋ฐ๋ผ, ๋ณด๋ค ํจ์จ์ ์ด๊ณ ๊ฐํธํ๊ณ ๋ ๊ฐ๋ ฅํ ๋ฐฉ์์ผ๋ก ํ๋ก ํธ์๋์ ๋ฐฑ์๋, ์๋ฒ์ ๋ชจ๋ฐ์ผ ์ฑ ๋ฑ ์์๋ค๊ฐ์ ์ํต์ ๊ตฌํํ ์ ์๊ฒ ๋ฉ๋๋ค.
GraphQL๋ก ์๋น์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํด์๋, ๊ทธ ํ์์ ๋ฐ๋ผ ํ๋ก ํธ์๋์์ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ , ๋ฐฑ์๋์์ ์ด๋ฅผ ๋ฐ์ ์์ ํ์ฌ ์์ ์ ์ฒ๋ฆฌํ ์ ์๋๋ก ํด์ฃผ๋ ์ํํธ์จ์ด๊ฐ ํ์ํฉ๋๋ค. Apollo๋ ๊ฐ๊ฐ ๋ฐฑ์๋ ์๋ฒ, ๊ทธ๋ฆฌ๊ณ React ๋ฑ์ ํ๋ก ํธ ์น์ด๋ ๋ชจ๋ฐ์ผ ์ฑ์์ GraphQL์ ์ฌ์ฉํ ์ ๋ณด๊ตํ์ ๊ฐํธํ๊ฒ ๊ตฌํํ ์ ์๋๋ก ํด์ฃผ์ฃ .
GraphQL์ ์ดํดํ๊ณ Apollo๋ฅผ ๋ค๋ฃฐ ์ค ์๊ฒ ๋๋ฉด, ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ์น ๋๋ ๋ชจ๋ฐ์ผ ์ฑ ์๋น์ค๋ฅผ ๋ณด๋ค ๋น ๋ฅด๊ณ ๊ฐํธํ๊ฒ ๋ง๋ค ์ ์๊ฒ ๋ฉ๋๋ค. REST API์ GraphQL ๊ฐ๊ฐ์ ๊ฐ์ ์ ํ์ ํ๊ณ ์ด๋ค์ ์ ์ฌ์ ์์ ํ์ฉํด์ ์๋น์ค์ ๋ฅ๋ฅ ๊ณผ ์ฑ๋ฅ์ ์ต๋ํ ๋์ด์ฌ๋ฆด ์๋ ์์ฃ .
์ํํ GraphQL & Apollo ๊ฐ์ข๋ ์ด 90๋ถ์ด๋ผ๋ ์งง์ ์๊ฐ๋์, GraphQL๊ณผ Apollo์ ๊ธฐ์ด์ง๋ง ํต์ฌ์ธ ๋ด์ฉ๋ค์ ๋น ๋ฅด๊ฒ ๋ค๋ฃน๋๋ค. ์์์ ๋์ผ๋ก ํ ๋ฒ ํ๋ ๊ฒ๋ง์ผ๋ก๋, GraphQL๊ณผ Apollo๋ฅผ ๋ฐ๋ก ์ดํดํ๊ณ ํ์ฉํด์ ์๋น์ค๋ฅผ ๋ง๋ค์ด๋ณผ ์ ์๋๋ก ๊ธฐํํ์ด์. ์ค์ต์ ์งํํ๋ฉฐ ์ฝ๋๋ค์ ํ์ํ ๊ณณ์ ๋ถ์ฌ๋์ ์ ์๋๋ก ๊ฐ์์ฉ ํ์ด์ง์ ๋ชจ๋ ์ฝ๋ ์กฐ๊ฐ๋ค์ด ์ค๋ ค ์์ต๋๋ค. ๊ฐ์ฌ์ ํ์ดํ์ ๊ธฐ๋ค๋ฆด ํ์ ์์ด, ์์์์ํ๊ฒ ์งํ๋๋ ํ๋ฉด์ผ๋ก ๋น ๋ฅด๊ฒ ์ง์์ ์ต๋ํ ์ ์์ต๋๋ค.
์ฌ๋ฌ๋ถ์ ์๊ฐ์ ์์คํ๋๊น์. ๐
์ฝ๋๋ ๋ฐ๋ก๋ฐ๋ก ๋ณต๋ถํด์ ์ฌ์ฉํ์ธ์!
ํน์ ๊ฐ๋
์ด ํ์ํ ๋ถ๋ถ์ ํ์ด์ง์ ์ฝ์
๋ ์ฌ์ด ์์ฝ์์์ผ๋ก ๋ณด์ถฉํฉ๋๋ค.
1. GraphQL์ด ๋ญ๊ณ ์ ์ฐ๋์?
GraphQL์ด ์ ํ์ํ๋์ง, ์ด๋ค ํน์ฑ์ ๊ฐ๋์ง๋ฅผ REST API์์ ๋น๊ต๋ฅผ ํตํด ์์๋ณด๊ณ , ์ง์ ์ ๋ณด๋ฅผ ์ฃผ๊ณ ๋ฐ์๋ด์ผ๋ก์จ ๊ทธ ์ฌ์ฉ๋ฒ๊ณผ ์ ์ฉ์ฑ์ ์์๋ด
๋๋ค.
2. GraphQL ์๋ฒ ๋ง๋ค์ด๋ณด๊ธฐ
Apollo Server๋ฅผ ์ฌ์ฉํด์ Node.js ๊ธฐ๋ฐ์ ๋ฐฑ์๋ ์๋ฒ๋ฅผ ๊ตฌํํด๋ด
๋๋ค.
3. GraphQL ์๋ฒ ๊น์ด ํ๋ณด๊ธฐ
GraphQL์ ๋ณด๋ค ๋ง์ ๊ธฐ๋ฅ๋ค, ๊ทธ๋ฆฌ๊ณ ์ด๋ฅผ Apollo Server๋ก ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์์๋ด
๋๋ค.
4. GraphQL ํด๋ผ์ด์ธํธ ๋ง๋ค์ด๋ณด๊ธฐ
Apollo Client๋ฅผ ์ฌ์ฉํ์ฌ React ๊ธฐ๋ฐ์ ์น์ฌ์ดํธ์์ GraphQL๋ก ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ์๋น์ค๋ฅผ ๊ตฌํํด๋ด
๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
GraphQL์ ์๊ณ ์ถ์ผ์ ๋ถ๋ค
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก GraphQL๋ฅผ ์ฌ์ฉํ๋ ์๋น์ค๋ฅผ ์ ์ํ๊ณ ์ถ์ผ์ ๋ถ๋ค
ํจ์จ์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ํ์ฉํ๋ ์๋น์ค๋ฅผ ์ ์ํ๊ณ ์ถ์ผ์ ๋ถ๋ค
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML, CSS, JavaScript
ํ๋ก ํธ์๋์ ๋ฐฑ์๋์ ๋ํ ๊ธฐ๋ณธ ๊ฐ๋
(๊ถ์ฅ) React ์ฌ์ฉ๋ฒ
25,648
๋ช
์๊ฐ์
1,062
๊ฐ
์๊ฐํ
77
๊ฐ
๋ต๋ณ
4.9
์
๊ฐ์ ํ์
12
๊ฐ
๊ฐ์
์ ํ๋ธ ์ฑ๋ ์ํํ ์ฝ๋ฉ์ฌ์ ์ ๋ฐฉ์กํ๋ ์ ํ๋ฒ์ด์, IT์์ ๋ค์ ์งํํ๋ ์๊ฐ์
๋๋ค. ํ์คํ ๊ฐ๋ฐ์๋ก ์ผํด ์จ ๊ฒฝํ์ ์ด๋ ค, ์ด๋ ค์ด ํ๋ก๊ทธ๋๋ฐ ๊ฐ๋
๋ค์ ์ด๋ณด์๋ค์ด ์ดํดํ๊ธฐ ์ฝ๋๋ก ๋น์ ์ ์ฌ์ด ์์ , ๋๋ก๋ ์ ๋๋ฉ์ด์
์ผ๋ก ์ค๋ช
ํ๋ ์ปจํ
์ธ ๋ค์ ๋ง๋ค๊ณ ์์ต๋๋ค.
๐ฌ YouTube ์ํํ ์ฝ๋ฉ์ฌ์ ์ฑ๋ (ํด๋ฆญ!)
๐ ์์ฝ์ ์ฑ
๋ค ๋ณด๋ฌ๊ฐ๊ธฐ (ํด๋ฆญ!)
์ ์ฒด
14๊ฐ โ (1์๊ฐ 30๋ถ)
์ ์ฒด
142๊ฐ
4.9
142๊ฐ์ ์๊ฐํ
๋ฌด๋ฃ