Question 1

브라우저 저장소 API를 비교해주세요 (IndexedDB, Cache API, Web Storage).

Accepted Answer

브라우저는 여러 종류의 클라이언트 사이드 저장소를 제공합니다.

| 특성 | localStorage | sessionStorage | IndexedDB | Cache API |
|------|-------------|----------------|-----------|----------|
| 용량 | 5~10MB | 5~10MB | 수백MB+ | 수백MB+ |
| 데이터 타입 | 문자열만 | 문자열만 | 구조화된 데이터 | Request/Response |
| 동기/비동기 | 동기 | 동기 | 비동기 | 비동기 |
| 만료 | 영구 | 탭 닫으면 삭제 | 영구 | 영구 |
| 접근 | 동일 출처 | 동일 출처 탭 | 동일 출처 | 동일 출처 |
| Web Worker | X | X | O | O |

**IndexedDB:** 대용량 구조화 데이터 저장
```javascript
const request = indexedDB.open('myDB', 1);
request.onupgrad

Question 2

브라우저의 가비지 컬렉션과 메모리 누수 탐지 방법을 설명해주세요.

Accepted Answer

브라우저는 Mark-and-Sweep 알고리즘으로 메모리를 관리합니다.

**Mark-and-Sweep:**
1. Root(전역 객체, 실행 스택)에서 도달 가능한 모든 객체 마킹
2. 마킹되지 않은 객체를 메모리에서 해제

**프론트엔드 메모리 누수 원인:**
```javascript
// 1. 해제하지 않은 이벤트 리스너
element.addEventListener('click', handler);
// 컴포넌트 해제 시 removeEventListener 필수

// 2. 해제하지 않은 타이머
const id = setInterval(update, 1000);
// clearInterval(id) 필요

// 3. 클로저가 유지하는 큰 객체
function createLeak() {
  const hugeData = new Array(1000000);
  return () => hugeData.length; // hugeData 참조 유지
}

// 4. 분리된 DOM 노드 (

브라우저

11브라우저 저장소 API를 비교해주세요 (IndexedDB, Cache API, Web Storage).보통저장소

12브라우저의 가비지 컬렉션과 메모리 누수 탐지 방법을 설명해주세요.어려움동작 원리