์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

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

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

(4.9) ์ˆ˜๊ฐ•ํ‰ 156๊ฐœ

์ˆ˜๊ฐ•์ƒ 3,782๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

Thumbnail

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

4.9

5.0

์ดํ˜•์šฐ

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ๊ทธ๋ž˜ํ”„ํ์—˜์— ์ž…๋ฌธํ•˜๊ธฐ ๋„ˆ๋ฌด ์ข‹์€ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ ๋ฌด๋ฃŒ๋ผ๋‹ˆ์š”!! ์–„์ฝ”๋‹˜ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~~

5.0

์˜๊ทผ์˜๊ทผ

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

ํ•„์š”ํ•œ ๋‚ด์šฉ๋งŒ ์ถ•์•ฝํ•ด ์ฃผ์…”์„œ ๋น ๋ฅด๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

5.0

sy k

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

graphQL ์ดˆ๋ณด์ž์ธ๋ฐ ๋น ๋ฅด๊ฒŒ ์ˆ™์ง€ํ•˜๊ธฐ ์ข‹์•˜์Šต๋‹ˆ๋‹ค ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!!

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • 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 ์‚ฌ์šฉ๋ฒ•

์•ˆ๋…•ํ•˜์„ธ์š”
์–„ํŒํ•œ ์ฝ”๋”ฉ์‚ฌ์ „์ž…๋‹ˆ๋‹ค.

34,154

๋ช…

์ˆ˜๊ฐ•์ƒ

1,953

๊ฐœ

์ˆ˜๊ฐ•ํ‰

96

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

17

๊ฐœ

๊ฐ•์˜

์œ ํŠœ๋ธŒ ์ฑ„๋„ ์–„ํŒํ•œ ์ฝ”๋”ฉ์‚ฌ์ „์„ ๋ฐฉ์†กํ•˜๋Š” ์œ ํŠœ๋ฒ„์ด์ž, IT์„œ์ ๋“ค์„ ์ง‘ํ•„ํ•˜๋Š” ์ž‘๊ฐ€์ž…๋‹ˆ๋‹ค.  ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๋กœ ์ผํ•ด ์˜จ ๊ฒฝํ—˜์„ ์‚ด๋ ค, ์–ด๋ ค์šด ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐœ๋…๋“ค์„ ์ดˆ๋ณด์ž๋“ค์ด ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋„๋ก ๋น„์œ ์™€ ์‰ฌ์šด ์˜ˆ์ œ, ๋•Œ๋กœ๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์œผ๋กœ ์„ค๋ช…ํ•˜๋Š” ์ปจํ…์ธ ๋“ค์„ ๋งŒ๋“ค๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๐ŸŽฌ   YouTube ์–„ํŒํ•œ ์ฝ”๋”ฉ์‚ฌ์ „ ์ฑ„๋„ (ํด๋ฆญ!)
๐Ÿ“•  ์–„์ฝ”์˜ ์ฑ…๋“ค ๋ณด๋Ÿฌ๊ฐ€๊ธฐ (ํด๋ฆญ!)

๋”๋ณด๊ธฐ

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

์ „์ฒด

14๊ฐœ โˆ™ (1์‹œ๊ฐ„ 30๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

156๊ฐœ

4.9

156๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • SJ Kim๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    SJ Kim

    ์ˆ˜๊ฐ•ํ‰ 2

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    64% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    • ์˜๊ทผ์˜๊ทผ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      ์˜๊ทผ์˜๊ทผ

      ์ˆ˜๊ฐ•ํ‰ 2

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ํ•„์š”ํ•œ ๋‚ด์šฉ๋งŒ ์ถ•์•ฝํ•ด ์ฃผ์…”์„œ ๋น ๋ฅด๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

      • ํ™ฉ์„ธ์—ฐ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
        ํ™ฉ์„ธ์—ฐ

        ์ˆ˜๊ฐ•ํ‰ 1

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

        36% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        • ์ดํ˜•์šฐ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          ์ดํ˜•์šฐ

          ์ˆ˜๊ฐ•ํ‰ 3

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

          100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ๊ทธ๋ž˜ํ”„ํ์—˜์— ์ž…๋ฌธํ•˜๊ธฐ ๋„ˆ๋ฌด ์ข‹์€ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ ๋ฌด๋ฃŒ๋ผ๋‹ˆ์š”!! ์–„์ฝ”๋‹˜ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~~

        • sy k๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          sy k

          ์ˆ˜๊ฐ•ํ‰ 1

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

          100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          graphQL ์ดˆ๋ณด์ž์ธ๋ฐ ๋น ๋ฅด๊ฒŒ ์ˆ™์ง€ํ•˜๊ธฐ ์ข‹์•˜์Šต๋‹ˆ๋‹ค ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!!

        ์–„ํŒํ•œ ์ฝ”๋”ฉ์‚ฌ์ „๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

        ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

        ๋น„์Šทํ•œ ๊ฐ•์˜

        ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

        ๋ฌด๋ฃŒ