์ค๋ฌด๋ฅผ ์ ํ๋ฉด์ ์น๋ธ๋ผ์ฐ์ ์ ์๋ฒ ๊ฐ ๋ฐ์ดํฐ ์ฒ๋ฆฌํ ์ผ์ด ๋ง๊ธฐ ๋๋ฌธ์ ๋๊ธฐ, ๋น๋๊ธฐ์ ๋ํ์ฌ์๋ ์ฝ๊ฒ ์ ํ ์ ์์์ผ๋, ๋ธ๋กํน์ด๋ผ๋ ๊ฐ๋ ์ ์์ํ๋ค. ์ธ๋ป๋ณด๋ฉด ๋๊ธฐ์ ๋ธ๋กํน์ ๋์ผ ๊ฐ๋ ๊ฐ๊ธฐ๋ ํ์ง๋ง, ํฐ ์ฐ๊ด๊ด๊ณ๊ฐ ์๋ ๋ณ๊ฐ์ ๊ฐ๋ ์ด๋ค.
๊ทธ๋ ๋ค๋ฉด ์ฐจ์ด๋ ๋ญ๊น? ๋ง์ ๊ธ์ ์ฝ์์ง๋ง, ๊ทธ๋ฆผ์ผ๋ก ์ ์ํ๋ ๊ธ์ด ๊ฐ์ฅ ์ดํด๊ฐ ์ฌ์ ๋ค. ๋๋ ๋ ์ ํํ ์ดํด๋ฅผ ์ํ์ฌ ๊ทธ๋ฆผ์ผ๋ก ๋ํ๋ด๋ณด์๋ค.
๋ชฉ์ฐจ
1. ๋๊ธฐ(Synchronous)
2. ๋น๋๊ธฐ(Asynchronous)
3. ๋ธ๋กํน(Blocking)
4. ๋ ผ๋ธ๋กํน(non-Blocking)
๋๊ธฐ(Synchronous)
์์ ์ ์ํ ์ฃผ์ฒด๊ฐ ๋ ๊ฐ ์ด์. ๊ทธ ์์ ๋ค์ด '์๊ฐ'์ ์๋ก ๋ง์ถ๋ค๋ฉด ๋๊ธฐ์ด๋ค.
์๊ฐ์ ๋ง์ถ๋ค๋ ๊ฒ์ ๋ฌด์์ ์๋ฏธํ๋๊ฑธ๊น?
๋ง์ฝ ์์ ์ด 2๊ฐ๋ผ๊ณ ๊ฐ์ ํ ๋, ์์ ์ ์คํํ๋ ๋ ๊ฐ์ function์ด ์๋ก ์์ ์
1)๋์์ ์์ํ๊ฑฐ๋
2)๋์์ ๋๋ด๊ฑฐ๋
3)ํ๋๊ฐ ๋๋๋ฉด, ๋ค๋ฅธ ํ๋๊ฐ ์ฐจ๋ก๋ก ์คํํ๋ค๋ฉด
๋ฐ๋ก ๋๊ธฐ์ด๋ค.
๊ทธ๋ฆผ์ผ๋ก ํํํ์๋ฉด ๋ค์๊ณผ ๊ฐ๋ค.
์์ค๋ก ํํํ์๋ฉด ๋ค์๊ณผ ๊ฐ๋ค.
๊ฒฐ๊ณผ ๊ฐ์์๋ ์ ์ ์๋ฏ์ด, ์์ ์ด ์ฐจ๋ก๋ก ์คํ๋๋ฉฐ ์ฒซ๋ฒ์งธ ์์ ์ด ๋๋์ผ ๋ค์ ์์ ์ผ๋ก ๋์ด๊ฐ๋ ๊ฒ์ ์ ์ ์๋ค.
console.log(1);
console.log(2);
console.log(3);
//๊ฒฐ๊ณผ ๊ฐ
//123
์ด๊ฒ์ ์ ์ด๊ถ๊ณผ ๊ฒฐ๊ณผ๊ฐ์ผ๋ก ์ค๋ช ํ๋ ๋ฐฉ๋ฒ๋ ์๋ค.
(์ ์ด๊ถ์ด๋ ํจ์๋ฅผ ์คํ์ํฌ ์ ์๋ ๊ถ๋ฆฌ์ด๊ณ , ๊ฒฐ๊ณผ๊ฐ์ด๋ ํจ์์ return๊ฐ์ด๋ค.)
๋ถ๋ชจํจ์์ธ run์์ A, B๋ฅผ callํ๋ค. ์ด๋, ๋๊ธฐ ๋ฐฉ์์ผ๋ก ์ค๋ช ํ์๋ฉด
A๋ ์ ์ด๊ถ์ ๊ฐ์ง๊ณ A์์ ์ ๋ง์น ๋ค, ๋ถ๋ชจํจ์์ธ run์๊ฒ ๊ฒฐ๊ณผ๊ฐ์ ์ฃผ๋ฉด์ ๋์์ ์ ์ด๊ถ์ ํจ๊ป ๋๋ ค์ค๋ค.
function run {
A();
B();
}
function A {
console.log('Aํจ์์
๋๋ค.');
}
function B {
console.log('Bํจ์์
๋๋ค.');
}
๋น๋๊ธฐ(Asynchronous)
์์ ์ ์ํ ์ฃผ์ฒด๊ฐ ๋ ๊ฐ ์ด์. ๋๊ธฐ์์ ์ฐจ์ด์ ์, ๋๊ธฐ์ ์ด์ง ์๋ค๋ ๊ฒ!
์์ ์ด 2๊ฐ๋ผ๊ณ ๊ฐ์ ํ ๋, A์ B ํจ์๋ ์๋ก๊ฐ ์์ ์ ์ธ์ ์์ํ๋์ง, ์ธ์ ๋๋๋์ง ์ ํ ๊ด์ฌ์ด ์๋ค.
๋ ์ฃผ์ฒด๊ฐ ์๋ก์ ์์์๊ฐ๊ณผ ์ข ๋ฃ์๊ฐ๊ณผ ์๊ด์์ด, ๊ฐ์์ ์์/์ข ๋ฃ์๊ฐ์ ๊ฐ์ง๋ค.
์์ฒญ๋ง ํด๋๊ณ ์ ํ ์ ๊ฒฝ์ฐ์ง ์๊ณ ์๋ค๊ฐ ์๋ฃ๊ฐ ๋๋ฉด ์๋๊ฐ ๋๋ฌ๋ค๊ณ ๋ง๋ง ํด์ฃผ๋ ์์ด๋ค.
* ์๋ฐ์คํฌ๋ฆฝํธ ์์ฒด๋ ๋น๋๊ธฐ๋ค.
๊ทธ๋ฆผ์ผ๋ก ํํํ์๋ฉด ๋ค์๊ณผ ๊ฐ๋ค.
์์ค๋ก ํํํ์๋ฉด ๋ค์๊ณผ ๊ฐ๋ค.
a, b, c๊ฐ ์์ฐจ์ ์ผ๋ก ์ถ๋ ฅ๋ ๊น? ์์ํ๋ค์ํผ, ์๋๋ค.
* ์ฐธ๊ณ ๋ก setTimeout์ ๋น๋๊ธฐ ํจ์์!
a ํจ์์์ setTimeout์ด ๊ฑธ๋ฆด ๋, ๋๊ธฐ์ ๋ฐฉ์์ด๋ผ๋ฉด ๊ฑฐ๊ธฐ์ ๋๊ธฐํ๊ณ ์๋ฃ๊ฐ ๋๋ฉด b ํจ์๋ก ๋์ด๊ฐ๊ฒ ์ง๋ง
๋น๋๊ธฐ์ ๋ฐฉ์์ ์๋๋ค. ๋ฉ์ถ์ง ์๊ณ , ๋ฐ๋ก b ํจ์๋ฅผ ์คํํ๊ธฐ ๋๋ฌธ์ ์์๊ฐ ๋ค์์ฌ ์ถ๋ ฅ๋๋ค. ์ด ์ํ์์ ์์ฐจ์ ์ผ๋ก ์ํํ๊ณ ์ถ์๋์๋ callback function์ ์ฌ์ฉํ๋ฉด ๋๋ค.
function t1() {
setTimeout( () => {
console.log("task_1");
}, 2000);
}
function t2() {
console.log("task_2");
}
function t3() {
console.log("task_3");
}
t1();
t2();
t3();
A๋ ์ ์ด๊ถ์ ๊ฐ์ง๊ณ A์์ ์ ํ๋ฉด์, ์์ ์ด ๋๋์ง ์๊ณ ๋ ๋ถ๋ชจํจ์์ธ run์๊ฒ ๋ฐ๋ก ์ ์ด๊ถ์ ๋๋ ค์ค๋ค.
์ ์ด๊ถ์ ๋ฐ์ ๋ถ๋ชจํจ์๋ ์ฐจ๋ก๋ก B์์ ์ ์คํํ๊ณ , A์์ ์ ๋ํ ๊ฒฐ๊ณผ ๊ฐ์ ๋ค๋ฅธ ์์ ์ ๋ฐํ๋์ด์ง๋ค.
๋ธ๋กํน(Blocking)
์ฃผ์ฒด๋ ํ๋. ๊ทธ ํ๋์ ์ฃผ์ฒด์ ๋ค๋ฅธ ์์ ์ ์ํํ๋ ๋ ๋ค๋ฅธ ์ฃผ์ฒด์ ๋ํ ๊ฐ๋ .
๋ธ๋กํน์ ์ฃผ์ฒด๊ฐ ์์ ์ ์์ ์ ํ๋ค๊ฐ ํ ์ฃผ์ฒด์ ์์ ์ ์์~๋์ ๊ธฐ๋ค๋ ธ๋ค๊ฐ, ๊ทธ ๋ค์ ๋ค์ ์์ ์ ์์ ์ ์ด์ด๊ฐ๋ ๊ฒ์ ๋งํ๋ค.
ํจ์ A๊ฐ ๋ค๋ฅธ ์ฃผ์ฒด์ธ ํจ์ B๋ฅผ ํธ์ถํ์๋๋ฐ, ํจ์ B์ ์์~๋์ ๊ธฐ๋ค๋ฆฐ ๋ค, B์ ๋ํ return๊ฐ์ ๋ฐ์์จ ํ์ ์์ ์ ์์ ์ ์ด์ด๊ฐ๋ค๋ฉด, ์ด๊ฒ์ด ๋ธ๋กํน์ด๋ผ๊ณ ํ ์ ์๋ค.
๊ทธ๋ฆผ์ผ๋ก ํํํ์๋ฉด ๋ค์๊ณผ ๊ฐ๋ค.
Aํจ์๊ฐ Bํจ์๋ฅผ ํธ์ถํ๋ฉด, A๋ ์ ์ด๊ถ์ B์๊ฒ ๋๊ฒจ์ค๋ค.
๊ทธ๋ฆฌ๊ณ Bํจ์๋ ์์ ์ด ๋๋๋ฉด A์๊ฒ ์ ์ด๊ถ์ ๋๋ ค์ค๋ค. ๊ทธ๋ฐ ๋ค A๋ ๋ค์ ํจ์๋ฅผ ์คํํ๋ค.
๋ ผ๋ธ๋กํน(non-Blocking)
์ฃผ์ฒด๋ ํ๋. ๊ทธ ํ๋์ ์ฃผ์ฒด์ ๋ค๋ฅธ ์์ ์ ์ํํ๋ ๋ ๋ค๋ฅธ ์ฃผ์ฒด์ ๋ํ ๊ฐ๋ .
๋ ผ๋ธ๋กํน์ ์ฃผ์ฒด๊ฐ ์์ ์ ์์ ์ ํ๋ค๊ฐ ํ ์ฃผ์ฒด์ ์์ ์ ์์~๋์ ๊ธฐ๋ค๋ฆฌ์ง ์๋๋ค. ์์ฒญ๋ง์ ํ ๋ค, ์ ๊ฒฝ์ฐ์ง ์๊ณ ์์ ์ ์์ ์ ์ด์ด๊ฐ๋ค. ํจ์ A๊ฐ ๋ค๋ฅธ ์ฃผ์ฒด์ธ ํจ์ B๋ฅผ ํธ์ถํ์๋๋ฐ, ํจ์ B์ ์์~๋์ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ A์ ๋ํ ์์ ์ ์ด์ด๊ฐ๋ค๊ฐ B์ ๋ํ return๊ฐ์ ๋ฐ๋๋ค๋ฉด ๋ ผ๋ธ๋กํน์ด๋ผ๊ณ ํ ์ ์๋ค.
๊ทธ๋ฆผ์ผ๋ก ํํํ์๋ฉด ๋ค์๊ณผ ๊ฐ๋ค.
๋ ผ๋ธ๋กํน๋ ๋ธ๋กํน๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก, ํธ์ถ ํ ๋์ ์ ์ด๊ถ์ ๋๊ฒจ์ค๋ค. ๊ทธ๋ฌ๋, ๋ฐ๋ก ๋๋ ค๋ฐ๋๋ค.
A๋ B์๊ฒ ์ ์ด๊ถ์ ๋๊ฒจ์ฃผ์๋ง์ ๋๋ ค๋ฐ๋๋ค. ์ ์ด๊ถ์ ๋๋ ค๋ฐ์ A๋ ์ด์ด์ ์์ ์ ์งํํ๋ค.
์ ๋ฆฌ
๋๊ธฐ/๋น๋๊ธฐ
- ์์ฒญ๋ฐ์ ํจ์๊ฐ ์์ ์ ์๋ฃํ๋์ง๋ฅผ ๋๊ฐ ์ฒดํฌํ๋๊ฐ?
๋๊ธฐ : ์์ฒญ์๊ฐ ์์ฒญํ ํจ์์ ์์ ์ด ์๋ฃ๋์๋์ง ๊ณ์ ํ์ธ. ํจ์๋ค์ด ์๊ฐ์ ๋ง์ถฐ ์คํ๋์ด์ง๋ค. ์์ฒญ์๋ ์์ฒญํ ํจ์์ ์์๊ณผ ๋์ ๊ฐ์ด ํ๊ฑฐ๋, ์์ฒญํ ํจ์๊ฐ ์ข ๋ฃํ๋ฉด ์์๋๋ค.
๋น๋๊ธฐ : ์์ฒญ์๋ ์์ฒญ๋ง ํ ๋ค, ์ ๊ฒฝ์ฐ์ง ์๊ณ ์์ ์ ์์ ์ ํ๊ณ ์์ผ๋ฉฐ, ์์ฒญ ๋ฐ์ ํจ์๊ฐ ์์ ์ ๋ง์น๋ฉด ์๋ ค์ค๋ค.
๋ธ๋กํน/๋ ผ๋ธ๋กํน
- ์์ฒญ๋ฐ์ ํจ์๊ฐ ์ ์ด๊ถ(ํจ์์คํ๊ถ๋ฆฌ)์ ์ธ์ ๋๊ฒจ์ฃผ๋๋?
๋ธ๋กํน : ์์ฒญ๋ฐ์ ํจ์๊ฐ ์์ ์ ๋ง์น๊ณ ๋๋ฉด, ์์ฒญ์์๊ฒ ์ ์ด๊ถ์ ๋๊ฒจ์ฃผ๊ณ , ์์ฒญ์๋ ์ ์ด๊ถ์ ๋๋ ค๋ฐ์๋๊น์ง ์๋ฌด๊ฒ๋ ํ์ง ๋ชปํ๋ค.
๋ ผ๋ธ๋กํน : ์์ฒญ๋ฐ์ ํจ์๊ฐ ์์ฒญ์์๊ฒ ๋ฐ๋ก ์ ์ด๊ถ์ ๋๊ฒจ์ค๋ค. ์์ฒญ์๋ ์์ฒญ๋ฐ์ ํจ์๊ฐ ์์ ์ ์งํํ๋ ๋์ ๋ค๋ฅธ ์ผ์ ํ ์ ์๋ค.
๋ค์์๋ ๋๊ธฐ/๋น๋๊ธฐ+๋ธ๋กํน/๋ ผ๋ธ๋กํน์ ์กฐํฉ์ ๋ํด์ ์์๋ณด์ !
References
https://joooing.tistory.com/entry/%EB%8F%99%EA%B8%B0%EB%B9%84%EB%8F%99%EA%B8%B0-%EB%B8%94%EB%A1%9C%ED%82%B9%EB%85%BC%EB%B8%94%EB%A1%9C%ED%82%B9