본문으로 이동
FEConf 2025 [B5] TanStack Query 너머를 향해! 쿼리를 라우트까지 전파시키기
컨퍼런스

FEConf 2025 [B5] TanStack Query 너머를 향해! 쿼리를 라우트까지 전파시키기

FEConf 2025 B트랙 · YouTube

원문 보기

AI 핵심 요약

TanStack Query의 SSR에서는 사용하는 쿼리를 직접 찾아 `prefetchQuery`하고 하이드레이션해야 해, 컴포넌트와 프리패치 로직이 멀어질수록 관리가 어려워지는 문제가 있었다. 임상원은 쿼리와 컴포넌트를 가까이 두고 각 컴포넌트의 리소스 의존성을 상위로 전파해 페이지에서 모아 처리하는 설계를 제안했으며, 중첩된 서버 컴포넌트의 순차 대기와 클라이언트 상태 관리의 한계도 짚었다. 이 설계를 바탕으로 리소스 정의와 타입 추론, 로더 기반 프리패치를 제공하는 RSC 중심 프레임워크 ‘데이터 레디’를 만들고, 무한 스크롤은 클라이언트 훅으로 다루도록 구성했다. 발표 시점에는 개념 증명 단계였으며, 쿼리 정의와 프리패치의 보일러플레이트를 줄이면서 병렬성과 컴포넌트 단위의 응집도를 함께 고려해야 한다는 점을 공유했다.

  • 서버 컴포넌트에서 쿼리를 프리패치하면 클라이언트의 초기 데이터 대기를 줄일 수 있지만, 프리패치 위치를 관리하지 않으면 불필요한 작업이 남을 수 있다.
  • 쿼리와 이를 사용하는 컴포넌트를 가까이 배치하면 의존 관계를 파악하기 쉽고, 변경에 따른 프리패치 누락도 줄일 수 있다.
  • 중첩된 서버 컴포넌트에서 순차적으로 데이터를 기다리면 지연이 누적될 수 있으므로, 리소스를 모아 병렬로 처리하는 구조를 고려한다.
  • 무한 스크롤처럼 클라이언트 상태가 필요한 기능은 서버 렌더링만으로 해결하기보다 클라이언트 훅과 쿼리 정보를 함께 활용할 수 있다.

소개

FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-5 TanStack Query 너머를 향해! 쿼리를 라우트까지 전파시키기 임상원 | 라프텔 TanStack Query에서 SSR 지원을 위해 수동으로 prefetchQuery를 관리하는 건 까다롭습니다. RSC와 Suspense만으로는 실패하기 쉬운데요. 여러 사례를 바탕으로 컴포넌트와 쿼리를 근처 두며 쉽게 prefetchQuery를 수행하는 방법론을 정리해 소개합니다. 나아가 이 방법론 위에 구성한 라이브러리 설계 과정을 공유합니다.

비슷한 학습 자료

컨퍼런스 SpringCamp 2025

🎙️ 이선협 (마플코퍼레이션) 🗓️ 스프링캠프 2025 Track 2 - 6 (2025년 06월 28일) 🧭 스페이스쉐어 삼성 📂 발표자료 : https://github.com/springcamp/presentations/tree/main/SpringCamp-2025-Presentations [🔗 스프링캠프 & KSUG] 스프링캠프 2025 웹 https://springcamp.ksug.org/2025/ 스프링캠프 페이스북 https://www.facebook.com/springcampkr/ 스프링캠프 유튜브 https://www.youtube.com/@springcampkr KSUG 웹 https://www.ksug.org/ KSUG 구글 그룹 https://groups.google.com/g/ksug KSUG 페이스북 https://www.facebook.com/groups/springkorea KSUG 유튜브 https://www.youtube.com...

백엔드

컨퍼런스 FEConf 2025 A트랙

FEConf 2025 [A4] 완전한 ZERO COST CSS-IN-JS, Devup-UI

컨퍼런스 FEConf 2025 A트랙

FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK A-4 완전한 ZERO COST CSS-IN-JS, Devup-UI 오정민 | ㈜데브파이브 정말 티끌 하나도 코스트가 없는 CSS-in-JS 라이브러리 Devup-UI! 그러면서 반응형, 선택자, 테마까지 많은 기능을 제공하는 Devup-UI는 어떻게 이런 성능과 기능들을 모두 제공할 수 있을까? Next.js 의 서버컴포넌트 도입으로 하락세를 겪고 있는 CSS-in-JS 라이브러리에 대한 완벽한 대안기능 구현에 대한 아이디어부터 Rust와 웹 어셈블리를 통하여 개발하게 된 개발기 그리고 실제 작동까지! 어떤 라이브러리 보다 효율적이고(심지어 Tailwind CSS보다도!) 성능 이슈가 전혀 없는 완벽한 해결법을 향한 여정을 공유드립니다.

웹 개발 프론트엔드

컨퍼런스 FEConf 2025 A트랙

FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK A-5 프론트엔드에서 1,000만 개 데이터를 실시간으로 처리하라고요? WebGL2를 활용한 GPGPU의 세계로 김한슬마로 | Portrai Inc. AI 기술의 확산으로 산업 전반에서 데이터의 규모와 중요성이 급격히 커지고 있습니다. 이에 따라 백엔드뿐만 아니라 프론트엔드에서도, 브라우저 상에서 대규모 데이터를 실시간으로 분석하고 시각화하려는 요구가 빠르게 증가하고 있습니다. 이번 세션에서는 이러한 흐름에 맞춰, GPU 가속을 활용해 브라우저 내에서 데이터를 효과적으로 처리하는 기술을 소개합니다.

프론트엔드 컴퓨터 비전

컨퍼런스 FEConf 2025 B트랙

FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 FEConf 2025 [B1] 스벨트를 통해 리액트 더 잘 이해하기 TRACK B-1 스벨트를 통해 리액트 더 잘 이해하기 문대승 | 피오유엘 (POUL) 프론트엔드 vs 리액트엔드: 당신은 어떤 개발자인가요? 다른 프레임워크를 배운다는 것은 오히려 현재 내가 쓰고 있는 도구를 잘 이해하는 길일 수 있습니다. 이번 발표에서는 스벨트에서 얻은 인사이트를 리액트에 접목할 수 있는지 소개하겠습니다.

프론트엔드

컨퍼런스 FEConf 2025 B트랙

FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-2 'memo'를 지울 결심 : React Compiler가 제안하는 미래 장용석 | 리멤버앤컴퍼니 Memoization을 위해 React 코드에서 흔히 사용되던 memo, useMemo와 이제는 헤어질 시간입니다. React Compiler가 어떻게 우리를 대신해 최적화를 수행하는지, 실제 React 코드가 어떻게 변화하는지 파이프라인을 따라 깊이 있게 살펴보고 앞으로 어떤 멘탈모델을 가지고 React 코드를 작성해야 할지 이야기해봅니다.

프론트엔드

컨퍼런스 FEConf 2025 B트랙

FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-3 중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성 김무훈 | A11YKR 커뮤니티 모든 사람을 위한 웹 접근성 지원과 설계, 제대로 알아봅시다. 웹 프런트엔드 서비스에서 접근성 지원은 여전히 제도적으로 의무화된 항공사 웹 서비스와 정부/공공기관 외에 모범 사례가 흔치 않고, 확실한 정답이 정해져 있지 않은 분야입니다. - 혹시 웹 접근성이 장애 사용자만을 위한 특수한 경험이라고 오해하고 계신가요? 웹의 본연의 힘은 보편성에 있습니다. 장애와 관계없이 모든 사람의 콘텐츠 접근은 필수적이라고 생각합니다. - 웹 접근성을 지원하기 위한 UI 컴포넌트 설계에 막연함을 느끼시나요? 웹 접근성 표준을 준수하면서, 일관된 UI 제어 경험을 어떻게 설계할 수 있는지 제가 고려했던 사항을 소개합니다. 따라서 아래 명제에 대한 발표자의 생각이 궁금하시면 꼭 보러 와주세...

프론트엔드 UI/UX