Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

์–„ํŒํ•œ GraphQL๊ณผ Apollo

โšก ์งง๊ณ  ๊ตต์€ ์ „์ฒด 90๋ถ„ ๊ฐ•์ขŒ! ์‚ฌ์ดํŠธ์˜ ์ฝ”๋“œ๋“ค์„ ๋ณต๋ถ™ํ•˜๋ฉฐ ๋น ๋ฅด๊ฒŒ GraphQL์„ ๋ฐฐ์šฐ๊ณ  ์•„ํด๋กœ ์‚ฌ์šฉ๋ฒ•์„ ์ตํžˆ์„ธ์š”.

Thumbnail

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

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

  • GraphQL์˜ ๊ฐœ๋…๊ณผ ์‚ฌ์šฉ๋ฒ•

  • Apollo๋ฅผ ์ด์šฉํ•ด GraphQL ๋ฐฑ์—”๋“œ ์„œ๋ฒ„๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ

  • Apollo๋ฅผ ์ด์šฉํ•ด GraphQL x ๋ฆฌ์•กํŠธ ๊ธฐ๋ฐ˜ ํ”„๋ก ํŠธ์—”๋“œ ๋งŒ๋“ค๊ธฐ

โฑ ์—ฌ๋Ÿฌ๋ถ„์˜ ์‹œ๊ฐ„์€ ์†Œ์ค‘ํ•ฉ๋‹ˆ๋‹ค.

๐ŸŽข  GraphQL์ด ๋ญ”๊ฐ€์š”?

์„œ๋น„์Šค๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์†Œํ”„ํŠธ์›จ์–ด๋“ค๊ฐ„์—๋Š” ์ˆ˜์—†์ด ๋งŽ์€ ๋ฐ์ดํ„ฐ๊ฐ€ ์˜ค๊ณ ๊ฐ€๋ฉฐ ์†Œํ†ต์ด ์ด๋ค„์ง‘๋‹ˆ๋‹ค. GraphQL์€ ๊ทธ๋™์•ˆ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋˜ REST API์™€๋Š” ๋‹ค๋ฅธ ๋ฐฉ์‹์˜ ์ •๋ณด๊ตํ™˜์ด์—์š”.  ์„œ๋น„์Šค์˜ ํŠน์„ฑ์— ๋”ฐ๋ผ, ๋ณด๋‹ค ํšจ์œจ์ ์ด๊ณ  ๊ฐ„ํŽธํ•˜๊ณ ๋„ ๊ฐ•๋ ฅํ•œ ๋ฐฉ์‹์œผ๋กœ ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ, ์„œ๋ฒ„์™€ ๋ชจ๋ฐ”์ผ ์•ฑ ๋“ฑ ์š”์†Œ๋“ค๊ฐ„์˜ ์†Œํ†ต์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. 

๐Ÿš€ Apollo๋Š” ๋ญ”๊ฐ€์š”?

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๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

๋ฌด๋ฃŒ