이노원

빈 값, 잘못된 사용 비율과 누락된 시계열을 바로잡아 운영자가 PC 상태를 정확히 확인할 수 있도록 했습니다. 지표 이름과 라벨을 실제 응답에 맞추고 사용 비율 계산을 바로잡았으며, 같은 라벨로 합쳐지던 시계열은 종류별로 구분했습니다.

마지막 요청 시각 이후의 값만 가져오도록 조회 방식을 바꿔 10분 동안의 전송량을 96.5 MB에서 41 KB로 줄였습니다. 배포된 대시보드의 표시값과 실제 응답을 대조해 정확성을 확인했습니다.

사용자가 5~10분 걸리는 문서 생성의 진행 단계와 경과 시간을 확인하고, 페이지 이동이나 취소 전에 다음 행동을 결정할 수 있도록 안내를 구성했습니다. 취소하지 않은 작업은 상태 확인을 계속해 진행 상황을 놓치지 않도록 했습니다.

SSE 이벤트 뒤 서버 상태를 다시 확인하도록 해 이벤트 순서가 바뀌거나 연결 오류가 발생해도 화면이 실제 처리 상태를 기준으로 갱신되게 했습니다. 상태 API 요청은 작업당 10회 이하로 유지해 3초마다 조회할 때 예상되는 100~200회보다 요청을 줄였습니다. 배포 후 문서의 생성 및 취소 상태가 화면의 진행 상태와 일치하는지 확인했습니다.

약 5 MB의 API 응답을 처리하는 동안 3~4초 멈추던 화면을 다시 조작할 수 있도록 개선했습니다. API 호출과 변환을 SharedWorker로 분리한 공통 방식을 실행 이력과 상세 화면에 적용하고, 배포 환경에서 정지 해소를 확인했습니다.

새로고침 뒤의 과거 값과 새로 들어오는 값을 같은 시간 기준으로 합쳐 차트가 끊기거나 중복되지 않도록 했습니다. 나뉘어 도착한 JSON도 다음 청크와 합쳐 처리해 실시간 표시가 이어지도록 했습니다.

로그인 사용자의 주요 절차를 70개 이상의 E2E 시나리오로 반복 검증할 수 있게 해 배포 전에 주요 동작과 인증 문제를 확인할 수 있도록 했습니다. 이 과정에서 브라우저에 남은 인증 정보와 만료된 서버 세션이 일치하지 않는 문제를 재현했습니다.

보호 화면에 들어가기 전과 화면 사용 중에 발생한 인증 실패를 같은 방식으로 복구하도록 해 사용자에게 일관된 동작을 제공했습니다. 원인 분석부터 공통 복구 방식의 QA 배포까지 맡았습니다.

서버 값을 주기적으로 다시 가져오는 화면에 optimistic update를 적용해 사용자의 변경을 즉시 보여주고, 이후 서버 값과 화면이 어긋나는 문제와 중복 요청을 줄였습니다.

Vite 설정과 React lazy loading으로 초기 로딩을 단축하고, 다른 프론트엔드 프로젝트에서도 같은 개선을 적용할 수 있도록 절차를 문서화했습니다.

간헐적인 WebSocket 연결 중단 원인을 Chrome DevTools로 찾아 수정해 실시간 정보 갱신이 멈추는 문제를 해결했습니다.