// 1. 원시 타입 할당
let number = 42;  // 숫자를 위한 메모리 할당
let text = "Hello";  // 문자열을 위한 메모리 할당

// 2. 객체 할당
let user = {
    name: "김개발",
    age: 28,
    skills: ["JavaScript", "React", "Node.js"]
};  // 객체와 배열을 위한 메모리 할당

// 3. 함수 할당
function calculateTotal(items) {
    return items.reduce((sum, item) => sum + item.price, 0);
}  // 함수 객체를 위한 메모리 할당

function createUser() {
    // var, let, const 없이 변수 선언
    user = {
        name: "김개발",
        data: new Array(10000)
    };
    // user가 전역 변수가 되어 계속 메모리에 남음! 💥
}

function createUser() {
    // 항상 변수 선언 키워드 사용
    const user = {
        name: "김개발",
        data: new Array(10000)
    };
    return user;
}

// 또는 strict mode 사용
'use strict';
function createUser() {
    user = { name: "김개발" };  // ReferenceError 발생!
}

function startMonitoring() {
    const hugeData = new Array(100000).fill('data');
    
    setInterval(() => {
        // hugeData를 참조하는 클로저
        console.log(hugeData.length);
    }, 1000);
    
    // 타이머를 정리하지 않으면 hugeData가 계속 메모리에 남음!
}

function startMonitoring() {
    const hugeData = new Array(100000).fill('data');
    
    const timerId = setInterval(() => {
        console.log(hugeData.length);
    }, 1000);
    
    // 정리 함수 반환
    return () => {
        clearInterval(timerId);
        console.log('타이머 정리 완료!');
    };
}

// 사용
const cleanup = startMonitoring();
// 나중에 정리
cleanup();

const elements = [];

function addElement() {
    const div = document.createElement('div');
    div.innerHTML = '큰 데이터'.repeat(10000);
    document.body.appendChild(div);
    
    // DOM 요소를 배열에 저장
    elements.push(div);
}

function removeElement() {
    const div = elements[0];
    document.body.removeChild(div);
    
    // DOM에서는 제거되었지만 elements 배열에 여전히 참조가 남아있음!
    // 메모리 누수 발생! 💥
}

const elements = [];

function addElement() {
    const div = document.createElement('div');
    div.innerHTML = '큰 데이터'.repeat(10000);
    document.body.appendChild(div);
    elements.push(div);
}

function removeElement() {
    const div = elements.shift();  // 배열에서도 제거
    if (div && div.parentNode) {
        div.parentNode.removeChild(div);
    }
}

// 또는 WeakMap 사용
const elementData = new WeakMap();

function addElementWithWeakMap() {
    const div = document.createElement('div');
    document.body.appendChild(div);
    
    // WeakMap은 키가 GC되면 자동으로 항목도 제거됨
    elementData.set(div, { data: '큰 데이터'.repeat(10000) });
}

function createClosure() {
    const largeData = new Array(1000000).fill('data');
    const smallData = 'small';
    
    // 이 함수는 smallData만 사용하지만
    // 클로저 특성상 largeData도 함께 캡처됨!
    return function() {
        return smallData;
    };
}

const closures = [];
for (let i = 0; i < 100; i++) {
    closures.push(createClosure());
    // 100MB * 100 = 10GB 메모리 사용! 💥
}

function createClosure() {
    const largeData = new Array(1000000).fill('data');
    const smallData = 'small';
    
    // largeData 처리 후 명시적으로 참조 제거
    processLargeData(largeData);
    
    // 필요한 데이터만 캡처
    return function() {
        return smallData;
    };
}

// 또는 IIFE 패턴 사용
function createOptimizedClosure() {
    const largeData = new Array(1000000).fill('data');
    
    // 즉시 실행하여 필요한 값만 추출
    const result = (function(data) {
        // largeData 처리
        return data.length;
    })(largeData);
    
    // largeData는 여기서 GC 대상이 됨
    return function() {
        return result;
    };
}

class DataManager {
    constructor() {
        this.data = new Array(100000).fill('data');
        
        // 이벤트 리스너 등록
        window.addEventListener('resize', this.handleResize.bind(this));
        
        // bind()는 새로운 함수를 생성하므로
        // 나중에 제거할 수 없음!
    }
    
    handleResize() {
        console.log(this.data.length);
    }
}

// 인스턴스를 제거해도 이벤트 리스너가 남아있어서
// data가 메모리에서 해제되지 않음!
let manager = new DataManager();
manager = null;  // 메모리 누수 발생! 💥

class DataManager {
    constructor() {
        this.data = new Array(100000).fill('data');
        
        // 바인딩된 함수를 저장
        this.boundHandleResize = this.handleResize.bind(this);
        window.addEventListener('resize', this.boundHandleResize);
    }
    
    handleResize() {
        console.log(this.data.length);
    }
    
    destroy() {
        // 이벤트 리스너 제거
        window.removeEventListener('resize', this.boundHandleResize);
        this.data = null;
    }
}

// 사용
let manager = new DataManager();
// 정리
manager.destroy();
manager = null;

// 또는 화살표 함수 사용 (React 스타일)
class ModernDataManager {
    constructor() {
        this.data = new Array(100000).fill('data');
        window.addEventListener('resize', this.handleResize);
    }
    
    // 화살표 함수는 this를 자동으로 바인딩
    handleResize = () => {
        console.log(this.data.length);
    }
    
    destroy() {
        window.removeEventListener('resize', this.handleResize);
        this.data = null;
    }
}

// 메모리 누수 테스트 코드
let leakyArray = [];

function createLeak() {
    // 1. 첫 번째 스냅샷 찍기
    
    for (let i = 0; i < 10000; i++) {
        leakyArray.push({
            data: new Array(1000).fill('leak'),
            timestamp: Date.now()
        });
    }
    
    // 2. 두 번째 스냅샷 찍기
    // 3. Comparison 뷰에서 증가한 객체 확인
}

// 여러 번 실행
createLeak();
createLeak();
createLeak();

// 타임라인 테스트 코드
function simulateUserActivity() {
    setInterval(() => {
        // 사용자 액션 시뮬레이션
        const data = generateData();
        processData(data);
        // data가 제대로 해제되는지 타임라인에서 확인
    }, 100);
}

function generateData() {
    return new Array(1000).fill(Math.random());
}

function processData(data) {
    // 데이터 처리
    return data.reduce((sum, val) => sum + val, 0);
}

// 메모리 집약적인 함수 찾기
function heavyFunction() {
    const largeArray = new Array(1000000);
    // 이 함수가 샘플링에서 높게 나타날 것
    return largeArray.map(x => x * 2);
}

function lightFunction() {
    const smallArray = [1, 2, 3];
    return smallArray.map(x => x * 2);
}

// 샘플링 실행 중 여러 번 호출
for (let i = 0; i < 100; i++) {
    heavyFunction();
    lightFunction();
}

// Performance API 사용
if (performance.memory) {
    console.log('JS Heap Size:', {
        used: (performance.memory.usedJSHeapSize / 1048576).toFixed(2) + ' MB',
        total: (performance.memory.totalJSHeapSize / 1048576).toFixed(2) + ' MB',
        limit: (performance.memory.jsHeapSizeLimit / 1048576).toFixed(2) + ' MB'
    });
}

// 메모리 모니터링 클래스
class MemoryMonitor {
    constructor(interval = 1000) {
        this.interval = interval;
        this.measurements = [];
        this.isMonitoring = false;
    }
    
    start() {
        if (!performance.memory) {
            console.warn('Memory API not available');
            return;
        }
        
        this.isMonitoring = true;
        this.monitor();
    }
    
    stop() {
        this.isMonitoring = false;
        return this.getReport();
    }
    
    monitor() {
        if (!this.isMonitoring) return;
        
        const measurement = {
            timestamp: Date.now(),
            used: performance.memory.usedJSHeapSize,
            total: performance.memory.totalJSHeapSize
        };
        
        this.measurements.push(measurement);
        
        // 메모리 증가 감지
        if (this.measurements.length > 10) {
            const recent = this.measurements.slice(-10);
            const trend = this.calculateTrend(recent);
            
            if (trend > 0.1) {  // 10% 이상 증가
                console.warn('⚠️ Memory leak detected! Trend:', trend);
            }
        }
        
        setTimeout(() => this.monitor(), this.interval);
    }
    
    calculateTrend(measurements) {
        if (measurements.length < 2) return 0;
        
        const first = measurements[0].used;
        const last = measurements[measurements.length - 1].used;
        
        return (last - first) / first;
    }
    
    getReport() {
        if (this.measurements.length === 0) {
            return { message: 'No measurements' };
        }
        
        const used = this.measurements.map(m => m.used);
        const max = Math.max(...used);
        const min = Math.min(...used);
        const avg = used.reduce((a, b) => a + b) / used.length;
        
        return {
            measurements: this.measurements.length,
            max: (max / 1048576).toFixed(2) + ' MB',
            min: (min / 1048576).toFixed(2) + ' MB',
            avg: (avg / 1048576).toFixed(2) + ' MB',
            trend: this.calculateTrend(this.measurements)
        };
    }
}

// 사용 예제
const monitor = new MemoryMonitor(1000);
monitor.start();

// 테스트 코드 실행
function runTest() {
    const data = [];
    for (let i = 0; i < 1000; i++) {
        data.push(new Array(1000).fill(i));
    }
}

setInterval(runTest, 2000);

// 10초 후 리포트
setTimeout(() => {
    const report = monitor.stop();
    console.log('Memory Report:', report);
}, 10000);

import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);
    
    useEffect(() => {
        let isMounted = true;
        const controller = new AbortController();
        
        // 데이터 페칭
        fetch(`/api/users/${userId}`, {
            signal: controller.signal
        })
        .then(res => res.json())
        .then(data => {
            if (isMounted) {
                setUser(data);
            }
        })
        .catch(err => {
            if (err.name !== 'AbortError') {
                console.error(err);
            }
        });
        
        // 클린업 함수 - 매우 중요! ✅
        return () => {
            isMounted = false;
            controller.abort();
        };
    }, [userId]);
    
    return <div>{user?.name}</div>;
}

// ❌ 잘못된 예: 클린업 없음
function BadComponent() {
    useEffect(() => {
        const interval = setInterval(() => {
            console.log('Running...');
        }, 1000);
        
        // 클린업이 없어서 컴포넌트가 언마운트되어도
        // 타이머가 계속 실행됨! 💥
    }, []);
}

import React, { memo, useMemo } from 'react';

// 불필요한 리렌더링 방지
const ExpensiveComponent = memo(({ data, onUpdate }) => {
    // 복잡한 계산
    const processedData = useMemo(() => {
        console.log('Processing data...');
        return data.map(item => ({
            ...item,
            computed: heavyComputation(item)
        }));
    }, [data]);  // data가 변경될 때만 재계산
    
    return (
        <div>
            {processedData.map(item => (
                <div key={item.id}>{item.computed}</div>
            ))}
        </div>
    );
}, (prevProps, nextProps) => {
    // 커스텀 비교 함수
    return prevProps.data === nextProps.data &&
           prevProps.onUpdate === nextProps.onUpdate;
});

function heavyComputation(item) {
    // 무거운 계산
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
        result += item.value * i;
    }
    return result;
}

import { FixedSizeList } from 'react-window';

function VirtualizedList({ items }) {
    // 10,000개의 아이템이 있어도
    // 화면에 보이는 것만 렌더링! ✅
    
    const Row = ({ index, style }) => (
        <div style={style}>
            {items[index].name}
        </div>
    );
    
    return (
        <FixedSizeList
            height={600}
            itemCount={items.length}
            itemSize={50}
            width="100%"
        >
            {Row}
        </FixedSizeList>
    );
}

// ❌ 일반 렌더링: 모든 아이템을 DOM에 생성
function NonVirtualizedList({ items }) {
    return (
        <div>
            {items.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
    // 10,000개 아이템 = 10,000개 DOM 노드 = 메모리 폭발! 💥
}

export default {
    data() {
        return {
            timer: null,
            eventHandler: null
        }
    },
    
    mounted() {
        // 타이머 설정
        this.timer = setInterval(() => {
            this.updateData();
        }, 1000);
        
        // 이벤트 리스너 등록
        this.eventHandler = this.handleResize.bind(this);
        window.addEventListener('resize', this.eventHandler);
    },
    
    beforeUnmount() {
        // 클린업 - 매우 중요! ✅
        if (this.timer) {
            clearInterval(this.timer);
        }
        
        if (this.eventHandler) {
            window.removeEventListener('resize', this.eventHandler);
        }
    },
    
    methods: {
        updateData() {
            // 데이터 업데이트
        },
        
        handleResize() {
            // 리사이즈 처리
        }
    }
}

<template>
    <!-- 한 번만 렌더링하고 업데이트하지 않음 -->
    <div v-once>
        <h1>{{ staticTitle }}</h1>
        <p>{{ staticContent }}</p>
    </div>
    
    <!-- 의존성이 변경될 때만 업데이트 -->
    <div v-memo="[user.id, user.name]">
        <UserCard :user="user" />
    </div>
    
    <!-- 큰 리스트 최적화 -->
    <div
        v-for="item in items"
        :key="item.id"
        v-memo="[item.id, item.selected]"
    >
        <ItemCard :item="item" />
    </div>
</template>

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
    selector: 'app-user-list',
    templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit, OnDestroy {
    private subscriptions = new Subscription();
    users: User[] = [];
    
    constructor(private userService: UserService) {}
    
    ngOnInit() {
        // 구독 추가
        this.subscriptions.add(
            this.userService.getUsers().subscribe(users => {
                this.users = users;
            })
        );
        
        this.subscriptions.add(
            this.userService.userUpdates$.subscribe(update => {
                this.handleUpdate(update);
            })
        );
    }
    
    ngOnDestroy() {
        // 모든 구독 해제 - 매우 중요! ✅
        this.subscriptions.unsubscribe();
    }
    
    handleUpdate(update: any) {
        // 업데이트 처리
    }
}

// Component
export class ItemListComponent {
    items: Item[] = [];
    
    // trackBy 함수로 불필요한 DOM 재생성 방지
    trackByItemId(index: number, item: Item): number {
        return item.id;
    }
}

// Template
<div *ngFor="let item of items; trackBy: trackByItemId">
    {{ item.name }}
</div>

// trackBy 없으면 배열이 변경될 때마다
// 모든 DOM 요소를 재생성함! 💥

class VirtualTable {
    constructor(container, data, rowHeight = 50) {
        this.container = container;
        this.data = data;
        this.rowHeight = rowHeight;
        this.visibleRows = Math.ceil(container.clientHeight / rowHeight);
        this.startIndex = 0;
        
        this.init();
    }
    
    init() {
        // 스크롤 컨테이너 생성
        this.scrollContainer = document.createElement('div');
        this.scrollContainer.style.height = 
            `${this.data.length * this.rowHeight}px`;
        this.scrollContainer.style.position = 'relative';
        
        // 보이는 영역 컨테이너
        this.viewport = document.createElement('div');
        this.viewport.style.position = 'absolute';
        this.viewport.style.top = '0';
        this.viewport.style.width = '100%';
        
        this.scrollContainer.appendChild(this.viewport);
        this.container.appendChild(this.scrollContainer);
        
        // 스크롤 이벤트
        this.container.addEventListener('scroll', 
            this.handleScroll.bind(this));
        
        // 초기 렌더링
        this.render();
    }
    
    handleScroll() {
        const scrollTop = this.container.scrollTop;
        const newStartIndex = Math.floor(scrollTop / this.rowHeight);
        
        if (newStartIndex !== this.startIndex) {
            this.startIndex = newStartIndex;
            this.render();
        }
    }
    
    render() {
        // 보이는 행만 렌더링 (+ 버퍼)
        const buffer = 5;
        const start = Math.max(0, this.startIndex - buffer);
        const end = Math.min(
            this.data.length,
            this.startIndex + this.visibleRows + buffer
        );
        
        // 기존 내용 제거
        this.viewport.innerHTML = '';
        
        // 새로운 행 생성
        for (let i = start; i < end; i++) {
            const row = this.createRow(this.data[i], i);
            this.viewport.appendChild(row);
        }
        
        // 위치 조정
        this.viewport.style.transform = 
            `translateY(${start * this.rowHeight}px)`;
    }
    
    createRow(data, index) {
        const row = document.createElement('div');
        row.style.height = `${this.rowHeight}px`;
        row.style.display = 'flex';
        row.style.alignItems = 'center';
        row.style.borderBottom = '1px solid #eee';
        row.innerHTML = `
            <div style="flex: 1">${data.id}</div>
            <div style="flex: 2">${data.name}</div>
            <div style="flex: 2">${data.email}</div>
        `;
        return row;
    }
}

// 사용
const container = document.getElementById('table-container');
const data = generateLargeDataset(100000);
const table = new VirtualTable(container, data);

// 결과: 10만 개 데이터도 부드럽게 스크롤! ✅

class ChatManager {
    constructor(maxMessages = 1000) {
        this.maxMessages = maxMessages;
        this.messages = [];
        this.messageMap = new Map();
        this.listeners = new Set();
    }
    
    addMessage(message) {
        // 메시지 추가
        this.messages.push(message);
        this.messageMap.set(message.id, message);
        
        // 오래된 메시지 제거 (메모리 관리)
        if (this.messages.length > this.maxMessages) {
            const removed = this.messages.shift();
            this.messageMap.delete(removed.id);
            
            // DOM에서도 제거
            this.removeMessageFromDOM(removed.id);
        }
        
        // 리스너들에게 알림
        this.notifyListeners(message);
    }
    
    removeMessageFromDOM(messageId) {
        const element = document.getElementById(`msg-${messageId}`);
        if (element) {
            element.remove();
        }
    }
    
    subscribe(listener) {
        this.listeners.add(listener);
        
        // 구독 해제 함수 반환
        return () => {
            this.listeners.delete(listener);
        };
    }
    
    notifyListeners(message) {
        this.listeners.forEach(listener => {
            try {
                listener(message);
            } catch (error) {
                console.error('Listener error:', error);
            }
        });
    }
    
    getRecentMessages(count = 50) {
        return this.messages.slice(-count);
    }
    
    clear() {
        this.messages = [];
        this.messageMap.clear();
        this.listeners.clear();
    }
}

// 메시지 렌더러 (가상 스크롤링 적용)
class ChatRenderer {
    constructor(container, chatManager) {
        this.container = container;
        this.chatManager = chatManager;
        this.unsubscribe = null;
        
        this.init();
    }
    
    init() {
        // 새 메시지 구독
        this.unsubscribe = this.chatManager.subscribe(
            this.handleNewMessage.bind(this)
        );
        
        // 초기 메시지 렌더링
        const messages = this.chatManager.getRecentMessages();
        messages.forEach(msg => this.renderMessage(msg));
    }
    
    handleNewMessage(message) {
        this.renderMessage(message);
        this.scrollToBottom();
    }
    
    renderMessage(message) {
        const element = document.createElement('div');
        element.id = `msg-${message.id}`;
        element.className = 'chat-message';
        element.innerHTML = `
            <div class="message-header">
                <span class="author">${message.author}</span>
                <span class="time">${this.formatTime(message.timestamp)}</span>
            </div>
            <div class="message-content">${this.escapeHtml(message.content)}</div>
        `;
        
        this.container.appendChild(element);
    }
    
    scrollToBottom() {
        this.container.scrollTop = this.container.scrollHeight;
    }
    
    formatTime(timestamp) {
        return new Date(timestamp).toLocaleTimeString();
    }
    
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    destroy() {
        // 클린업
        if (this.unsubscribe) {
            this.unsubscribe();
        }
        this.container.innerHTML = '';
    }
}

// 사용
const chatManager = new ChatManager(1000);
const container = document.getElementById('chat-container');
const renderer = new ChatRenderer(container, chatManager);

// WebSocket 연결
const ws = new WebSocket('ws://example.com/chat');

ws.onmessage = (event) => {
    const message = JSON.parse(event.data);
    chatManager.addMessage(message);
};

// 페이지 언로드 시 정리
window.addEventListener('beforeunload', () => {
    renderer.destroy();
    chatManager.clear();
    ws.close();
});

class ImageGalleryOptimized {
    constructor(container, images, options = {}) {
        this.container = container;
        this.images = images;
        this.options = {
            thumbnailSize: 200,
            maxCachedImages: 20,
            lazyLoadThreshold: 500,
            ...options
        };
        
        this.imageCache = new Map();
        this.observer = null;
        
        this.init();
    }
    
    init() {
        // Intersection Observer 설정
        this.observer = new IntersectionObserver(
            this.handleIntersection.bind(this),
            {
                rootMargin: `${this.options.lazyLoadThreshold}px`
            }
        );
        
        // 썸네일 렌더링
        this.renderThumbnails();
    }
    
    renderThumbnails() {
        this.images.forEach((image, index) => {
            const thumbnail = this.createThumbnail(image, index);
            this.container.appendChild(thumbnail);
            
            // 지연 로딩을 위해 관찰
            this.observer.observe(thumbnail);
        });
    }
    
    createThumbnail(image, index) {
        const div = document.createElement('div');
        div.className = 'thumbnail';
        div.dataset.index = index;
        div.dataset.src = image.url;
        
        // 플레이스홀더
        div.innerHTML = `
            <div class="placeholder" 
                 style="width: ${this.options.thumbnailSize}px; 
                        height: ${this.options.thumbnailSize}px;">
                <div class="loading-spinner"></div>
            </div>
        `;
        
        div.addEventListener('click', () => {
            this.showFullImage(image);
        });
        
        return div;
    }
    
    handleIntersection(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const thumbnail = entry.target;
                const src = thumbnail.dataset.src;
                
                // 이미지 로드
                this.loadThumbnail(thumbnail, src);
                
                // 관찰 중지
                this.observer.unobserve(thumbnail);
            }
        });
    }
    
    async loadThumbnail(thumbnail, src) {
        try {
            // 썸네일 URL 생성 (서버에서 리사이징된 이미지)
            const thumbnailUrl = this.getThumbnailUrl(src);
            
            const img = new Image();
            img.onload = () => {
                thumbnail.innerHTML = '';
                thumbnail.appendChild(img);
            };
            img.src = thumbnailUrl;
            
        } catch (error) {
            console.error('Failed to load thumbnail:', error);
            thumbnail.innerHTML = '<div class="error">로드 실패</div>';
        }
    }
    
    getThumbnailUrl(originalUrl) {
        // 썸네일 URL 생성 (예: Cloudinary, imgix 등)
        return originalUrl.replace('/original/', '/thumbnail/');
    }
    
    async showFullImage(image) {
        // 캐시 확인
        if (this.imageCache.has(image.url)) {
            this.displayImage(this.imageCache.get(image.url));
            return;
        }
        
        // 캐시 크기 관리
        if (this.imageCache.size >= this.options.maxCachedImages) {
            // LRU: 가장 오래된 항목 제거
            const firstKey = this.imageCache.keys().next().value;
            this.imageCache.delete(firstKey);
        }
        
        // 이미지 로드
        const img = await this.loadFullImage(image.url);
        this.imageCache.set(image.url, img);
        this.displayImage(img);
    }
    
    loadFullImage(url) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = () => resolve(img);
            img.onerror = reject;
            img.src = url;
        });
    }
    
    displayImage(img) {
        // 모달 또는 라이트박스에 표시
        const modal = document.createElement('div');
        modal.className = 'image-modal';
        modal.innerHTML = `
            <div class="modal-content">
                <span class="close">×</span>
            </div>
        `;
        
        modal.querySelector('.modal-content').appendChild(img.cloneNode());
        document.body.appendChild(modal);
        
        // 닫기 이벤트
        modal.querySelector('.close').addEventListener('click', () => {
            modal.remove();
        });
    }
    
    destroy() {
        // 클린업
        if (this.observer) {
            this.observer.disconnect();
        }
        this.imageCache.clear();
        this.container.innerHTML = '';
    }
}

// 사용
const images = [
    { url: '/images/photo1.jpg', title: 'Photo 1' },
    { url: '/images/photo2.jpg', title: 'Photo 2' },
    // ... 수백 개의 이미지
];

const container = document.getElementById('gallery');
const gallery = new ImageGalleryOptimized(container, images, {
    thumbnailSize: 200,
    maxCachedImages: 20,
    lazyLoadThreshold: 500
});

// 결과:
// ✅ 초기 로딩 시간 90% 감소
// ✅ 메모리 사용량 70% 감소
// ✅ 부드러운 스크롤링