🧹 15. 메모리 & 성능 — 가비지 컬렉터를 이해하면 메모리 누수가 보인다

// 메모리 할당과 해제
 
// 1. 생성 — 메모리 할당
let post = { id: 1, title: "클로저", comments: Array(1000).fill("댓글") };
 
// 2. 사용
console.log(post.title);
 
// 3. 도달 불가능 → GC 대상
post = null; // post가 가리키던 객체를 루트에서 참조 해제
// GC가 실행될 때 해당 객체를 메모리에서 수거
 
// 클로저로 인한 참조 유지
function createClosure() {
  const bigData = new Array(100000).fill("데이터"); // 큰 배열
 
  return function () {
    return bigData.length; // bigData를 참조하는 클로저
  };
}
 
const getCount = createClosure();
// getCount가 살아있는 한, bigData도 GC 불가 (클로저가 참조하고 있으므로)
// getCount = null; 해야 bigData도 수거됨

// ❌ 메모리 누수 — 리스너가 누적됨
class PostCard extends React.Component {
  componentDidMount() {
    window.addEventListener("resize", this.handleResize);
    document.addEventListener("keydown", this.handleKeyDown);
  }
 
  // componentWillUnmount 없음!
  // 컴포넌트가 언마운트되어도 리스너는 window/document에 남아있음
  // 재마운트될 때마다 리스너가 하나씩 추가 → 무한 누적
}
 
// ✅ 정리 (cleanup)
class PostCard extends React.Component {
  componentDidMount() {
    window.addEventListener("resize", this.handleResize);
  }
 
  componentWillUnmount() {
    window.removeEventListener("resize", this.handleResize); // 반드시 제거
  }
}
 
// React 함수 컴포넌트 — useEffect cleanup
function PostCard() {
  useEffect(() => {
    const handleResize = () => { /* ... */ };
    window.addEventListener("resize", handleResize);
 
    return () => {
      window.removeEventListener("resize", handleResize); // cleanup
    };
  }, []); // 마운트 시 1번, 언마운트 시 cleanup
}

// ❌ setInterval 미제거
function startRealTimeUpdates() {
  setInterval(async () => {
    const newPosts = await fetchNewPosts();
    updateUI(newPosts);
  }, 5000);
  // 반환된 타이머 ID를 저장하지 않음 → 제거 불가
}
 
// ✅ 타이머 ID 저장 후 제거
function startRealTimeUpdates() {
  const timerId = setInterval(async () => {
    const newPosts = await fetchNewPosts();
    updateUI(newPosts);
  }, 5000);
 
  return () => clearInterval(timerId); // cleanup 함수 반환
}
 
// React useEffect에서
useEffect(() => {
  const timerId = setInterval(() => { /* ... */ }, 5000);
  return () => clearInterval(timerId); // 언마운트 시 정리
}, []);

// ❌ 거대한 데이터를 클로저가 오래 붙들고 있음
function setupSearchHandler() {
  const allPosts = fetchAllPostsSync(); // 수만 개의 게시글 (수 MB)
 
  searchInput.addEventListener("input", (event) => {
    // allPosts 전체를 클로저로 캡처
    const results = allPosts.filter((p) =>
      p.title.includes(event.target.value)
    );
    renderResults(results);
  });
  // searchInput이 DOM에 있는 한, allPosts 전체가 메모리에 유지됨
}
 
// ✅ 필요한 부분만 추출하거나, 검색 인덱스로 경량화
function setupSearchHandler() {
  const allPosts = fetchAllPostsSync();
 
  // 검색에 필요한 최소 정보만 추출
  const searchIndex = allPosts.map(({ id, title, tags }) => ({
    id,
    title,
    tags,
  }));
 
  allPosts = null; // 원본 참조 해제 — GC 가능
 
  searchInput.addEventListener("input", (event) => {
    const results = searchIndex.filter((p) =>
      p.title.includes(event.target.value)
    );
    // 전체 게시글 대신 경량화된 인덱스만 참조
    renderResults(results);
  });
}

// ❌ 제거된 DOM 요소를 JS 변수가 참조하고 있음
let detachedNode;
 
function createAndStore() {
  const list = document.getElementById("post-list");
  detachedNode = list; // 전역 변수에 참조 저장
 
  document.body.removeChild(list); // DOM에서 제거했지만...
  // detachedNode가 여전히 참조하므로 GC 불가
  // → "분리된 DOM 트리 (Detached DOM Tree)"
}
 
// ✅ 사용 후 참조 해제
function createAndStore() {
  const list = document.getElementById("post-list");
  // 사용
  processListData(list);
  document.body.removeChild(list);
  // 지역 변수는 함수 종료 시 자동 해제 (전역 저장 안 함)
}
 
// 필요하다면 WeakRef 사용 (ES2021)
let weakRef = new WeakRef(document.getElementById("post-list"));
// DOM이 제거되면 WeakRef를 통한 참조도 자동으로 null
const elem = weakRef.deref(); // 살아있으면 요소, 없으면 undefined

// 개발 중 메모리 사용량 직접 확인
if (performance.memory) {
  const { usedJSHeapSize, totalJSHeapSize } = performance.memory;
  console.log(
    `힙 사용: ${(usedJSHeapSize / 1024 / 1024).toFixed(1)}MB /` +
      `${(totalJSHeapSize / 1024 / 1024).toFixed(1)}MB`
  );
}

// 1. 루프 최적화 — 배열 길이를 매번 계산하지 말 것
// ❌ 매 이터레이션마다 posts.length 접근
for (let i = 0; i < posts.length; i++) { ... }
 
// ✅ 변수로 캐싱
const len = posts.length;
for (let i = 0; i < len; i++) { ... }
 
// 2. DOM 접근 최소화 — 리플로우/리페인트 줄이기
// ❌ DOM을 루프 안에서 반복 접근
for (let i = 0; i < 100; i++) {
  document.getElementById("counter").textContent = i; // 매 루프마다 리플로우
}
 
// ✅ DOM 업데이트 한 번에 모아서
const counter = document.getElementById("counter");
let text = "";
for (let i = 0; i < 100; i++) {
  text = i.toString(); // 계산은 메모리에서
}
counter.textContent = text; // DOM은 한 번만
 
// 3. DocumentFragment — 대량 DOM 삽입 최적화
// ❌ 하나씩 추가 — 100번 리플로우
const list = document.getElementById("post-list");
posts.forEach((post) => {
  const li = document.createElement("li");
  li.textContent = post.title;
  list.appendChild(li); // 매번 리플로우
});
 
// ✅ DocumentFragment로 묶어서 한 번에
const fragment = document.createDocumentFragment();
posts.forEach((post) => {
  const li = document.createElement("li");
  li.textContent = post.title;
  fragment.appendChild(li); // 실제 DOM에 없음 → 리플로우 없음
});
list.appendChild(fragment); // 한 번만 리플로우
 
// 4. 디바운스/스로틀 — 이벤트 최적화
function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
 
function throttle(fn, limit) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= limit) {
      lastTime = now;
      return fn.apply(this, args);
    }
  };
}
 
// 검색 입력 — 타이핑 멈춘 후 300ms 뒤에만 실행
searchInput.addEventListener("input", debounce(handleSearch, 300));
 
// 스크롤 이벤트 — 100ms에 한 번만 실행
window.addEventListener("scroll", throttle(handleScroll, 100));
 
// 5. 객체 풀링 (Object Pooling) — 잦은 객체 생성 대신 재사용
class ObjectPool {
  #pool = [];
  #factory;
 
  constructor(factory) {
    this.#factory = factory;
  }
 
  acquire() {
    return this.#pool.pop() ?? this.#factory();
  }
 
  release(obj) {
    // 초기화 후 풀에 반환
    Object.keys(obj).forEach((key) => delete obj[key]);
    this.#pool.push(obj);
  }
}
 
// 게임, 실시간 앱에서 유용
const particlePool = new ObjectPool(() => ({ x: 0, y: 0, velocity: 0 }));

// 순환 참조 — Reference Counting의 취약점
function createCycle() {
  const a = {};
  const b = {};
  a.ref = b; // a → b 참조
  b.ref = a; // b → a 참조 (순환!)
  // 함수 종료 → a, b 지역 변수 해제
  // 하지만 a와 b는 서로를 참조하므로 참조 횟수가 0이 안 됨
  // Reference Counting: 수거 불가 → 누수
  // Mark-and-Sweep: 루트에서 도달 불가 → 수거 가능 ✅
}

// ① 이벤트 리스너 누수
useEffect(() => {
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize); // cleanup 필수
}, []);
 
// ② 언마운트 후 setState 경고 (React 18에서는 경고 제거됐지만 여전히 불필요한 작업)
useEffect(() => {
  let isActive = true;
  fetchPost(postId).then((post) => {
    if (isActive) setPost(post); // 언마운트됐으면 스킵
  });
  return () => { isActive = false; }; // cleanup
}, [postId]);
 
// 더 좋은 방법: AbortController
useEffect(() => {
  const controller = new AbortController();
  fetchPost(postId, controller.signal).then(setPost).catch(() => {});
  return () => controller.abort();
}, [postId]);

// ✅ 개선된 무한 스크롤 구현
const renderedPostIds = new Set(); // 중복 방지 (Set.has → O(1))
let isLoading = false;
 
const handleScroll = throttle(async () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  const isNearBottom = scrollTop + clientHeight >= scrollHeight - 200;
 
  if (!isNearBottom || isLoading) return;
 
  isLoading = true;
  try {
    const newPosts = await fetchNextPage();
 
    // DocumentFragment로 배치 삽입
    const fragment = document.createDocumentFragment();
    newPosts
      .filter((p) => !renderedPostIds.has(p.id)) // 중복 제거
      .forEach((post) => {
        renderedPostIds.add(post.id);
        const el = createPostElement(post);
        fragment.appendChild(el);
      });
 
    postList.appendChild(fragment); // 한 번에 DOM 반영
  } finally {
    isLoading = false;
  }
}, 200); // 200ms에 한 번만 실행
 
window.addEventListener("scroll", handleScroll);