Async / Await

ํ‚ค์›Œ๋“œ ยท JavaScript

1.

JavaScript(ES2017)์˜ ์ตœ์‹  ๊ตฌ๋ฌธ์œผ๋กœ, ๋น„๋™๊ธฐ ์ฝ”๋“œ๋ฅผ ์ˆœ์ฐจ์ ์ด๊ณ  ์ฝ๊ธฐ ์‰ฝ๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค โ€” ๋ณต์žกํ•œ Promise ์ฒด์ธ์„ ๋ช…ํ™•ํ•œ ๋ช…๋ น๋ฌธ์œผ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ API ํ˜ธ์ถœ, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์ฟผ๋ฆฌ ๋ฐ ๋ชจ๋“  ๋…ผ๋ธ”๋กœํ‚น ์ž‘์—…์˜ ๊ด€๋ฆฌ๋ฅผ ์šฉ์ดํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

2.

Promises์— ๊ธฐ๋ฐ˜ํ•œ ๋ฉ”์ปค๋‹ˆ์ฆ˜์œผ๋กœ ๋‘ ๊ฐœ์˜ ํ‚ค์›Œ๋“œ๋ฅผ ๋„์ž…ํ•ฉ๋‹ˆ๋‹ค: `async`๋Š” ์ž๋™์œผ๋กœ Promise๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋น„๋™๊ธฐ ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ , `await`๋Š” ํ•ด๋‹น Promise๊ฐ€ ํ•ด๊ฒฐ๋  ๋•Œ๊นŒ์ง€ ์‹คํ–‰์„ ์ผ์‹œ ์ค‘๋‹จํ•ฉ๋‹ˆ๋‹ค โ€” '์ฝœ๋ฐฑ ์ง€์˜ฅ'์„ ์ œ๊ฑฐํ•˜๊ณ  ๋Œ€๊ทœ๋ชจ์—์„œ๋„ ์ฝ”๋“œ๋ฅผ ์œ ์ง€๋ณด์ˆ˜ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

3.

ํด๋ผ์ด์–ธํŠธ ์ธก(React, Next.js)๊ณผ ์„œ๋ฒ„ ์ธก(Node.js, Express.js) ๋ชจ๋‘์—์„œ ์‚ฌ์šฉ๋˜๋Š” ํ’€์Šคํƒ ํ˜„๋Œ€ ๊ฐœ๋ฐœ์˜ ํ•„์ˆ˜ ํŒจํ„ด โ€” ๋„คํŠธ์›Œํฌ ํ˜ธ์ถœ์ด๋‚˜ ํŒŒ์ผ ์ฝ๊ธฐ์™€ ๊ฐ™์€ ์ž…์ถœ๋ ฅ ์ž‘์—… ์ค‘ ๋ฉ”์ธ ์Šค๋ ˆ๋“œ๋ฅผ ํ•ด์ œํ•˜์—ฌ ์ตœ์ ์˜ ์„ฑ๋Šฅ์„ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค.

ํ•จ๊ป˜ ๋ณด๊ธฐ
Promise๋น„๋™๊ธฐNode.jsAPI

JavaScript์—์„œ ๋น„๋™๊ธฐ ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๋ ค๋ฉด ํ•จ์ˆ˜ ์„ ์–ธ ์•ž์— `async` ํ‚ค์›Œ๋“œ๋ฅผ ๋ฐฐ์น˜ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ: `async function fetchData() const response = await fetch('/api/data'); return response.json(); `. `async` ํ‚ค์›Œ๋“œ๋Š” ๋ฐ˜ํ™˜ ๊ฐ’์„ ์ž๋™์œผ๋กœ Promise๋กœ ๋ณ€ํ™˜ํ•˜๊ณ , ํ•จ์ˆ˜ ๋ณธ๋ฌธ ๋‚ด์—์„œ `await` ์‚ฌ์šฉ์„ ํ—ˆ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์ €ํฌ๊ฐ€ ๋ชจ๋“  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋ฐฑ์—”๋“œ์™€์˜ ํ†ต์‹ ์„ ๊น”๋”ํ•˜๊ฒŒ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ํ‘œ์ค€ ๊ตฌ๋ฌธ์ž…๋‹ˆ๋‹ค.

๋น„๋™๊ธฐ ํ•จ์ˆ˜๋Š” `async` ํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธ๋œ ํ•จ์ˆ˜๋กœ, ์•”๋ฌต์ ์œผ๋กœ Promise๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉฐ ๋ณธ๋ฌธ ๋‚ด์—์„œ `await` ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋™๊ธฐ์ ์ด๊ณ  ๋ธ”๋กœํ‚น ๋ฐฉ์‹์œผ๋กœ ์‹คํ–‰๋˜๋Š” ์ผ๋ฐ˜ ํ•จ์ˆ˜์™€ ๋‹ฌ๋ฆฌ, ๊ธด ์ž‘์—…(๋„คํŠธ์›Œํฌ ํ˜ธ์ถœ, ํƒ€์ด๋จธ, ํŒŒ์ผ ์ฝ๊ธฐ) ๋Œ€๊ธฐ ์ค‘์— ๋ฉ”์ธ ์Šค๋ ˆ๋“œ๋ฅผ ํ•ด์ œํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฉ”์ปค๋‹ˆ์ฆ˜์€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ฐ˜์‘์„ฑ์„ ์œ ์ง€ํ•˜๊ณ  ์ธํ„ฐํŽ˜์ด์Šค ์ฐจ๋‹จ ์—†์ด ๋ถ€๋“œ๋Ÿฌ์šด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋Š” ๋ฐ ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค.

๋น„๋™๊ธฐ ํ•จ์ˆ˜๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋‚˜๋จธ์ง€ ๋ถ€๋ถ„์„ ์ฐจ๋‹จํ•˜์ง€ ์•Š๊ณ  ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. JavaScript์—์„œ๋Š” `async` ํ‚ค์›Œ๋“œ๋กœ ์ƒ์„ฑ๋˜๋ฉฐ, `await`๋ฅผ ํ†ตํ•ด ๊ธด ์ž‘์—…์ด ์™„๋ฃŒ๋  ๋•Œ๊นŒ์ง€ ์‹คํ–‰์„ '์ผ์‹œ ์ค‘๋‹จ'ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Async Code์—์„œ ๋งค์ผ React์™€ Next.js ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ API ํ˜ธ์ถœ, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์ƒํ˜ธ์ž‘์šฉ ๋ฐ ๋ณต์žกํ•œ ์ฒ˜๋ฆฌ๋ฅผ ์กฐ์œจํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ํŒจํ„ด์ž…๋‹ˆ๋‹ค.