최신 프론트엔드 트랜드
1.(번역/실습) Drag to Select
사용자가 수많은 파일들을 관리하는 웹사이트를 생각해보면 드래그를 통해 항목을 선택할 수 있게 하는 것은 대량 작업에 있어서 좋은 선택지가 됩니다. 하지만 마우스 드래그를 통한 선택을 만드는 것은 생각보다 어려울 수 있습니다.
2.(번역) React에서 debounce 및 throttle을 수행하는 방법
React에서 debounce와 throttle에 대해 자세히 알아보세요.debounce와 throttle이 무엇이고, React에서 올바르게 사용하는 방법, 상태 및 리렌더링이 관련될 때 이러한 기능이 올바르지 않게 동작하는 것을 방지하는 방법에 대해 설명합니다.
3.(번역/실습) Avoiding useEffect with callback refs (feat. AutoScrollList)
DOM 노드와 직접 상호 작용해야 하는 경우 useRef + useEffect를 직접 사용하지 말고 대신 callback refs를 사용하는 것을 고려해보세요. React 19를 사용하면 ref 에서도 cleanup 함수를 사용할 수 있습니다.
4.(번역) Loading Fast and Slow: async React Server Components and Suspense
React Server Components는 React의 강력한 새로운 기능으로, Suspense와 함께 올바르게 구현하면 애플리케이션의 UX를 바꿀 수 있습니다.
5.(번역) Decoding React Server Component Payloads
여기서 RSC의 톱니바퀴가 어떻게 돌아가는지 깊이 이해할 필요는 전혀 없지만, 흥미롭습니다. RSC 페이로드는 약간 신비롭고 이해하기 어렵지만, 궁극적으로 마법은 아닙니다.
6.(번역) Promises across the void: Streaming data with RSC
use 도입은 React 렌더링이 작동하는 방식에 근본적인 변화를 동반합니다. 이제 React는 use를 통해 Promise가 해결될 때까지 컴포넌트 렌더링을 일시 중단할 수 있습니다. 이는 비동기 렌더링을 단순화하는 측면에서 큰 진전입니다.
7.(번역/실습) Vercel tabs component
이 글에서는 CSS, React Transition Group, React-Spring, Framer Motion을 사용하여 애니메이션을 적용한 탭 컴포넌트(Vercel tabs component)를 만드는 방법을 분석해보겠습니다.
8.(번역/실습) Managing Advanced Search Param Filtering in the Next.js
Next.js 앱에서 고급 필터링 기능을 원한다고 가정해 보겠습니다. 이 상태를 URL에 넣으라는 요청은 흔합니다. Next.js 앱 라우터에서 고급 검색 매개변수 필터링을 구현하는 방법을 살펴보고, React 19을 활용하고, 마지막으로 nuqs을 사용해보겠습니다.