멈추지 않던 폴링
ReactJavaScriptMemory Leak
01이슈 및 현상
폴링 문제를 두 번 겪었습니다. 진행률 조회 API가 실패해도 폴링이 멈추지 않았고, 모니터링 화면을 벗어나도 5초 주기 호출이 계속되며 화면을 오갈수록 호출이 누적됐습니다.
02원인 파악
첫 번째는 clearInterval 종료 조건이 성공 경로(Succeeded+100%)에만 있고 실패 경로엔 없었으며, 응답이 undefined일 때 접근하다 런타임 에러까지 났습니다. 두 번째는 setInterval을 시작만 하고 언마운트 시 clearInterval이 없어, 화면에 들어갈 때마다 타이머가 하나씩 늘었습니다.
03해결 방안
실패 응답 시에도 폴링을 중단하고 에러 팝업을 띄우도록 종료 조건을 추가하고, 조회 API에 빠져 있던 region/datacenter/cluster 파라미터를 보강했습니다. 모니터링 화면에는 언마운트 정리 로직을 넣고 props와 중복되던 state를 제거했습니다.
04결과 및 성과
성공·실패·언마운트 세 경로 모두에 종료 조건을 두어 무한 호출과 타이머 누적으로 인한 메모리 누수를 차단했습니다. 이후 폴링은 세 경로의 종료 조건을 체크리스트로 삼게 됐습니다.