์์ ๊ธ์์ ๋๊ธฐ์ ๋น๋๊ธฐ์ ๊ฐ๋จํ ๊ฐ๋
์ ์ดํด ๋ณด์๋ค.
์ด๋ฒ ๊ธ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ์์์ ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ๋ํด ์ข ๋ ๊น์ด์๊ฒ ๋ค๋ค๋ณด๊ฒ ๋ค.
Javascript
๋ ๋๊ธฐ์ ์ธ ์ธ์ด์ด๊ณ , blocking์ด๋ฉฐ, single-threadedํ ์ธ์ด์ด๋ค. ํ์ง๋ง ์ด๊ฒ์ ํ๋ฒ์ ํ๋ฒ์ ์์
๋ง ์งํํ ์ ์๋ค๋ ํน์ฑ์ ์๋ฏธํ๋ค. ํ์ง๋ง ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ชจ๋ ๊ฒ์์ ์ด๋ฌํ ํน์ฑ์ ์๋ฏธํ์ง๋ ์๋๋ค. ๋ง์ฝ ๋ง์ ์์ ๋ฐ์ดํฐ ๋ฒ ์ด์ค๋ฅผ ์์ฒญํด์ผ ํ๋ค๋ฉด ์ด๋ป๊ฒ ํ ๊น? ๋๊ธฐ์ ์ผ๋ก ์ฒ๋ฆฌํ๋ค๋ฉด ํ๋์ ์์
์ ๋ํ ์์ฒญ์ ํ๊ณ ์๋ต์ ๊ธฐ๋ค๋ฆฌ๋ ๋์ ๋ค๋ฅธ ์์
์ ๋๊ธฐํด์ผ ํ ๊ฒ์ด๋ค. ์๊ฐ์ด ๊ต์ฅํ ์ค๋ ๊ฑธ๋ฆฐ๋ค.
Javascript
๋ ์ด๋ฌํ ์ด์๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ํด๊ฒฐ์ฑ
์ ์ ์ํ๋ค. ์ฌ๋๋ค์ด Javascript
๊ฐ ๋น๋๊ธฐ์ ์ธ์ด๋ผ๊ณ ์คํดํ๋ ์ด์ ๊ฐ Javascript
๋ฅผ ๋น๋๊ธฐ์ ์ผ๋ก ๋์ํ๋๋ก ํ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค.
๋ง์ฝ ์์
์ ๋๊ธฐ์
์ผ๋ก ์ฒ๋ฆฌํ๋ค๋ฉด ํ๋์ ์์
์ด ๋๋ ๋ ๊น์ง ๊ธฐ๋ค๋ฆฌ๋ ๋์ ์ค์ง์ํ๊ฐ ๋๊ธฐ ๋๋ฌธ์ ๋ค๋ฅธ ์์
์ ํ ์๊ฐ ์๋ค. ์์
์ด ๋๋๊ณ ๋์์ผ ๋น๋ก์ ๊ทธ ๋ค์ ์์ ๋ ์์
์ ํ ์ ์๋ค.
ํ์ง๋ง ์ด๋ฅผ ๋น๋๊ธฐ์
์ผ๋ก ์ฒ๋ฆฌํ๋ค๋ฉด ์์
์ ํ๋ฆ์ด ๋ฉ์ถ์ง ์๊ณ ๋์์ ์ฌ๋ฌ๊ฐ์ง ์์
์ ์ฒ๋ฆฌํ ์ ์๋ค. ๊ทธ๋ฆฌ๊ณ ๊ธฐ๋ค๋ฆฌ๋ ๊ณผ์ ์์ ๋ค๋ฅธ ํจ์๋ ํธ์ถ ํ ์ ์๋ค.
์ฝ๋ฐฑ ํจ์๋ ํจ์ ์์์ ์ด๋ค ํน์ ํ ์์ ์ ํธ์ถ๋๋ ํจ์๋ฅผ ๋งํ๋ค. ๋ณดํต ์ฝ๋ฐฑํจ์๋ ํจ์์ ๋งค๊ฐ๋ณ์๋ก ์ ๋ฌํ์ฌ ํน์ ์์ ์ ์ฝ๋ฐฑ ํจ์๋ฅผ ํธ์ถํ๋ค.
๋๊ธฐ ์ฒ๋ฆฌ์์ ๊ฐ์ฅ ๊ฐ๋จํ ํด๊ฒฐ์ฑ
์ ๋น๋๊ธฐ callback
์ ์ฌ์ฉํ๋ ๊ฒ์ด๋ค.
์ฝ๋ฐฑ ์ง์ฅ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ํด ์ฝ๋ฐฑ ํจ์๋ฅผ ์ฐ์ํด์ ์ฌ์ฉํ ๋ ๋ฐ์ํ๋ ๋ฌธ์ ์ด๋ค.
ํจ์์ ๋ฐํ ๊ฐ์ ๋ฐ์ ๋ค์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ํด์ผ ํ๋ ๊ฒฝ์ฐ์ ์์ ๊ฐ์ ํจ์๋ฅผ ์ฝ๋ฐฑ์ผ๋ก ๋ฐ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ํ ์ ์๋ค.
ํ์ง๋ง ์ฝ๋ฐฑ ํจ์๋ ๊ฐ๋ ์ฑ์ด ๋งค์ฐ ๋จ์ด์ง๋ค. ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ์์ฒ๋ผ 3๊ฐ๋ก ๋๋์ง ์๋๋ค๋ฉด ๋์์ด ์์ผ๋ก ๋์ด ํผ๋ผ๋ฏธ๋๋ฅผ ๊ทธ๋ฆฌ๊ฒ ๋๋ค.
์ด๋ฌํ ์ฝ๋ฐฑ ์ง์ฅ์ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์๋ Promise์ Async/await๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
Promise
๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋น๋๊ธฐ ์์
์ ์ข ๋ ํธ๋ฆฌํ๊ฒ ์ฒ๋ฆฌ ํ ์ ์๋๋ก ES6์ ๋์
๋ ๊ธฐ๋ฅ์ด๋ค.
const promise = new Promise ((resolve, reject) => {
//executor ์คํ์, ์คํ ํจ์..
})
resolve
๋ new Promise๊ฐ ๋ง๋ค์ด ์ง๋ ์๋์ผ๋ก ์คํ๋๋ค. executor์ ์ธ์ resolve
, reject
๋ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์์ฒด์ ์ผ๋ก ์ ๊ณตํ๋ ์ฝ๋ฐฑ์ด๋ค.
resolve
: ์์
์ด ์ฑ๊ณต์ ์ผ๋ก ๋๋ ๊ฒฝ์ฐ, ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ํ๋ด๋ value์ ํจ๊ป ํธ์ถํ๋ค.reject
: ์๋ฌ ๋ฐ์ ์ ์๋ฌ ๊ฐ์ฒด๋ฅผ ๋ํ๋ด๋ error์ ํจ๊ป ํธ์ถํ๋ค. executor๋ ์๋์ผ๋ก ์คํ๋๋๋ฐ ์ฌ๊ธฐ์ ์ํ๋ ์ผ์ด ์ฒ๋ฆฌ๋๋ค. ์ฒ๋ฆฌ๊ฐ ๋๋๋ฉด ์ฑ๊ณต ์ฌ๋ถ์ ๋ฐ๋ผ resolve
๋ reject
๋ฅผ ํธ์ถํ๋ค.
ํ๋ก๋ฏธ์ค๋ 3๊ฐ์ง์ ์ํ(states)๋ฅผ ๊ฐ์ง๋ฉฐ, ์ฌ๊ธฐ์ ์ํ๋ ํ๋ก๋ฏธ์ค์ ์ฒ๋ฆฌ ๊ณผ์ ์ ์๋ฏธํ๋ค. new Promise()
๋ก ํ๋ก๋ฏธ์ค๋ฅผ ์์ฑํ๊ณ ์ข
๋ฃ๋ ๋๊น์ง 3๊ฐ์ง ์ํ๋ฅผ ๊ฐ์ง๋ค.
Pending
: ๋น๋๊ธฐ ์ฒ๋ฆฌ ๋ก์ง์ด ์์ง ์๋ฃ๋์ง ์์ ์ํ (๋๊ธฐ)Fulfilled
: ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ์๋ฃ๋์ด ํ๋ก๋ฏธ์ค๊ฐ ๊ฒฐ๊ณผ ๊ฐ์ ๋ฐํํด์ค ์ํ (์ฑ๊ณต)Rejected
: ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ์คํจํ๊ฑฐ๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ํ(์คํจ)const myPromise = new Promise((resolve, reject) => {
setTimeout (() => {
resolve(1);
}, 1000);
});
myPromise.then(n => {
console.log(n);
});
์ถ์ฒ ๋ฒจ๋กํผํธ
์์
์ด ๋๋๊ณ ๋ ๋ค๋ฅธ ์์
์ ํ๊ณ ์ ํ ๋, .then(...)
์ ๋ถ์ด์ ์ฌ์ฉํ๋ฉด ๋๋ค.
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error());
}, 1000);
});
myPromise
.then(n => {
console.log(n);
})
.catch(error => {
console.log(error);
});
์ถ์ฒ ๋ฒจ๋กํผํธ
์ฑ๊ณตํ๋ฉด .then()
๋ฉ์๋๊ฐ ์คํ๋๊ณ , ์คํจํ๋ฉด reject๋ฅผ ์ฌ์ฉํ๊ณ ,
error๋.catch()
๋ฉ์๋๋ฅผ ์ฌ์ฉํด์ ์ฒ๋ฆฌํ๋ค.
async
/ await
๋ ES8๋ฌธ๋ฒ์ผ๋ก์ ๊ฐ์ฅ ์ต๊ทผ์ ๋์จ ๋ฌธ๋ฒ์ด๋ค. ์ฝ๋ฐฑํจ์์ promise
์ ๋จ์ ์ ๋ณด์ํ๊ณ ๊ฐ๋ฐ์๊ฐ ์ฝ๊ธฐ ์ข์ ์ฝ๋๋ฅผ ์์ฑํ๊ฒ ๋์์ค๋ค.
async
/await
๋ promise
๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ์๋ค.
๋ชจ๋ async
ํจ์๋ promise
๋ฅผ ๋ฆฌํดํ๊ณ , ๋ชจ๋ await
ํจ์๋ ์ผ๋ฐ์ ์ผ๋ก promise
๊ฐ ๋๋ค.
async function ํจ์๋ช
(){
await ๋น๋๊ธฐ์ฒ๋ฆฌ_๋ฉ์๋๋ช
();
}
ํจ์ ์์ async
๋ฅผ ๋ถ์ด๊ณ , ํธ์ถํ ๋น๋๊ธฐ ํจ์ ์์ ์ฆ promise
์์ await
ํค์๋๋ฅผ ๋ถ์ธ๋ค. ํจ์ ์์ async
๊ฐ ์ ์ธ ๋์ด์ผ๋ง await
๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
async
๋ function์์ ์์นํ๋ค. function์์ async
๋ฅผ ๋ถ์ด๋ฉด ํด๋น ํจ์๋ ํญ์ promise
๋ฅผ ๋ฐํํ๋ค.
await
๋ฅผ ๋ง๋๋ฉด promise
๊ฐ ์ฒ๋ฆฌ๋ ๋ ๊น์ง ๊ธฐ๋ค๋ฆฐ๋ค. ๊ฒฐ๊ณผ๋ ๊ทธ ์ดํ์ ๋ณํ๋๋ค. ์ผ๋ฐ ํจ์์๋ ์ฌ์ฉํ ์ ์๋ค. async
ํจ์๊ฐ ์๋๋ฐ await
๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฌธ๋ฒ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. ์์๋ ๋งํ๋ฏ์ด await
๋ async
ํจ์์์๋ง ๋ฐ์ํ๋ค.
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function process() {
console.log('์๋
ํ์ธ์!');
await sleep(1000); // 1์ด์ฌ๊ณ
console.log('๋ฐ๊ฐ์ต๋๋ค!');
}
process();
์ถ์ฒ ๋ฒจ๋กํผํธ
async & await์์ ์์ธ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ๋ฐ๋ก try-catch์ด๋ค. ํ๋ก๋ฏธ์ค์์ ์๋ฌ ์ฒ๋ฆฌ๋ฅผ ์ํด .catch()๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ฒ๋ผ async์์๋ catch {} ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
async function logTodoTitle() {
try {
var user = await fetchUser();
if (user.id === 1) {
var todo = await fetchTodo();
console.log(todo.title); // delectus aut autem
}
} catch (error) {
console.log(error);
}
}
์ถ์ฒ joshua1988.github
ํ์ฌ ๊ธฐ์
ํ์
์ ๋์์๋ค. ๋ง์ง๋ง 4์ฃผ์ฐจ๋ค. ์ด๊ณณ ํ๋ก ํธ์๋ ์ค๋ฌด์๊ป์ ๋ฐ์ดํฐ ์ฒ๋ฆฌ๋ฅผ ํ ๋ ์ async/await๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋ค๋ฅธ ๊ฒ์ ์ฌ์ฉํ๋์ง ๊ฐ์ด ๋์จ ๋๊ธฐ์ ๋์๊ฒ ๋ฌผ์ด๋ณด์
จ๋ค.. ์ ํฌ๊ฐ ๋ฐฐ์ด๊ฒ ์ด๊ฑฐ๋ผ์..๋ผ๋ ์ด์ด์๋ ๋ต๋ณ๊ณผ ํจ๊ป ๋์ด์ ๋๋ต์ ํ ์๊ฐ ์์๋ค. ์ฐฝํผํ๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ด๋ป๊ฒ ํด์ผํ๋์ง ์ ํด์ผ ํ๋์ง ์ ๋๋ก ๊ฐ๋
์ด ์กํ์์ง ์์ ์ํ์๋ค. ๊ทธ๋์ ๊ณต๋ถํด์ผ๊ฒ ๋ค๋ ๋๊ธฐ๋ถ์ฌ๊ฐ ํ์คํ๋ค.
์์ผ๋ก ํ๋ก ํธ ์๋ ๊ฐ๋ฐ์๋ก ์ผ์ ํ๋ฉด์ ๋ ๋ง์ ์์ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํด์ผ ํ๋๋ฐ async/await๋ฅผ ๋์ฑ ์ ๊ทน์ ์ผ๋ก ์ฌ์ฉํด์ผ๊ฒ ๋ค. ๊ทธ๋ฆฌ๊ณ ๋ก์ง์ ์ง๋๋ฐ ๋จ์ํ ์๋ํ๋๊ฒ๋ง ๋ณด๋๊ฒ ์๋ ์ด๋ค ํ๋ก์ฐ๋ก ๋์์ ํ๊ฒ๋๋์ง๋ฅผ ์๊ฐํ๋ฉด์ ์ฝ๋ฉ์ ํด์ผ๊ฒ ๋ค๋ ์๊ฐ์ด ๋ง๊ตฌ๋ง๊ตฌ ๋ ๋ค. ์๊ตฌ์๊ตฌ๐ง๐ง