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 노드 (

Question 3

Base64 인코딩이란 무엇인가요?

Accepted Answer

Base64는 **바이너리 데이터를 ASCII 문자 64개(A–Z, a–z, 0–9, +, /)로만 표현하는 인코딩 방식**입니다. 텍스트만 안전하게 통과하는 채널(이메일, JSON, URL, HTML 속성)로 바이너리를 실어 나르기 위해 만들어졌습니다.

## 동작 원리

3바이트(24비트)를 6비트씩 4조각으로 쪼개고, 각 6비트(0~63)를 문자표에 매핑합니다.

```
"Man" → 01001101 01100001 01101110
      → 010011 010110 000101 101110
      → 19     22     5      46
      → M      W      F      u        →  "TWFu"
```

3의 배수가 아니면 `=`로 패딩합니다.

**핵심 특성: 크기가 약 33% 증가합니다** (3바이트 → 4문자). 이것이 성능 판단의 기준점입니다.

## 암호화가 아닙니다 — 가장 중요한 포인트

Base64는 **누구나 즉시 되돌릴

Question 4

하이브리드 앱 개발에서 웹뷰와 앱이 소통할 수 있는 방법은 무엇인가요?

Accepted Answer

하이브리드 앱은 네이티브 셸 안에 **WebView**를 띄워 웹 콘텐츠를 보여주는 구조입니다. 웹은 카메라·푸시·생체인증 같은 네이티브 기능이 필요하고, 네이티브는 웹의 상태 변화를 알아야 하므로 **양방향 통신(브릿지)**이 필요합니다.

## 웹 → 네이티브

**Android (`@JavascriptInterface`)**

```kotlin
class Bridge(val ctx: Context) {
  @JavascriptInterface
  fun openCamera(payload: String) { /* ... */ }
}
webView.addJavascriptInterface(Bridge(this), "AndroidBridge")
```

```js
window.AndroidBridge.openCamera(JSON.stringify({ maxSize: 5 }));
```

**iOS (`WKScriptMessageHandler`)**

```swift
config.us

Question 5

크로스 브라우징이란 무엇인가요?

Accepted Answer

크로스 브라우징(Cross Browsing)은 **브라우저·기기·OS가 달라도 동일하거나 동등한 사용자 경험을 제공하도록 만드는 작업**입니다. "모든 브라우저에서 픽셀까지 똑같이"가 아니라 **"어디서든 핵심 기능이 동작한다"**가 목표입니다.

## 차이가 생기는 원인

- **렌더링 엔진** — Blink(Chrome, Edge, 삼성브라우저), WebKit(Safari), Gecko(Firefox)
- **기본 스타일(UA stylesheet)** — 브라우저마다 `margin`, 폼 요소 외형이 다름
- **기능 지원 격차** — 신규 CSS·JS API의 도입 시점 차이
- **iOS의 특수성** — iOS의 모든 브라우저는 **내부적으로 WebKit**입니다. iOS Chrome은 Chrome이 아닙니다
- **모바일 고유 이슈** — 100vh와 주소창, 터치 이벤트, 안전영역(notch)

## 대응 전략

**1. 표준 준수 + 기능 감지**

```js
// ❌

브라우저

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

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

13Base64 인코딩이란 무엇인가요?쉬움인코딩

14하이브리드 앱 개발에서 웹뷰와 앱이 소통할 수 있는 방법은 무엇인가요?어려움하이브리드

15크로스 브라우징이란 무엇인가요?보통호환성