๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive ๋์์ 45์ฅ ํ๋ก๋ฏธ์ค๋ฅผ ์ ๋ฆฌํ์์ต๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ํ ํ๋์ ํจํด์ผ๋ก ์ฝ๋ฐฑ ํจ์๋ฅผ ์ฌ์ฉํ๋ค. ํ์ง๋ง ์ ํต์ ์ธ ์ฝ๋ฐฑ ํจํด์ ์ฝ๋ฐฑ ํฌ๋ก ์ธํด ๊ฐ๋ ์ฑ์ด ๋์๊ณ ๋น๋๊ธฐ ์ฒ๋ฆฌ ์ค ๋ฐ์ํ ์๋ฌ์ ์ฒ์น๊ฐ ๊ณค๋ํ๋ฉฐ ์ฌ๋ฌ ๊ฐ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ํ๋ฒ์ ์ฒ๋ฆฌํ๋ ๋ฐ๋ ํ๊ณ๊ฐ ์๊ธฐ ๋๋ฌธ์ ํ๋ก๋ฏธ์ค๊ฐ ๋ฑ์ฅํ์๋ค.
๋น๋๊ธฐ ํจ์๋ฅผ ํธ์ถํ๋ฉด ํจ์ ๋ด๋ถ์ ๋น๋๊ธฐ๋ก ๋์ํ๋ ์ฝ๋๊ฐ ์๋ฃ๋์ง ์์๋ค ํด๋ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ์ฆ์ ์ข ๋ฃ๋๋ค.
let g = 0
setTimeout(() => {
g = 100
}, 0)
console.log(g) // 0
์์ฒ๋ผ ๋น๋๊ธฐ ํจ์ ๋ด๋ถ์ ๋น๋๊ธฐ๋ก ๋์ํ๋ ์ฝ๋์์ ์ฒ๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ์ธ๋ถ๋ก ๋ฐํํ๊ฑฐ๋ ์์ ์ค์ฝํ์ ๋ณ์์ ํ ๋นํ๋ฉด ๊ธฐ๋ํ ๋๋ก ๋์ํ์ง ์๋๋ค.
์ด์ฒ๋ผ ์ฝ๋ฐฑ ํจ์๋ฅผ ํตํด ๋น๋๊ธฐ ์ฒ๋ฆฌ ๊ฒฐ๊ณผ์ ๋ํ ํ์ ์ฒ๋ฆฌ๋ฅผ ์ํํ๋ ๋น๋๊ธฐ ํจ์๊ฐ ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฒฐ๊ณผ๋ฅผ ๊ฐ์ง๊ณ ๋ ๋ค์ ๋น๋๊ธฐ ํจ์๋ฅผ ํธ์ถํ์ฌ ๋ณต์กํด์ง๋ ํ์์ ์ฝ๋ฐฑ ํฌ์ด๋ผ ํ๋ค.
๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ํ ์ฝ๋ฐฑ ํจํด์ ๋ฌธ์ ์ ์ค์์ ๊ฐ์ฅ ์ฌ๊ฐํ ๊ฒ์ ์๋ฌ ์ฒ๋ฆฌ๊ฐ ๊ณค๋ํ๋ค๋ ๊ฒ์ด๋ค.
try {
setTimeout(() => {
throw new Error('error')
}, 1000)
} catch (e) {
// ์๋ฌ๋ฅผ ์บ์นํ์ง ๋ชปํ๋ค.
console.log(error)
}
Promise
๋ ECMAScript ์ฌ์์ ์ ์๋ ํ์ค ๋นํธ์ธ ๊ฐ์ฒด๋ค. Promise
์์ฑ์ ํจ์๋ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ํํ ์ฝ๋ฐฑํจ์๋ฅผ ์ธ์๋ก ์ ๋ฌ๋ฐ๋๋ฐ ์ด ์ฝ๋ฐฑํจ์๋ resolve์ reject ํจ์๋ฅผ ์ธ์๋ก ์ ๋ฌ๋ฐ๋๋ค.
// ํ๋ก๋ฏธ์ค ์์ฑ
const promise = new Promise((resolve, reject) => {
// Promise ํจ์์ ์ฝ๋ฐฑ ํจ์ ๋ด๋ถ์์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ํํ๋ค.
if(๋น๋๊ธฐ ์ฒ๋ฆฌ ์ฑ๊ณต){
resolve('result')
} else {
reject('failure reason')
}
})
๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ์ฑ๊ณตํ๋ฉด resolve
ํจ์๋ฅผ ํธ์ถํ๊ณ ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ์คํจํ๋ฉด reject
ํจ์๋ฅผ ํธ์ถํ๋ค.
Pending ์ํ์์ Fulfilled๋ก ํด๊ฒฐ์ด ๋์์ ๋๋ reslove
๊ฐ ๋ ๊ฒ์ด๊ณ Pending์ํ์์ Rejected์ํ๋ก ๊ฑฐ๋ถ ๋์์ ๋๋ reject
๋ ๊ฒ์ด๋ค.
์ด๋ค ํจ์๊ฐ Promise๋ฅผ ๋ฐํํ๋ค๋ ๊ฒ์ ๊ทธ ํจ์๋ ๋น๋๊ธฐ ์ ์ผ๋ก ๋์์ ํ๊ณ ๋ฐํํ Promise๊ฐ์ฒด๋ฅผ ์ด์ฉํด์ ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ๊ฒฐ๊ณผ ๊ฐ์ then๊ณผ catch๋ก ์ด์ฉํ๊ฒ ๋ค๋ ์๋ฏธ์ด๋ค.
then
๋ฉ์๋๋ ๋ ๊ฐ์ ์ฝ๋ฐฑ ํจ์๋ฅผ ์ธ์๋ก ์ ๋ฌ๋ฐ๋๋ค.
then๋ฉ์๋๋ ์ธ์ ๋ ํ๋ก๋ฏธ์ค๋ฅผ ๋ฐํํ๋ค.
catch
๋ฉ์๋์ ์ฝ๋ฐฑํจ์๋ ํ๋ก๋ฏธ์ค๊ฐ rejected์ํ์ธ ๊ฒฝ์ฐ๋ง ํธ์ถ๋๋ค.
finally ๋ฉ์๋์ ์ฝ๋ฐฑ ํจ์๋ ํ๋ก๋ฏธ์ค์ ์ฑ๊ณต ํน์ ์คํจ์ ์๊ด์์ด ๋ฌด์กฐ๊ฑด ํ ๋ฒ ํธ์ถ๋๋ค.
then, catch, finally ํ์ ์ฒ๋ฆฌ ๋ฉ์๋๋ ์ธ์ ๋ ํ๋ก๋ฏธ์ค๋ฅผ ๋ฐํํ๋ฏ๋ก ์ฐ์์ ์ผ๋ก ํธ์ถํ ์ ์๋ค. ์ด๋ฅผ ํ๋ก๋ฏธ์ค ์ฒด์ด๋์ด๋ผ ํ๋ค.
๋ ๋ฉ์๋๋ ์ด๋ฏธ ์กด์ฌํ๋ ๊ฐ์ ๋ํํ์ฌ ํ๋ก๋ฏธ์ค๋ฅผ ์์ฑํ๊ธฐ ์ํด ์ฌ์ฉํ๋ค. Promise.resolve
๋ฉ์๋๋ ์ธ์๋ก ์ ๋ฌ๋ฐ์ ๊ฐ์ resolve
ํ๋ ํ๋ก๋ฏธ์ค๋ฅผ ์์ฑํ๋ค. Promise.reject
๋ฉ์๋๋ ์ธ์๋ก ์ ๋ฌ๋ฐ์ ๊ฐ์ reject
ํ๋ ํ๋ก๋ฏธ์ค๋ฅผ ์์ฑํ๋ค.
Promise.all
๋ฉ์๋๋ ์ฌ๋ฌ ๊ฐ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ๋ชจ๋ ๋ณ๋ ฌ ์ฒ๋ฆฌํ ๋ ์ฌ์ฉํ๋ค.
Promise.all([๋น๋๊ธฐ ์ฒ๋ฆฌ ํจ์, ๋น๋๊ธฐ ์ฒ๋ฆฌ ํจ์])
.then(console.log)
.catch(console.error);
Promise.all
๋ฉ์๋๋ ํ๋ก๋ฏธ์ค๋ ์์๋ก ๊ฐ๋ ๋ฐฐ์ด ๋ฑ์ ์ดํฐ๋ฌ๋ธ์ ์ธ์๋ก ์ ๋ฌ๋ฐ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ ๋ฌ๋ฐ์ ๋ชจ๋ ํ๋ก๋ฏธ์ค๊ฐ ๋ชจ๋ fulfilled ์ํ๊ฐ ๋๋ฉด ๋ชจ๋ ์ฒ๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ๋ฐฐ์ด์ ์ ์ฅํด ์๋ก์ด ํ๋ก๋ฏธ์ค๋ฅผ ๋ฐํํ๋ค.
Promise.race
๋ Promise.all์ฒ๋ผ ๋ชจ๋ ํ๋ก๋ฏธ์ค๊ฐ fulfilled ์ํ๊ฐ ๋๋ ๊ฒ์ ๊ธฐ๋ค๋ฆฌ๋ ๊ฒ์ด ์๋๋ผ ๊ฐ์ฅ ๋จผ์ fulfilled ์ํ๊ฐ ๋ ํ๋ก๋ฏธ์ค์ ์ฒ๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ resolveํ๋ ์๋ก์ด ํ๋ก๋ฏธ์ค๋ฅผ ๋ฐํํ๋ค.
Promise.allSettled
๋ฉ์๋๋ ํ๋ก๋ฏธ์ค๋ฅผ ์์๋ก ๊ฐ๋ ๋ฐฐ์ด ๋ฑ์ ์ดํฐ๋ฌ๋ธ์ ์ธ์๋ก ์ ๋ฌ๋ฐ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ ๋ฌ๋ฐ์ ํ๋ก๋ฏธ์ค๊ฐ ๋ชจ๋ settled์ํ(fulfilled || rejected)๊ฐ ๋๋ฉด ์ฒ๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ๋ฐฐ์ด๋ก ๋ฐํํ๋ค.
ํ๋ก๋ฏธ์ค์ ํ์ ์ฒ๋ฆฌ ๋ฉ์๋์ ์ฝ๋ฐฑ ํจ์๋ ํ์คํฌ ํ๊ฐ ์๋๋ผ ๋ง์ดํฌ๋กํ์คํฌ ํ์ ์ ์ฅ๋๋ค.
๋ง์ดํฌ๋กํ์คํฌ ํ๋ ํ์คํฌํ๋ณด๋ค ์ฐ์ ์์๊ฐ ๋๋ค. ์ฆ, ์ด๋ฒคํธ ๋ฃจํ๋ ์ฝ ์คํ์ด ๋น๋ฉด ๋จผ์ ๋ง์ดํฌ๋กํ์คํฌ ํ์์ ๋๊ธฐํ๊ณ ์๋ ํจ์๋ฅผ ๊ฐ์ ธ์ ์คํํ๋ค. ์ดํ ๋ง์ดํฌ๋กํ์คํฌ ํ๊ฐ ๋น๋ฉด ํ์คํฌ ํ์์ ๋๊ธฐํ๊ณ ์๋ ํจ์๋ฅผ ๊ฐ์ ธ์ ์คํํ๋ค.
fetch
๋ XMLHttpRequest์ ๋ง์ฐฌ๊ฐ์ง๋ก HTTP ์์ฒญ ์ ์ก ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ Web API๋ค. ํ๋ก๋ฏธ์ค๋ฅผ ์ง์ํ๊ธฐ ๋๋ฌธ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ํ ์ฝ๋ฐฑ ํจํด์ ๋จ์ ์์ ์์ ๋กญ๋ค.
fetch ํจ์๋ HTTP ์๋ต์ ๋ํ๋ด๋ Response ๊ฐ์ฒด๋ฅผ ๋ํํ Promise ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ค.
fetch(url)
.then(res => {
if(!res.ok) throw new Error(res.statusText)
return res.json()
})
Ref
- ์ด์ ๋ชจ ์ , โ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Diveโ, ์ํค๋ถ์ค