Memory Leak

// 문제 1: 이벤트 리스너 미해제
class LeakyComponent {
    constructor() {
        this.data = new Array(10000).fill('large data');

        // 이벤트 리스너 등록 - 해제하지 않으면 누수 발생!
        window.addEventListener('resize', this.handleResize);
    }

    handleResize = () => {
        console.log('Resized!', this.data.length);
    }
}

// 문제 2: 클로저에서의 참조 유지
function createClosure() {
    const hugeArray = new Array(1000000).fill('data');

    // 클로저가 hugeArray를 참조하여 GC 불가
    return function() {
        return hugeArray[0];
    };
}

// 문제 3: setInterval 미정리
function startPolling() {
    const cache = [];

    setInterval(() => {
        // 계속 데이터가 쌓이며 메모리 증가
        cache.push(new Array(1000).fill(Math.random()));
    }, 1000);
}

// 해결 1: 컴포넌트 정리(cleanup) 패턴
class SafeComponent {
    constructor() {
        this.data = new Array(10000).fill('large data');
        this.handleResize = this.handleResize.bind(this);
        window.addEventListener('resize', this.handleResize);
    }

    handleResize() {
        console.log('Resized!', this.data.length);
    }

    // 반드시 cleanup 메서드를 호출하여 리스너 해제
    destroy() {
        window.removeEventListener('resize', this.handleResize);
        this.data = null; // 명시적 참조 해제
    }
}

// 해결 2: WeakRef 또는 필요한 데이터만 참조
function createSafeClosure() {
    const hugeArray = new Array(1000000).fill('data');
    const firstItem = hugeArray[0]; // 필요한 값만 저장

    return function() {
        return firstItem; // hugeArray 참조 없음
    };
}

// 해결 3: interval ID 저장 및 정리
function startSafePolling() {
    const cache = [];
    const MAX_CACHE_SIZE = 100;

    const intervalId = setInterval(() => {
        if (cache.length >= MAX_CACHE_SIZE) {
            cache.shift(); // 오래된 데이터 제거
        }
        cache.push(new Array(1000).fill(Math.random()));
    }, 1000);

    // cleanup 함수 반환
    return () => clearInterval(intervalId);
}