JavaScript

[NODE] ๐Ÿ“š ์ด๋ฒคํŠธ ๋ฃจํ”„ ๐Ÿ” setTimeout / setImmediate / process.nextTick ์ฐจ์ด์ 

setTimeout(), setImmediate() ์˜ ์ฐจ์ด์ ์„ ์„ค๋ช…ํ•˜๋Š” ๊ธ€. ์ด๋ฒคํŠธ ๋ฃจํ”„์˜ phase ๊ฐœ๋…๋„ ๊ฐ™์ด ์„ค๋ช…ํ•ด์ค€๋‹ค. ์ฃผ์˜ํ•  ์ ์€ ์ด๋ฒคํŠธ ๋ฃจํ”„์˜ phase ๊ฐœ๋…์€ node.js ์—๋งŒ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๋ธŒ๋ผ์šฐ์ €์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ์ด๋ฒคํŠธ ๋ฃจํ”„๋ฅผ ๋‹ค๋ฅด๊ฒŒ ๊ตฌํ˜„ํ–ˆ๋‹ค. setImmediate() ํ•จ์ˆ˜๋„ node.js ์—๋งŒ ๊ตฌํ˜„๋œ ํ•จ์ˆ˜์ด๋‹ˆ, ํ•ด๋‹น ํ•จ์ˆ˜๊ฐ€ ๋‚˜์˜ค๋Š” ๊ธ€ ํ˜น์€ ์‚ฌ์šฉ๋œ ์ฝ”๋“œ๋Š” ๋ชจ๋‘ node.js ๊ธฐ๋ฐ˜์ด๋ผ๊ณ  ๋ณด๋ฉด ๋œ๋‹ค. ํ—ท๊ฐˆ๋ฆฌ์ง€ ๋ง์ž.

Difference between the Event Loop in Browser and Node Js?

๋ธŒ๋ผ์šฐ์ €์™€ node.js ์˜ ์ด๋ฒคํŠธ ๋ฃจํ”„๋Š” ์–ด๋–ค ์ฐจ์ด๊ฐ€ ์žˆ์„๊นŒ? ์— ๊ด€ํ•œ ๊ธ€. ์œ„ ๊ธ€์„ ์ฝ๊ณ  ์ƒˆ์‚ผ ๊ถ๊ธˆํ•ด์ ธ์„œ ์ฐพ์•„๋ดค๋‹ค. ํ•˜์ง€๋งŒ, ์•Œ๊ธฐ ์‰ฝ๊ฒŒ ์ž˜ ์„ค๋ช…ํ•˜๊ณ  ์žˆ๊ธด ํ•˜์ง€๋งŒ, ์œ—๊ธ€์— ๋น„ํ•ด ํŠน๋ณ„ํžˆ ๊นŠ์€ ๋‚ด์šฉ์„ ๋‹ค๋ฃจ๊ณ  ์žˆ์ง€๋Š” ์•Š๋‹ค.

๋ธŒ๋ผ์šฐ์ €์™€ Nodejs์˜ ์ด๋ฒคํŠธ ๋ฃจํ”„๋Š” ๋ฌด์—‡์ด ๋‹ค๋ฅผ๊นŒ

์ด ๊ธ€์€ ์œ—๊ธ€์— ๋น„ํ•ด ๋” ๊นŠ๋‹ค. ๋งˆ์ดํฌ๋กœ ํƒœ์Šคํฌ์™€ ๋งคํฌ๋กœ ํƒœ์Šคํฌ๋ฅผ ๋ธŒ๋ผ์šฐ์ €์™€ node.js ์—์„œ ๊ฐ๊ฐ ์–ด๋–ป๊ฒŒ ๋‹ค๋ฃฐ๊นŒ, ์™œ setTimeout ์˜ interval ์„ 0์œผ๋กœ ํ•ด๋„ ์ตœ์†Œ 1ms ์˜ ์ฐจ์ด๊ฐ€ ๋‚ ๊นŒ, setTimeout ์„ ์ค‘์ฒฉํ•ด์„œ ์‚ฌ์šฉํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €์™€ node.js ๋Š” ์™œ/์–ด๋–ป๊ฒŒ ๋‹ค๋ฅด๊ฒŒ ๋™์ž‘ํ• ๊นŒ, setImmediate ์™€ process.nextTick ์€ ์–ด๋–ป๊ฒŒ ๋‹ค๋ฅผ๊นŒ ๋“ฑ๋“ฑ์— ๊ด€ํ•˜์—ฌ ์ด์•ผ๊ธฐํ•œ๋‹ค.

์ ์ ˆํ•œ ์˜ˆ์ œ ์ฝ”๋“œ๋„ ๋งŽ์ด ์žˆ๋‹ค.

Practical Guide To Not Blocking The Event Loop

์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ์ธ node.js ์—์„œ ์ด๋ฒคํŠธ ๋ฃจํ”„์˜ ์‹คํ–‰์„ ๋ฐฉํ•ดํ•˜์ง€ ์•Š์œผ๋ฉด์„œ "์˜ค๋žœ ์‹œ๊ฐ„ ๊ฑธ๋ฆฌ๋Š” ์ž‘์—…"์„ ์ˆ˜ํ–‰ํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ• ๊นŒ์— ๊ด€ํ•œ ๊ธ€. ๊ธ€์—์„œ ์ œ์‹œํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์„ธ ๊ฐ€์ง€๋‹ค.

  1. ๋…ธ๋“œ๋ฅผ ๋Š˜๋ ค๋ผ (์Šค์ผ€์ผ์—…)
  2. setImmediate() ๋“ฑ์„ ์‚ฌ์šฉํ•ด ๋น„๋™๊ธฐ์ ์ธ ๋กœ์ง์œผ๋กœ ๋ฐ”๊ฟ”๋ผ
  3. worker ๋ฅผ ์‚ฌ์šฉํ•˜๋ผ

์ž์„ธํ•œ ๋‚ด์šฉ์€ ๋ณธ๋ฌธ์„ ์ฐธ๊ณ ํ•˜์ž.

(๋ฒˆ์—ญ) ์œ ์พŒํ•˜๊ฒŒ ์ด์ƒํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ƒํƒœ๊ณ„

"์‚ฌ๋žŒ๋“ค์€ ์ด์ œ ๋”์ด์ƒ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋ฒˆ๋“ค๋Ÿฌ ์œ„์—์„œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ, ์Šค๋ฒจํŠธ, JSX, React Server Component ๋“ฑ์„ ์‚ฌ์šฉํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์ด ์•„๋‹ˆ๊ณ  ํ‘œ์ค€์ด ์•„๋‹Œ ๊ฒƒ๋“ค์„ ์‚ฌ์šฉํ•œ๋‹ค. ๊ทธ๊ฒƒ์€ ๋งค์šฐ ์ด์ƒํ•ด๋ณด์ด์ง€๋งŒ ๋™์‹œ์— ๋Œ€๋‹จํ•œ ๊ฐ€๋Šฅ์„ฑ๊ณผ ํ™•์žฅ์„ฑ์„ ์ง€๋…”๋‹ค." ๋ผ๋Š” ์š”์ง€์˜ ๊ธ€์ด๋‹ค. ์ธ์ƒ์ ์ธ ๊ด€์ ์ด๋‹ค.

Why does "๐Ÿ‘ฉ๐Ÿพโ€๐ŸŒพ" have a length of 7 in JavaScript?

์™œ "๐Ÿ‘ฉ๐Ÿพโ€๐ŸŒพ" ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— length ๊ฐ€ 7 ๋กœ ๋‚˜์˜ฌ๊นŒ? ์— ๊ด€ํ•œ ๊ธ€.

์ด์œ ๋Š” ๊ฐ„๋‹จํ•˜๋‹ค. ๋ณธ๋”” ์บ๋ฆญํ„ฐ๋ฅผ UTF-16 ์œผ๋กœ ์ทจ๊ธ‰ํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์ง€๋งŒ, ์š”์ฆ˜์—๋Š” ์ปดํ“จํ„ฐ๊ฐ€ ๋‹ค๋ฃจ๋Š” ๋ฌธ์ž๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์•„์ ธ์„œ 16bit (0~65535) ๋‚ด์— ๋ชจ๋“  ์บ๋ฆญํ„ฐ๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์—†๊ฒŒ ๋˜์—ˆ๊ณ , UTF-16 ๋ฒ”์œ„๋ฅผ ๋„˜์–ด๊ฐ€๋Š” ์บ๋ฆญํ„ฐ๋“ค์€ ์—ฌ๋Ÿฌ UTF-16 ์ฝ”๋“œ๋กœ ๋‹ค๋ค„์ง€๊ฒŒ ๋˜์—ˆ๋‹ค. ๐Ÿ‘ฉ๐Ÿพโ€๐ŸŒพ ๋Š” UTF-16 ์ฝ”๋“œ 7๊ฐœ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์œผ๋ฏ€๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ธธ์ด๋ฅผ 7๋กœ ํ•ด์„ํ•œ๋‹ค. ๋น„์Šทํ•œ ์ด์œ ๋กœ "๐ŸŒธ" ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ž…์žฅ์—์„œ ๊ธธ์ด๊ฐ€ 2 ๋‹ค.

์ƒ์„ธํ•œ ๋‚ด์šฉ์€ ๋ณธ๋ฌธ์„ ์ฐธ๊ณ ํ•˜์ž.

Should I use e.code or e.key when handling keyboard events?

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ‚ค๋ณด๋“œ ์ด๋ฒคํŠธ์—์„œ event.code ๊ฐ’๊ณผ event.key ๊ฐ’์˜ ์ฐจ์ด๋ฅผ ์„ค๋ช…ํ•œ ๊ธ€.

code ๋Š” ํ‚ค๋ณด๋“œ์˜ ํ‚ค ์ž์ฒด๋ฅผ ์˜๋ฏธํ•ด์„œ ์–ธ์–ด์™€ ๊ด€๊ณ„์—†์ด ํ•ญ์ƒ ๊ฐ’์ด ๊ฐ™์ง€๋งŒ, key๋Š” ๋ˆŒ๋ ค์„œ ํ™”๋ฉด์— ํ‘œ์‹œ๋  ๊ฐ’์ด๋ฏ€๋กœ ์–ด๋–ค ์–ธ์–ด๋กœ ์ž…๋ ฅํ•˜๊ณ  ์žˆ๋Š๋ƒ์— ๋”ฐ๋ผ์„œ ๊ฐ’์ด ๋‹ฌ๋ผ์ง„๋‹ค. ๋ฐ˜๋ฉด, ํ‚ค๋ณด๋“œ๊ฐ€ ๋งŒ์•ฝ ๋‹ค๋ฅธ ์ข…๋ฅ˜๋ผ๋ฉด ๊ฐ™์€ key ๊ฐ’์„ ๋ฐ›๋”๋ผ๋„ code ๊ฐ’์ด ์„œ๋กœ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ๋‹ค (QWERTY ์™€ DVORAK ๋“ฑ๋“ฑ ํ‚ค๋ณด๋“œ ์ข…๋ฅ˜์— ๋”ฐ๋ฅธ ์ฐจ์ด).

React

๋ฆฌ์•กํŠธ ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์˜ ๋™์ž‘ ๋ฐฉ์‹

(๋ฒˆ์—ญ) ์œ ์พŒํ•˜๊ฒŒ ์ด์ƒํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ƒํƒœ๊ณ„์—์„œ ์–ธ๊ธ‰ํ•œ React Server Component ๊ฐ€ ๊ถ๊ธˆํ•ด์„œ ์ฐพ์•„๋ณธ ๊ธ€.

์ด์ „๋ถ€ํ„ฐ ๊ณ„์† ๊ทธ ๋ช…์นญ์€ ๋“ค์–ด์™”์ง€๋งŒ ์•„์ง ์‹ค๋ฌด์— ๋ณธ๊ฒฉ์ ์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ์ƒํ™ฉ์€ ์•„๋‹ˆ๋ผ ์ƒ๊ฐํ•ด์„œ ๊ตณ์ด ์ฐพ์•„๋ณด์ง€๋Š” ์•Š๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ๊ถ๊ธˆํ•ด์ ธ์„œ ์ฐพ์•„๋ดค๋‹ค.

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

Frontend

๐ŸŽฅ ์นด์นด์˜คํŽ˜์ด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœํŒ€์˜ Client Side Rendering ํ™˜๊ฒฝ ๊ณ ๋„ํ™”

if(kakao)dev2022์˜ ์„ธ์…˜.

์นด์นด์˜คํŽ˜์ด์˜ ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์ด ์„œ๋น„์Šค ์šด์˜ ๋ฐ ๊ด€๋ฆฌ์— ๋Œ€ํ•ด ์กด์žฌํ•˜๋˜ ๋„ค ๊ฐ€์ง€ ์ด์Šˆ์— ๋Œ€ํ•œ ๊ฐœ์„  ๊ฒฝํ—˜์„ ๊ณต์œ ํ•˜๋Š” ์„ธ์…˜.

  • ์ด์Šˆ1: ์œ ์—ฐํ•œ ์šด์˜์ด ์–ด๋ ค์šด ๊ธฐ์กด ํ”„๋ก ํŠธ์—”๋“œ ์„œ๋น„์Šค ์ œ๊ณต ํ™˜๊ฒฝ
  • ์ด์Šˆ2: ์„œ๋น„์Šค ๋ฐฐํฌ/๋กค๋ฐฑ์ด ์˜ค๋ž˜ ๊ฑธ๋ฆผ
  • ์ด์Šˆ3: ํผ๋ธ”๋ฆญ ์˜คํ”ˆ ์ „ ์ตœ์ข… ํ™•์ธ ์ˆ˜๋‹จ ๋ถ€์žฌ
  • ์ด์Šˆ4: ์™ธ๋ถ€ ํŠธ๋ž˜ํ”ฝ์„ ์ „์ด์‹œํ‚ค๊ธฐ ์œ„ํ•œ ์šด์˜์„ฑ ๊ฐœ๋ฐœ ์—…๋ฌด

์ฒซ ์ด์Šˆ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•๋ถ€ํ„ฐ ์ฟ ๋ฒ„๋„คํ‹ฐ์Šค๊ฐ€ ๋‚˜์™€์„œ "์ด๊ฑฐ ํ”„๋ก ํŠธ์—”๋“œ ์„ธ์…˜ ๋งž์•„?" ํ•˜๊ณ  ์ž ์‹œ ๋‹นํ™ฉํ–ˆ์ง€๋งŒ ํ•ด๋‹น ์ด์Šˆ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ดํ›„ ์ด์Šˆ์—์„œ๋„ yarn berry, ์šด์˜ ํ™˜๊ฒฝ ๋‚ด RC ํ™˜๊ฒฝ ๋“ฑ ์œ ์ตํ•œ ํ‚ค์›Œ๋“œ๋“ค์ด ๋งŽ์ด ๋‚˜์™€์„œ ๋ณผ๋งŒํ–ˆ๋‹ค. ๋งˆ์ง€๋ง‰ ์ด์Šˆ์˜ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์ƒ์„ธํ•˜๊ฒŒ ์„ค๋ช…ํ•ด์ฃผ์ง€ ์•Š์•˜๋˜ ๊ฑด ์ข€ ์•„์‰ฌ์› ๋‹ค.