JavaScript๋ ์ ์ฑ๊ธ ์ค๋ ๋์ผ๊น?
์๋
ํ์ธ์, ์ฌ๋ฌ๋ถ!
์ค๋์ JavaScript๊ฐ ์ ์ฑ๊ธ ์ค๋ ๋(single-threaded) ๋ก ์ค๊ณ๋์๋์ง์ ๋ํด ์์๋ณด๊ฒ ์ต๋๋ค.
์ด๋ฒ ๊ธ์์๋ JavaScript์ ์ฑ๊ธ ์ค๋ ๋๊ฐ ๋ฌด์์ธ์ง, ์ ๊ทธ๋ ๊ฒ ์ค๊ณ๋์๋์ง, ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ฐ์์๊ฒ ์ด๋ค ์๋ฏธ๋ฅผ ๊ฐ์ง๋์ง ๊น์ด ํ๊ตฌํด๋ณด๊ฒ ์ต๋๋ค.
๋ชฉ์ฐจ
1. ํ๋ก์ธ์ค์ ์ค๋ ๋(Thread)
ํ๋ก์ธ์ค๋?
๋จผ์ , ํ๋ก์ธ์ค(process)๋ ๋จ์ํ ์คํ ์ค์ธ ํ๋ก๊ทธ๋จ(program)์ด๋ผ๊ณ ํ ์ ์์ต๋๋ค.
์ฆ, ์ฌ์ฉ์๊ฐ ์์ฑํ ํ๋ก๊ทธ๋จ์ด ์ด์์ฒด์ ์ ์ํด ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ํ ๋น๋ฐ์ ์คํ ์ค์ธ ๊ฒ์ ๋งํฉ๋๋ค.
์ด๋ฌํ ํ๋ก์ธ์ค๋ ํ๋ก๊ทธ๋จ์ ์ฌ์ฉ๋๋ ๋ฐ์ดํฐ์ ๋ฉ๋ชจ๋ฆฌ ๋ฑ์ ์์ ๊ทธ๋ฆฌ๊ณ ์ค๋ ๋๋ก ๊ตฌ์ฑ๋ฉ๋๋ค.
์ค๋ ๋๋ ๋ฌด์์ธ๊ฐ?
ํ๋ก์ธ์ค(process) ๋ด์์ ์ค์ ๋ก ์์
์ ์ํํ๋ ์ฃผ์ฒด๋ฅผ ์๋ฏธํฉ๋๋ค.
์ค๋ ๋๋ ํ๋ก๊ทธ๋จ ๋ด์์ ๋
๋ฆฝ์ ์ผ๋ก ์คํ๋ ์ ์๋ ๋จ์๋ก,
๋ชจ๋ ํ๋ก์ธ์ค์๋ ํ ๊ฐ ์ด์์ ์ค๋ ๋๊ฐ ์กด์ฌํ์ฌ ์์
์ ์ํํฉ๋๋ค.
2. ์ฑ๊ธ ์ค๋ ๋์ ๋ฉํฐ ์ค๋ ๋์ ๋น๊ต
โข
์ฑ๊ธ ์ค๋ ๋
ํ ๋ฒ์ ํ๋์ ์ผ๋ง ์ํํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ํ ๋ช
์ ์๋ฆฌ์ฌ๊ฐ ๋ชจ๋ ์๋ฆฌ๋ฅผ ํผ์์ ์ฐจ๋ก๋๋ก ๋ง๋๋ ๊ฒ๊ณผ ๊ฐ์ต๋๋ค.
โข
๋ฉํฐ ์ค๋ ๋
ํ๋์ ํ๋ก์ธ์ค ๋ด์์ ๋ ์ด์์ ์ค๋ ๋๊ฐ ๋์์ ์์
์ ์ํํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ์ฌ๋ฌ ๋ช
์ ์๋ฆฌ์ฌ๋ค์ด ๊ฐ์ ๋งก์ ์๋ฆฌ๋ฅผ ๋์์ ๋ง๋๋ ๊ฒ๊ณผ ๊ฐ์ต๋๋ค.
3. ์ฑ๊ธ ์ค๋ ๋์ ์ฅ๋จ์
JavaScript์ ์ฑ๊ธ ์ค๋ ๋ ๋ชจ๋ธ์๋ ์ฌ๋ฌ ์ฅ๋จ์ ์ด ์์ต๋๋ค.
์ฅ์
โข
๋จ์ : ์ฝ๋ ์์ฑ์ ์ฉ์ดํ๋ฉฐ ํ๋ก๊ทธ๋จ์ ํ๋ฆ์ ๋ฐ๋ผ๊ฐ๊ธฐ ์ฝ์ต๋๋ค. ๋ํ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ ๋, ๋๋ฒ๊น
์ด ๋น๊ต์ ๊ฐ๋จํ๊ณ ์คํ ์์๋ฅผ ์ฝ๊ฒ ์ถ์ ํ ์ ์์ต๋๋ค.
โข
๋ฎ์ ์ค๋ฒํค๋ : ์ฑ๊ธ ์ค๋ ๋ ํ๊ฒฝ์์๋ ์ค๋ ๋ ๊ฐ ์ ํ์ด ํ์ ์์ผ๋ฏ๋ก ์ปจํ
์คํธ ์ค์์นญ ์ค๋ฒํค๋๊ฐ ๋ฐ์ํ์ง ์์ต๋๋ค. ๋ํ ์ค๋ ๋๊ฐ ๋์์ ์คํ๋์ง ์๊ธฐ ๋๋ฌธ์, ๊ณต์ ์์์ ๋ํ ๋๊ธฐํ๊ฐ ํ์ ์์ต๋๋ค.
โข
๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ ํจ์จ์ฑ : ์ฑ๊ธ ์ค๋ ๋๋ ํ๋์ ์คํ๋ง ์ฌ์ฉํ๋ฏ๋ก, ํฐ ์ค๋ ๋๋ณด๋ค ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋์ด ์ ์ต๋๋ค.
๋ฉ๋ชจ๋ฆฌ ์์์ด ์ ํ๋ ์์คํ
์์ ์ ๋ฆฌ
๋จ์
โข
์ ํ๋ ์ฑ๋ฅ : ์ฑ๊ธ ์ค๋ ๋๋ ํ ๋ฒ์ ํ๋์ ์์
๋ง ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ๋ฐ๋ผ์ CPU์ ์ฑ๋ฅ์ด ์ ํ๋ ์ ์์ต๋๋ค.
โข
์๋ต์ฑ ์ ํ : ๊ธด ์๊ฐ์ด ๊ฑธ๋ฆฌ๋ ์์
์ ๊ฒฝ์ฐ ์ ์ฒด ํ๋ก๊ทธ๋จ์ ์๋ต์ฑ์ด ์ ํ๋ฉ๋๋ค. ํํ ๋งํ๋ ๋ ์ด ๋ฐ์ํ ์ ์์ต๋๋ค.
4. ๋ฉํฐ ์ค๋ ๋์ ์ฅ๋จ์
JavaScript์ ๋ฉํฐ ์ค๋ ๋ ๋ชจ๋ธ์๋ ์ฌ๋ฌ ์ฅ๋จ์ ์ด ์์ต๋๋ค.
์ฅ์
โข
ํฅ์๋ ์ฑ๋ฅ: ์ฌ๋ฌ ์ค๋ ๋๊ฐ ๋์์ ์คํ๋๋ฏ๋ก, CPU๋ฅผ ํจ๊ณผ์ ์ผ๋ก ํ์ฉํ์ฌ ์์
์ ๋ณ๋ ฌ๋ก ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
โข
๋์ ์๋ต์ฑ: ์๊ฐ์ด ๋ง์ด ๊ฑธ๋ฆฌ๋ ์์
์ ๋ฉํฐ ์ค๋ ๋๊ฐ ์ฒ๋ฆฌํ๋ฉด์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ ๊ณ์ํด์ ์๋ตํ ์ ์์ต๋๋ค.
โข
์์ ๊ณต์ : ๋์ผํ ํ๋ก์ธ์ค ๋ด์์ ์์์ ๊ณต์ ํ๋ฏ๋ก ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ์ด ํจ์จ์ ์
๋๋ค.
๋จ์
โข
๋ณต์กํจ : ์ฝ๋ ์์ฑ๊ณผ ๋๋ฒ๊น
์ด ์ด๋ ค์์ ธ ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ๊ธฐ ์ฌ์์ง๋ฉฐ ์ค๋ ๋ ๊ฐ์ ๋๊ธฐํ ๋ฌธ์ ์ ๋ฐ๋๋ฝ ๋ฑ์ ๊ด๋ฆฌํด์ผ ํฉ๋๋ค.
โข
๋์ ์ค๋ฒํค๋ : ์ค๋ ๋ ๊ฐ์ ์์์ ๊ณต์ ํ๊ธฐ ์ํด ๋๊ธฐํ๊ฐ ํ์ํ๋ฏ๋ก ์ฑ๋ฅ ์ ํ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
ํ๋์ ๋ณด๋ ์ฑ๊ธ ์ค๋ ๋์ ๋ฉํฐ ์ค๋ ๋ ๋น๊ต ํ
ํน์ฑ | ์ฑ๊ธ ์ค๋ ๋ | ๋ฉํฐ ์ค๋ ๋ |
๋ณต์ก์ฑ | ๋ฎ์ | ๋์ |
๋ฉ๋ชจ๋ฆฌ ์๋น | ์ ์ | ๋ง์ |
๋ณ๋ ฌ ์ฒ๋ฆฌ | ๋ถ๊ฐ๋ฅ | ๊ฐ๋ฅ |
๋๊ธฐํ ํ์์ฑ | ์์ | ์์ |
์ปจํ
์คํธ ์ค์์นญ ์ค๋ฒํค๋ | ์์ | ์์ |
5. JavaScript์ ์ ์ฑ๊ธ ์ค๋ ๋๋ฅผ ์ ํํ๋๊ฐ?
์, ์ด์ ๋ณธ๋ก ์ผ๋ก ๋ค์ด๊ฐ์ JavaScript๊ฐ ์ ์ฑ๊ธ ์ค๋ ๋์ธ์ง ์ดํด๋ด
์๋ค.
JavaScript๋ ์๋ ์น ๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉํ๊ธฐ ์ํด ๋ง๋ค์ด์ก์ต๋๋ค.
์น ์ ํ๋ฆฌ์ผ์ด์
์ ์ฌ์ฉ์์์ ์ํธ์์ฉ์ด ์ค์ํ๊ธฐ ๋๋ฌธ์, ์ฌ๋ฌ ์ค๋ ๋๋ฅผ ์ฌ์ฉํ๋ฉด ๋ณต์ก๋๊ฐ ์ฆ๊ฐํ๊ณ , ๊ทธ๋ก ์ธํ ๋ฒ๊ทธ์ ์ถฉ๋์ด ๋ฐ์ํ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค.
์ฑ๊ธ ์ค๋ ๋ ๋ชจ๋ธ์ ์ฝ๋์ ๋จ์์ฑ์ ์ ์งํ๋ ๋ฐ ๋์์ ์ฃผ๋ฉฐ, ๋๊ธฐํ ๋ฌธ์ ๋ฅผ ํผํ ์ ์์ด์ ๊ฐ๋ฐ์๋ค์ด ์ฝ๊ฒ ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ต๋๋ค.
๋ํ ์ฑ๊ธ ์ค๋ ๋์์๋ ๋ถ๊ตฌํ๊ณ , ์ฝ๋ฐฑ(Callback), ํ๋ก๋ฏธ์ค(Promise) ๊ทธ๋ฆฌ๊ณ async/await ๊ตฌ๋ฌธ์ ์ฌ์ฉํ์ฌ JavaScript๋ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ํจ์จ์ ์ผ๋ก ์ํํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๋น๋๊ธฐ ์ฒ๋ฆฌ ๊ธฐ๋ฒ๋ค์ ๋ฉ์ธ ์ค๋ ๋๊ฐ ๋ธ๋กํน ์์ด ์์
์ ์ฒ๋ฆฌํ ์ ์๊ฒ ํด์ค๋๋ค.
์ฝ๋ ์์
console.log('1+1');
setTimeout(() => {
console.log('2+2');
}, 1); //1์ด ์ง์ฐ ํ ์ถ๋ ฅ
console.log('3+3');
JavaScript
๋ณต์ฌ
์ถ๋ ฅ ๊ฒฐ๊ณผ
1+1
3+3
2+2
6. ๋น๋๊ธฐ ์ฒ๋ฆฌ ๊ธฐ๋ฒ๊ณผ ์ฑ๊ธ ์ค๋ ๋์ ์กฐํ
JavaScript์ ๋น๋๊ธฐ ์ฒ๋ฆฌ ๋ฉ์ปค๋์ฆ์ ์ฑ๊ธ ์ค๋ ๋์ ๋จ์ ์ ๊ทน๋ณตํ๋ ์ค์ํ ๋๊ตฌ์
๋๋ค.
โข
์ฝ๋ฐฑ(callbacks): ๋น๋๊ธฐ ์์
์ด ์๋ฃ๋ ํ ์คํ๋ ํจ์๋ฅผ ์ ๋ฌํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ฝ๋ฐฑ ํจ์๋ฅผ ์ฐ์ํด์ ์ฌ์ฉํ๋ฉด ์ฝ๋๊ฐ ๊น์ด์ง๋ฉฐ, ์ด๋ฅผ '์ฝ๋ฐฑ ์ง์ฅ'์ด๋ผ๊ณ ํฉ๋๋ค. ์ด๋ ๊ฐ๋
์ฑ์ ์ฌ๊ฐํ๊ฒ ๋จ์ด๋จ๋ฆฌ๊ณ ์ฝ๋ ์์ ์ ์ด๋ ต๊ฒ ๋ง๋ญ๋๋ค.
โข
ํ๋ก๋ฏธ์ค(Promises): ์ฝ๋ฐฑ ์ง์ฅ์ ๋จ์ ์ ํด๊ฒฐํ๊ธฐ ์ํด ๋์
๋ ๊ฐ์ฒด๋ก, ๋น๋๊ธฐ ์์
์ ์ฑ๊ณต ๋๋ ์คํจ ์ํ๋ฅผ ์ถ์ ํฉ๋๋ค.
โข
async/await: ํ๋ก๋ฏธ์ค ๊ธฐ๋ฐ์ ๋น๋๊ธฐ ์ฝ๋๋ฅผ ๋๊ธฐ ์ฝ๋์ฒ๋ผ ์์ฑํ ์ ์๊ฒ ํด์ฃผ๋ ๊ตฌ๋ฌธ์
๋๋ค. ์ด๋ฅผ ํตํด ์ฝ๋์ ๊ฐ๋
์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์ฝ๋ ์์
// ์ฝ๋ฐฑ์ ์ด์ฉํ ๋น๋๊ธฐ ์ฒ๋ฆฌ
function order(request, callback) {
console.log(`${request} ์ฃผ๋ฌธ์ด ์ ์๋์์ต๋๋ค.`);
setTimeout(() => callback(request), 3000); // ์์ ๋ ๋ถ๋ถ
}
let request = "์์ด์ค๋ผ๋ผ";
// 'reuqest' ์คํ ์์
order(request, (response) => {
console.log(`์ฃผ๋ฌธํ์ ${response} ๋์์ต๋๋ค!`);
});
// ํ๋ก๋ฏธ์ค๋ฅผ ์ด์ฉํ ๋น๋๊ธฐ ์ฒ๋ฆฌ
function fn() {
new Promise((resolve, reject) => {
console.log("์ฒซ๋ฒ์งธ");
resolve();
// ์คํจํ์ผ๋ฉด reject()ํจ์๋ฅผ ํธ์ถํจ
// ๊ทธ๋ผ then()์ ๊ฑด๋๋ฐ๊ณ catch() ์คํ
})
.then(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("๋๋ฒ์งธ");
resolve();
}, 0);
});
})
.then(() => {
console.log("์ธ๋ฒ์งธ");
})
.catch((err) => {
console.log("err: ", err);
});
}
// async/await๋ฅผ ์ด์ฉํ ๋น๋๊ธฐ ์ฒ๋ฆฌ
async function fn(){
let text = "์ฒซ๋ฒ์งธ";
text = text + await new Promise((resolve, reject) => {
setTimeout(() => {
resolve("๋๋ฒ์งธ");
}, 0);
});
text += "์ธ๋ฒ์งธ";
console.log(text + "๋ค๋ฒ์งธ");
}
fn();
JavaScript
๋ณต์ฌ
7. ๊ทธ๋ผ Node.js๋ ์ฑ๊ธ ์ค๋ ๋์ธ๊ฐ?
์ ํํ๊ฒ ๋งํ์๋ฉด, Node.js๋ ์ฑ๊ธ ์ค๋ ๋๊ฐ ์๋๋๋ค.
Node.js๋ ์ฌ๋ฌ ๊ฐ์ ์ค๋ ๋๋ฅผ ๊ฐ์ง๊ณ ์์ผ๋, JavaScript๋ฅผ ์คํํ๋ ์ค๋ ๋๋ ๋จ ํ๋์ด๋ฏ๋ก Node.js๋ฅผ ์ฑ๊ธ ์ค๋ ๋๋ผ๊ณ ํฉ๋๋ค.
Node.js๋ ์ด๋ฒคํธ ๊ธฐ๋ฐ์ ํ๋ซํผ์ด๊ธฐ ๋๋ฌธ์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋ ๋ฏธ๋ฆฌ ์ง์ ํด๋ ์์
์ ์ํํ๋ ๋ฐฉ์์ผ๋ก ์๋ํฉ๋๋ค. ์ด๋ Node.js์์ ์ผ์ด๋๋ ๋ชจ๋ ์ฒ๋ฆฌ๊ฐ ์ผ๋ จ์ ์ฝ๋ฐฑ(Callback)์ ์ฒ๋ฆฌํ๋ ๊ฒ๊ณผ ๊ฐ๋ค๊ณ ํ ์ ์์ต๋๋ค.
๋ํ, Node.js๋ ์๊ฐ์ด ์ค๋ ๊ฑธ๋ฆฌ๋ ์์
์ ์ฒ๋ฆฌํ๊ธฐ ์ํด ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ค๋ฅธ ์ค๋ ๋๋ฅผ ์ฌ์ฉํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ํ์ผ์ ์ฝ๊ฑฐ๋ ๋คํธ์ํฌ ์์ฒญ์ ์ฒ๋ฆฌํ ๋ ์ด๋ฌํ ์์
์ ๋ฐฑ๊ทธ๋ผ์ด๋ ์ค๋ ๋์์ ์ฒ๋ฆฌํ๊ณ , ์๋ฃ๋๋ฉด ๊ฒฐ๊ณผ๋ฅผ ๋ฉ์ธ ์ค๋ ๋๋ก ๋๋ ค์ค๋๋ค.
์ด๋ฅผ ํตํด ๋ฉ์ธ ์ค๋ ๋๋ ๋ฉ์ถ์ง ์๊ณ ๊ณ์ํด์ ๋ค๋ฅธ ์์
์ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๋น๋๊ธฐ ๋ชจ๋ธ ๋๋ถ์ Node.js๋ ๋น ๋ฅด๊ณ ํจ์จ์ ์ธ ๋คํธ์ํฌ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ฐ๋ฐํ๋ ๋ฐ ์ ํฉํฉ๋๋ค.
๊ฒฐ๋ก
JavaScript๊ฐ ์ฑ๊ธ ์ค๋ ๋๋ก ์ค๊ณ๋ ์ด์ ๋ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ํน์ฑ์ ์ฝ๋์ ๋จ์์ฑ์ ์ ์งํ๊ณ , ๋๊ธฐํ ๋ฌธ์ ๋ฅผ ์ต์ํํ๋ฉฐ, ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ํจ์จ์ฑ์ ๊ทน๋ํํ๊ธฐ ์ํจ์
๋๋ค.
์ด๋ฌํ ํน์ฑ ๋๋ถ์ JS๋ ๊ฐ๋ฐ์๋ค์๊ฒ ์น์ํ๊ณ ์ง๊ด์ ์ธ ์ธ์ด๋ก ์๋ฆฌ ์ก์ ์ ์์์ต๋๋ค.
์ฐธ์กฐ ์ฌ์ดํธ
[์ Node.js๋ ์ฑ๊ธ ์ค๋ ๋์ธ๊ฐ?](https://medium.com/@gwakhyoeun/์-node-js๋-single-thread-์ธ๊ฐ-bb68434027a3)
[์ฑ๊ธ ์ค๋ ๋์ ๋ฉํฐ ์ค๋ ๋](https://velog.io/@gil0127/์ฑ๊ธ์ค๋ ๋Single-thread-vs-๋ฉํฐ์ค๋ ๋-Multi-thread-t5gv4udj)
[Node.js๊ฐ ์ฑ๊ธ ์ค๋ ๋๋ก ๋ถ๋ฆฌ๋ ์ ํํ ์ด์ ](https://helloinyong.tistory.com/350)
[๋น๋๊ธฐ ์ฒ๋ฆฌ](https://hun-dev.tistory.com/29)
[์ฝ๋ฐฑํจ์,ํ๋ก๋ฏธ์ค,async/await](https://jhbljs92.tistory.com/entry/14-์ฝ๋ฐฑํจ์-ํ๋ก๋ฏธ์ค-asyncawait)