๐ŸŒฑ 42์žฅ : ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

์˜ค๋‹คํ˜œยท2021๋…„ 8์›” 10์ผ
0
post-thumbnail

1. ๋™๊ธฐ ์ฒ˜๋ฆฌ์™€ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ

๐ŸŒป ํ•จ์ˆ˜์˜ ์‹คํ–‰

ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ํ•จ์ˆ˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค. ์ƒ์„ฑ๋œ ํ•จ์ˆ˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ์Šคํƒ(์ฝœ ์Šคํƒ)์— ํ‘ธ์‹œ๋˜๋ฉฐ ํ•จ์ˆ˜์˜ ์‹คํ–‰์ด ์ข…๋ฃŒ๋  ๋•Œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ์Šคํƒ์—์„œ ํŒ๋œ๋‹ค. (๋„ˆ๋ฌด ๊ธธ์–ด์„œ ์•ž์œผ๋กœ๋Š” ํ•จ์ˆ˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ์Šคํƒ์„ ์Šคํƒ์ด๋ผ๊ณ  ๋ถ€๋ฅด๊ฒ ๋‹ค.) ์Šคํƒ์— ํ•จ์ˆ˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ํ‘ธ์‹œ๋œ๋‹ค๋Š” ๊ฒƒ์€ ๊ฒฐ๊ตญ 'ํ•จ์ˆ˜์˜ ์‹คํ–‰'์„ ์˜๋ฏธํ•œ๋‹ค.

const foo = () => {};
const bar = () => {};

foo();
bar();

๋งŒ์•ฝ ์œ„์™€ ๊ฐ™์ด ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋œ ํ›„์— ์‹คํ–‰์‹œํ‚จ๋‹ค๋ฉด, ์ฒ˜์Œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ์Šคํƒ์—๋Š” ์ „์—ญ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ํ‘ธ์‹œ๋˜๊ณ  ์ดํ›„์— foo ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ํ‘ธ์‹œ๋œ๋‹ค. ํ‘ธ์‹œ๋Š” ๊ณง ํ•จ์ˆ˜์˜ ์‹คํ–‰์ด๋ฏ€๋กœ foo ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๊ณ  ํ•จ์ˆ˜๊ฐ€ ๋๋‚˜๋ฉด ์Šคํƒ์—์„œ ํŒ๋œ๋‹ค. ๊ทธ ํ›„์— bar ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์Šคํƒ์— ํ‘ธ์‹œ๋˜๊ณ  ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์‹คํ–‰ ํ›„์—๋Š” ์Šคํƒ์—์„œ ํŒ๋œ๋‹ค.

๐ŸŒป ์‹ฑ๊ธ€์Šค๋ ˆ๋“œ(single thread)

์ด๋ ‡๋“ฏ ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ˆœ์„œ๋Š” ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ์Šคํƒ์„ ํ†ตํ•ด ๊ด€๋ฆฌ๊ฐ€ ๋œ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•œ ๋ถ€๋ถ„์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ์Šคํƒ์ด 1๊ฐœ์ธ single thread ๋ผ๋Š” ์ ์ด๋‹ค. ๋•Œ๋ฌธ์— ํ•จ์ˆ˜๋ฅผ ๋™์‹œ์— 2๊ฐœ ์ด์ƒ ์‹คํ–‰์‹œํ‚ฌ ์ˆ˜๊ฐ€ ์—†๋‹ค. ์‹คํ–‰ ์ค‘์ธ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” ๋Œ€๊ธฐํ•˜๊ณ  ์žˆ์–ด์•ผ ํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๋Š” ํ•จ์ˆ˜ ๋“ฑ์„ ์‹คํ–‰ํ•˜๋ฉด ๋ธ”๋กœํ‚น(์ž‘์—… ์ค‘๋‹จ)์ด ๋ฐœ์ƒํ•˜๊ฒŒ ๋œ๋‹ค.

๐ŸŒป ๋™๊ธฐ์™€ ๋น„๋™๊ธฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋™๊ธฐ ์ฒ˜๋ฆฌ(synchronous) ๋ฅผ ํ•˜๊ฒŒ ๋˜๋ฉด ์‹คํ–‰ ์ˆœ์„œ๋Š” ๋ณด์žฅํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์ด ๊ณผ์ •์—์„œ ๋ธ”๋กœํ‚น์ด ์ผ์–ด๋‚  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๋น„ํšจ์œจ์ ์ด ๋  ์ˆ˜ ์žˆ๋‹ค. ๋งŒ์•ฝ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•  ํ”„๋กœ์„ธ์Šค๊ฐ€ a, b, c 3๊ฐœ ์žˆ์„ ๋•Œ a -> b -> c ์˜ ์ˆœ์„œ๋กœ ํ˜ธ์ถœ๋จ์„ ๊ฐ€์ •ํ•ด๋ณด์ž. a์™€ c๋Š” 1ms ์— ๋๋‚˜์ง€๋งŒ b๊ฐ€ 30๋ถ„์ด ๊ฑธ๋ฆฐ๋‹ค๋ฉด c๋Š” b์— ์ข…์†์ ์ด์ง€ ์•Š์•„๋„ ๋ฌด์กฐ๊ฑด 30๋ถ„์ด ์ง€๋‚˜์•ผ ์‹คํ–‰์ด ๋œ๋‹ค. ์–ผ๋งˆ๋‚˜ ๋น„ํšจ์œจ์ ์ธ๊ฐ€?

๊ทธ๋ž˜์„œ ๋‚˜์˜จ ๊ฐœ๋…์ด ๋ฐ”๋กœ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ(asynchronous) ๋‹ค. ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋Š” ํ˜„์žฌ ์‹คํ–‰ ์ค‘์ธ ํ”„๋กœ์„ธ์Šค๊ฐ€ ์ข…๋ฃŒ๋˜์ง€ ์•Š๋”๋ผ๋„ ๋‹ค์Œ ํ”„๋กœ์„ธ์Šค๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค. ๋น„๋™๊ธฐ๋Š” callback function ์„ ์‚ฌ์šฉํ•ด์„œ ๊ตฌํ˜„์„ ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๋Š” callback hell ์„ ๋ฐœ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค. ์ด์— ๋Œ€ํ•ด์„œ๋Š” ๋‹ค์Œ์— ์„ค๋ช…ํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค.

๊ทผ๋ฐ ์ด์ƒํ•˜์ง€ ์•Š์€๊ฐ€? ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ์Šคํƒ์€ ํ•œ ๊ฐœ๋ผ๋ฉด์„œ ์–ด๋–ป๊ฒŒ ๊ฑด๋„ˆ๋›ฐ๋Š” ๊ฒŒ ๊ฐ€๋Šฅํ• ๊นŒ.

2. ์ด๋ฒคํŠธ ๋ฃจํ”„์™€ ํƒœ์Šคํฌ ํ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ์ง€๋งŒ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋™์ž‘ํ•˜๋Š” ๊ฒƒ์„ ๋ณด๋ฉด ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํƒœ์Šคํฌ๊ฐ€ ๋™์‹œ์— ์ฒ˜๋ฆฌ๋˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ธ๋‹ค. ์ด๋Ÿฌํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋™์‹œ์„ฑ์„ ์ง€์›ํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ ์ด๋ฒคํŠธ ๋ฃจํ”„ ๋‹ค.

๐ŸŒป ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„ - ์ฝœ ์Šคํƒ๊ณผ ํž™

์ด๋ฒคํŠธ ๋ฃจํ”„๋Š” ํฌ๋กฌ๊ณผ ๊ฐ™์€ ๋ธŒ๋ผ์šฐ์ €์— ๋‚ด์žฅ๋˜์–ด ์žˆ๋Š” ๊ธฐ๋Šฅ์ด๋‹ค. ๊ตฌ๊ธ€์˜ V8 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„๊ณผ ๊ฐ™์ด ๋Œ€๋ถ€๋ถ„์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ํฌ๊ฒŒ 2๊ฐœ์˜ ์˜์—ญ์œผ๋กœ ๊ตฌ๋ถ„๋œ๋‹ค.

  • ์ฝœ ์Šคํƒ
    = ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ์Šคํƒ
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ 1๊ฐœ์˜ ์ฝœ ์Šคํƒ์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฏ€๋กœ ๋™์‹œ์— ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํ•จ์ˆ˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์—†๋‹ค.
  • ํž™
    : ๊ฐ์ฒด๊ฐ€ ์ €์žฅ๋˜๋Š” ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„
    ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” ํž™์— ์ €์žฅ๋œ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ•œ๋‹ค.

๐ŸŒป ๋ธŒ๋ผ์šฐ์ € - ํƒœ์Šคํฌ ํ์™€ ์ด๋ฒคํŠธ ๋ฃจํ”„

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ๊ฒฐ๊ตญ ์ฝœ ์Šคํƒ์— ์žˆ๋Š” ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋“ค์„ ์ˆœ์ฐจ์ ์œผ๋กœ ์‹คํ–‰์‹œํ‚ค๋Š” ์—ญํ• ์ด๋ฉฐ, ๋น„๋™๊ธฐ์—์„œ ์ด์™ธ์˜ ์ฒ˜๋ฆฌ๋“ค์€ ๋ธŒ๋ผ์šฐ์ € ํ˜น์€ Node.js ์—์„œ ๋‹ด๋‹นํ•œ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด ๋ธŒ๋ผ์šฐ์ €๋Š” ํƒœ์Šคํฌ ํ์™€ ์ด๋ฒคํŠธ ๋ฃจํ”„๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

  • ํƒœ์Šคํฌ ํ
    : ๋น„๋™๊ธฐ ํ•จ์ˆ˜์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ์ผ์‹œ์ ์œผ๋กœ ๋ณด๊ด€๋˜๋Š” ์˜์—ญ
    ๋ณ„๋„๋กœ ํ”„๋กœ๋ฏธ์Šค์˜ ํ›„์† ์ฒ˜๋ฆฌ ๋ฉ”์†Œ๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ๋งˆ์ดํฌ๋กœํƒœ์Šคํฌ ํ์— ์ผ์‹œ์ ์œผ๋กœ ๋ณด๊ด€๋œ๋‹ค.
  • ์ด๋ฒคํŠธ ๋ฃจํ”„
    ์ฝœ ์Šคํƒ์— ํ˜„์žฌ ์‹คํ–‰ ์ค‘์ธ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์žˆ๋Š”์ง€, ํƒœ์Šคํฌ ํ์— ๋Œ€๊ธฐ ์ค‘์ธ ํ•จ์ˆ˜๊ฐ€ ์žˆ๋Š”์ง€ ๋ฐ˜๋ณตํ•ด์„œ ํ™•์ธํ•œ๋‹ค. ๋งŒ์•ฝ ์ฝœ ์Šคํƒ์ด "๋น„์–ด ์žˆ๊ณ " ํƒœ์Šคํฌ ํ์— ๋Œ€๊ธฐ ์ค‘์ธ ํ•จ์ˆ˜๊ฐ€ ์žˆ์œผ๋ฉด ์ด๋ฒคํŠธ ๋ฃจํ”„๊ฐ€ ์ˆœ์ฐจ์ ์œผ๋กœ ํƒœ์Šคํฌ ํ์— ๋Œ€๊ธฐ ์ค‘์ธ ํ•จ์ˆ˜๋ฅผ ์ฝœ ์Šคํƒ์œผ๋กœ ์ด๋™์‹œํ‚จ๋‹ค.

๐ŸŒป ์˜ˆ์ œ

const foo = () => console.log('foo');
const bar = () => console.log('bar');

// setTimeout ์€ ๋น„๋™๊ธฐ ํ•จ์ˆ˜
// ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋กœ callback function, ๋‘ ๋ฒˆ์งธ ์ธ์ž๋กœ delay time(ms)๋ฅผ ์ž…๋ ฅ ๋ฐ›๋Š”๋‹ค.

setTimeout(foo,0);
bar();

์œ„์˜ ์˜ˆ์ œ์—์„œ ๋™์ž‘ํ•˜๋Š” ์ˆœ์„œ๋ฅผ ๊ฐ„๋žตํ•˜๊ฒŒ ์ •๋ฆฌํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  1. ์ „์—ญ ์ฝ”๋“œ๊ฐ€ ํ‰๊ฐ€๋˜๊ณ  ์ „์—ญ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ƒ์„ฑ๋˜์–ด ์ฝœ ์Šคํƒ์— ํ‘ธ์‹œ๋œ๋‹ค.
  2. ์ „์—ญ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜์–ด setTimeout ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค. setTimeout ํ•จ์ˆ˜์˜ ํ•จ์ˆ˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ƒ์„ฑ๋˜์–ด ์ฝœ ์Šคํƒ์— ํ‘ธ์‹œ๋œ๋‹ค.
  3. setTimeout ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜์–ด ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋ธŒ๋ผ์šฐ์ €์— ํ˜ธ์ถœ ์Šค์ผ€์ค„๋ง ์š”์ฒญํ•˜๊ณ  ์ข…๋ฃŒ๋˜์–ด ์ฝœ ์Šคํƒ์—์„œ ํŒ๋œ๋‹ค.
  4. ๋ธŒ๋ผ์šฐ์ €, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„ ๋™์‹œ ์ˆ˜ํ–‰
    • ๋ธŒ๋ผ์šฐ์ €
      ํ˜ธ์ถœ ์Šค์ผ€์ค„๋ง(ํƒ€์ด๋จธ๋ฅผ ์„ค์ •ํ•˜๊ณ  ์‹œ๊ฐ„์ด ๋งŒ๋ฃŒ๋˜๋ฉด ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํƒœ์Šคํฌ ํ์— ํ‘ธ์‹œ)๋ฅผ ์ง„ํ–‰ํ•œ๋‹ค. delay ์‹œ๊ฐ„์€ ์ตœ์†Œ 4ms ์ด๋ฏ€๋กœ 0์„ ๋„ฃ์—ˆ์ง€๋งŒ 4ms ๋’ค์— foo ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋œ๋‹ค. ์ฝœ ์Šคํƒ์ด ๋น„์–ด์•ผ ์ด๋ฒคํŠธ ๋ฃจํ”„๊ฐ€ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์ด๋™์‹œํ‚ค๊ธฐ ๋•Œ๋ฌธ์— ์ง€์ •๋œ ์‹œ๊ฐ„์— ์ •ํ™•ํžˆ ํ˜ธ์ถœ๋œ๋‹ค๋Š” ๋ณด์žฅ์€ ์—†๋‹ค.
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„
      bar ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋˜๊ณ  ํ•จ์ˆ˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ƒ์„ฑ๋˜์–ด ์ฝœ ์Šคํƒ์— ํ‘ธ์‹œ๋œ๋‹ค.
  5. ์ „์—ญ ์ฝ”๋“œ ์‹คํ–‰๊นŒ์ง€ ์ข…๋ฃŒ๋˜๊ณ  ์ „์—ญ ์‹คํ–‰ ์ปจํ…์Šคํฌ๊ฐ€ ์ฝœ ์Šคํƒ์—์„œ ํŒ๋œ๋‹ค. ๋”ฐ๋ผ์„œ ์ฝœ ์Šคํƒ์ด ์™„์ „ํžˆ ๋น„์–ด์žˆ๋Š” ์ƒํƒœ๊ฐ€ ๋œ๋‹ค.
  6. ์ด๋ฒคํŠธ ๋ฃจํ”„์— ์˜ํ•ด ์ฝœ ์Šคํƒ์ด ๋น„์–ด ์žˆ๊ณ  ํƒœ์Šคํฌ ํ์— ๋Œ€๊ธฐ ์ค‘์ธ ํ•จ์ˆ˜๊ฐ€ ์žˆ๋Š” ๊ฒƒ์ด ํ™•์ธ๋˜๋ฉด ์ฝœ๋ฐฑ ํ•จ์ˆ˜์ธ foo๊ฐ€ ์ด๋ฒคํŠธ ๋ฃจํ”„์— ์˜ํ•ด ์ฝœ ์Šคํƒ์— ํ‘ธ์‹œ๋œ๋‹ค.

๐ŸŒป

profile
ํ”„๋ก ํŠธ์—”๋“œ์— ๋ฐฑ์—”๋“œ ํ•œ ์Šคํ‘ผ ๐Ÿฅ„

2๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2021๋…„ 8์›” 11์ผ

velog๋กœ ๋†€๋Ÿฌ์™”์Šต๋‹ˆ๋‹ค~(DEV์œ ์ž์˜ˆ์š”ใ…Žใ…Ž) ์ •๋ฆฌ ๋„˜ ๊น”๋”ํžˆ ์ž˜ํ•ด์ฃผ์…จ๋„ค์š”. ์ข‹์€ ๋‚ด์šฉ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ^^!!

1๊ฐœ์˜ ๋‹ต๊ธ€