[Open WebUI] 모델 생성 페이지 메모리 누수 수정: 이벤트 리스너 해제

PR 링크: open-webui/open-webui#21966 상태: Merged | 변경: +9 / -5

들어가며

Svelte의 onMount에서 이벤트 리스너를 등록하면서 클린업 함수를 반환하지 않으면, 컴포넌트가 파괴된 후에도 리스너가 계속 남아 메모리를 누적 소비합니다. Open WebUI의 모델 생성 페이지에서 바로 이 문제가 발생하고 있었습니다.

핵심 코드 분석

Before (create/+page.svelte):

onMount(async () => {
    window.addEventListener('message', async (event) => {
        // 외부 메시지 처리 로직...
    });
    // ...
});

After:

onMount(() => {
    const handleMessageEvent = async (event: MessageEvent) => {
        // 외부 메시지 처리 로직...
    }
    window.addEventListener('message', handleMessageEvent);

    // ...

    return () => {
        window.removeEventListener('message', handleMessageEvent);
    };
});

왜 이게 좋은가

• onMount에서 반환한 함수는 컴포넌트가 파괴될 때 자동으로 호출됩니다
• 익명 함수를 직접 addEventListener에 전달하면 removeEventListener로 제거할 수 없으므로, 핸들러를 변수에 저장하는 것이 핵심입니다
• 모델 생성 페이지를 여러 번 방문할 때마다 리스너가 누적되는 문제가 해결됩니다
• TypeScript 전환(<script lang="ts">)과 MessageEvent 타입 지정으로 타입 안전성도 함께 개선되었습니다
• SPA에서 페이지 이동 시 전역 이벤트 리스너를 해제하는 것은 메모리 누수 방지의 기본 원칙입니다

참고 자료

• Svelte onMount 라이프사이클
• EventTarget.removeEventListener - MDN