BFF 서버에 SSE를 도입한 이유: 전시 서버의 통신 구조 재설계
가게목록 전시 구조를 1지면 1API와 BFF 기반 SSE 스트리밍으로 재설계했습니다. 첫 응답을 앞당기고 클라이언트 통신 복잡성을 줄이는 방향을 소개했습니다.
#SSE#BFF
70005분
필터 1
React Query Key Factory 패턴 사용기
React Query 쿼리 키를 도메인별 factory로 관리해 캐시 구조와 무효화 범위를 명확히 정리하는 방법을 소개했습니다. queryOptions와 useQueries까지 함께 묶어 재사용성과 유지보수성을 높이는 흐름을 설명했습니다.
#React Query#cache
17005분
하네스 엔지니어링(harness engineering)으로 팀 맞춤형 AI 환경 구축하기
팀 맞춤형 AI 환경을 만들기 위해 Cursor의 Rules와 Skills를 활용한 하네스 엔지니어링 사례를 소개했습니다. 전처리 스크립트로 컨텍스트를 줄여 응답 품질과 토큰 효율을 높인 점이 핵심입니다.
#Cursor#LLM
432005분
설 연휴에 Claude Code Agent Teams를 데려갔습니다.
설 연휴 온콜에서 데이터 정합성 이슈를 계기로 Claude Code Agent Teams로 진단 대시보드를 반나절 만에 구축했습니다. API 계약을 먼저 고정하고 FE·BE를 병렬로 개발해 운영 효율과 테스트 생산성을 높였습니다.
#Claude Code#AI 코딩 에이전트
57005분
여기쏙 — Figma plugin 제작기 : 2. UI
Figma 플러그인 UI를 가볍고 단순한 구조로 설계한 과정을 소개했습니다. 필터 상태, 캐시, 메시지 통신을 중심으로 실데이터 연동과 UX 개선을 정리했습니다.
#Figma#React Query
48005분
React Query 버전업 과정에서 발견한 API 관리 구조의 결함
React Query 버전업 과정에서 코드 생성 기반 API 관리 구조의 결함을 발견했습니다. 라이브러리 의존성을 분리하고 어댑터로 호환성을 확보하는 방향으로 개선했습니다.
#React Query#OpenAPI Generator
21005분
Next.js App Router에서 prefetchQuery와 Suspense로 뚜루루뚜루 데이터 스트리밍하기
Next.js App Router에서 React Query v5.40.0과 Suspense로 데이터 로딩 전략을 비교했습니다. await 없는 prefetch와 점진적 렌더링으로 더 자연스러운 UX를 얻을 수 있음을 실험했습니다.
#Next.js#App Router
116005분
프론트엔드 개발자를 위한 5가지 스크롤 복구 시나리오와 실전 코드 팁
SPA 환경에서 스크롤 복구가 어려운 이유와 상황별 해결 방법을 정리했습니다. React Query, 무한 스크롤, 가상화 리스트에서의 실전 팁도 함께 소개했습니다.
#React#React Query
215005분
Velopers 추천광고
쿠팡 파트너스
개발자를 위한 인기 상품을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발자#노트북#컴퓨터
리액트 상태관리 트렌드의 변화
리액트 상태관리의 흐름을 MVC부터 Redux, Context API, React Query, Jotai까지 정리했습니다. 또한 서버 상태와 클라이언트 상태를 분리해 쓰는 현재의 실전 관점과 주의할 점도 짚었습니다.
#React#상태관리
23005분
React Query의 구조와 useQuery 실행 흐름 살펴보기
React Query의 내부 구조와 useQuery 실행 흐름을 살펴보았습니다. Query 상태 변화가 QueryObserver와 리스너를 거쳐 컴포넌트 리렌더링으로 이어지는 과정을 정리했습니다.
#React Query#useQuery
46005분