Websocket 썸네일형 리스트형 React에서 GraphQL Subscription으로 실시간 데이터 처리하기 React 애플리케이션에서 실시간 데이터를 처리할 때 GraphQL Subscription은 매우 유용한 도구입니다. Subscription을 사용하면 서버에서 데이터가 변경될 때마다 클라이언트가 자동으로 업데이트를 받을 수 있어 사용자 경험을 크게 향상시킬 수 있습니다.1. GraphQL Subscription 기본 개념Subscription은 GraphQL 쿼리 방식 중 하나로, 클라이언트가 서버에 구독 요청을 보내면 서버에서 데이터 변동이 있을 때마다 실시간으로 업데이트를 푸시해줍니다. WebSocket 프로토콜을 주로 사용합니다.2. React에서 Apollo Client 설정React에서 GraphQL Subscription을 사용하려면 Apollo Client와 WebSocketLink를 함께.. 더보기 React에서 WebSocket 연결 구현하기 실시간 기능이 필요한 화면이라면 폴링보다 WebSocket이 비용 효율적이고 반응성이 좋습니다. 이 글은 React에서 브라우저 네이티브 WebSocket API로 안정적인 연결을 구현하는 실전 가이드입니다.1. 기본 연결과 정리(cleanup)핵심은 컴포넌트 마운트 시 연결, 언마운트 시 닫기입니다. 메시지는 JSON으로 직렬화/역직렬화를 권장합니다.import { useEffect, useRef, useState } from "react";function Chat() { const [messages, setMessages] = useState([]); const wsRef = useRef(null); useEffect(() => { const ws = new WebSocket("wss://.. 더보기 이전 1 다음