๋ชจ๋“  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ์•„์•ผ ํ•˜๋Š” 33๊ฐ€์ง€ ๊ฐœ๋…

 

GitHub - yjs03057/33-js-concepts: ๋ชจ๋“  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ์•„์•ผ ํ•˜๋Š” 33๊ฐ€์ง€ ๊ฐœ๋…

๋ชจ๋“  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ์•„์•ผ ํ•˜๋Š” 33๊ฐ€์ง€ ๊ฐœ๋…. Contribute to yjs03057/33-js-concepts development by creating an account on GitHub.

github.com

Javascript๋Š” ์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ ์–ธ์–ด

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

์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ๋กœ ์–ด๋–ป๊ฒŒ ํ•œ๋ฒˆ์— ์—ฌ๋Ÿฌ ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ• ๊นŒ?

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

๋™๊ธฐ(sync), ๋น„๋™๊ธฐ(async)

๋™๊ธฐ(sync): ์ด์–ด ๋‹ฌ๋ฆฌ๊ธฐ
๋น„๋™๊ธฐ(async): ๊ฐ์ž ๋‹ฌ๋ฆฌ๊ธฐ

๋™๊ธฐ์  ์‹คํ–‰: ์ˆœ์ฐจ์ ์œผ๋กœ ์ž‘์—…์ด ์‹คํ–‰. ์ด์ „ ์ž‘์—…์ด ์•„์ง ์‹คํ–‰ ์ค‘์ด๋ผ๋ฉด ๋‹ค์Œ ์ž‘์—…์„ ์‹คํ–‰ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ์ž‘์—…์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ, ์ด์ „ ์ž‘์—…์˜ ์‹คํ–‰ ๊ฒฐ๊ณผ๊ฐ€ ํ•„์š”ํ•  ๋•Œ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค. Javascript๋Š” ์ผ๋ฐ˜์ ์œผ๋ก  ๋™๊ธฐ ์‹คํ–‰์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค.

๋น„๋™๊ธฐ์  ์‹คํ–‰: ๋น„ ์ˆœ์ฐจ์ ์œผ๋กœ ์ž‘์—…์„ ์‹คํ–‰. ์ด์ „ ์ž‘์—…์˜ ์‹คํ–‰ ์—ฌ๋ถ€๊ฐ€ ๋‹ค์Œ ์ž‘์—…์— ์˜ํ–ฅ์„ ๋ผ์น˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ž‘์—…์ด ์™„๋ฃŒ๋˜๋Š”๋ฐ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ๊ณ , ์‹คํ–‰ ๊ฒฐ๊ณผ ๊ฐ’์ด ๋‹ค์Œ ์ž‘์—…์— ์˜ํ–ฅ์„ ๋ผ์น˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ๋น„๋™๊ธฐ์ ์œผ๋กœ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Javascript๋Š” ์—”์ง„์ด ๋‹จ ํ•˜๋‚˜์˜ Call Stack์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ๊ธฐ๋ณธ์ ์œผ๋กœ ๋™๊ธฐ ์‹คํ–‰ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋น„๋™๊ธฐ์  ์‹คํ–‰์ด ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. Javascript์˜์—์„œ ๋น„๋™๊ธฐ์  ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” Call Stack๋งŒ์ด ์•„๋‹Œ Callback Queue์™€ Event Loop์˜ ๋„์›€์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

Javascript์˜ ๋Ÿฐํƒ€์ž„ ๊ณผ์ •

Javascript ๋Ÿฐํƒ€์ž„ ๊ณผ์ •


์ถœ์ฒ˜: https://dkje.github.io/2020/09/20/AsyncAndEventLoop/

 

[JS] ๋น„๋™๊ธฐ ์‹คํ–‰๊ณผ Runtime - ์–ด? ์“ฐํก... ํ•˜์•„.... | Dev X

JS Engine์€ ๋™๊ธฐ ๋ฐฉ์‹๋งŒ์„ ์ง€์›ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋น„๋™๊ธฐ ๋ฐฉ์‹์˜ ํ๋ฆ„์„ ์ดํ•ดํ•˜๋ ค๋ฉด ๋Ÿฐํƒ€์ž„์˜ ์ „์ฒด์  ๊ทธ๋ฆผ์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธ€์€ ์›น ๊ธฐ์ค€, ๋™๊ธฐ์™€ ๋น„๋™๊ธฐ์— ๋Œ€ํ•œ ์ดํ•ด๋ฅผ ๋ชฉ์ ์œผ๋กœ ์ •๋ฆฌ๋˜

dkje.github.io

Javascript์˜ ์—”์ง„

Javascript์˜ ์—”์ง„์€ ์›น ํŽ˜์ด์ง€์˜ Javascript ์ฝ”๋“œ๋ฅผ ์ˆ˜์‹ ๋ฐ›์•„ ๊ตฌ๋ฌธ์„ ๋ถ„์„ํ•˜๊ณ , ๊ตฌ๋ฌธ ์˜ค๋ฅ˜๊ฐ€ ์—†๋‹ค๋ฉด ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ๋ช…๋ น์œผ๋กœ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค.
Javascript์˜ ์—”์ง„์€ Memory Heap๊ณผ Call Stack์œผ๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค.

Heap: ๋ฉ”๋ชจ๋ฆฌ ํž™์€ ๋ณ€์ˆ˜ ๋ฐ ๊ฐ์ฒด๋“ค์„ ํ• ๋‹นํ•˜๋Š” ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค. Javascript์˜ ๋ฉ”๋ชจ๋ฆฌ๋Š” ์ˆ˜๋™ ํ• ๋‹น๊ณผ ํ•ด์ œ๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋ฉฐ ๋Œ€์‹  Garbage Collector๋กœ ๊ด€๋ฆฌ๋ฉ๋‹ˆ๋‹ค. ๋ณ€์ˆ˜์™€ ๊ฐ์ฒด์— ๋Œ€ํ•œ ๋ชจ๋“  ๋ฉ”๋ชจ๋ฆฌ ํ• ๋‹น์€ ์—ฌ๊ธฐ์—์„œ ๋ฐœ์ƒ๋ฉ๋‹ˆ๋‹ค.

Callback Queue: ๋น„๋™๊ธฐ์ ์œผ๋กœ ์‹คํ–‰๋œ ์ฝœ๋ฐฑํ•จ์ˆ˜๊ฐ€ ๋ณด๊ด€๋˜๋Š” ์˜์—ญ.
Javascript์˜ ๋Ÿฐํƒ€์ž„์—๋Š” ์ฒ˜๋ฆฌํ•  ๋ฉ”์‹œ์ง€ ๋ชฉ๋ก๊ณผ ์‹คํ–‰ํ•  ๊ด€๋ จ ์ฝœ๋ฐฑ ํ•จ์ˆ˜์ธ ๋ฉ”์‹œ์ง€ ๋Œ€๊ธฐ์—ด์ด ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
์Šคํƒ์— ์ถฉ๋ถ„ํ•œ ์šฉ๋Ÿ‰์ด ์žˆ์œผ๋ฉด ๋ฉ”์‹œ์ง€๊ฐ€ ๋Œ€๊ธฐ์—ด์—์„œ ๊บผ๋‚ด์–ด ๊ด€๋ จ ํ•จ์ˆ˜ ํ˜ธ์ถœ(๋”ฐ๋ผ์„œ ์ดˆ๊ธฐ ์Šคํƒ ํ”„๋ ˆ์ž„ ์ƒ์„ฑ)๋กœ ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๋‹ค.
์Šคํƒ์ด ๋‹ค์‹œ ๋น„๊ฒŒ ๋˜๋ฉด ๋ฉ”์‹œ์ง€ ์ฒ˜๋ฆฌ๊ฐ€ ์ข…๋ฃŒ๋ฉ๋‹ˆ๋‹ค.
๊ธฐ๋ณธ์ ์œผ๋กœ ์ด๋Ÿฌํ•œ ๋ฉ”์‹œ์ง€๋Š” ์ฝœ๋ฐฑ ๊ธฐ๋Šฅ์ด ์ œ๊ณต๋œ ๊ฒฝ์šฐ ์™ธ๋ถ€ ๋น„๋™๊ธฐ ์ด๋ฒคํŠธ(์˜ˆ: ๋งˆ์šฐ์Šค ํด๋ฆญ ๋˜๋Š” HTTP ์š”์ฒญ์— ๋Œ€ํ•œ ์‘๋‹ต ์ˆ˜์‹ )์— ๋Œ€ํ•œ ์‘๋‹ต์œผ๋กœ ๋Œ€๊ธฐ์—ด์— ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด, ์‚ฌ์šฉ์ž๊ฐ€ ๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ๋Š”๋ฐ ์ฝœ๋ฐฑ ๊ธฐ๋Šฅ์ด ์ œ๊ณต๋˜์ง€ ์•Š์•˜๋‹ค๋ฉด ๋ฉ”์‹œ์ง€๊ฐ€ ๋Œ€๊ธฐ์—ด์— ์ถ”๊ฐ€๋˜์ง€ ์•Š์•˜์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

  • ํ(Queue): ์ž๋ฃŒ ๊ตฌ ์ค‘ ํ•˜๋‚˜, ์„ ์ž…์„ ์ถœ(FIFO, First In First Out)์˜ ๋ฃฐ์„ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค.

Call Stack: Call Stack์€ ํ•จ์ˆ˜์˜ ํ˜ธ์ถœ์„ ์Šคํƒ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค. Javascript์˜ ์—”์ง„์€ ๋‹จ ํ•˜๋‚˜์˜ Call Stack์„ ๊ฐ–๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ์˜ ๋™๊ธฐ์  ๋ฐฉ์‹์œผ๋กœ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.
ํ•จ์ˆ˜๋Š” ํ˜ธ์ถœ ์‹œ Call Stack์— ์ถ”๊ฐ€(push)๋ฉ๋‹ˆ๋‹ค.
์ตœ์ƒ์œ„์˜ ์Šคํƒ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋Š” ๋™์•ˆ ํ•˜์œ„์˜ ํ•จ์ˆ˜๋“ค์€ ์ž‘์—…์„ ๋ฉˆ์ถ˜ ์ฑ„ ๋Œ€๊ธฐํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
์ตœ์ƒ์œ„์˜ ํ•จ์ˆ˜๊ฐ€ ์ž‘์—…์„ ์™„๋ฃŒํ•œ ํ›„์—” Call Stack์—์„œ ์ œ๊ฑฐ(pop)๋˜๋ฉฐ return ๊ฐ’๊ณผ ํ•จ๊ป˜ ์ด์ „ ์‹คํ–‰ ํ•จ์ˆ˜๋กœ ๋˜๋Œ์•„๊ฐ‘๋‹ˆ๋‹ค.

  • ์Šคํƒ(stack): ์ž๋ฃŒ๊ตฌ์กฐ ์ค‘ ํ•˜๋‚˜, ์„ ์ž…ํ›„์ถœ(LIFO, Last In First Out)์˜ ๋ฃฐ์„ ๋”ฐ๋ฆ„.

Web API

๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋Š” API๋กœ, DOM, Ajax, Timeout ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
Call Stack์—์„œ ์‹คํ–‰๋œ ๋น„๋™๊ธฐ ํ•จ์ˆ˜๋Š” Web API๋ฅผ ํ˜ธ์ถœํ•˜๊ณ , Web API๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ Callback Queue์— ๋ฐ€์–ด ๋„ฃ์Šต๋‹ˆ๋‹ค.

์ด๋ฒคํŠธ ๋ฃจํ”„(Event Loop)

Call Stack๊ณผ Callback Queue์˜ ์ƒํƒœ๋ฅผ ์ฒดํฌํ•˜์—ฌ, Call Stack์ด ๋นˆ ์ƒํƒœ๊ฐ€ ๋˜๋ฉด, Callback Queue์˜ ์ฒซ๋ฒˆ์งธ ์ฝœ๋ฐฑ์„ Call Stack์œผ๋กœ ๋ฐ€์–ด๋„ฃ์Šต๋‹ˆ๋‹ค.
์ด๋Ÿฌํ•œ ๋ฐ˜๋ณต์ ์ธ ํ–‰์œ„๋ฅผ ํ‹ฑ(tick)์ด๋ผ๊ณ  ์นญํ•ฉ๋‹ˆ๋‹ค.

 

์ฐธ๊ณ ํ•˜๋ฉด ์ข‹์„ ์˜์ƒ

 

๋ณต์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค!