1. 들어가며WebSocket으로 실시간 데이터를 받는 컴포넌트를 구현할 때, 흔히 마주치는 UX 문제가 있습니다. WS 연결이 완료되기까지 (STOMP 핸드셰이크, 구독, 첫 메시지 수신) 수 초가 걸리는 동안 사용자는 스켈레톤 화면만 보게 됩니다. 이를 개선하기 위해 REST로 스냅샷을 먼저 받아 화면을 채우고, 이후 WS 실시간 데이터로 자연스럽게 전환하는 패턴을 도입했습니다. 그런데 이 방식을 단순하게 구현하면 REST와 WS 응답 사이에 경쟁 조건이 발생합니다. 이 글에서는 그 문제와 useRef를 활용한 해결 방법을 정리합니다.2. 문제 상황: REST와 WS가 동시에 달린다호가창 컴포넌트는 아래 두 가지 데이터 소스를 동시에 운용합니다.REST: 컴포넌트 마운트 시 /api/stocks/{s..

1. 들어가며프론트엔드 개발 환경에서 MSW(Mock Service Worker)는 API 목 처리에 있어 거의 표준에 가까운 도구가 되었습니다. REST 요청을 인터셉트하고 가짜 응답을 내려주는 역할을 깔끔하게 수행해 줍니다.그런데 MSW v2부터 WebSocket 인터셉트 기능이 추가되면서 예상치 못한 문제와 마주쳤습니다. 실제 백엔드 WebSocket 서버에 연결해야 하는 상황인데, MSW가 포트와 URL을 가리지 않고 브라우저의 모든 WebSocket 연결을 가로채 버린 것입니다.이 글은 그 문제를 해결하기 위해 시도했던 방법들과 최종적으로 SockJS의 특성을 이용해 우회한 과정을 공유합니다.2. 문제 상황: MSW v2의 WebSocket 전면 인터셉트프로젝트는 호가창(주문서) 데이터를 STO..

Projects · 웹 프론트엔드 웹 프론트엔드 AssetMind진행 중 Figma 디자인부터 디자인 시스템 구축, 실서비스 API 연동까지UI 개발을 전담한 금융자산관리 웹 서비스 React TypeScript Tailwind CSS Storybook Zustand React Query WebSocket (STOMP) MSW Vite Figma Vercel Overview Period 2026.01 – 2026.06 (진행 중) Team 4인 팀 프로젝트 (UI · UX · 백엔드 · 데이터) Platform Web — PC / Tablet..