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

๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ: Promise, async/await ๋์žฅ๋‚ด๊ธฐ

์ด ๊ฐ•์˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ Promise์™€ async/await์˜ ๊ฐœ๋…๊ณผ ์ž‘๋™ ์›๋ฆฌ๋ฅผ ๋ช…ํ™•ํžˆ ์„ค๋ช…ํ•˜๋ฉฐ, ์‹ค๋ฌด์—์„œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ๋Šฅ์ˆ™ํ•˜๊ฒŒ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋„๋ก ๋•์Šต๋‹ˆ๋‹ค.

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ๋น„๋™๊ธฐํ”„๋กœ๊ทธ๋ž˜๋ฐ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

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

  • ๋™๊ธฐ๋ž€? ๋น„๋™๊ธฐ๋ž€? ์‰ฌ์šด ๊ฐœ๋… ์„ค๋ช…!

  • ์ฝœ๋ฐฑํ•จ์ˆ˜๋ž€?

  • Promise๋ž€?

  • async/await ์ด๋ž€?

  • Promise ์ฒด์ด๋‹ ๋ฐ ์ •์  ๋ฉ”์„œ๋“œ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ: Promise์™€ async/await ๋งˆ์Šคํ„ฐ

์ด ๊ฐ•์˜์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ํ•ต์‹ฌ ๊ฐœ๋…์ธ Promise์™€ async/await๋ฅผ ์™„๋ฒฝํžˆ ์ดํ•ดํ•˜๊ณ  ์‹ค๋ฌด์—์„œ Promise, async/await์„ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•์Šต๋‹ˆ๋‹ค.

์ด ๊ธฐ์ˆ ์€ ์ฃผ๋กœ ์›น ๊ฐœ๋ฐœ, ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ, API ํ†ต์‹ , ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ์™€ ๊ฐ™์€ ๋ถ„์•ผ์—์„œ ํ•„์ˆ˜์ ์œผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ํŠนํžˆ React, Node.js(๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ), Vue.js ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ์™€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋‹ค๋ฃฐ ๋•Œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๋Šฅ๋ ฅ์€ ์ค‘์š”ํ•œ ์š”์†Œ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”

๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

๋™๊ธฐ์™€ ๋น„๋™๊ธฐ์˜ ์žฅ๋‹จ์ ! ๋˜ํ•œ, ๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์‹ค์ œ ์ฝ”๋“œ๋กœ ์„ค๋ช…ํ•˜์—ฌ ์ถ”์ƒ์ ์ด์ง€ ์•Š๊ณ  ๋ช…ํ™•ํ•˜๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Promise

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Promise๋ฅผ ํ™œ์šฉํ•œ ๋น„๋™๊ธฐ ์ž‘์—… ์ฒ˜๋ฆฌ๋ฅผ ์‹ค์ œ ์ฝ”๋“œ๋กœ ์„ค๋ช…ํ•˜์—ฌ, ์‰ฝ๊ณ  ๋ช…ํ™•ํ•˜๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด Promise๋ฅผ ํ™•์‹คํžˆ ์•Œ๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด์š”!

async/await

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋น„๋™๊ธฐ ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” Promise์˜ Syntatic Sugar ๋ฌธ๋ฒ•์ธ async, await์— ๋Œ€ํ•ด ์ œ๋Œ€๋กœ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค.

Promise ์ฒด์ด๋‹ & ์ •์  ๋ฉ”์„œ๋“œ

Promise ์ฒด์ด๋‹, Promise.all(), Promise.reject() ๋“ฑ ์‹ค๋ฌด์—์„œ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ•„์ˆ˜ ์ŠคํŽ™ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์œ ํŠœ๋ธŒ์—์„œ์˜ ๊ฐ•์˜ ๋ฆฌ๋ทฐ โœจ

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐ•์˜

React ์™„๋ฒฝ ๋งˆ์Šคํ„ฐ

React๋ฅผ ์ฒ˜์Œ ๋ฐฐ์šฐ์‹œ๋‚˜์š”? ์ด ๊ฐ•์˜๋กœ ํ•˜๋‚˜๋กœ ๋ฆฌ์•ฑํŠธ ๊ธฐ์ดˆ๋ฅผ ๋‹ค์ง€๊ณ , ๋ฆฐ์บ”๋ฒ„์Šค ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ์‹ค๋ฌด ๊ฒฝํ—˜์„ ์Œ“์•„๋ณด์„ธ์š”. ๊ทธ๋Ÿฌ๋ฉด ์ž์‹ ์žˆ๊ฒŒ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์ทจ์—…ํ•  ์ˆ˜ ์žˆ์–ด์š”!

ํ”„๋ก ํŠธ์—”๋“œ ์ž…๋ฌธ: React ๋กœ๋“œ๋งต

๋ฆฌ์•กํŠธ๋ฅผ ์ฒ˜์Œ ๋ฐฐ์šฐ์‹œ๋‚˜์š”? ์ด ์˜์ƒ์€ React๋ฅผ ๋ฐฐ์šฐ๊ธฐ ์œ„ํ•œ ์ตœ๊ณ ์˜ ๋กœ๋“œ๋งต์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค! ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹ค์ „ ํ”„๋กœ์ ํŠธ๊นŒ์ง€, ๋‹จ๊ณ„๋ณ„๋กœ ์–ด๋–ป๊ฒŒ ๋ฆฌ์•กํŠธ๋ฅผ ํ•™์Šตํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Vue 3 ์™„๋ฒฝ ๋งˆ์Šคํ„ฐ

Vue3๋กœ ์›น ๊ฐœ๋ฐœ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ณต์‹๋ฌธ์„œ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜์—ฌ Vue 3 ์ŠคํŽ™์„ ์ž์„ธํ•˜๊ณ  ๊นŠ์ด์žˆ๊ฒŒ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ์‹ค์ „ํŽธ์„ ํ†ตํ•˜์—ฌ ์‹ค๋ฌด์—์„œ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ์Šคํ‚ฌ์„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ ์ž…๋ฌธ: Vue ๋กœ๋“œ๋งต

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ทจ์—…์„ ์›ํ•˜์‹œ๋‚˜์š”? ์ด ์˜์ƒ์€ Vue ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ์ตœ๊ณ ์˜ ๋กœ๋“œ๋งต์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค! ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹ค์ „ ํ”„๋กœ์ ํŠธ๊นŒ์ง€, ๋‹จ๊ณ„๋ณ„๋กœ ์–ด๋–ป๊ฒŒ Vue๋ฅผ ํ•™์Šตํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฐœ๋ฐœ์ž

  • Promise๋ฅผ ํ™•์‹คํžˆ ์•Œ๊ณ  ์‹ถ์€ ๋ถ„

  • async/await์„ ํ™•์‹คํžˆ ์•Œ๊ณ  ์‹ถ์€ ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

์•ˆ๋…•ํ•˜์„ธ์š”
์ง์ฝ”๋”ฉ์ž…๋‹ˆ๋‹ค.

20,453

๋ช…

์ˆ˜๊ฐ•์ƒ

930

๊ฐœ

์ˆ˜๊ฐ•ํ‰

519

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

15

๊ฐœ

๊ฐ•์˜

์•ˆ๋…•ํ•˜์„ธ์š”.
์ฝ”๋”ฉ ๊ต์œก ํฌ๋ฆฌ์—์ดํ„ฐ ์ง์ฝ”๋”ฉ ์ž…๋‹ˆ๋‹ค ๐Ÿ™‚

์œ ํŠœ๋ธŒ์—์„œ ์ฝ”๋”ฉ ๊ต์œก "์ง์ฝ”๋”ฉ GYM CODING"์ฑ„๋„์„ ์šด์˜ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ,
์ธํ”„๋Ÿฐ ๊ต์œก ํ”Œ๋žซํผ์—์„œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ง€์‹์„ ๊ณต์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ œ ๊ฐ•์˜์˜ ํŠน์ง•์€ ์ด์ œ ๋ง‰ ์‹œ์ž‘ํ•˜์‹œ๋Š” ๋ถ„๋“ค์„ ์œ„ํ•˜์—ฌ
์„ค๋ช…ํ•˜๊ณ ์ž ํ•  ๋•Œ๋Š” ์ตœ๋Œ€ํ•œ ์‰ฝ๊ฒŒ,
์•Œ๋ ค๋“œ๋ฆฌ๊ณ ์ž ํ•  ๋•Œ๋Š” ์ตœ๋Œ€ํ•œ ์•Œ์ฐจ๊ฒŒ ์„ค๋ช…๋“œ๋ฆฝ๋‹ˆ๋‹ค.

ํ•ญ์ƒ ์ˆ˜๊ฐ•์ƒ ์ž…์žฅ์—์„œ ์ƒ๊ฐํ•˜๋Š” ์ฝ”๋”ฉ ๊ต์œก ํฌ๋ฆฌ์—์ดํ„ฐ๊ฐ€ ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.
๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“จ ์ด๋ฉ”์ผ bruce.lean17@gmail.com
๐Ÿ‹๏ธโ€โ™€๏ธ ํ—ฌ์Šคํƒ€๊ทธ๋žจ @helinlee.gram
๐Ÿง‘โ€๐Ÿ’ป ์ฝ”๋”ฉ์Šคํƒ€๊ทธ๋žจ @gymcoding

๋”๋ณด๊ธฐ

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

์ „์ฒด

8๊ฐœ โˆ™ (1์‹œ๊ฐ„ 18๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

18๊ฐœ

5.0

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

  • JONGSOO LIM

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 4

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    • ์ง์ฝ”๋”ฉ
      ์ง€์‹๊ณต์œ ์ž

      ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค โ˜บ๏ธ

  • yeeun lee

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 2

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ๋น„๋™๊ธฐ ๋™๊ธฐ๊ฐ€ ํ•ญ์ƒ ์–ด๋ ค์šด ๊ฐœ๋…์ธ๋ฐ, ๊ฐ€๋ณ๊ฒŒ ์ •๋ฆฌํ•˜๊ธฐ ์ข‹์€ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค~!

    • ์ง์ฝ”๋”ฉ
      ์ง€์‹๊ณต์œ ์ž

      ์†Œ์ค‘ํ•œ ์ˆ˜๊ฐ•ํ‰ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค! ๋น„๋™๊ธฐ/๋™๊ธฐ ๊ฐœ๋…์„ ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜์…จ๋‹ค๋‹ˆ ์ •๋ง ๋‹คํ–‰์ด์—์š”~! ์–ด๋ ค์šด ๊ฐœ๋…๋„ ๊ฐ€๋ณ๊ฒŒ ์ •๋ฆฌํ•ด๋“œ๋ฆด ์ˆ˜ ์žˆ์–ด ๋ณด๋žŒ์ฐผ์Šต๋‹ˆ๋‹ค. ์•ž์œผ๋กœ๋„ ๋ณต์žกํ•œ ๊ฐœ๋…๋“ค์„ ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•˜๋Š” ๊ฐ•์˜๋กœ ์ฐพ์•„๋ต™๊ฒ ์Šต๋‹ˆ๋‹ค! ๐Ÿ‘

  • ๊ธฐ์ˆ ์ž๊ฐ€๋ ๋ž˜

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ํ—ท๊ฐˆ๋ฆฌ๋˜ ๋ถ€๋ถ„๋“ค์„ ์™์™ ์ง‘์–ด์„œ ์ดํ•ด์‹œ์ผœ์ค˜์„œ ๊ฐ์‚ฌํ•ด์š”! ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฒ˜์Œ ๊ณต๋ถ€ํ•  ๋•Œ ๋ดค์œผ๋ฉด ์ข‹์•˜์„ ๊ฒƒ ๊ฐ™์•„์š”!

    • ์ง์ฝ”๋”ฉ
      ์ง€์‹๊ณต์œ ์ž

      ์ œ ์œ ํŠœ๋ธŒ ์ฑ„๋„์— ๋ณด์‹œ๋ฉด ์‹ค๋ฌด ๊ฐœ๋ฐœ์— ์œ ์ตํ•œ ์ •๋ณด๊ฐ€ ๋งŽ์•„์š”! ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ๋„์›€์ด ๋˜์‹ค ๊ฑฐ์˜ˆ์š”! ๐Ÿ’ช

  • ascorbic

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 2

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    • ์ง์ฝ”๋”ฉ
      ์ง€์‹๊ณต์œ ์ž

      ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~! โ˜บ๏ธ

  • waycsj

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ์™„๋ฒฝ!

    • ์ง์ฝ”๋”ฉ
      ์ง€์‹๊ณต์œ ์ž

      ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~! โ˜บ๏ธ

์ง์ฝ”๋”ฉ๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

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

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

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

๋ฌด๋ฃŒ