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๊ฐ ํ์ ์ ํตํด ์งํ๋ ์ง๋ ์ง์ผ๋ด์ผ๊ฒ ๋ค์.