Chat DIC - 대화형 LLM 서비스의 프런트엔드 성능 개선기
프론트엔드
Chat DIC - 대화형 LLM 서비스의 프런트엔드 성능 개선기
두줄요약
Chat DIC 프런트엔드에서 SSE로 LLM 응답을 실시간 스트리밍하도록 구현했습니다. 버퍼와 Windowing을 적용해 비활성 탭 지연과 긴 대화 성능 저하를 개선했습니다.
핵심 내용
- Chat DIC 프런트엔드에서 실시간 LLM 응답을 위해 SSE를 적용하고, Fetch API와 ReadableStream 기반으로 스트리밍을 파싱
- 비활성 탭 지연은 Buffer로 완화하고, 대화 목록이 길어질 때는 react-window 기반 Windowing으로 DOM 노드 수를 제한
- 결과적으로 더 적은 코드로 안정적인 실시간 출력과 쾌적한 렌더링 성능을 확보
적용해볼 점
- LLM 서비스의 단방향 응답에는 WebSocket보다 SSE가 단순하고 적합할 수 있음
- 탭 비활성화와 긴 대화 목록처럼 프런트엔드 성능 저하 요인을 버퍼링과 가상화로 분리해 대응할 수 있음