๐Ÿšฉ Node.js ๋…ธ๋“œ์— ๋Œ€ํ•˜์—ฌ

๊ถŒ๊ทœ๋ฆฌยท2024๋…„ 1์›” 18์ผ
1

๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ปFrontEnd

๋ชฉ๋ก ๋ณด๊ธฐ
6/29

Node.js๋ž€?

Node.js๋Š” Chrome V8 JavaScript ์—”์ง„์œผ๋กœ ๋นŒ๋“œ๋œ JavaScript ๋Ÿฐํƒ€์ž„์ด๋‹ค.

์ฆ‰, Node.js๋Š” JS๋ฅผ ๋ธŒ๋ผ์šฐ์ € ๋ง๊ณ ๋„ ๋กœ์ปฌ PC์—์„œ๋„ ์‹คํ–‰์‹œ์ผœ ์ค„ ์ˆ˜ ์žˆ๋‹ค. ๋”ฐ๋ผ์„œ Node.js๋ฅผ ํ†ตํ•˜์—ฌ ๋‹ค์–‘ํ•œ JS ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ์„œ๋ฒ„๊นŒ์ง€ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.


๐Ÿ“ข1. Node.js์˜ ๋“ฑ์žฅ๋ฐฐ๊ฒฝ

ํฌ๋กฌ, ์ต์Šคํ”Œ๋กœ์–ด, ํŒŒ์ด์–ดํญ์Šค ๋“ฑ์˜ ๋ธŒ๋ผ์šฐ์ €๋Š” JS๋ฅผ ์ฝ๊ณ  ํ•ด์„ํ•  ์ˆ˜ ์žˆ๋‹ค. JS๋ฅผ ์ฝ๊ณ  ํ•ด์„ํ•˜๋Š”๊ฒŒ ๋น ๋ฅผ์ˆ˜๋ก ์›น์‚ฌ์ดํŠธ ๋ Œ๋”๋ง ์„ฑ๋Šฅ์ด ์ข‹์•„์ง€๊ธฐ ๋•Œ๋ฌธ์— ๋ธŒ๋ผ์šฐ์ € ๊ฐœ๋ฐœ์ž๋“ค์€ JS ํ•ด์„์—”์ง„์„ ๊ฐœ๋ฐœํ•˜๋Š”๋ฐ ์—ด์„ฑ์ด์—ˆ๋‹ค. ์ด๋•Œ Chrome ๋ธŒ๋ผ์šฐ์ € ๊ฐœ๋ฐœ์ž๋“ค์ด JS ํ•ด์„์—”์ง„์ธ V8์ด๋ผ๋Š” ํ”„๋กœ๊ทธ๋žจ์„ ๋งŒ๋“ค์—ˆ๊ณ  V8์˜ ์„ฑ๋Šฅ์ด ๋„ˆ๋ฌด ์ข‹์•„์„œ V8์„ ๋˜‘ ๋–ผ์–ด ๋งŒ๋“  ๊ฒƒ์ด Node.js์ด๋‹ค.

(+) V8 JS ์—”์ง„

  • JS ์—”์ง„์€ JS ํŒŒ์ผ์„ ์ปดํ“จํ„ฐ๊ฐ€ ์ฝ์„ ์ˆ˜ ์žˆ๋„๋ก ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

๐Ÿ“ข2. Node.js ์‚ฌ์šฉ์ด์œ ?

JavaScript์™€ ๊ฐ™์€ ์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด๋Š” ํŠน์ •ํ•œ ํ”„๋กœ๊ทธ๋žจ ์•ˆ์—์„œ๋งŒ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์›น๋ธŒ๋ผ์šฐ์ € ํ”„๋กœ๊ทธ๋žจ ์•ˆ์—์„œ๋งŒ ๋™์ž‘ํ•œ๋‹ค. ์ฆ‰, ์›น๋ธŒ๋ผ์šฐ์ € ํ”„๋กœ๊ทธ๋žจ์ด ์—†๋‹ค๋ฉด JS๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค. ์—ฌ๊ธฐ์„œ Node.js๊ฐ€ ๋‚˜์˜ค๋Š” ์ด์œ ๊ฐ€ ๋˜๋ฉฐ Node๋ฅผ ์„ค์น˜ํ•˜๋ฉด cmd์™€ ๊ฐ™์€ ํ„ฐ๋ฏธ๋„ ํ”„๋กœ๊ทธ๋žจ์—์„œ Node.js๋ฅผ ์ž…๋ ฅํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ € ์—†์ด JS๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

โœจ ์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•œ ์ ์€ Server-Client ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ ์›น์—์„œ ํ‘œ์‹œ๋˜๋Š” ๋ถ€๋ถ„์€ JS๋ฅผ ์‚ฌ์šฉํ–ˆ๊ณ , ์„œ๋ฒ„๋Š” Java๋“ฑ์˜ ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•˜์ง€๋งŒ Node.js๋ฅผ ํ†ตํ•ด์„œ ์„œ๋ฒ„๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋”ฐ๋ผ์„œ FE์™€ BE์—์„œ JS ํ•œ ๊ฐ€์ง€ ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•ด ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋ฆฌํ•˜์—ฌ Node.js์˜ ์ˆ˜์š”๊ฐ€ ์ ์  ๋Š˜์–ด๋‚œ๋‹ค๋Š” ์  ..!


๐Ÿ“ข3. Node.js ๋™์ž‘๊ณผ์ •

Node.js๋Š” event loop, event queue, call stack์œผ๋กœ ๊ตฌ์„ฑ์ด ๋˜์–ด์žˆ์œผ๋ฉฐ ํŠน์ • ์ƒํ™ฉ์— O/S kernel์— ์ž‘์—…์„ ์œ„์ž„ํ•œ๋‹ค.

single threadโ”

  • ์‹ฑ๊ธ€์Šค๋ ˆ๋“œ๋Š” ๋ฉ”์ธ์Šค๋ ˆ๋“œ ํ•˜๋‚˜๋งŒ ๊ฐ€์ง€๊ณ  ์ˆœ์ฐจ์ ์œผ๋กœ ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•œ๋‹ค.

  • event loop์™€ call stack์„ ๊ด€๋ฆฌํ•œ๋‹ค.


event loopโ”

  • node.js์—์„œ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ์—ญํ• ์ด๋ฉฐ ํ”„๋กœ๊ทธ๋žจ์ด ์‹คํ–‰๋˜๋ฉด event loop๋Š” ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ ์ „๊นŒ์ง€ ๋Œ€๊ธฐ์ƒํƒœ์ด๋‹ค.

  • ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด event loop๋Š” ํ•ด๋‹น ์ด๋ฒคํŠธ๊ฐ€ ๋™๊ธฐ์ธ์ง€, ๋น„๋™๊ธฐ์ธ์ง€ ํŒ๋ณ„ํ•œ๋‹ค.

    ๐Ÿ“ ์ด๋ฒคํŠธ๊ฐ€ ๋™๊ธฐ๋ผ๋ฉด ..

    call stack์œผ๋กœ ํ•ด๋‹น ์ด๋ฒคํŠธ๊ฐ€ ์ด๋™ํ•œ๋‹ค. ๋งŒ์•ฝ ์ด๋ฒคํŠธ๊ฐ€ callback ํ•จ์ˆ˜๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๋ฉด callback์„ event queue๋กœ ๋ณด๋‚ธ๋‹ค.

    ๐Ÿ“ ์ด๋ฒคํŠธ๊ฐ€ ๋น„๋™๊ธฐ๋ผ๋ฉด ..

    O/S kernel์—๊ฒŒ ํ•ด๋‹น ์ž‘์—…์„ ์œ„์ž„ํ•œ๋‹ค.


call stackโ”

  • call stack์€ event loop์—์„œ ํŒ๋ณ„๋œ ๋™๊ธฐ ์ด๋ฒคํŠธ ์ž‘์—…๋งŒ ์ˆ˜ํ–‰ํ•œ๋‹ค.

  • event loop์— ์˜ํ•ด call stack์œผ๋กœ ์ด๋™๋œ ์ด๋ฒคํŠธ๊ฐ€ ์ž‘์—…์ด ์ด๋ฃจ์–ด์ง€๋Š” ๋™์•ˆ event loop๋Š” call stack์ด ์ž‘์—…์„ ์™„๋ฃŒํ–ˆ๋Š”์ง€, call stack์ด ๋น„์›Œ์กŒ๋Š”์ง€ ํ™•์ธํ•˜๋ฉฐ blocked ๋œ๋‹ค.


event queueโ”

  • event loop๋Š” ์ด๋ฒคํŠธ ์ค‘ callbackํ•จ์ˆ˜๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๋ฉด ๊ทธ callbackํ•จ์ˆ˜๋ฅผ event queue๋กœ ๋„˜๊ฒจ์ค€๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ฒ˜์Œ ์ด๋ฒคํŠธ ์ž‘์—…์ด call stack์—์„œ ์™„๋ฃŒ๋  ์‹œ event loop๋Š” ์ž ์‹œ blocked ๋˜์—ˆ๋‹ค๊ฐ€ event queue์— ์žˆ๋Š” callback์„ call stack์œผ๋กœ ๋ณด๋‚ด์ค€๋‹ค.

  • ์ด๋ ‡๊ฒŒ call stack์œผ๋กœ ๋ณด๋‚ธ ํ›„ ์›๋ž˜๋Œ€๋กœ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•œ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฐฉ์‹์„ ํ†ตํ•ด event loop๋Š” ๋™๊ธฐ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•œ๋‹ค.


O/S kernelโ”

  • ๋น„๋™๊ธฐ ์ด๋ฒคํŠธ๋งŒ ์ˆ˜ํ–‰ํ•œ๋‹ค.

  • O/S kernel์€ Node.js์˜ ์™ธ๋ถ€ ํ™˜๊ฒฝ์ด๋ฏ€๋กœ event loop๋Š” ๊ณ„์†ํ•ด์„œ ๋‹ค๋ฅธ ์ด๋ฒคํŠธ๋ฅผ ๋งŒ๋‚  ์ˆ˜ ์žˆ๋‹ค. ์ด๊ฒƒ์ด node.js๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๋งŒ๋“ค์–ด์ฃผ๋Š” ๋น„๋™๊ธฐ ๋ฐฉ์‹ ๊ณผ์ •์ด๋‹ค.

    โœจ => event loop๊ฐ€ ๋น„๋™๊ธฐ ์ด๋ฒคํŠธ๋ฅผ ๋งŒ๋‚ฌ์„ ๋•Œ O/S kernel์—๊ฒŒ ํ•ด๋‹น ์ž‘์—…์„ ์œ„์ž„ํ•˜๋ฏ€๋กœ event loop๋Š” non-blocked ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๊ณ , ๋‹ค๋ฅธ ์ด๋ฒคํŠธ๋ฅผ ๊ณ„์†ํ•ด์„œ ๋งŒ๋‚  ์ˆ˜ ์žˆ๋‹ค.

  • O/S kernel๋กœ๋ถ€ํ„ฐ ๋น„๋™๊ธฐ ์ž‘์—…์„ ๋งˆ์นœ ์ด๋ฒคํŠธ๊ฐ€ ๋งŒ์•ฝ callback์ด ์žˆ๋‹ค๋ฉด O/S kernel์€ ์ด๋ฅผ event loop์—๊ฒŒ ์•Œ๋ฆฌ๋ฉฐ event loop๋Š” event queue๋กœ ๋ณด๋‚ธ๋‹ค.


Node.js์˜ ๋™์ž‘๊ณผ์ •์„ ์š”์•ฝํ•˜์ž๋ฉด์š”!

Node.js๋Š” ์‹ฑ๊ธ€์Šค๋ ˆ๋“œ, ๋…ผ ๋ธ”๋กœํ‚น ๋ชจ๋ธ๋กœ ์‹ฑ๊ธ€์Šค๋ ˆ๋“œ๊ฐ€ ํ˜ผ์ž์„œ ์ผ์„ ์ฒ˜๋ฆฌํ•˜์ง€๋งŒ, ๋…ผ ๋ธ”๋กœํ‚น ๋ฐฉ์‹์œผ๋กœ ์ด์ „ ์ž‘์—…์ด ์™„๋ฃŒ๋  ๋•Œ๊นŒ์ง€ ๋Œ€๊ธฐํ•˜์ง€ ์•Š๊ณ  ๋‹ค์Œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค!!


๐Ÿ“ข4. Node.js ์ •๋ฆฌ

  • Node๋Š” ์‹ฑ๊ธ€์Šค๋ ˆ๋“œ๋กœ, ๋ฉ€ํ‹ฐ์Šค๋ ˆ๋“œ์— ๋น„ํ•ด ์ ์€ ์ปดํ“จํ„ฐ ์ž์›์„ ์‚ฌ์šฉํ•œ๋‹ค.

  • I/0 ์š”์ฒญ์ด ๋งŽ์ด ๋ฐœ์ƒํ•œ๋‹ค๋ฉด Node๋Š” ์„œ๋ฒ„๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ ํ•ฉํ•˜๋‹ค.

  • JS๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— JSON ํ˜•์‹๊ณผ ์‰ฝ๊ฒŒ ํ˜ธํ™˜๋œ๋‹ค.


๐Ÿ“ข(+) Node.js ์™€ React์˜ ํŠน์ง•

โœจ React

  • JS๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  • ์ปดํฌ๋„ŒํŠธ๋กœ ์›น์‚ฌ์ดํŠธ ๊ตฌํ˜„
  • ํ˜„์กดํ•˜๋Š” ์›น์‚ฌ์ดํŠธ ๋Œ€๋ถ€๋ถ„ ๊ตฌํ˜„ ๊ฐ€๋Šฅ

โœจ Node.js

  • JS๋ฅผ ์‚ฌ์šฉํ•œ ๋ฐฑ์—”๋“œ ๋Ÿฐํƒ€์ž„
  • ํ™œ์šฉ ๊ฐ€๋Šฅํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ํ’๋ถ€
  • ๋น„๊ต์  ๋น ๋ฅด๊ฒŒ ์„œ๋ฒ„ ๊ตฌ์ถ• ๊ฐ€๋Šฅ
profile
๊ธฐ๋ก์žฅ ๐Ÿ“

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