์๋
ํ์ธ์ TriplexLab์
๋๋ค.
์ค๋์ Promise๊ดํด์ ์ดํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
fetchํจ์๋ Promise๊ฐ์ฒด๋ฅผ ๋ฆฌํดํฉ๋๋ค.
๋์ค์ Promise๊ฐ์ฒด ์ํ๊ฐ -> fulfilled ์ํ๊ฐ ๋์์ ๋ thenํจ์์๋ค๊ฐ ์ฝ๋ฐฑ์ ๋ฑ๋กํ ์ ์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ์ค์ ๋ก Promise๊ฐ์ฒด ์ํ๊ฐ -> fulfilled ์ํ๊ฐ ๋๋ฉด ๋ฑ๋กํ ์ฝ๋ฐฑ์ด ์คํ์ด ๋๋ ๊ฒ์ด๊ณ ,
๊ทธ ์์
์ฑ๊ณต ๊ฒฐ๊ณผ๊ฐ ์ฝ๋ฐฑ์ ํ๋ผ๋ฏธํฐ(response)๋ก ๋์ด์ค๋ ๊ฒ์
๋๋ค.
์ฌ์ค Promise ๊ฐ์ฒด๊ฐ ๋ฑ์ฅํ๊ธฐ ์ ์๋ ๋น๋๊ธฐ์ ์ธ ์ฒ๋ฆฌ๋ฅผ ํ ์ ์๋ ๋ฐฉ๋ฒ์ ์์์ต๋๋ค.
setTimeout ํจ์๋, addEventListener ๋ฉ์๋์ฒ๋ผ์.
setTimeout(callback, milliseconds);
addEventListener(eventname, callback);
์ด๊ฒ๋ค์ ๋ชจ๋ ์ง์ ํ๋ผ๋ฏธํฐ์ ์ฝ๋ฐฑ์ ์ ๋ฌํ๋ ํ์์ผ๋ก ์ ์๋์ด ์๋๋ฐ์.
๋ง์ฝ fetch ํจ์๋ฅผ ์ด๋ฐ ์์ผ๋ก ๋ง๋ค์๋ค๋ฉด
fetch('https;//first.com', callback)
fetch ํจ์๋ ์ด๋ฐ ์์ผ๋ก ์ฌ์ฉํ์๊ฒ ์ฃ ? ๊ทธ๋ฐ๋ฐ ์ ์ด๋ฐ ๋ฐฉ๋ฒ์ด ์ ํ๋์ง ์๊ณ , ๊ตณ์ด Promise ๊ฐ์ฒด๋ผ๋ ๋ฌธ๋ฒ์ด ๋์ ๋ ๊ฒ์ผ๊น์? ๊ทธ ์ด์ ๋ ๋ฐ๋ก ํจ์์ ์ฝ๋ฐฑ์ ์ง์ ๋ฃ๋ ํ์์ ์ฝ๋ฐฑ ํฌ(callback hell)์ด๋ผ๊ณ ํ๋ ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์๋ ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
์ ๊น ์ด ์ฝ๋๋ฅผ ๋ด ์๋ค. ๋ง์ฝ fetch ํจ์๊ฐ ์ง๊ธ๊ณผ ๊ฐ์ด Promise ๊ฐ์ฒด๋ฅผ ๋ฆฌํดํ๋ ๊ฒ ์๋๋ผ setTimeout ํจ์์ฒ๋ผ ์ฝ๋ฐฑ์ ์ง์ ์ง์ด๋ฃ๋ ํ์์ ํจ์์๋ค๋ฉด ์ฐ๋ฆฌ๋ ์ฌ๋ฌ ๋น๋๊ธฐ ์์ ์ ์์ฐจ์ ์ผ๋ก ์ํํด์ผํ ๋
fetch('https://first.com', (response) => {
// Do Something
fetch('https://second.com', (response) => {
// Do Something
fetch('https;//third.com', (response) => {
// Do Something
fetch('https;//fourth.com', (response) => {
// Do Something
});
});
});
});
์ด๋ฐ ์์ ์ฝ๋๋ฅผ ์์ฑํด์ผ ํ์ ๊ฒ๋๋ค. ์ง๊ธ fetch ํจ์ ์์ ์ฝ๋ฐฑ์ fetch ํจ์๊ฐ ์๊ณ ๊ทธ ํจ์์ ์ฝ๋ฐฑ ์์ fetch ํจ์๊ฐ ์๊ณ ๋.. ๊ณ์ ์ด๋ฐ ์์ผ๋ก ๋ค์ด๊ฐ์์ฃ ? ๊ทธ๋ฐ๋ฐ ์ด ์ฝ๋๋ฅผ ๋ณด๋ฉด ์ด๋ค ๋๋์ด ๋์๋์? ๋ญ๊ฐ ์ฝ๊ธฐ ์ด๋ ต๊ณ ๋ณต์กํด ๋ณด์ด์ฃ ? ํ๋ง๋๋ก ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง๋๋ค. ๊ทธ๋๋ง ์ง๊ธ์ ์ค์ ์ฝ๋๊ฐ ๋ค์ด๊ฐ์ผ ํ ์๋ฆฌ์ "// Do Something"์ด๋ผ๋์ด๋ผ๋ ์ฃผ์์ด ๋ค์ด๊ฐ ์์ด์ ๊ด์ฐฎ์ง๋ง, ์ค์ ๋ก ํ์ํ ์ฝ๋๋ค๊น์ง ๋ค์ด๊ฐ๊ฒ ๋๋ฉด ์ด ์ฝ๋์ ๊ฐ๋ ์ฑ์ ํ์ ํ๊ฒ ๋จ์ด์ง๊ฒ ๋๋๋ฐ์. ์ด๋ฐ ํ์์ ์ฝ๋ฐฑ ์ง์ฅ ๋๋ ์ฝ๋ฐฑ ํฌ(callback hell)์ด๋ผ๊ณ ํฉ๋๋ค. ๋๋ ์ง์ฅ์ ํผ๋ผ๋ฏธ๋(Pyramid of Doom)๋ผ๊ณ ๋ ํฉ๋๋ค.
ํ์ง๋ง ์ฐ๋ฆฌ๊ฐ ๋ฐฐ์ ๋ ๋๋ก fetch ํจ์๋ Promise ๊ฐ์ฒด๋ฅผ ๋ฆฌํดํ๊ธฐ ๋๋ฌธ์
fetch('https://first.com')
.then((response) => {
// Do Something
return fetch('https://second.com');
})
.then((response) => {
// Do Something
return fetch('https://third.com');
})
.then((response) => {
// Do Something
return fetch('https://third.com');
});
์ด๋ฐ ์์ผ๋ก Promise Chaining์ ํด์ ์ข ๋ ๊น๋ํ ์ฝ๋๋ก ์ฌ๋ฌ ๋น๋๊ธฐ ์์
์ ์์ฐจ์ ์ผ๋ก ์ฒ๋ฆฌํ ์ ์๋๋ฐ์.
์ด๋ ๊ฒ Promise ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ๋ฉด callback hell ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๋ค.
์ด ๋ฟ๋ง ์๋๋ผ ๊ธฐ์กด์ ์ฝ๋ฐฑ์ ์ง์ ๋ฃ๋ ๋ฐฉ์์ ๋นํด Promise ๊ฐ์ฒด์ ๋ฌธ๋ฒ์ ๋น๋๊ธฐ ์์ ์ ๊ดํ ์ข ๋ ์ธ๋ฐํ ๊ฐ๋ ๋ค์ด ๋ฐ์๋์ด ์์ต๋๋ค. ์ด์ ์ ๋ฐฉ์์์๋ ์ฝ๋ฐฑ์ ํ์ํ ์ธ์๋ฅผ ๋ฃ์ด์ฃผ๊ณ ์คํํ๋ฉด ๋๋ ๋จ์ํ ๋ฐฉ์์ด์๋ค๋ฉด, Promise ๊ฐ์ฒด ๋ฌธ๋ฒ์๋ pending, fulfilled, fulfilled ์ํ, ์์ ์ฑ๊ณต ๊ฒฐ๊ณผ ๋ฐ ์์ ์คํจ ์ ๋ณด(์ด์ ), then, catch, finally ๋ฉ์๋ ๋ฑ๊ณผ ๊ฐ์ ๋น๋๊ธฐ ์์ ์ ๊ดํ ๋ณด๋ค ์ ๊ตํ ์ค๊ณ๊ฐ ๋ฌธ๋ฒ ์์ฒด์ ๋ฐ์๋์ด ์๋ค๋ ๊ฒ์ ์ ์ ์์ต๋๋ค.
๋ฐ๋ก ์ด๋ ๊ฒ Promise ๊ฐ์ฒด๋ผ๋ ๊ฐ๋ ์,
(1) callback hell ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ณ , ์ด์ ๋ํด์
(2) ๋น๋๊ธฐ ์์
์ฒ๋ฆฌ์ ๊ดํ ์ข ๋ ์ธ๋ฐํ ์ฒ๋ฆฌ๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ ๋จ์์ ํด๊ฒฐํ๊ธฐ ์ํด ๋ฑ์ฅํ๊ณ ,
๊ทธ ์ ๋ช ํ ์๋ฐ์คํฌ๋ฆฝํธ์ 2015๋ ๋ ํ์ค์ธ ES6(=ES2015)์ ์ถ๊ฐ๋์์ต๋๋ค.
๋ ๋ง์ ์ปจํ
์ธ ๋ฅผ ๋ณด๊ณ ์ถ์ ๋ถ๋ค์ ๋ฐฉ๋ฌธํด์ ๊ตฌ๊ฒฝํ์ธ์:)
TriplexLab Bolg ๐ ๐