์ฐจ์ธ๋ API ์ ์ด ๊ธฐ์ ์ธ GraphQL์ ๊ธฐ๋ณธ๊ณผ ๊ณ ๊ธ ์ฌ์ฉ๋ฒ ๊ทธ๋ฆฌ๊ณ GraphQL๋ก ๋ง๋ค์ด ๊ฐ๋ ๊ฐ์์ ํค์ค์คํฌ ์๋น์ค๋ฅผ ํตํด์ ์ค์ ํ๋ก์ ํธ ๊ฒฝํ์ ํ์ตํ๊ฒ ๋ฉ๋๋ค. ๊ฐ์ข๋ 2024๋ 2์ ๊ธฐ์ค ๊ฐ์ฅ ์ต์ ๋ฒ์ ์ธ apollo-server v4๋ก ๊ฐ์ข๋ฅผ ๋ถ๋ถ ์ ๋ฐ์ดํธ ํ์ต๋๋ค.
Graphql
Apollo
MongoDB
Svelte
NodeJs
nodeJs ํ์ผ์ ๋ก๋
ํ ํฐ๊ธฐ๋ฐ ์ธ์ฆ๋ฐฉ๋ฒ
ํ์คํ(์น๋ฐฑ์ค๋ + ์นํ๋ฐํธ์ค๋)
๊ฐ์์ ํค์ค์คํฌ ์๋น์ค ๊ฐ๋ฐ
ํ๋ก ํธ์๋, ๋ฐฑ์๋ ๋ชจ๋ ๊ตฌํ ๊ฐ๋ฅ!
GraphQL ์ค์ ์ ๊ฒฝํํด๋ณด์ธ์ ๐ช
์์ ๊ฐ์ ๊ฐ์ฅ ์ข์ ๋น๊ฒฐ์
๋ฌด์ธ๊ฐ๋ฅผ ์ฒ์๋ถํฐ ๋๊น์ง ๋ง๋ค์ด๋ณด๋ ๊ฒ์
๋๋ค.
์น์ ๋ํ ๊ธฐ์ด๋ฅผ ์กฐ๊ธ์ด๋ผ๋ ๋ฐฐ์ฐ์
จ๋ค๋ฉด
์ด๋ฒ ๊ธฐํ์ ๋ค์ํ ๊ธฐ์ ๋ค๋ก ํ๋ฐ ๋ ๋์๊ฐ ๋ณด์ธ์!
REST API๋ฅผ ๋ณด์, ๋ฐ์ ํ์ฌ ๋ง๋ค์ด์ง ์ฐจ์ธ๋ API ์ ์ด ๊ธฐ์ GraphQL. GraphQL์ ๊ธฐ์ด๋ถํฐ ๊ณ ๊ธ, ์๊ฒฐ๋ ์๋น์ค๊น์ง! ์ด๋ฒ ๊ฐ์๋ฅผ ํตํด ๋ฐฑ์๋, ํ๋ก ํธ์๋, ๋ฐฐํฌ๊น์ง์ ๋ชจ๋ ๊ณผ์ ์ ํ์ตํ ์ ์์ต๋๋ค. ๊ฐ์ด ์ค๋งํธ ๋ฉ๋ดํ ๋ง๋ค์ด ๋ณด์ค๋์?
์ฝ๊ฒ ์ดํดํ ์ ์๋๋ก ์ค๋นํ ๊ฐ์ข ๋ด์ฉ
GraphQL์ ํ์ํ ๋ฌธ๋ฒ๋ค์ ๋ชจ๋ ์ฐจ๊ทผ์ฐจ๊ทผ ํ์ตํ๊ฒ ๋ฉ๋๋ค. ๊ฐ์์ ์ด๋ก ๋ถ๋ถ์ ์ด๋ฏธ์ง, ์ ๋๋ฉ์ด์ ๋ฑ์ ํ์ฉํ์ฌ ์ต๋ํ ์ฝ๊ฒ ์ดํดํ์ค ์ ์๋๋ก ์ค๋นํ์ต๋๋ค.
๊ธฐ๋ณธ ์ฌ์ฉ ๋ฐฉ๋ฒ์ ์ตํ์ผ๋ฉด ๋ค์์ ์ค์ ํ๋ก์ ํธ ๊ตฌํ์ด๊ฒ ์ฃ ? ๊ฐ์์ ํค์ค์คํฌ ์๋น์ค์ธ ์ค๋งํธ ๋ฉ๋ด๋ฅผ GraphQl์ ์ด์ฉํด ๋ง๋ค์ด ๋ณผ ๊ฒ์ ๋๋ค. ๋ฐฑ์๋ ์๋ฒ์์ ํ๋ก ํธ์๋๊น์ง ๋ชจ๋ GraphQL์ ์ค์ฌ์ผ๋ก ๊ตฌํํ๊ฒ ๋ฉ๋๋ค.
๋จ์ํ ์ฝ๋๋ฅผ ๋ฐ๋ผ ํ๋ฉด์ ๋ฐ์ดํฐ๋ฅผ ์ฝ๊ณ ์ฐ๊ณ ์์ ํ๋ ๊ฒ์ ๋์ด, ์๋น์ค๋ฅผ ๋ง๋ค ๋ ๋ฐ์ํ ์ ์๋ ๋ค์ํ ๋ฌธ์ ์ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ํ์ตํ๊ฒ ๋ฉ๋๋ค. Apollo ์บ์ ์ด์ฉ ์ ๋ฐ์ํ๋ ๋ฐ์ดํฐ ์ ํฉ์ฑ ๋ฌธ์ , NodeJS์์ ํ์ผ์ ์ ๋ก๋ํ ๋ ์ฃผ์ํด์ผ ํ ์ , ์๋น์ค์ ๊ผญ ๋ค์ด๊ฐ์ผ ํ๋ ์ธ์ฆ ๋ฑ์ ๋ฐฐ์ธ ์ ์์ต๋๋ค.
์์ฆ ํซํ๊ฒ ๋ ์ค๋ฅด๊ณ ์๋ Svelte๋ผ๋ ํ๋ ์์ํฌ๋ฅผ ์ด์ฉํด ๋ณด๋ค ํจ์จ์ ์ผ๋ก ํ๋ก ํธ์๋ ๊ฐ๋ฐํ๋ ๋ฐฉ๋ฒ๋ ์๋ ค๋๋ ค์. ์ด๋ฅผ ํตํด GraphQL์ ๊ธฐ๋ณธ ์ง์์ ๋ฌผ๋ก , ํ ์๋น์ค์ ๋ฐฑ์๋, ํ๋ก ํธ์๋, ๋ฐฐํฌ๊น์ง ๊ฒฝํํ ์ ์๊ฒ ๋ฉ๋๋ค.
GraphQL์ ๊ด์ฌ์ด ์์ด ์ ๋ฌธ์ ๊ณ ๋ฏผํ๋ ๋ถ
์น ๋ฐฑ์๋, ํ๋ก ํธ์๋ ํ์คํ์ ๊ฒฝํํ๊ณ ์ถ์ ๋ถ
Apollo, Svelte ๋ฑ ์ต์ ๊ธฐ์ ๋ก ๋ง๋๋ ์น์ด ๊ถ๊ธํ ๋ถ
HTML, Javascript ๊ธฐ์ด๋ฅผ ์ตํ ํ ๋ญ๊ฐ ๊ตฌํํ๊ณ ์ถ์ ๋ถ
๋ฌดํ ์คํฌ๋กค๋ก ๊ตฌํ๋ ๋ฉ๋ด ๋ณด๊ธฐ ํ๋ฉด
๋ก๊ทธ์ธ ํ๋ฉด
๋ฉ๋ด ๋ฑ๋ก ํ๋ฉด
์ฃผ๋ฌธ ํ ์๋ ํ๋ฉด
๊ฐ์ ์ฐธ๊ณ ์๋ฃ ๐
Q. GraphQL์ ๋ํ ์ด๋ก ๊ฐ์ ์ธ๊ฐ์?
๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ๋ถํฐ ์ค์ ํ๋ก์ ํธ์ ์ ์ฉํ๋ ๋ฐฉ๋ฒ ๋ชจ๋๋ฅผ ํ์ตํฉ๋๋ค. ํ๋ก์ ํธ์ ๊ฒฝ์ฐ ๋ฐฑ์๋, ํ๋ก ํธ์๋ ๋ชจ๋์์ GraphQL์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ด ์ค๋น๋์ด ์์ต๋๋ค.
Q. ํ๋ก ํธ์๋์ ๊ฒฝ์ฐ Svelte๋ฅผ ๋ฏธ๋ฆฌ ํ์ตํด์ผ ํ๋์?
๊ฐ์ ์ค๊ฐ์ ๊ฐ๋ตํ๊ฒ Svelte์ ๊ธฐ๋ณธ ์ฌ์ฉ ๋ฐฉ๋ฒ์ ์ค๋นํ์ต๋๋ค. ์ค๋นํ ๋ด์ฉ๋ง ์๊ณ ๋์ด๊ฐ์ ๋ค๋ฉด ์ถฉ๋ถํ ๋๊น์ง ํ์ต ๊ฐ๋ฅํ๋ค๊ณ ์๊ฐํฉ๋๋ค.
Q. ๊ฐ๋ฐํ๊ฒฝ์ ์ด๋ป๊ฒ ๋๋์?
๋งฅ, ์๋์ฐ ๊ทธ๋ฆฌ๊ณ ๋ฆฌ๋ ์ค ๋ฑ nodeJs๋ฅผ ์ค์นํ ์ ์๋ ์ด๋ค PC์์๋ ๊ฐ๋ฐํ๊ฒฝ์ ํ์ํ ํ๋ก๊ทธ๋จ์ ์ค์นํ๊ณ ์งํํ ์ ์์ต๋๋ค.
2000๋ ๋ ์ค๋ฐ๋ถํฐ ๋ณธ๊ฒฉ์ ์ผ๋ก ์น๊ฐ๋ฐ์ ์์ํ์ฌ ํ์ฌ๊น์ง ํ๋ฆฌ๋์ ๊ฐ๋ฐ์๋ก ํ๋ํ๊ณ ์์ต๋๋ค. ์ฝ 5๋ ๊ฐ Amplix BI ์๋ฃจ์ ์ค๋ฌด์ ๊ต์ก์ ์งํํ๊ณ ๊ฐ๋ฐ์ ์ง์ํ๋ฉฐ ์๋ก์ด ๊ธฐ์ ์ ํจ์จ์ ์ผ๋ก ์ ๋ฌํ๋ ๊ฒ์ ๋ํ ๋ง์ ๊ฒฝํ๊ณผ ๊ณ ๋ฏผ์ ํ์ต๋๋ค.
ํ์ฌ๋ ๊ฐ๋ฐ ์ ๋ฌด์ ํจ๊ป ๊ฐ๋ฐ์๋ค์๊ฒ ๋์์ด ๋ ๋งํ ์น ๊ด๋ จ ๋ถ์ผ์ ์๋ก์ด ๊ธฐ์ ์ ์ฐพ๊ณ ๊ฐ์ข์ ์ฑ ์ ํตํด ๊ณต์ ํ๊ณ ์์ต๋๋ค.
email: freeseamew@gmail.com
blog: https://medium.com/freeseamew
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
javascript ๊ธฐ์ด๋ฅผ ๋ฐฐ์ฐ์ ๋ถ
์น ์๋น์ค๋ฅผ ์ฒ์๋ถํฐ ๋๊น์ง ํ๋ฒ ๋ง๋ค๊ณ ์ถ์ ๋ถ๋ค
์น ๋ฐฑ์๋ ์์ง๋์ด
์น ํ๋ฐํธ์๋ ์์ง๋์ด
์ ์ ์ง์,
ํ์ํ ๊น์?
html
javascript
2,314
๋ช
์๊ฐ์
49
๊ฐ
์๊ฐํ
83
๊ฐ
๋ต๋ณ
4.9
์
๊ฐ์ ํ์
5
๊ฐ
๊ฐ์
2000๋ ๋ ์ค๋ฐ๋ถํฐ ๋ณธ๊ฒฉ์ ์ผ๋ก ์น๊ฐ๋ฐ์ ์์ํ์ฌ ํ์ฌ๊น์ง ํ๋ฆฌ๋์ ๊ฐ๋ฐ์๋ก ํ๋ํ๊ณ ์์ต๋๋ค. ์ฝ5๋ ๊ฐ Amplix BI ์๋ฃจ์ ์ค๋ฌด์ ๊ต์ก์ ์งํํ๊ณ ๊ฐ๋ฐ์ ์ง์ํ๋ฉฐ ์๋ก์ด ๊ธฐ์ ์ ํจ์จ์ ์ผ๋ก ์ ๋ฌํ๋ ๊ฒ์ ๋ํ ๋ง์ ๊ฒฝํ๊ณผ ๊ณ ๋ฏผ์ ํ์ต๋๋ค.
ํ์ฌ๋ ๊ฐ๋ฐ ์ ๋ฌด์ ํจ๊ป ๊ฐ๋ฐ์๋ค์๊ฒ ๋์์ด ๋ ๋งํ ์น๊ด๋ จ ๋ถ์ผ์ ์๋ก์ด ๊ธฐ์ ์ ์ฐพ๊ณ ๊ฐ์ข์ ์ฑ ์ ํตํด ๊ณต์ ํ๊ณ ์์ต๋๋ค.
ํ) ํ๋ฆฌ๋์
์ ) (์ฃผ) ๋น์ฆํ๋ฌ๊ทธ ์ ๋ต์๋ฃจ์ ์ฌ์ ๋ถ ํ์ฅ
์ ) (์ฃผ) ํผ๋๋ชฝํค์ค ์๋์คํ ๋ฆฌ ์๋น์ค ๊ฐ๋ฐ ํ์ฅ
youtube: https://www.youtube.com/channel/UC3cJspjF4TRTyD_RS0azeaw
email: freeseamew@gmail.com
blog1: https://medium.com/freeseamew
blog2: https://dev.to/freeseamew
์ฐจ์ธ๋ Node.js ๋ฐฑ์๋ ์๋ฒ ๊ฐ๋ฐ(Fastify & Prisma & Typescript์ ํจ๊ปํ๋)
GraphQL ์์ ์ ๋ณต (๊ฐ์์ ํค์ค์คํฌ๋ฅผ ๊ตฌํํ๋ฉฐ ๋ฐฐ์ฐ๋ ํ์คํ ๊ณผ์ )
yes24, ๊ต๋ณด๋ฌธ๊ณ , ์๋ผ๋
์ ์ฒด
72๊ฐ โ (10์๊ฐ 28๋ถ)
API๋?
02:14
GraphQL ์๊ฐ
05:50
์ค์ตํ๊ฒฝ ๊ตฌ์ถ
05:35
Query & Mutation
11:28
Schema ๊ธฐ๋ณธ
07:06
Schema ๊ณ ๊ธ
08:25