์ฝ์ ๊ธ๋ค (~23.6.29)
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 ์์ ์ด๋ฒคํธ ๋ฃจํ์ ์คํ์ ๋ฐฉํดํ์ง ์์ผ๋ฉด์ "์ค๋ ์๊ฐ ๊ฑธ๋ฆฌ๋ ์์ "์ ์ํํ๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผ ํ ๊น์ ๊ดํ ๊ธ. ๊ธ์์ ์ ์ํ๋ ๋ฐฉ๋ฒ์ ์ธ ๊ฐ์ง๋ค.
- ๋ ธ๋๋ฅผ ๋๋ ค๋ผ (์ค์ผ์ผ์ )
setImmediate()
๋ฑ์ ์ฌ์ฉํด ๋น๋๊ธฐ์ ์ธ ๋ก์ง์ผ๋ก ๋ฐ๊ฟ๋ผ- 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 ํ๊ฒฝ ๊ณ ๋ํ
์นด์นด์คํ์ด์ ํ๋ก ํธ์๋ ํ์ด ์๋น์ค ์ด์ ๋ฐ ๊ด๋ฆฌ์ ๋ํด ์กด์ฌํ๋ ๋ค ๊ฐ์ง ์ด์์ ๋ํ ๊ฐ์ ๊ฒฝํ์ ๊ณต์ ํ๋ ์ธ์ .
- ์ด์1: ์ ์ฐํ ์ด์์ด ์ด๋ ค์ด ๊ธฐ์กด ํ๋ก ํธ์๋ ์๋น์ค ์ ๊ณต ํ๊ฒฝ
- ์ด์2: ์๋น์ค ๋ฐฐํฌ/๋กค๋ฐฑ์ด ์ค๋ ๊ฑธ๋ฆผ
- ์ด์3: ํผ๋ธ๋ฆญ ์คํ ์ ์ต์ข ํ์ธ ์๋จ ๋ถ์ฌ
- ์ด์4: ์ธ๋ถ ํธ๋ํฝ์ ์ ์ด์ํค๊ธฐ ์ํ ์ด์์ฑ ๊ฐ๋ฐ ์ ๋ฌด
์ฒซ ์ด์ ํด๊ฒฐ ๋ฐฉ๋ฒ๋ถํฐ ์ฟ ๋ฒ๋คํฐ์ค๊ฐ ๋์์ "์ด๊ฑฐ ํ๋ก ํธ์๋ ์ธ์ ๋ง์?" ํ๊ณ ์ ์ ๋นํฉํ์ง๋ง ํด๋น ์ด์ ๋ฟ๋ง ์๋๋ผ ์ด ํ ์ด์์์๋ yarn berry, ์ด์ ํ๊ฒฝ ๋ด RC ํ๊ฒฝ ๋ฑ ์ ์ตํ ํค์๋๋ค์ด ๋ง์ด ๋์์ ๋ณผ๋งํ๋ค. ๋ง์ง๋ง ์ด์์ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์์ธํ๊ฒ ์ค๋ช ํด์ฃผ์ง ์์๋ ๊ฑด ์ข ์์ฌ์ ๋ค.
๋ชฉ์ฐจ
- JavaScript
- [NODE] ๐ ์ด๋ฒคํธ ๋ฃจํ ๐ setTimeout / setImmediate / process.nextTick ์ฐจ์ด์
- Difference between the Event Loop in Browser and Node Js?
- ๋ธ๋ผ์ฐ์ ์ Nodejs์ ์ด๋ฒคํธ ๋ฃจํ๋ ๋ฌด์์ด ๋ค๋ฅผ๊น
- Practical Guide To Not Blocking The Event Loop
- (๋ฒ์ญ) ์ ์พํ๊ฒ ์ด์ํ ์๋ฐ์คํฌ๋ฆฝํธ ์ํ๊ณ
- Why does "๐ฉ๐พโ๐พ" have a length of 7 in JavaScript?
- Should I use e.code or e.key when handling keyboard events?
- React
- Frontend