BFF 서버에 SSE를 도입한 이유: 전시 서버의 통신 구조 재설계
가게목록 전시 구조를 1지면 1API와 BFF 기반 SSE 스트리밍으로 재설계했습니다. 첫 응답을 앞당기고 클라이언트 통신 복잡성을 줄이는 방향을 소개했습니다.
#SSE#BFF#REST API
12000
BFF 서버에 SSE를 도입한 이유: 전시 서버의 통신 구조 재설계
태그
React Query 기술 블로그 글
React Query 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 26개최신 20개 표시
관련 태그
최신 게시글
20개 표시
React Query Key Factory 패턴 사용기
React Query 쿼리 키를 도메인별 factory로 관리해 캐시 구조와 무효화 범위를 명확히 정리하는 방법을 소개했습니다. queryOptions와 useQueries까지 함께 묶어 재사용성과 유지보수성을 높이는 흐름을 설명했습니다.
#React Query#cache#queryOptions
2700
React Query Key Factory 패턴 사용기
하네스 엔지니어링(harness engineering)으로 팀 맞춤형 AI 환경 구축하기
팀 맞춤형 AI 환경을 만들기 위해 Cursor의 Rules와 Skills를 활용한 하네스 엔지니어링 사례를 소개했습니다. 전처리 스크립트로 컨텍스트를 줄여 응답 품질과 토큰 효율을 높인 점이 핵심입니다.
#Cursor#LLM#prompt
46000
하네스 엔지니어링(harness engineering)으로 팀 맞춤형 AI 환경 구축하기
설 연휴에 Claude Code Agent Teams를 데려갔습니다.
설 연휴 온콜에서 데이터 정합성 이슈를 계기로 Claude Code Agent Teams로 진단 대시보드를 반나절 만에 구축했습니다. API 계약을 먼저 고정하고 FE·BE를 병렬로 개발해 운영 효율과 테스트 생산성을 높였습니다.
#Claude Code#AI 코딩 에이전트#React Query
7100
설 연휴에 Claude Code Agent Teams를 데려갔습니다.
여기쏙 — Figma plugin 제작기 : 2. UI
Figma 플러그인 UI를 가볍고 단순한 구조로 설계한 과정을 소개했습니다. 필터 상태, 캐시, 메시지 통신을 중심으로 실데이터 연동과 UX 개선을 정리했습니다.
#Figma#React Query#Preact
5500
여기쏙 — Figma plugin 제작기 : 2. UI
React Query 버전업 과정에서 발견한 API 관리 구조의 결함
React Query 버전업 과정에서 코드 생성 기반 API 관리 구조의 결함을 발견했습니다. 라이브러리 의존성을 분리하고 어댑터로 호환성을 확보하는 방향으로 개선했습니다.
#React Query#OpenAPI Generator#Swagger
3300
Next.js App Router에서 prefetchQuery와 Suspense로 뚜루루뚜루 데이터 스트리밍하기
Next.js App Router에서 React Query v5.40.0과 Suspense로 데이터 로딩 전략을 비교했습니다. await 없는 prefetch와 점진적 렌더링으로 더 자연스러운 UX를 얻을 수 있음을 실험했습니다.
#Next.js#App Router#React Query
12500
프론트엔드 개발자를 위한 5가지 스크롤 복구 시나리오와 실전 코드 팁
SPA 환경에서 스크롤 복구가 어려운 이유와 상황별 해결 방법을 정리했습니다. React Query, 무한 스크롤, 가상화 리스트에서의 실전 팁도 함께 소개했습니다.
#React#React Query#Infinite Scroll
22300
Front-end 개발자가 회고하는 기획전 개편
Next.js 기획전 개편에서 HTML 모듈 사이에 기존 상품 카드를 삽입하는 방법을 다뤘습니다. createRoot와 provider 중복 사용의 성능 영향을 측정해 설계 타당성을 검증했습니다.
#Next.js#React#Recoil
2800
파일 변수 Deep-Dive
상태의 추적 필요성에 따라 Redux, react-query, Zustand, 파일 변수의 역할을 분리했습니다. 서버 파일 변수는 AsyncLocalStorage로 요청별 컨텍스트를 격리해야 함을 설명합니다.
#Redux#react-query#Zustand
000
useInfiniteQuery로 무한스크롤 구현하기
무한스크롤은 `useInfiniteQuery`와 `useInView`로 구현했습니다. 뒤로가기는 세션 스토리지와 QueryClient 캐시로 상품 목록과 스크롤을 복원했습니다.
#Next.js#React#react-query
5200
리액트 상태관리 트렌드의 변화
리액트 상태관리의 흐름을 MVC부터 Redux, Context API, React Query, Jotai까지 정리했습니다. 또한 서버 상태와 클라이언트 상태를 분리해 쓰는 현재의 실전 관점과 주의할 점도 짚었습니다.
#React#상태관리#Redux
2500
React Query의 구조와 useQuery 실행 흐름 살펴보기
React Query의 QueryClient·QueryCache·Query·QueryObserver 내부 역할을 살펴봤습니다. useQuery가 useSyncExternalStore로 상태 변경을 구독하고 뷰를 갱신하는 흐름을 설명합니다.
#React Query#React#useQuery
000
React Query의 구조와 useQuery 실행 흐름 살펴보기
React Query의 내부 구조와 useQuery 실행 흐름을 살펴보았습니다. Query 상태 변화가 QueryObserver와 리스너를 거쳐 컴포넌트 리렌더링으로 이어지는 과정을 정리했습니다.
#React Query#useQuery#QueryClient
5200
React Query의 구조와 useQuery 실행 흐름 살펴보기
뷰티 필터를 개발하며 얻은 새로운 경험
뷰티 상품 탐색 경험 개선을 위해 웹 필터를 확장하고 React Query를 도입했습니다. URL 상태 저장과 서버 상태 동기화로 탐색 편의성과 데이터 최신성을 높였습니다.
#React#React Query#Redux
000
뷰티 필터를 개발하며 얻은 새로운 경험
뷰티 필터 프로젝트에서 React Query로 서버 상태 관리를 전환하고 필터 경험을 웹으로 확장했습니다. 고객 탐색 경험 개선과 API 호출 감소, 팀 문화 강화까지 이어졌습니다.
#React Query#redux#웹 개발
3400
ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)
ChatGPT로 웹툰 서비스의 UI, 상태 관리, API 연동을 구현하며 활용 범위를 실험했습니다. 생성 코드의 오류와 최신 정보 한계를 검증으로 보완해야 함을 확인했습니다.
#ChatGPT#Next.js#Tailwind
000
찜으로 찜해보는 react-query
Redux 기반 서버 상태 처리의 반복 작업과 컨테이너 간 종속성을 React Query로 개선했습니다. 찜 페이지 사례로 useQuery 캐싱과 useMutation 기반 CRUD 흐름을 설명합니다.
#React#React Query#Redux
3300
React Query와 함께 Concurrent UI Pattern을 도입하는 방법
React Query의 Suspense 옵션과 Error Boundary로 로딩·오류 UI를 선언적으로 분리했습니다.\n경계 구성으로 복잡한 비동기 화면의 유지보수와 UX 설계를 개선하는 방식을 소개합니다.
#React#React Query#Suspense
2600
MSW 사용하여 테스트 코드 작성하기 with GraphQL, react-query
MSW로 GraphQL·react-query 요청을 네트워크 수준에서 모킹하는 Jest 테스트 구성을 소개했습니다. 공통 렌더러와 핸들러로 응답별 UI를 검증하는 방법을 설명합니다.
#MSW#GraphQL#React
3200
