긴 폴링 패턴과 재연결 로직

롱 폴링은 다음과 같은 주기로 작동합니다. 클라이언트가 HTTP 요청을 보내면 서버는 새로운 데이터를 사용할 수 있을 때까지(또는 시간 초과가 발생할 때까지, 보통 30~60초) 연결을 열어 둡니다. 그런 다음 서버가 데이터를 포함해 응답하고, 클라이언트는 즉시 다음 요청을 보냅니다. 이렇게 하면 서버 푸시와 유사한 특성을 지닌 거의 연속적인 연결이 만들어집니다.

React에서 롱 폴링은 useEffect 내부의 비동기 재귀 함수를 사용합니다. 함수가 fetch 요청을 보내고 응답을 처리한 다음 다시 자신을 호출합니다. AbortController 신호는 컴포넌트가 마운트 해제될 때 재귀를 중지합니다. 컴포넌트가 마운트된 상태이고 중단 신호가 전달되지 않은 동안 함수가 반복됩니다.

useEffect의 맨 위에서 AbortController를 생성하고 모든 fetch 호출에 controller.signal을 전달하십시오. 정리 함수에서는 controller.abort()를 호출하십시오. 이렇게 하면 컴포넌트가 마운트 해제될 때 진행 중인 요청이 취소되어, 마운트 해제된 컴포넌트의 상태 업데이트와 네트워크 리소스 누수를 방지할 수 있습니다.

롱 폴링 요청이 실패하면 즉시 재시도하지 말고 다음 시도 전까지 기다리십시오. 지수적 재시도 지연은 연속으로 실패할 때마다 대기 시간을 두 배로 늘립니다: 1초, 2초, 4초, 8초, 16초이며 최대 30초까지입니다. 이렇게 하면 실패한 서버에 요청을 과도하게 보내는 일을 방지하고 일시적인 문제가 해결될 시간을 확보할 수 있습니다. 응답이 성공하면 지연 시간을 1초로 재설정하십시오.

많은 클라이언트가 같은 서버를 폴링할 때 무작위성 없는 지수적 재시도 지연은 "동시 폭주"를 일으킵니다. 모든 클라이언트가 같은 시간만큼 대기한 후 동시에 재시도하므로 서버가 다시 과부하 상태가 됩니다. 지연 시간을 delay + Math.random() * delay처럼 무작위로 정해 무작위성을 추가하십시오. 이렇게 하면 재시도가 일정한 시간 범위에 분산되어 서버 부하 급증을 줄일 수 있습니다.

폴링의 수명 주기를 나타내도록 연결 상태를 관리하십시오. isConnecting은 최초 연결 중이거나 오류 후 재연결 중인 상태이고, isConnected는 마지막 폴링이 성공한 상태이며, isError는 연속으로 실패해 최대 재시도 횟수에 도달한 상태입니다. 이 상태를 UI에 표시하면 사용자가 실시간 데이터의 신뢰성을 이해할 수 있습니다.

다음 재시도 전의 지연 시간 동안 카운트다운을 표시할 수 있습니다. 예를 들어 진행 표시기와 함께 "8초 후 다시 연결합니다..."를 보여 줄 수 있습니다. 재시도 지연 타이머를 설정할 때 재시도 시각을 계산하고, 매초 표시를 업데이트하십시오. 이렇게 투명하게 알려 주면 앱이 복구를 위해 적극적으로 시도하고 있다는 확신을 사용자에게 줄 수 있습니다.

폴링에는 setInterval 대신 재귀적 setTimeout을 사용하십시오. 즉, 응답 처리기 내부에서 다음 폴링을 호출하십시오. setInterval은 이전 요청에 걸린 시간과 관계없이 고정된 간격으로 실행되므로, 오래 실행되는 요청이 서로 겹치는 폴링을 일으킬 수 있습니다. 재귀적 setTimeout은 이전 요청이 완료된 후에만 다음 폴링을 시작합니다.

훅에서 폴링 간격을 설정 옵션으로 제공하십시오: useLongPoll({ url, interval: 5000 }). 데이터 원본마다 필요한 최신성이 다릅니다. 예를 들어 "온라인 사용자" 표시는 30초마다 폴링할 수 있지만, 작업 상태는 5초마다 폴링해야 할 수 있습니다. 구현 코드에 간격을 하드코딩하지 마십시오.

API가 발전하면 더 효율적인 SSE로 폴링을 대체할 수 있습니다. 폴링 훅을 사용하는 React 컴포넌트는 전송 계층과 분리되어야 합니다. 훅이 동일한 인터페이스(onData, 상태, 오류)를 제공한다면, 폴링을 EventSource 기반으로 바꾸어도 훅을 사용하는 컴포넌트는 변경할 필요가 없습니다.

서버가 롱 폴링 연결을 유지하는 동안 데이터가 도착하지 않으면 연결이 무한히 대기 상태에 머무르지 않도록 시간 초과 응답을 보내야 합니다. 빈 본문과 함께 200을 반환하거나, 204(콘텐츠 없음)를 반환할 수 있습니다. 그러면 클라이언트가 즉시 다시 폴링합니다. 이 서버 측 시간 초과(30~60초)는 클라이언트 측 요청 시간 초과(더 긴 시간, 예: 90초)와는 별개입니다.

연결 오류 후 다시 시도할 때 롱 폴링에서 지수적 재시도 지연을 사용하는 이유는 무엇인가요?

롱 폴링에서는 클라이언트가 요청을 보내고, 서버가 데이터가 준비되거나 시간 초과가 발생할 때까지 연결을 유지하며, 클라이언트는 응답 직후 다시 요청합니다. useEffect에서 재귀적 비동기 fetch와 AbortController를 사용해 정리 기능을 구현하십시오. 오류가 발생하면 동시 폭주를 방지하기 위해 지수적 재시도 지연(1초, 2초, 4초... 최대 30초)과 무작위성을 함께 사용하십시오. 폴링이 겹치는 것을 방지하려면 setInterval 대신 재귀적 setTimeout을 사용하십시오. UI 피드백을 위해 isConnecting/isConnected/isError 상태를 추적하십시오.