React Query Key Factory 패턴 사용기
React Query Key Factory 패턴 사용기
React Query 쿼리 키를 도메인별 factory로 관리해 캐시 구조와 무효화 범위를 명확히 정리하는 방법을 소개했습니다. queryOptions와 useQueries까지 함께 묶어 재사용성과 유지보수성을 높이는 흐름을 설명했습니다.
#React Query#cache
0005분
필터 1
하네스 엔지니어링(harness engineering)으로 팀 맞춤형 AI 환경 구축하기
하네스 엔지니어링(harness engineering)으로 팀 맞춤형 AI 환경 구축하기
팀 맞춤형 AI 환경을 만들기 위해 Cursor의 Rules와 Skills를 활용한 하네스 엔지니어링 사례를 소개했습니다. 전처리 스크립트로 컨텍스트를 줄여 응답 품질과 토큰 효율을 높인 점이 핵심입니다.
#Cursor#LLM
421005분
설 연휴에 Claude Code Agent Teams를 데려갔습니다.
설 연휴에 Claude Code Agent Teams를 데려갔습니다.
설 연휴 온콜에서 데이터 정합성 이슈를 계기로 Claude Code Agent Teams로 진단 대시보드를 반나절 만에 구축했습니다. API 계약을 먼저 고정하고 FE·BE를 병렬로 개발해 운영 효율과 테스트 생산성을 높였습니다.
#Claude Code#AI 코딩 에이전트
54005분
여기쏙 — Figma plugin 제작기 : 2. UI
여기쏙 — Figma plugin 제작기 : 2. UI
Figma 플러그인 UI를 가볍고 단순한 구조로 설계한 과정을 소개했습니다. 필터 상태, 캐시, 메시지 통신을 중심으로 실데이터 연동과 UX 개선을 정리했습니다.
#Figma#React Query
46005분
React Query 버전업 과정에서 발견한 API 관리 구조의 결함
React Query 버전업 과정에서 코드 생성 기반 API 관리 구조의 결함을 발견했습니다. 라이브러리 의존성을 분리하고 어댑터로 호환성을 확보하는 방향으로 개선했습니다.
#React Query#OpenAPI Generator
18005분
Next.js App Router에서 prefetchQuery와 Suspense로 뚜루루뚜루 데이터 스트리밍하기
Next.js App Router에서 React Query v5.40.0과 Suspense로 데이터 로딩 전략을 비교했습니다. await 없는 prefetch와 점진적 렌더링으로 더 자연스러운 UX를 얻을 수 있음을 실험했습니다.
#Next.js#App Router
114005분
프론트엔드 개발자를 위한 5가지 스크롤 복구 시나리오와 실전 코드 팁
SPA 환경에서 스크롤 복구가 어려운 이유와 상황별 해결 방법을 정리했습니다. React Query, 무한 스크롤, 가상화 리스트에서의 실전 팁도 함께 소개했습니다.
#React#React Query
210005분