핵심 요약
SK플래닛의 Chat DIC 프런트엔드는 SSE 기반 실시간 대화 스트리밍 도입과 Buffer, Windowing 기법을 적용해 대화 출력 지연을 줄이고 렌더링 성능을 개선했다.
구현 방법
- React + Vite + JavaScript로 프런트엔드 구성, Tailwind CSS 기반 UI 라이브러리 사용
- SSE 방식으로 서버→클라이언트 스트리밍 구현, Fetch API로 수신 및 ReadableStream 파싱(axios는 스트리밍에 부적합)
- 비활성 탭에서도 데이터 수신을 버퍼에 임시 저장, 탭 활성화 시 버퍼를 출력하여 지연 최소화
- 화면 렌더링 최적화를 위해 react-window 기반 Windowing 구현, 동적 행 높이 사용
주요 결과
- 실시간 출력 지연 감소 및 더 매끄러운 대화 흐름
- 비활성 탭에서의 렌더링 부담 감소 및 DOM 노드 관리 개선
- 코드 간결성 및 유지보수성 향상
