OTW for FE

2025년, JavaScript

2025. 1. 17.

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
Triggering smooth, reliable CSS transitions with JavaScript can be weirdly more complicated than you expect. We're gonna explore it more.

interpolate-size라는 새로운 CSS 키워드를 통해서, 혹은 transform을 통해서 구현할 수도 있지만(height: auto;가 애니메이션 작동이 안되요를 참고하세요), 구현 시간이나 지원 브라우저 제한으로 불가능할 때도 있습니다. 이 글에서는 가장 기본적으로 JS와 브라우저 렌더링 방식을 활용해서 height 애니메이션 작동을 보여줍니다.

GraphQL 생태계, 그리고 벤치마크

Benchmarking GraphQL solutions in the JS/TS landscape | Tomek Dev
Not all GraphQL stacks are equal when it comes to performance. Let's find out who's the fastest one!

GraphQL을 진입할 때 가장 문제가 되는 것이 어떤 라이브러리 기반으로 시작해야 하는가에 대한 고민입니다. 이를 대략적으로 알려주기 위해 GraphQL 생태계를 간단하게 알아보고 그에 대한 벤치마크를 소개하는 글입니다. 모든 지원 사항(ex. federation, gateway)이나 라이브러리를 알려주는 것은 아니지만, 생태계를 진입하는데에 대한 정보는 잘 정리되어있네요.

RSC과 Server action 시도하기

RSC and Server Action bundle practice · web-infra-dev · Discussion #23 · GitHub
RSC and Server Action bundle practice

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
How to approach accessible web interface design. Contribute to Heydon/principles-of-web-accessibility development by creating an account on GitHub.

접근성이라는 단어가 모호하기도하고, 많은 의미를 내포하기도 합니다. 이 글에서는 모호한 접근성 구현에 대한 자신만의 원칙을 소개합니다. 구현하는 방법에 대해 알려주진 않지만, 어떻게 대해야 하는지, 어떻게 접근해야 하는지를 소개합니다.

"use cache"를 소개합니다

Composable Caching with Next.js | Next.js
Learn more about the API design and benefits of 'use cache'

이전에 unstable_cache로 제공되는 Next.js의 기능이 "use cache"디렉티브로 제공됩니다. React의 cache함수와 다른 점과 어떻게 사용하는지를 소개합니다.

접근성, 그리고 스크린 리더

Testing Accessibility with Screen Readers | Epic Web Dev
Dive into the world of screen reader testing and discover why relying on a single tool isn't enough. Create genuinely accessible web apps that work for everyone

스크린 리더에 대한 상세한 소개와 주로 테스트해야 하는 부분들을 소개하는 글입니다. 스크린 리더를 통해 수동 테스트를 진행해야 할 때 보면 좋겠네요.

text-wrap의 새로운 값들

Balancing Text In CSS
Make text look more balanced with text-wrap in CSS.

시각적인 정보와 함께 text-wrap의 새로운 값들을 소개하는 글입니다. 아직 주요 브라우저에서 모두 지원하지는 않지만, 시각적인 정보와 함께 어디서 어떻게 사용해야하는지 이해하기 좋게 알려줍니다.

Express.js과 2025년

A New Chapter for Express.js: Triumphs of 2024 and an ambitious 2025
Explore the transformative journey of Express.js in 2024, marked by governance improvements, the long-awaited release of Express 5.0, and heightened security measures. Look into the ambitious plans for 2025, including performance optimizations, scoped packages, and a bold roadmap for sustained growth in the Node.js ecosystem.

Express.js 5.0이 출시되고 그 이후의 Express.js는 어떻게 흘러갈지 소개하는 글입니다. 다른 서버 라이브러리들로 대체될지, 아니면 Express.js가 혁신을 통해 진화될지는 지켜봐야겠네요.