์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 

GraphQL ์™„์ „์ •๋ณต (ํ‚ค์˜ค์Šคํฌ๋ฅผ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šฐ๋Š” ํ’€์Šคํƒ ๊ณผ์ •) - [2024 ๋ถ€๋ถ„ ๋ฆฌ๋‰ด์–ผ]

์ฐจ์„ธ๋Œ€ API ์ œ์–ด ๊ธฐ์ˆ ์ธ GraphQL์˜ ๊ธฐ๋ณธ๊ณผ ๊ณ ๊ธ‰ ์‚ฌ์šฉ๋ฒ• ๊ทธ๋ฆฌ๊ณ  GraphQL๋กœ ๋งŒ๋“ค์–ด ๊ฐ€๋Š” ๊ฐ€์ƒ์˜ ํ‚ค์˜ค์Šคํฌ ์„œ๋น„์Šค๋ฅผ ํ†ตํ•ด์„œ ์‹ค์ œ ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜์„ ํ•™์Šตํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ฐ•์ขŒ๋Š” 2024๋…„ 2์›” ๊ธฐ์ค€ ๊ฐ€์žฅ ์ตœ์‹  ๋ฒ„์ „์ธ apollo-server v4๋กœ ๊ฐ•์ขŒ๋ฅผ ๋ถ€๋ถ„ ์—…๋ฐ์ดํŠธ ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ’€์Šคํƒ, ์›น ๊ฐœ๋ฐœ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Graphql

  • Apollo

  • MongoDB

  • Svelte

  • NodeJs

  • nodeJs ํŒŒ์ผ์—…๋กœ๋“œ

  • ํ† ํฐ๊ธฐ๋ฐ˜ ์ธ์ฆ๋ฐฉ๋ฒ•

  • ํ’€์Šคํƒ(์›น๋ฐฑ์•ค๋“œ + ์›นํ”„๋ŸฐํŠธ์•ค๋“œ)

  • ๊ฐ€์ƒ์˜ ํ‚ค์˜ค์Šคํฌ ์„œ๋น„์Šค ๊ฐœ๋ฐœ

ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฑ์—”๋“œ ๋ชจ๋‘ ๊ตฌํ˜„ ๊ฐ€๋Šฅ!
GraphQL ์‹ค์ „์„ ๊ฒฝํ—˜ํ•ด๋ณด์„ธ์š” ๐Ÿ’ช


์ž์‹ ๊ฐ์˜ ๊ฐ€์žฅ ์ข‹์€ ๋น„๊ฒฐ์€
๋ฌด์–ธ๊ฐ€๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ๋งŒ๋“ค์–ด๋ณด๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์›น์— ๋Œ€ํ•œ ๊ธฐ์ดˆ๋ฅผ ์กฐ๊ธˆ์ด๋ผ๋„ ๋ฐฐ์šฐ์…จ๋‹ค๋ฉด
์ด๋ฒˆ ๊ธฐํšŒ์— ๋‹ค์–‘ํ•œ ๊ธฐ์ˆ ๋“ค๋กœ ํ•œ๋ฐœ ๋” ๋‚˜์•„๊ฐ€ ๋ณด์„ธ์š”!

GraphQL ์™„์ „ ์ •๋ณต ๐Ÿ‘‘

REST API๋ฅผ ๋ณด์™„, ๋ฐœ์ „ํ•˜์—ฌ ๋งŒ๋“ค์–ด์ง„ ์ฐจ์„ธ๋Œ€ API ์ œ์–ด ๊ธฐ์ˆ  GraphQL. GraphQL์˜ ๊ธฐ์ดˆ๋ถ€ํ„ฐ ๊ณ ๊ธ‰, ์™„๊ฒฐ๋œ ์„œ๋น„์Šค๊นŒ์ง€! ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ๋ฐฑ์—”๋“œ, ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฐํฌ๊นŒ์ง€์˜ ๋ชจ๋“  ๊ณผ์ •์„ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ™์ด ์Šค๋งˆํŠธ ๋ฉ”๋‰ดํŒ ๋งŒ๋“ค์–ด ๋ณด์‹ค๋ž˜์š”?

์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์ค€๋น„ํ•œ ๊ฐ•์ขŒ ๋‚ด์šฉ

#1.
GraphQL์˜
๊ธฐ๋ณธ ๋ฌธ๋ฒ•๊ณผ ๊ณ ๊ธ‰ ๋ฌธ๋ฒ•

GraphQL์— ํ•„์š”ํ•œ ๋ฌธ๋ฒ•๋“ค์„ ๋ชจ๋‘ ์ฐจ๊ทผ์ฐจ๊ทผ ํ•™์Šตํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ฐ•์˜์˜ ์ด๋ก  ๋ถ€๋ถ„์€ ์ด๋ฏธ์ง€, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋“ฑ์„ ํ™œ์šฉํ•˜์—ฌ ์ตœ๋Œ€ํ•œ ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ๋„๋ก ์ค€๋น„ํ–ˆ์Šต๋‹ˆ๋‹ค.

#2.
์‹ค์ œ ํ”„๋กœ์ ํŠธ
(์Šค๋งˆํŠธ ๋ฉ”๋‰ด) ๊ตฌํ˜„

๊ธฐ๋ณธ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์„ ์ตํ˜”์œผ๋ฉด ๋‹ค์Œ์€ ์‹ค์ œ ํ”„๋กœ์ ํŠธ ๊ตฌํ˜„์ด๊ฒ ์ฃ ? ๊ฐ€์ƒ์˜ ํ‚ค์˜ค์Šคํฌ ์„œ๋น„์Šค์ธ ์Šค๋งˆํŠธ ๋ฉ”๋‰ด๋ฅผ GraphQl์„ ์ด์šฉํ•ด ๋งŒ๋“ค์–ด ๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ฐฑ์—”๋“œ ์„œ๋ฒ„์—์„œ ํ”„๋ก ํŠธ์—”๋“œ๊นŒ์ง€ ๋ชจ๋‘ GraphQL์„ ์ค‘์‹ฌ์œผ๋กœ ๊ตฌํ˜„ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

#3.
๋‹ค์–‘ํ•œ ๋ฌธ์ œ์˜
ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

๋‹จ์ˆœํžˆ ์ฝ”๋“œ๋ฅผ ๋”ฐ๋ผ ํ•˜๋ฉด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฝ๊ณ  ์“ฐ๊ณ  ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ์„ ๋„˜์–ด, ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค ๋•Œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ๋ฌธ์ œ์™€ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ํ•™์Šตํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. Apollo ์บ์‹œ ์ด์šฉ ์‹œ ๋ฐœ์ƒํ•˜๋Š” ๋ฐ์ดํ„ฐ ์ •ํ•ฉ์„ฑ ๋ฌธ์ œ, NodeJS์—์„œ ํŒŒ์ผ์„ ์—…๋กœ๋“œํ•  ๋•Œ ์ฃผ์˜ํ•ด์•ผ ํ•  ์ , ์„œ๋น„์Šค์— ๊ผญ ๋“ค์–ด๊ฐ€์•ผ ํ•˜๋Š” ์ธ์ฆ ๋“ฑ์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

#4.
๋” ํšจ์œจ์ ์ธ
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๋ฐฉ๋ฒ•

์š”์ฆ˜ ํ•ซํ•˜๊ฒŒ ๋– ์˜ค๋ฅด๊ณ  ์žˆ๋Š” Svelte๋ผ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์ด์šฉํ•ด ๋ณด๋‹ค ํšจ์œจ์ ์œผ๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์•Œ๋ ค๋“œ๋ ค์š”. ์ด๋ฅผ ํ†ตํ•ด GraphQL์˜ ๊ธฐ๋ณธ ์ง€์‹์€ ๋ฌผ๋ก , ํ•œ ์„œ๋น„์Šค์˜ ๋ฐฑ์—”๋“œ, ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฐํฌ๊นŒ์ง€ ๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ด์š” ๐Ÿ™‹โ€โ™€๏ธ

GraphQL์— ๊ด€์‹ฌ์ด ์žˆ์–ด ์ž…๋ฌธ์„ ๊ณ ๋ฏผํ•˜๋Š” ๋ถ„

์›น ๋ฐฑ์—”๋“œ, ํ”„๋ก ํŠธ์—”๋“œ ํ’€์Šคํƒ์„ ๊ฒฝํ—˜ํ•˜๊ณ  ์‹ถ์€ ๋ถ„

Apollo, Svelte ๋“ฑ ์ตœ์‹  ๊ธฐ์ˆ ๋กœ ๋งŒ๋“œ๋Š” ์›น์ด ๊ถ๊ธˆํ•œ ๋ถ„

HTML, Javascript ๊ธฐ์ดˆ๋ฅผ ์ตํžŒ ํ›„ ๋ญ”๊ฐ€ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ์€ ๋ถ„


๊ตฌํ˜„ ํ”„๋กœ์ ํŠธ ๋ฏธ๋ฆฌ ๋ณด๊ธฐ ๐Ÿ‘€

๋ฌดํ•œ ์Šคํฌ๋กค๋กœ ๊ตฌํ˜„๋œ ๋ฉ”๋‰ด ๋ณด๊ธฐ ํ™”๋ฉด

๋กœ๊ทธ์ธ ํ™”๋ฉด

๋ฉ”๋‰ด ๋“ฑ๋ก ํ™”๋ฉด

์ฃผ๋ฌธ ํ›„ ์•Œ๋žŒ ํ™”๋ฉด

๊ฐ•์˜ ์ฐธ๊ณ  ์ž๋ฃŒ ๐Ÿ“

  • ๊ฐ•์˜์— ์‚ฌ์šฉ๋œ ํŒจํ‚ค์ง€๋‚˜ ์†Œ์Šค์ฝ”๋“œ ๋“ฑ์˜ ๋งํฌ์˜ ๊ฒฝ์šฐ โ€˜์„น์…˜2 GraphQL ๊ธฐ๋ณธ - ๊ฐ•์˜ ์ž๋ฃŒ ์†Œ๊ฐœ โ€˜ ๋ฅผ ์ฐธ๊ณ  ๋ฐ”๋ž๋‹ˆ๋‹ค.

์ฐธ๊ณ  ๊ฐ•์˜ ๐Ÿ“š


์˜ˆ์ƒ ์งˆ๋ฌธ Q&A ๐Ÿ’ฌ

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

์•ˆ๋…•ํ•˜์„ธ์š”
Indie Coder์ž…๋‹ˆ๋‹ค.

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

 

๊ฐ•์ขŒ ๋ชฉ๋ก

์ถœ๊ฐ„๋„์„œ

yes24, ๊ต๋ณด๋ฌธ๊ณ , ์•Œ๋ผ๋”˜

 

 

 

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

72๊ฐœ โˆ™ (10์‹œ๊ฐ„ 28๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!