Question 1

CORS(Cross-Origin Resource Sharing)란 무엇인가요?

Accepted Answer

CORS는 브라우저의 동일 출처 정책(Same-Origin Policy)을 우회하여 다른 출처의 리소스에 접근할 수 있도록 허용하는 메커니즘입니다.

**동일 출처**: 프로토콜 + 호스트 + 포트가 모두 같아야 함

```
https://example.com:443  ← 출처(Origin)
  ↕ 같은 출처
https://example.com/api

✗ 다른 출처
http://example.com       (프로토콜 다름)
https://api.example.com  (호스트 다름)
https://example.com:8080 (포트 다름)
```

**서버 측 CORS 헤더 설정:**
```
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorizatio

Question 2

Service Worker와 PWA(Progressive Web App)를 설명해주세요.

Accepted Answer

**Service Worker:**
브라우저와 네트워크 사이에서 동작하는 프록시 스크립트입니다. 메인 스레드와 별도로 실행됩니다.

**라이프사이클:** install → activate → fetch 이벤트 처리
```js
// sw.js
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('v1').then(cache => cache.addAll(['/index.html', '/style.css']))
  );
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then(cached => cached || fetch(e.request))
  );
});
```

**PWA (Progressive Web App):**
웹 기술로 네이티브 앱 수준의 경험을 제공합니다.

**PWA 핵심 요소:**

Question 3

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

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 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

브라우저

01CORS(Cross-Origin Resource Sharing)란 무엇인가요?어려움동작 원리

02Service Worker와 PWA(Progressive Web App)를 설명해주세요.어려움동작 원리

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

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