๋กœ์ผ“๐Ÿพ
article thumbnail
๋ฐ˜์‘ํ˜•

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋ฅผ ๋ฐฐ์šฐ๋ฉด์„œ ์ฒ˜์Œ์—๋Š” ๊ทธ์ € ์ฝ”๋“œ ์งœ๊ธฐ์—๋งŒ ๊ธ‰๊ธ‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์–ธ์–ด์˜ ์ž‘๋™์›๋ฆฌ ๊ฐ™์€ ๊ฑด ๋ด๋„ ๋„๋ฌด์ง€ ์ดํ•ด๊ฐ€ ์•ˆ๊ฐ”๊ธฐ์— ๊ด€์‹ฌ์ด ์—†์—ˆ์Šต๋‹ˆ๋‹ค. 

 

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

 

 

๊ทธ๋ž˜์„œ ์ด๋ฒˆ์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ž‘๋™์›๋ฆฌ์— ์žˆ์–ด ํ•ต์‹ฌ ์›๋ฆฌ์ธ JavasScript Engine(V8), Web API, Callback Queue, ์ด๋ฒคํŠธ ๋ฃจํ”„ ๊ทธ ์ค‘ ํŠนํžˆ ์ด๋ฒคํŠธ ๋ฃจํ”„ ์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

 

ํ‹€๋ฆฐ ๋ถ€๋ถ„์ด๋‚˜ ์งˆ๋ฌธ ์‚ฌํ•ญ์ด ์žˆ์œผ์‹œ๋ฉด ์–ธ์ œ๋“ ์ง€ ๋Œ“๊ธ€๋กœ ๋‚จ๊ฒจ์ฃผ์„ธ์š” :) 

 

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ž€?

 

๊ฒ€์€์ƒ‰ ์„ ์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ˆœ์œ„์ž…๋‹ˆ๋‹ค. ๋‚ด๋ฆผ์ฐจ์ˆœ์ž…๋‹ˆ๋‹ค.

 

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

 

('์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ' ๊ด€๋ จ ๊ธ€) 

* ๋…ผ๋ธ”๋กœํ‚น(๋น„๋™๊ธฐ)๊ณผ ๋ธ”๋กœํ‚น(๋™๊ธฐ)์ด๋ž€?

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

('๋…ผ๋ธ”๋กœํ‚น๊ณผ ๋ธ”๋กœํ‚น' ๊ด€๋ จ ๊ธ€)

 

 

 

 

 

์œ„ ๊ทธ๋ฆผ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ์•„์ฃผ ์ž˜๋ณด์—ฌ์ฃผ๋Š” ๊ทธ๋ฆผ์ž…๋‹ˆ๋‹ค. ์š”์†Œ๋กœ๋Š” V8 ์—”์ง„(runtime Engine), Web API, ์ด๋ฒคํŠธ ๋ฃจํ”„, Callback Queue๊ฐ€ ์žˆ๋Š” ๋ฐ ๋จผ์ € ์ด๋ฒคํŠธ ๋ฃจํ”„๋ฅผ ์ œ์™ธํ•˜๊ณ  ๊ฐ„๋žตํžˆ ํ•ด๋‹น ์š”์†Œ๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

 

 

Javascript Engine(V8)

V8์€ ํฌ๋กฌ๊ณผ Node.js์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ตฌ๊ธ€์ด ๋งŒ๋“  ์—”์ง„์ž…๋‹ˆ๋‹ค. ํฌ๊ฒŒ Memory Heap ๊ณผ Call Stack ์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์ฝ๊ณ  ํ•ด์„ํ•ด์„œ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์„ ๋‹ด๋‹นํ•˜๊ณ  ์žˆ๋‹ค ์ƒ๊ฐํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ์›น ๋ธŒ๋ผ์šฐ์ €์™€ Node.js์— ํƒ‘์žฌ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

 

  • Memory Heap : ์šฐ๋ฆฌ๊ฐ€ ์ฝ”๋“œ๋ฅผ ์งค๋•Œ ์„ ์–ธํ•˜๋Š” ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜ ๋“ฑ์ด ๋‹ด๊ฒจ์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.
  • Call Stack : ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋  ๋•Œ ์Œ“์ด๋Š” ๊ณณ์ž…๋‹ˆ๋‹ค.

(์‚ฌ์‹ค Javascript Engine๋งŒ ๋ดค์„ ๋•Œ Call Stack์ด ํ•˜๋‚˜๋ผ ๋น„๋™๊ธฐ๋ฅผ ์ฒ˜๋ฆฌํ•ด์ค„ ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์ด ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•ด ์˜์•„ํ•ด ํ•˜์‹ค ์ˆ˜๋„ ์žˆ๋Š”๋ฐ ์ด ํ–‰์œ„๋ฅผ ํ•ด์ฃผ๋Š” ๊ณณ์ด ๋ฐ”๋กœ ๋ฐ‘์—์„œ ์–ธ๊ธ‰ํ•  Web API์ž…๋‹ˆ๋‹ค.)

 

* Stack์ด๋ž€? 

์ž๋ฃŒ๊ตฌ์กฐ ์ค‘ ํ•˜๋‚˜๋กœ ๊ฐ€์žฅ ์ฒ˜์Œ์œผ๋กœ ๋“ค์–ด์˜จ ๊ฒƒ์ด ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰์— ๋‚˜๊ฐ€๋Š” ์„ ์ž…ํ›„์ถœ(LIFO, Last In First Out)์ž…๋‹ˆ๋‹ค. ์žฌ๊ท€ํ•จ์ˆ˜๋ฅผ ์ƒ๊ฐํ•˜๋ฉด ์‰ฝ์Šต๋‹ˆ๋‹ค.

 

Javascript Engine(V8)

 

Web API

DOM, Ajax, setTimeout(), Event Handler ๋“ฑ๊ณผ ๊ฐ™์ด ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ๋“ค์„ ๋งํ•ฉ๋‹ˆ๋‹ค. Call Stack์—์„œ ์‹คํ–‰๋œ ๋น„๋™๊ธฐ ํ•จ์ˆ˜๋Š” Web API๋ฅผ ํ˜ธ์ถœํ•˜๊ณ , Web API๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ Callback Queue์— ์ง‘์–ด ๋„ฃ์Šต๋‹ˆ๋‹ค. 

 

Javascript Engine์˜ ์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ ์™ธ์— ์Šค๋ ˆ๋“œ๋ฅผ ์ง€์›ํ•ด์ค๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋น„๋™๊ธฐ๋ฅผ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.

 

Callback Queue

๋น„๋™๊ธฐ๋กœ ์‹คํ–‰๋˜์•ผํ•˜๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜๊ฐ€ ๋ณด๊ด€๋˜๋Š” ์˜์—ญ์ž…๋‹ˆ๋‹ค. setTimeout์—์„œ ํƒ€์ด๋จธ ์™„๋ฃŒ ํ›„ ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜๊ฐ€ Stack์— ์Œ“์—ฌ ์‹คํ–‰๋˜๊ธฐ ์ „ ๋ณด๊ด€๋˜์–ด ์žˆ๋˜ ๊ณณ์ด ๋ฐ”๋กœ Callback Queue์ž…๋‹ˆ๋‹ค. ์ดํ•ด๊ฐ€ ์•ˆ๊ฐ€์‹œ๋”๋ผ๋„ ๋ฐ‘์—์„œ ์ž์„ธํžˆ ๋‹ค๋ฃจ๋‹ˆ ์—ฌ๊ธฐ๋Š” ์ฝ๊ณ  ๋„˜์–ด๊ฐ€์…”๋„ ๋ฉ๋‹ˆ๋‹ค.

 

* Queue๋ž€?

Stack๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ž๋ฃŒ๊ตฌ์กฐ ์ค‘ ํ•˜๋‚˜๋กœ ๊ฐ€์žฅ ์ฒ˜์Œ์œผ๋กœ ๋“ค์–ด์˜ค๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ์ฒ˜์Œ์œผ๋กœ ๋‚˜๊ฐ€๋Š” ์„ ์ž…์„ ์ถœ(FIFO, First In First Out)์ž…๋‹ˆ๋‹ค.

(์ €๋Š” Stack์ด๋ž‘ ์—„์ฒญ ํ—ท๊ฐˆ๋ ธ์—ˆ๋Š”๋ฐ ๋‹น๊ตฌ์˜ ํ(Queue)๋Œ€๋ฅผ ์ƒ๊ฐํ•˜๋ฉด ์•ˆํ—ท๊ฐˆ๋ฆฌ๋”๋ผ๊ณ ์š”.  ํ๋Œ€ ๋ชจ์–‘ ์ƒ๊ฐํ•˜๋ฉด์„œ 'ํ๋Œ€ ๋’ท๋ถ€๋ถ„์œผ๋กœ ๋“ค์–ด์™€์„œ ํ๋Œ€ ์•ž๋ถ€๋ถ„์œผ๋กœ ๋‚˜๊ฐ„๋‹ค' ์ด๋Ÿฐ์‹์œผ๋กœ ๊ตฌ๋ถ„ํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค ใ…Ž)

 

 

 

 

Call Stack, Event loop, Callback Queue 

 

๋ฆฌ๊ทธ์˜ค๋ธŒ๋ ˆ์ „๋“œ ์‚ผ์œ„์ผ์ฒด

 

๊ทธ๋Ÿผ ์ด์ œ ๋ณธ๊ฒฉ์ ์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ด์šฉํ•ด Call Stack์„ ์ดํ•ดํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

 

function multiply(a, b){
    return a*b;
}

function square(n){
    return multiply(n, n);
}

function printSquare(n){
    var squared = square(n);
    console.log(squared);
}

printSquare(4);

(์—ฌ๊ธฐ๋ฅผ ๊ฐ€์…”์„œ ์‹คํ–‰์‹œํ‚ค๋ฉด ํ•ด๋‹น ์ฝ”๋“œ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ์ดํ•ดํ•˜๊ธฐ ํ›จ์”ฌ ์‰ฝ์Šต๋‹ˆ๋‹ค.)

 

 

๊ฐ๊ฐ์˜ ํ•จ์ˆ˜๋“ค์€ Stack์— ์œ„์™€ ๊ฐ™์ด ์ฐจ๋ก€๋Œ€๋กœ ์Œ“์ด๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  Stack์€ LIFO์˜ ํŠน์ง•์„ ๊ฐ€์ง€๋ฏ€๋กœ ํ•จ์ˆ˜๊ฐ€ ์ข…๋ฃŒ๋˜๋ฉด ๊ฐ€์žฅ ์œ„์— ์žˆ๋Š” ํ•จ์ˆ˜๋ถ€ํ„ฐ Stack์—์„œ ์ œ๊ฑฐ๋ฉ๋‹ˆ๋‹ค.

 

 

multiply๊ฐ€ ์ œ๊ฑฐ๋˜๊ณ , square๊ฐ€ ์ œ๊ฑฐ๋˜๊ณ  printSquare ํ•จ์ˆ˜ ์•ˆ์— ์žˆ๋Š” console.log๊ฐ€ ๋‹ค์‹œ Stack์— ์Œ“์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฐ์‹์œผ๋กœ Stack์— ์Œ“์ด๊ณ  ์ œ๊ฑฐ๋˜๋ฉด์„œ ๋งˆ์ง€๋ง‰์—๋Š” ๊ฒฐ๊ตญ Stack ์•„๋ฌด๊ฒƒ๋„ ๋‚จ์•„์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋ฐ”๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋™์ž‘ํ•˜๋Š” Call Stack์˜ ์—ญํ• ์ž…๋‹ˆ๋‹ค.

 

๋งŒ์•ฝ ํ•จ์ˆ˜๊ฐ€ ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚จ๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ์š”?

 

function foo(){
    throw new Error('Oops!');
}

function bar(){
    foo();
}

function baz(){
    bar();
}

baz();

๊ฐœ๋ฐœ์ž๋„๊ตฌ์—์„œ๋Š” ์ด๋Ÿฐ์‹์œผ๋กœ Stack์˜ ๊ผฌ๋ฆฌ๋ฅผ ๋ฌผ๋ฉด์„œ Oops!๋ฅผ ํ‘œ์‹œํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ Stack์˜ ์ƒํƒœ๋Š” ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์—๋Ÿฌ๋Š” foo์—์„œ ์ƒ๊ฒผ๋Š”๋ฐ ๊ทธ๊ฒƒ์„ bar๊ฐ€ ํ˜ธ์ถœํ–ˆ๊ณ  bar๋Š” ๋˜ baz์—๊ฒŒ์„œ ํ˜ธ์ถœ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์œ„์™€ ๊ฐ™์€ ์ƒํƒœ๋ฅผ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

 


 

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

 

์ด๋•Œ ํ•„์š”ํ•œ ๊ฒƒ์ด ๋ฐ”๋กœ ๋น„๋™๊ธฐ ์ฝœ๋ฐฑ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ๋ณด์‹œ๊ฒ ์Šต๋‹ˆ๋‹ค.

 

console.log("hi");

setTimeout(function cb(){
   console.log("there");
}, 5000);

console.log("JSConf");

(์—ฌ๊ธฐ๋ฅผ ๊ฐ€์…”์„œ ์‹คํ–‰์‹œํ‚ค๋ฉด ํ•ด๋‹น ์ฝ”๋“œ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ์ดํ•ดํ•˜๊ธฐ ํ›จ์”ฌ ์‰ฝ์Šต๋‹ˆ๋‹ค.)

 

setTimeout ํ•จ์ˆ˜ ๊ฐ™์€ ๊ฒฝ์šฐ ๋Œ€ํ‘œ์ ์ธ ๋น„๋™๊ธฐ ํ•จ์ˆ˜์ธ๋ฐ ์œ„์— ๊ทธ๋ฆผ์—์„œ ๋ณด๋ฉด ์—ญ์‹œ ํ•œ๋ฒˆ ์‹คํ–‰ ๋œํ›„ Stack์—์„œ ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

 

๊ทธ ํ›„ Stack์ด ์™„์ „ ๋นˆ ์ƒํƒœ์ธ ํ›„์— Stack์— ๋‹ค์‹œ setTimeout์˜ ์ฝœ๋ฐฑ์ด ์Œ“์ด๋Š” ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.(5000์ด์˜€์œผ๋‹ˆ 5์ดˆ ํ›„ Stack์— ์Œ“์ž…๋‹ˆ๋‹ค.) 

 

์™œ ์ด๋ ‡๊ฒŒ ๋˜๋Š”๊ฑธ๊นŒ์š”? ์ •๋‹ต์€ ๋ฐ”๋กœ ์ด๋ฒคํŠธ ๋ฃจํ”„์— ์žˆ์Šต๋‹ˆ๋‹ค.

 

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

 

๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณต๋˜๋Š” Web API๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋Š” ์Šค๋ ˆ๋“œ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ์ง€์›ํ•ด์ค๋‹ˆ๋‹ค. ์ฆ‰, ์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ๋กœ ์ž‘๋™ํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฉ€ํ‹ฐ ์Šค๋ ˆ๋“œ๋กœ ์ž‘๋™ํ•  ์ˆ˜ ์žˆ๊ฒŒ๋” ๋„์™€์ค๋‹ˆ๋‹ค.

 

console.log("hi");

setTimeout(function cb(){
   console.log("there");
}, 5000);

console.log("JSConf");

 

๊ทธ๋Ÿผ ๋‹ค์‹œ ์œ„ ์ฝ”๋“œ๋ฅผ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ์—๋Š” Stack๋ฟ๋งŒ ์•„๋‹ˆ๋ผ Web API์™€ Callback Queue๋„ ๊ณ ๋ คํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์‹œ์ ์€ setTimeout์ด ๋ง‰ Stack์—์„œ ์‚ญ์ œ๋˜๊ณ  Web API์— ์Œ“์ผ ๋•Œ ์ž…๋‹ˆ๋‹ค.

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ์— ์กด์žฌํ•˜๋Š” ๋ณ„๋„์˜ API(Web API)์— setTimeout ํ•จ์ˆ˜๋ฅผ ๋„ฃ๊ณ  ํƒ€์ด๋จธ๋ฅผ ์‹คํ–‰ํ‚ค์‹œ๊ณ  ์นด์šดํŠธ ๋‹ค์šด์„ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค. setTimeout ํ•จ์ˆ˜์˜ ํ˜ธ์ถœ ์ž์ฒด๋Š” ์™„๋ฃŒ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— Stack์—์„œ ์‚ญ์ œ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  'JSconf'๊ฐ€ Stack์— ์Œ“์ด๊ณ  ํ˜ธ์ถœ๋œ ํ›„ ์‚ญ์ œ๋ฉ๋‹ˆ๋‹ค. ์ด์ œ Web API์—์„œ ์‹คํ–‰ํ•˜๊ณ  ์žˆ๋Š” ํƒ€์ด๋จธ๋งŒ์ด ๋‚จ์•˜์Šต๋‹ˆ๋‹ค. 5์ดˆ ๋’ค์— ํƒ€์ด๋จธ๊ฐ€ ์ข…๋ฃŒ๋˜๋Š”๋ฐ Web API๋Š” ๊ฐ‘์ž๊ธฐ ํ•ด๋‹น setTimeout์„ Stack์— ๋„ฃ์„ ์ˆœ ์—†์Šต๋‹ˆ๋‹ค.

 

๊ทธ๋Ÿผ Stack์— ์–ด๋–ป๊ฒŒ ๋„ฃ์„ ์ˆ˜ ์žˆ์„๊นŒ์š”?

 

์ด์ œ๋Š” Callback Queue๊ฐ€ ํ™œ์•ฝํ•  ์ฐจ๋ก€์ž…๋‹ˆ๋‹ค. ๋ชจ๋“  Web API๋Š” ์ž‘๋™์ด ์™„๋ฃŒ๋˜๋ฉด setTimeout ๋‚ด ์ฝœ๋ฐฑ์„ Callback Queue์— ์ง‘์–ด ๋„ฃ์Šต๋‹ˆ๋‹ค.

 

 

์ด๋ฒคํŠธ ๋ฃจํ”„๋Š” ์ด ์ „์ฒด ์‹œ์Šคํ…œ์—์„œ ์•„์ฃผ ๋‹จ์ˆœํ•œ ์ผ์„ ํ•˜๋Š” ์ž‘์€ ์š”์†Œ์ž…๋‹ˆ๋‹ค. ์ด๋ฒคํŠธ ๋ฃจํ”„์˜ ์—ญํ• ์€ Call Stack๊ณผ Callback Queue๋ฅผ ์ฃผ์‹œํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. Stack์ด ๋น„์–ด์žˆ์œผ๋ฉด, Callback Queue์— ์ฒซ๋ฒˆ์งธ ์ฝœ๋ฐฑ์„ Stack์— ์Œ“์•„ ํšจ๊ณผ์ ์œผ๋กœ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.

 

Stack์— console.log๊ฐ€ ์Œ“์ด๊ธฐ ์ „์— Stack์€ ์•„์ง ๋น„์–ด์žˆ๋Š” ์ƒํƒœ์ธ๋ฐ ์ด๋Ÿฌํ•œ ๋นˆ ์ƒํƒœ๋ฅผ ๋ณด๊ณ  ์ด๋ฒคํŠธ ๋ฃจํ”„๋Š” '์–ด, ๋ญ์•ผ Stack์ด ๋น„์—ˆ์ž–์•„? ๋“œ๋””์–ด ๋‚ด๊ฐ€ ํ• ์ผ์ด ์žˆ๋„ค. ์ž ์ด ์ด๊ฑฐ ๋ฐ›์•„!' ํ•˜๋ฉฐ ์ฝœ๋ฐฑ์„ Stack์— ๋„ฃ์–ด์ค๋‹ˆ๋‹ค. ์ดํ›„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ๋‹ค์‹œ console.log๋ฅผ Stack์— ์Œ“์•„์ค๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์œ„ ๊ทธ๋ฆผ์ฒ˜๋Ÿผ console.log๊ฐ€ Stack์— ์Œ“์ธ ๊ฑธ ๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

setTimeOut์˜ ์ธ์ž๋ฅผ 0์œผ๋กœ ํ•˜๋˜, 1000์œผ๋กœ ํ•˜๋˜, 10000์œผ๋กœ ํ•˜๋˜ ์œ„ ์ฝ”๋“œ์˜ ๊ฒฐ๊ณผ๋Š” ํ•ญ์ƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ง€๊ธˆ๊นŒ์ง€์˜ ๊ธ€์„ ์ž˜ ์ดํ•ดํ•˜์…จ๋‹ค๋ฉด ์™œ setTimeout์˜ ์ธ์ž๋ฅผ 0์œผ๋กœ ํ–ˆ์„ ๋•Œ ๋ฐ”๋กœ ์‹คํ–‰๋˜์ง€ ์•Š์•˜๋Š”์ง€, ์™œ setTimeout์˜ ์ธ์ž(์ดˆ)๊ฐ€ ์ •ํ™•ํ•˜์ง€ ์•Š์€์ง€ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

๋ชจ๋“  ์ข…๋ฅ˜์˜ Web API๋Š” ์ด๋Ÿฐ์‹์œผ๋กœ ๋™์ผํ•œ ๋ฐฉ์‹์œผ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. ์ข€ ๋” ์‹ฌํ™”๋œ ์˜ˆ์ œ๋ฅผ ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

 

console.log('Started');

$.on('button', 'click', function onClick(){
   console.log('Clicked');
});

setTimeout(function onTimeout(){
   console.log('Timeout Finished');
}, 5000);

console.log('Done');

(์—ฌ๊ธฐ๋ฅผ ๊ฐ€์…”์„œ ์‹คํ–‰์‹œํ‚ค๋ฉด ํ•ด๋‹น ์ฝ”๋“œ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ์ดํ•ดํ•˜๊ธฐ ํ›จ์”ฌ ์‰ฝ์Šต๋‹ˆ๋‹ค. ํด๋ฆญ์ด๋ฒคํŠธ๋Š” ์ฝ”๋“œ ์•„๋ž˜์— Click me!๋ฅผ ๋ˆ„๋ฅด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.)

 

์œ„ ์ฝ”๋“œ ๊ฐ™์€ ๊ฒฝ์šฐ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๊ฐ€ Web API์— ๋ณด๊ด€๋˜์–ด์„œ ํ•ด๋‹น ๋ฒ„ํŠผ('button')์„ ๋ˆ„๋ฅผ ๋•Œ๋งˆ๋‹ค ์ด๋ฒคํŠธ๋ฅผ ํ˜ธ์ถœํ•˜๋Š”๋ฐ Web API์—์„œ Callback Queue์— ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์˜ ์ฝœ๋ฐฑ์„ ๋ณด๊ด€ ํ›„ Stack์— console.log('Clicked')๋ฅผ ์Œ“์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‚˜๋จธ์ง€๋Š” ๋™์ผํ•ฉ๋‹ˆ๋‹ค.

 

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

 

 

 

 ๋งบ์œผ๋ฉฐ..

 

์ƒ๊ฐ๋ณด๋‹ค ๊ธ€์ด ์—„์ฒญ ๊ธธ์–ด์กŒ๋„ค์š”.. ์ง€๊ธˆ๊นŒ์ง€ ์ž‘์„ฑํ•œ ๊ธ€ ์ค‘์—์„œ ๊ฐ€์žฅ ๋ถ„๋Ÿ‰์ด ๋งŽ์•˜๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ธ”๋กœ๊ทธ(๊ฒจ์šฐ 4๊ฐœ์›”..)๋ฅผ ๊ด€๋ฆฌํ•˜๋ฉด์„œ ๊ฐ€์žฅ ์œ ์ตํ•˜๊ณ  ์žฌ๋ฐŒ์—ˆ๋˜ ๋‚ด์šฉ์ด์˜€์Šต๋‹ˆ๋‹ค. 

 

async/await์™€ ์ฝœ๋ฐฑ ํ•จ์ˆ˜, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ์˜ ๋น„๋™๊ธฐ ๊ด€๋ จํ•œ ํผ์ฆ๋“ค์ด ๋“œ๋””์–ด ๋งž์ณ์ง„๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ „์— ์ฝœ๋ฐฑํ•จ์ˆ˜ ๊ด€๋ จ ๊ธ€์„ ์“ด์ ์ด ์žˆ๋Š”๋ฐ ์™„์ „ ๋‚œ์žฅํŒ์ด์˜€๋‹ค๋Š” ๊ฒƒ๋„ ์•Œ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ง‰ ๋ฐฐ์šด ๋ถ„๋“ค๊ป˜๋Š” ๋‹ค์†Œ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์ง€๋งŒ ๊ณ„์† ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์˜ˆ์ •์ด๋ผ๋ฉด ๋ฐ˜๋“œ์‹œ ์ดํ•ดํ•˜๊ณ  ๋„˜์–ด๊ฐˆ ๋ถ€๋ถ„์ด๊ธฐ๋„ ํ•œ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ƒ๊ธ‰ ๊ฐœ๋ฐœ์ž๋ถ„๊ป˜์„œ ์ด๋Ÿฐ ๊ฑฐ ๋ชฐ๋ผ๋„ ๊ฐœ๋ฐœ ์ž˜ํ•œ๋‹ค๊ณ  ํ•˜์‹œ๋Š”๋ฐ ํ™•์‹คํ•œ๊ฒŒ ์ข‹์ž–์•„์š”!!

 

๋‹ค์Œ์—๋Š” ์ž๋ฐ”์˜ ์ž‘๋™์›๋ฆฌ์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•ด๋ด์•ผ ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ธด ๊ธ€ ์ฝ์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค :)

 

 

์ฝ์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

 

 

Conference

๋ฐ˜์‘ํ˜•
profile on loading

Loading...