Async / Await
ํค์๋ ยท JavaScript
JavaScript(ES2017)์ ์ต์ ๊ตฌ๋ฌธ์ผ๋ก, ๋น๋๊ธฐ ์ฝ๋๋ฅผ ์์ฐจ์ ์ด๊ณ ์ฝ๊ธฐ ์ฝ๊ฒ ์์ฑํ ์ ์๊ฒ ํด์ค๋๋ค โ ๋ณต์กํ Promise ์ฒด์ธ์ ๋ช ํํ ๋ช ๋ น๋ฌธ์ผ๋ก ๋ณํํ์ฌ API ํธ์ถ, ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฟผ๋ฆฌ ๋ฐ ๋ชจ๋ ๋ ผ๋ธ๋กํน ์์ ์ ๊ด๋ฆฌ๋ฅผ ์ฉ์ดํ๊ฒ ํฉ๋๋ค.
Promises์ ๊ธฐ๋ฐํ ๋ฉ์ปค๋์ฆ์ผ๋ก ๋ ๊ฐ์ ํค์๋๋ฅผ ๋์ ํฉ๋๋ค: `async`๋ ์๋์ผ๋ก Promise๋ฅผ ๋ฐํํ๋ ๋น๋๊ธฐ ํจ์๋ฅผ ์ ์ธํ๊ณ , `await`๋ ํด๋น Promise๊ฐ ํด๊ฒฐ๋ ๋๊น์ง ์คํ์ ์ผ์ ์ค๋จํฉ๋๋ค โ '์ฝ๋ฐฑ ์ง์ฅ'์ ์ ๊ฑฐํ๊ณ ๋๊ท๋ชจ์์๋ ์ฝ๋๋ฅผ ์ ์ง๋ณด์ ๊ฐ๋ฅํ๊ฒ ๋ง๋ญ๋๋ค.
ํด๋ผ์ด์ธํธ ์ธก(React, Next.js)๊ณผ ์๋ฒ ์ธก(Node.js, Express.js) ๋ชจ๋์์ ์ฌ์ฉ๋๋ ํ์คํ ํ๋ ๊ฐ๋ฐ์ ํ์ ํจํด โ ๋คํธ์ํฌ ํธ์ถ์ด๋ ํ์ผ ์ฝ๊ธฐ์ ๊ฐ์ ์ ์ถ๋ ฅ ์์ ์ค ๋ฉ์ธ ์ค๋ ๋๋ฅผ ํด์ ํ์ฌ ์ต์ ์ ์ฑ๋ฅ์ ๋ณด์ฅํฉ๋๋ค.
JavaScript์์ Promise๋ ๋น๋๊ธฐ ์์ ์ ๋ฏธ๋ ๊ฒฐ๊ณผ๋ฅผ ๋ํ๋ด๋ ๊ฐ์ฒด์ ๋๋ค โ ์ฑ๊ณต์ด๋ ์คํจ์ด๋ ๊ด๊ณ์์ด์. ์ธ ๊ฐ์ง ์ํ๊ฐ ์์ต๋๋ค: 'pending'(๋๊ธฐ ์ค), 'fulfilled'(์ฑ๊ณต์ ์ผ๋ก ํด๊ฒฐ๋จ), 'rejected'(์ค๋ฅ๋ก ๊ฑฐ๋ถ๋จ). Promise๋ ์ค์ฒฉ๋ ์ฝ๋ฐฑ์ `.then()`๊ณผ `.catch()`๋ฅผ ํตํ ์ฐ์ํ ์ฒด์ด๋์ผ๋ก ๋์ฒดํ์ฌ ๋น๋๊ธฐ ๊ด๋ฆฌ์ ํ์ ์ ๊ฐ์ ธ์์ต๋๋ค. Async Code์์๋ ๋ชจ๋ API ํต์ ๊ณผ ์๋ฒ ์์ ์ ๊ธฐ๋ฐ์ผ๋ก Promise๋ฅผ ํ์ฉํ๊ณ ์์ต๋๋ค.
async์ await๋ ์ฝ๋๊ฐ ์๊ฐ์ด ๊ฑธ๋ฆฌ๋ ์์ ์ ์ํํ ๋ ์ฌ์ฉํฉ๋๋ค: REST API ํธ์ถ, ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฟผ๋ฆฌ, ํ์ผ ์ฝ๊ธฐ ๋๋ ๋คํธ์ํฌ ์ฒ๋ฆฌ ๋ฑ์ ๋๋ค. ์ฌ๋ฌ ๋น๋๊ธฐ ์์ ์ ์์ฐจ์ ์ผ๋ก ์ฐ๊ฒฐํ๊ฑฐ๋ `Promise.all()`๋ก ๋ณ๋ ฌ ์คํํด์ผ ํ ๋ ํนํ ๊ถ์ฅ๋ฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ Next.js์ Node.js ํ๋ก์ ํธ์์ ์ฒด๊ณ์ ์ผ๋ก async/await๋ฅผ ์ ์ฉํ์ฌ ํ ์ ์ฒด๊ฐ ์ฝ๊ธฐ ์ฝ๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋๋ฉฐ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด ์ฝ๋๋ฅผ ๋ณด์ฅํฉ๋๋ค.
JavaScript์์ ๋น๋๊ธฐ ํจ์๋ฅผ ์์ฑํ๋ ค๋ฉด ํจ์ ์ ์ธ ์์ `async` ํค์๋๋ฅผ ๋ฐฐ์นํ๋ฉด ๋ฉ๋๋ค. ์: `async function fetchData() const response = await fetch('/api/data'); return response.json(); `. `async` ํค์๋๋ ๋ฐํ ๊ฐ์ ์๋์ผ๋ก Promise๋ก ๋ณํํ๊ณ , ํจ์ ๋ณธ๋ฌธ ๋ด์์ `await` ์ฌ์ฉ์ ํ์ฉํฉ๋๋ค. ์ด๊ฒ์ ์ ํฌ๊ฐ ๋ชจ๋ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ฐฑ์๋์์ ํต์ ์ ๊น๋ํ๊ฒ ๊ด๋ฆฌํ๊ธฐ ์ํด ์ฌ์ฉํ๋ ํ์ค ๊ตฌ๋ฌธ์ ๋๋ค.
Promise๋ ๋ฏธ๋์ ์ฌ์ฉ ๊ฐ๋ฅํ ์ ์๋ ๊ฐ์ ์บก์ํํ๋ JavaScript ๋ค์ดํฐ๋ธ ๊ฐ์ฒด๋ก, ๋น๋๊ธฐ ๋ฐ์ดํฐ ์์ฐ์์ ์๋น์ ์ฌ์ด์ ๊ณ์ฝ ์ญํ ์ ํฉ๋๋ค. ๊ฒฐ๊ณผ โ ์ฑ๊ณต์ด๋ ์ค๋ฅ์ด๋ โ ๊ฐ `.then()`, `.catch()`, `.finally()` ๋ฉ์๋๋ฅผ ํตํด ์ ํํ ํ ๋ฒ ์ฒ๋ฆฌ๋จ์ ๋ณด์ฅํฉ๋๋ค. Promise๋ async/await, fetch API, ๊ทธ๋ฆฌ๊ณ Node.js์ ์ต์ ๋ธ๋ผ์ฐ์ ์ ์ ์ฒด ๋น๋๊ธฐ ์ํ๊ณ๊ฐ ๊ธฐ๋ฐํ๋ ํต์ฌ ๊ตฌ์ฑ ์์์ ๋๋ค.
๋น๋๊ธฐ ํจ์๋ `async` ํค์๋๋ก ์ ์ธ๋ ํจ์๋ก, ์๋ฌต์ ์ผ๋ก Promise๋ฅผ ๋ฐํํ๋ฉฐ ๋ณธ๋ฌธ ๋ด์์ `await` ํค์๋๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋๊ธฐ์ ์ด๊ณ ๋ธ๋กํน ๋ฐฉ์์ผ๋ก ์คํ๋๋ ์ผ๋ฐ ํจ์์ ๋ฌ๋ฆฌ, ๊ธด ์์ (๋คํธ์ํฌ ํธ์ถ, ํ์ด๋จธ, ํ์ผ ์ฝ๊ธฐ) ๋๊ธฐ ์ค์ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ํด์ ํฉ๋๋ค. ์ด ๋ฉ์ปค๋์ฆ์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐ์์ฑ์ ์ ์งํ๊ณ ์ธํฐํ์ด์ค ์ฐจ๋จ ์์ด ๋ถ๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ํ์์ ์ ๋๋ค.
๋น๋๊ธฐ ํจ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋จธ์ง ๋ถ๋ถ์ ์ฐจ๋จํ์ง ์๊ณ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์์ ์ ์ํํ ์ ์๋ ํจ์์ ๋๋ค. JavaScript์์๋ `async` ํค์๋๋ก ์์ฑ๋๋ฉฐ, `await`๋ฅผ ํตํด ๊ธด ์์ ์ด ์๋ฃ๋ ๋๊น์ง ์คํ์ '์ผ์ ์ค๋จ'ํ ์ ์์ต๋๋ค. Async Code์์ ๋งค์ผ React์ Next.js ์ ํ๋ฆฌ์ผ์ด์ ์ API ํธ์ถ, ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ํธ์์ฉ ๋ฐ ๋ณต์กํ ์ฒ๋ฆฌ๋ฅผ ์กฐ์จํ๊ธฐ ์ํด ์ฌ์ฉํ๋ ํจํด์ ๋๋ค.
`await` ํค์๋๋ `async`๋ก ์ ์ธ๋ ํจ์ ๋ด๋ถ์์๋ง ์ฌ์ฉ๋ฉ๋๋ค. Promise๋ฅผ ๋ฐํํ๋ ๋ชจ๋ ํํ์ ์์ ๋ฐฐ์นํฉ๋๋ค: `const data = await fetch('/api/endpoint')`. ํจ์์ ์คํ์ Promise๊ฐ ํด๊ฒฐ๋ ๋๊น์ง ์ผ์ ์ค๋จ๋ ํ, ๋ฐํ๋ ๊ฐ์ผ๋ก ์ฌ๊ฐ๋ฉ๋๋ค. ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๋ ค๋ฉด `await` ํธ์ถ์ `try/catch` ๋ธ๋ก์ผ๋ก ๊ฐ์๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ์ค์ฒฉ๋ `.then()` ์ฒด์ธ๋ณด๋ค ํจ์ฌ ์ฝ๊ธฐ ์ฌ์ด ๋ช ํํ๊ณ ์์ฐจ์ ์ธ ์ฝ๋๋ฅผ ๋ง๋ค์ด๋ ๋๋ค.
Async/await๋ JavaScript ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ชจ๋ ์ ์ถ๋ ฅ(I/O) ์์ ์ ์ฒด๊ณ์ ์ผ๋ก ์ฌ์ฉํด์ผ ํฉ๋๋ค: ์ธ๋ถ API์ ๋ํ HTTP ํธ์ถ, MongoDB ๋๋ PostgreSQL ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฟผ๋ฆฌ, Node.js๋ฅผ ์ฌ์ฉํ ํ์ผ ์ฝ๊ธฐ/์ฐ๊ธฐ, ํ์ด๋จธ ๊ด๋ฆฌ ๋ฑ์ ๋๋ค. Redux thunks์ Next.js์ Server Components์๋ ๊ถ์ฅ๋๋ ๊ตฌ๋ฌธ์ ๋๋ค. Async Code์์ ์ ํฌ ์์ด์ ์์ ์ด๋ฆ์ ์์ฐํ๋ ๋ชจ๋ ์ฝ๋ ๋ผ์ธ์ ํต์ฌ์ ์๋ ์ด ํจ๋ฌ๋ค์์ ๋ํ ์ ๋ฌธ์ฑ์ ๋ฐ์ํฉ๋๋ค.
`await` ํค์๋๋ JavaScript์์ Promise๊ฐ ํด๊ฒฐ๋ ๋๊น์ง ๋น๋๊ธฐ ํจ์์ ์คํ์ ์ผ์ ์ค๋จํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ๋ธ๋ผ์ฐ์ ์ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ง ์์ต๋๋ค โ ํ์ฌ ํจ์๋ง ์ผ์ ์ค๋จํ์ฌ ๋ค๋ฅธ ์์ ์ด ๊ณ์ ์คํ๋ ์ ์๊ฒ ํฉ๋๋ค. ์ด๋ฌํ ๋ ผ๋ธ๋กํน ๊ด๋ฆฌ ๋ฅ๋ ฅ์ด JavaScript๋ฅผ ์ค์๊ฐ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ ํฌ๊ฐ ๊ณ ๊ฐ์ ์ํด ๊ตฌ์ถํ๋ ์ด๋ฒคํธ ๊ธฐ๋ฐ ์ํคํ ์ฒ์ ํ์ํ๊ฒ ๋ง๋ญ๋๋ค.
JavaScript์์ Promise๋ ๋น๋๊ธฐ ์์ ์ ์๋ฃ(๋๋ ์คํจ)์ ๊ทธ ๊ฒฐ๊ณผ ๊ฐ์ ๋ํ๋ด๋ ์ธ์ด์ ๋ค์ดํฐ๋ธ ๋ฉ์ปค๋์ฆ์ ๋๋ค. ES6์์ ๋์ ๋ Promise๋ ์ฝ๋ฐฑ ํผ๋ผ๋ฏธ๋ ๋์ ์ฝ๊ธฐ ์ฌ์ด ์ฒด์ธ์ผ๋ก ๋น๋๊ธฐ ์ฝ๋๋ฅผ ๊ตฌ์กฐํํ ์ ์๊ฒ ํฉ๋๋ค. async/await(ES2017)์ ๊ฒฐํฉํ๋ฉด ํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณต์ก์ฑ์ ๊ด๋ฆฌํ๊ธฐ ์ํ ์ฐ์ํ๊ณ ๊ฒฌ๊ณ ํ ๊ตฌ๋ฌธ์ ์ ๊ณตํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ์ด ํต์ฌ ๊ธฐ์ ์ ๊ธฐ๋ฐ์ผ๋ก ์์ ์ ์ธ ๋ฐฑ์๋ ์ํคํ ์ฒ์ ๋ฐ์ํ ํ๋ก ํธ์๋ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌ์ถํฉ๋๋ค.