저번주 프론트엔드 볼거리(1.31)

- 성능 최적화 기술은 사용하면 끝일까

https://www.youtube.com/watch?v=j5E_U_hu7g0

여러가지 성능 최적화 할 수 있는데 놓칠 수 있는 부분이나, 아니면 잘못 사용해서 오히려 성능을 느리게 하거나 최적화 하지 못한 경우를 소개하는 영상입니다. 특히 초반에 소개하는 Lazy Loading API나 Speculative loading(https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading)관련 문제가 많이 생길 수 있으니, 조심해서 잘 사용해야 합니다.

- Streaming SSR의 뒷면

https://gitnation.com/contents/out-of-order-streaming-the-secret-powering-modern-react

Streaming SSR이 HTML Streaming과 JS를 통해서 어떻게 구현되었는지 소개하는 발표입니다. 깊게 파고들지 않고, 라이브 코딩을 통해 어떻게 구현되었는지 살펴보므로, 간단하게 <Suspense>안의 Server Components가 어떻게 제자리로 들어가는지 알 수 있습니다.

- Server Functions와 두 관점

https://www.brenelz.com/posts/why-server-functions-matter-in-a-server-component-world/

Tanstack Start에서 Server Functions 기능을 출시(https://tanstack.com/start/latest/docs/framework/react/server-functions)했습니다. Tanstack Start의 Server Functions 개념과 RSC(사실상 현재는 Next.js)의 Server Functions는 어떻게 다른지, 어떤 장단점을 가지고 있는지 소개합니다. 이 글에서 Server Functions에 관심이 생겼다면 이어서 Server Functions의 장점(https://www.brenelz.com/posts/server-function-benefits/) 글을 추천드립니다.

- 초기 로드 성능 최적화 알아보기

https://www.developerway.com/posts/initial-load-performance

초기 로드 성능 최적화의 모든 것에 대한 글은 아니지만, 초기 로드에 관한 지표(LCP, FCP), 측정 방식, 간단한 해결책을 소개합니다. 친절하게 설명하므로, 간단하게 알아보기에 좋습니다. 이전의 브라우저 캐싱의 종류, 그리고 어떻게 다뤄야 할까(https://www.debugbear.com/blog/browser-caching)에서 더 여러 방식을 다루므로, 보시면 더 좋습니다.

- React 19에서 Optimistic update Form 만들기

https://rdrn.me/react-forms/

React 19에서 추가된 useActionState, useOptimistic과 Server Components으로 클라이언트/서버 유효성 검사, 낙관적 업데이트를 구현해보는 글입니다.

- Runtime CSS-in-JS와 XSS 위험성

https://andrei-calazans.com/posts/styled-components-xss-danger/

Runtime CSS-in-JS에서 XSS가 발생할 수 있는 지점과 해결하는 방법을 소개합니다.

- Relay와 Vite, 그리고 SSR

https://aqora.io/blog/implementing-streaming-ssr-with-react-relay-and-vite-899908

SSR을 기존 Relay + React router 환경에서 커스텀 설정하는 과정을 소개하는 글입니다.

- 네이티브로 <Portal>대체하기

https://fullystacked.net/portal/

아직 모든 주요 브라우저에서 지원하지 않지만, <dialog>, Popover API, Anchor positioning API를 소개하는 글입니다.

- 한번 쯤 볼만한 라이브러리

https://github.com/aidenybai/react-scan

React 성능 이슈를 탐지하기 쉽게 보여주는 라이브러리입니다. 이전 리액트 성능 측정 라이브러리와 비교해서 어떤 부분을 해결했는지를 소개하는 것이 인상적이네요.

- 새로운 친구들

https://reactnative.dev/blog/2025/01/21/version-0.77

https://developer.chrome.com/blog/movebefore-api

다양한 CSS를 지원하는 React Native 0.77 버전 출시, DOM API을 통해 DOM을 다른 DOM으로 옮겨야 할 때때 DOM에 담겨있는 상태를 유지할 수 있는 moveBefore()소개 글입니다.

더 오래된 볼 거리를 찾으신다면 https://ones-to-watch.ethansup.net/ 를 참조해주세요. :)