수만 건짜리 파일을 올리면 브라우저가 멈췄다
ReactTypeScriptAbortControllerPerformance
01이슈 및 현상
수천~수만 건 CSV로 기지국을 일괄 등록하면 브라우저가 응답 없음 상태로 멈췄고, 진행 상황도 취소 수단도 없었으며 일부가 실패하면 전체가 실패했습니다.
02원인 파악
전체 목록을 단일 요청으로 보내고 응답을 기다리는 구조라, 요청이 커지면 타임아웃이나 서버 부하가 발생했습니다. 애초에 진행률·취소·부분 실패 허용이라는 개념 자체가 설계에 들어 있지 않았습니다.
03해결 방안
약 3주에 걸쳐 요청을 청크로 분할하고 청크마다 AbortController를 두어 취소 가능하게 했습니다. 청크 성공 시마다 Progress를 갱신하고, 병렬 처리 중 취소 여부를 확인하며, 완료·취소 시 상태를 일괄 정리했습니다. 이미 등록된 기지국 자동 제외와 AlertDialogSpinner 공통 컴포넌트도 함께 확보했습니다.
04결과 및 성과
대용량 파일 등록이 브라우저를 멈추지 않고 진행률·취소와 함께 처리되며, 업로드 시간을 2분 이상에서 20초 이내로 단축했습니다. 부분 실패 허용으로 일부 오류가 전체를 무너뜨리지 않게 됐고, '청크·진행률·취소·부분실패' 4요소를 대량 처리 설계 기준으로 정립했습니다.