성능 최적화 기술은 사용하면 끝일까
2025. 3. 29.
성능 최적화 기술은 사용하면 끝일까
- YouTube 🔗여러가지 성능 최적화 할 수 있는데 놓칠 수 있는 부분이나, 아니면 잘못 사용해서 오히려 성능을 느리게 하거나 최적화 하지 못한 경우를 소개하는 영상입니다. 특히 초반에 소개하는 Lazy Loading API나 Speculative loading관련 문제가 많이 생길 수 있으니, 조심해서 잘 사용해야 합니다.
Streaming SSR의 뒷면
Out Of Order Streaming (The Secret Powering Modern React) by Theo Browne 🔗Streaming SSR이 HTML Streaming과 JS를 통해서 어떻게 구현되었는지 소개하는 발표입니다. 깊게 파고들지 않고, 라이브 코딩을 통해 어떻게 구현되었는지 살펴보므로, 간단하게 <Suspense>안의 Server Components가 어떻게 제자리로 들어가는지 알 수 있습니다.
Server Functions와 두 관점
Why Server Functions Matter In A Server Component World 🔗Tanstack Start에서 Server Functions 기능을 출시했습니다. Tanstack Start의 Server Functions 개념과 RSC(사실상 현재는 Next.js)의 Server Functions는 어떻게 다른지, 어떤 장단점을 가지고 있는지 소개합니다. 이 글에서 Server Functions에 관심이 생겼다면 이어서 Server Functions의 장점 글을 추천드립니다.
초기 로드 성능 최적화 알아보기
Initial load performance for React developers: investigative deep dive 🔗초기 로드 성능 최적화의 모든 것에 대한 글은 아니지만, 초기 로드에 관한 지표(LCP, FCP), 측정 방식, 간단한 해결책을 소개합니다. 친절하게 설명하므로, 간단하게 알아보기에 좋습니다. 이전의 브라우저 캐싱의 종류, 그리고 어떻게 다뤄야 할까에서 더 여러 방식을 다루므로, 보시면 더 좋습니다.
React 19에서 Optimistic update Form 만들기
Progressive Forms with React 19 - Chris Arderne 🔗React 19에서 추가된 useActionState, useOptimistic과 Server Components으로 클라이언트/서버 유효성 검사, 낙관적 업데이트를 구현해보는 글입니다.
Runtime CSS-in-JS와 XSS 위험성
The XSS dangers in interpolating styled-components • Andrei Calazans 🔗Runtime CSS-in-JS에서 XSS가 발생할 수 있는 지점과 해결하는 방법을 소개합니다.
Relay와 Vite, 그리고 SSR
Implementing Streaming SSR with React Relay and Vite | Aqora.ioBrandon 🔗SSR을 기존 Relay + React router 환경에서 커스텀 설정하는 과정을 소개하는 글입니다.
네이티브로 <Portal>대체하기
Do JavaScript frameworks still need portals? 🔗아직 모든 주요 브라우저에서 지원하지 않지만, <dialog>, Popover API, Anchor positioning API를 소개하는 글입니다.
한번 쯤 볼만한 라이브러리
GitHub - aidenybai/react-scan: Scan for React performance issues and eliminate slow renders in your app 🔗React 성능 이슈를 탐지하기 쉽게 보여주는 라이브러리입니다. 이전 리액트 성능 측정 라이브러리와 비교해서 어떤 부분을 해결했는지를 소개하는 것이 인상적이네요.
새로운 친구들
React Native 0.77 - New Styling Features, Android’s 16KB page support, Swift Template · React Native 🔗Preserve state during DOM mutations with moveBefore() | Blog | Chrome for DevelopersXGitHubLinkedInHomepage 🔗다양한 CSS를 지원하는 React Native 0.77 버전 출시, DOM API을 통해 DOM을 다른 DOM으로 옮겨야 할 때 DOM에 담겨있는 상태를 유지할 수 있는 moveBefore()소개 글입니다.