GitHub RSS Feed
Home News About us

2025๋…„, JavaScript

2025. 3. 29.

2025๋…„, JavaScript

dev.to ๐Ÿ”—

SolidJS์˜ ์ €์ž๊ฐ€ 2024๋…„์— JavaScript ์ƒํƒœ๊ณ„๋Š” ์–ด๋Š ๋ฐฉ๋ฉด์— ์ง‘์ค‘ํ–ˆ๋Š”์ง€, ๊ทธ๋ฆฌ๊ณ  2025๋…„์€ ์–ด๋–ป๊ฒŒ ํ˜๋Ÿฌ๊ฐˆ์ง€ ์˜ˆ์ƒํ•ด๋ณด๋Š” ๊ธ€์ž…๋‹ˆ๋‹ค. ์ €์ž์˜ ๋ง๋Œ€๋กœ, ๊ทธ๋™์•ˆ ํ”„๋ก ํŠธ์—”๋“œ์˜ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์˜ ๋ณต์žก์„ฑ์ด ๋งค์šฐ ์ฆ๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ์— ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์–ด๋–ป๊ฒŒ ๋Œ€ํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ๋” ์ง‘์ค‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค(์ถ”์ฒœํ•˜๋Š” ๊ธ€ ๋ฌถ์Œ์œผ๋กœ๋Š” Next.js์—์„œ Astro๋กœ ๋ณ€๊ฒฝํ•˜๊ธฐ, ๊ทธ ์ค‘์—์„œ React๋ฅผ ์„ ํƒํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค).

๊ฐ•์ œ reflow๋กœ height ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„ํ•˜๊ธฐ

Using Forced Reflows and the Event Loop to Slide Open a Box | Alex MacArthur ๐Ÿ”—

interpolate-size๋ผ๋Š” ์ƒˆ๋กœ์šด CSS ํ‚ค์›Œ๋“œ๋ฅผ ํ†ตํ•ด์„œ, ํ˜น์€ transform์„ ํ†ตํ•ด์„œ ๊ตฌํ˜„ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ(height: auto;๊ฐ€ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ž‘๋™์ด ์•ˆ๋˜์š”๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”), ๊ตฌํ˜„ ์‹œ๊ฐ„์ด๋‚˜ ์ง€์› ๋ธŒ๋ผ์šฐ์ € ์ œํ•œ์œผ๋กœ ๋ถˆ๊ฐ€๋Šฅํ•  ๋•Œ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์œผ๋กœ JS์™€ ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๋ฐฉ์‹์„ ํ™œ์šฉํ•ด์„œ height ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ž‘๋™์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

GraphQL ์ƒํƒœ๊ณ„, ๊ทธ๋ฆฌ๊ณ  ๋ฒค์น˜๋งˆํฌ

Benchmarking GraphQL solutions in the JS/TS landscape | Tomek Dev ๐Ÿ”—

GraphQL์„ ์ง„์ž…ํ•  ๋•Œ ๊ฐ€์žฅ ๋ฌธ์ œ๊ฐ€ ๋˜๋Š” ๊ฒƒ์ด ์–ด๋–ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ธฐ๋ฐ˜์œผ๋กœ ์‹œ์ž‘ํ•ด์•ผ ํ•˜๋Š”๊ฐ€์— ๋Œ€ํ•œ ๊ณ ๋ฏผ์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ๋Œ€๋žต์ ์œผ๋กœ ์•Œ๋ ค์ฃผ๊ธฐ ์œ„ํ•ด GraphQL ์ƒํƒœ๊ณ„๋ฅผ ๊ฐ„๋‹จํ•˜๊ฒŒ ์•Œ์•„๋ณด๊ณ  ๊ทธ์— ๋Œ€ํ•œ ๋ฒค์น˜๋งˆํฌ๋ฅผ ์†Œ๊ฐœํ•˜๋Š” ๊ธ€์ž…๋‹ˆ๋‹ค. ๋ชจ๋“  ์ง€์› ์‚ฌํ•ญ(ex. federation, gateway)์ด๋‚˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์•Œ๋ ค์ฃผ๋Š” ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ, ์ƒํƒœ๊ณ„๋ฅผ ์ง„์ž…ํ•˜๋Š”๋ฐ์— ๋Œ€ํ•œ ์ •๋ณด๋Š” ์ž˜ ์ •๋ฆฌ๋˜์–ด์žˆ๋„ค์š”.

RSC๊ณผ Server action ์‹œ๋„ํ•˜๊ธฐ

RSC and Server Action bundle practice ยท web-infra-dev ยท Discussion #23 ยท GitHub ๐Ÿ”—

rspack์˜ ๋ฉ”์ธํ…Œ์ด๋„ˆ๊ฐ€ RSC์™€ Server action์„ webpack, turbopack ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์„ฑํ•ด๋ณด๋ฉฐ RSC, SSR, Server Action์ด ์–ด๋–ป๊ฒŒ ํ˜ผํ•ฉ๋˜๋Š”์ง€ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ๊ธ€์„ ์ฝ์œผ๋ ค๋ฉด webpack์˜ optimizing์˜ ๊ธฐ๋ณธ ๊ฐœ๋…์€ ์•Œ์•„์•ผํ•˜๊ธฐ์—, ์ข€ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ ‘๊ทผ์„ฑ์„ ๋Œ€ํ•˜๋Š” ์ž์„ธ

GitHub - Heydon/principles-of-web-accessibility: How to approach accessible web interface design ๐Ÿ”—

์ ‘๊ทผ์„ฑ์ด๋ผ๋Š” ๋‹จ์–ด๊ฐ€ ๋ชจํ˜ธํ•˜๊ธฐ๋„ํ•˜๊ณ , ๋งŽ์€ ์˜๋ฏธ๋ฅผ ๋‚ดํฌํ•˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ๋ชจํ˜ธํ•œ ์ ‘๊ทผ์„ฑ ๊ตฌํ˜„์— ๋Œ€ํ•œ ์ž์‹ ๋งŒ์˜ ์›์น™์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ๋ ค์ฃผ์ง„ ์•Š์ง€๋งŒ, ์–ด๋–ป๊ฒŒ ๋Œ€ํ•ด์•ผ ํ•˜๋Š”์ง€, ์–ด๋–ป๊ฒŒ ์ ‘๊ทผํ•ด์•ผ ํ•˜๋Š”์ง€๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

"use cache"๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค

Composable Caching with Next.js | Next.js ๐Ÿ”—

์ด์ „์— unstable_cache๋กœ ์ œ๊ณต๋˜๋Š” Next.js์˜ ๊ธฐ๋Šฅ์ด "use cache"๋””๋ ‰ํ‹ฐ๋ธŒ๋กœ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. React์˜ cacheํ•จ์ˆ˜์™€ ๋‹ค๋ฅธ ์ ๊ณผ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

์ ‘๊ทผ์„ฑ, ๊ทธ๋ฆฌ๊ณ  ์Šคํฌ๋ฆฐ ๋ฆฌ๋”

Testing Accessibility with Screen Readers | Epic Web Dev ๐Ÿ”—

์Šคํฌ๋ฆฐ ๋ฆฌ๋”์— ๋Œ€ํ•œ ์ƒ์„ธํ•œ ์†Œ๊ฐœ์™€ ์ฃผ๋กœ ํ…Œ์ŠคํŠธํ•ด์•ผ ํ•˜๋Š” ๋ถ€๋ถ„๋“ค์„ ์†Œ๊ฐœํ•˜๋Š” ๊ธ€์ž…๋‹ˆ๋‹ค. ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๋ฅผ ํ†ตํ•ด ์ˆ˜๋™ ํ…Œ์ŠคํŠธ๋ฅผ ์ง„ํ–‰ํ•ด์•ผ ํ•  ๋•Œ ๋ณด๋ฉด ์ข‹๊ฒ ๋„ค์š”.

text-wrap์˜ ์ƒˆ๋กœ์šด ๊ฐ’๋“ค

Balancing Text In CSS ๐Ÿ”—

์‹œ๊ฐ์ ์ธ ์ •๋ณด์™€ ํ•จ๊ป˜ text-wrap์˜ ์ƒˆ๋กœ์šด ๊ฐ’๋“ค์„ ์†Œ๊ฐœํ•˜๋Š” ๊ธ€์ž…๋‹ˆ๋‹ค. ์•„์ง ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ชจ๋‘ ์ง€์›ํ•˜์ง€๋Š” ์•Š์ง€๋งŒ, ์‹œ๊ฐ์ ์ธ ์ •๋ณด์™€ ํ•จ๊ป˜ ์–ด๋””์„œ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•ด์•ผํ•˜๋Š”์ง€ ์ดํ•ดํ•˜๊ธฐ ์ข‹๊ฒŒ ์•Œ๋ ค์ค๋‹ˆ๋‹ค.

Express.js๊ณผ 2025๋…„

A New Chapter for Express.js: Triumphs of 2024 and an ambitious 2025 ๐Ÿ”—

Express.js 5.0์ด ์ถœ์‹œ๋˜๊ณ  ๊ทธ ์ดํ›„์˜ Express.js๋Š” ์–ด๋–ป๊ฒŒ ํ˜๋Ÿฌ๊ฐˆ์ง€ ์†Œ๊ฐœํ•˜๋Š” ๊ธ€์ž…๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์„œ๋ฒ„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค๋กœ ๋Œ€์ฒด๋ ์ง€, ์•„๋‹ˆ๋ฉด Express.js๊ฐ€ ํ˜์‹ ์„ ํ†ตํ•ด ์ง„ํ™”๋ ์ง€๋Š” ์ง€์ผœ๋ด์•ผ๊ฒ ๋„ค์š”.