Question 1

브라우저 렌더링 과정(Critical Rendering Path)을 설명해주세요.

Accepted Answer

브라우저가 HTML을 받아 화면에 표시하기까지의 과정입니다. 1. **HTML 파싱 → DOM 트리 생성** 2. **CSS 파싱 → CSSOM 트리 생성** 3. **DOM + CSSOM → Render Tree 생성** (display:none 제외) 4. **Layout (Reflow)**: 각 요소의 크기와 위치 계산 5. **Paint**: 각 요소를 픽셀로 그리기 6. **Composite**: 레이어를 합성하여 최종 화면 표시 - **Reflow(리플로우)**: 요소의 크기/위치가 변경될 때 레이아웃을 다시 계산. 비용이 큽니다. - **Repaint(리페인트)**: 색상 등 시각적 속성만 변경될 때. 리플로우보다 가볍습니다. - CSS는 렌더링을 차단하므로 ``에 배치합니다. - JavaScript는 DOM 파싱을 차단할 수 있으므로 `` 하단 또는 `defer`/`async` 사용을 권장합니다.

Question 2

이벤트 버블링, 캡처링, 위임(delegation)을 설명해주세요.

Accepted Answer

DOM 이벤트는 3단계로 전파됩니다.

1. **캡처링(Capturing)**: document → 부모 → 타깃 (하향)
2. **타깃(Target)**: 이벤트가 발생한 요소
3. **버블링(Bubbling)**: 타깃 → 부모 → document (상향)

```javascript
// 이벤트 위임 (Event Delegation)
// 자식 요소마다 이벤트를 등록하지 않고, 부모에 한 번만 등록
document.querySelector('.list').addEventListener('click', (e) => {
  const target = e.target as HTMLElement;
  if (target.matches('.item')) {
    console.log('클릭된 아이템:', target.textContent);
  }
});

// 버블링 중단
element.addEventListener('click', (e) => {
  e.stopPropagation(

Question 3

Reflow와 Repaint의 차이점과 최적화 방법은?

Accepted Answer

Reflow는 레이아웃 재계산, Repaint는 화면 다시 그리기입니다.

**Reflow 발생 (비용 높음):**
- DOM 요소 추가/삭제
- 요소 크기/위치 변경 (width, height, margin, padding)
- 창 크기 변경
- 폰트 변경

**Repaint 발생 (비용 낮음):**
- 색상, 배경색 변경
- visibility, opacity 변경
- box-shadow 변경

```javascript
// 나쁜 예: 여러 번의 reflow 발생
element.style.width = '100px';
element.style.height = '200px';
element.style.margin = '10px';

// 좋은 예: 한 번의 reflow로 최적화
element.classList.add('new-style');
// 또는
element.style.cssText = 'width:100px; height:200px; margin:10px';
```

**

Question 4

URL을 입력하면 브라우저에서 어떤 일이 일어나나요?

Accepted Answer

URL 입력부터 화면 표시까지의 전체 과정입니다.

1. **DNS 조회**: 도메인명 → IP 주소 변환
   - 브라우저 캐시 → OS 캐시 → 라우터 → ISP DNS 서버
2. **TCP 연결**: 3-way handshake (SYN → SYN-ACK → ACK)
3. **TLS 핸드셰이크** (HTTPS인 경우): 암호화 연결 수립
4. **HTTP 요청**: GET / HTTP/1.1 전송
5. **서버 응답**: HTML 문서 반환
6. **HTML 파싱**: DOM 트리 구축
7. **CSS 파싱**: CSSOM 트리 구축
8. **JavaScript 실행**: DOM 조작, 이벤트 바인딩
9. **렌더 트리 생성**: DOM + CSSOM 결합
10. **Layout → Paint → Composite**: 화면에 최종 표시

- 이 과정에서 다양한 최적화가 적용됩니다: DNS 프리페치, 프리커넥트, HTTP/2 멀티플렉싱 등
- Service Worker가 있다면

Question 5

Intersection Observer API란 무엇이고 어떻게 사용하나요?

Accepted Answer

**Intersection Observer API**는 대상 요소가 뷰포트(또는 특정 조상 요소)와 교차하는지를 비동기적으로 감시합니다.

**기본 사용법:**
```js
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('요소가 화면에 보임:', entry.target);
    }
  });
}, {
  root: null,          // null = 뷰포트 기준
  rootMargin: '0px',   // 감지 영역 확장/축소
  threshold: 0.5       // 50% 이상 보일 때 콜백 (0~1, 배열 가능)
});

observer.observe(document.querySelector('.target'));
```

**주요 활용 사례:**

1. **이미지 La

Question 6

requestIdleCallback과 우선순위 스케줄링을 설명해주세요.

Accepted Answer

requestIdleCallback(rIC)은 브라우저가 **유휴 상태일 때** 콜백을 실행합니다.

```javascript
requestIdleCallback((deadline) => {
  // deadline.timeRemaining(): 남은 유휴 시간 (ms)
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    performTask(tasks.shift());
  }
  if (tasks.length > 0) {
    requestIdleCallback(processRemainingTasks); // 다음 유휴 시간에 계속
  }
}, { timeout: 2000 }); // 최대 2초 후에는 강제 실행
```

**스케줄링 우선순위:**
1. 사용자 입력 이벤트 (최우선)
2. requestAnimationFrame (렌더링 전)
3. 렌더링/페인팅
4. **requestIdleCallback** (유휴

Question 7

Performance API를 이용한 웹 성능 측정 방법을 설명해주세요.

Accepted Answer

Performance API는 정밀한 성능 데이터를 수집하는 브라우저 내장 API입니다.

**사용자 정의 마킹:**
```javascript
performance.mark('api-start');
await fetchData();
performance.mark('api-end');
performance.measure('API 호출', 'api-start', 'api-end');

const measure = performance.getEntriesByName('API 호출')[0];
console.log(`API 소요 시간: ${measure.duration}ms`);
```

**네비게이션 타이밍:**
```javascript
const nav = performance.getEntriesByType('navigation')[0];
console.log('DNS 조회:', nav.domainLookupEnd - nav.domainLookupStart);
console.log('TC

Question 8

브라우저 저장소 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 9

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

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

브라우저

01브라우저 렌더링 과정(Critical Rendering Path)을 설명해주세요.보통렌더링

02이벤트 버블링, 캡처링, 위임(delegation)을 설명해주세요.보통이벤트

03Reflow와 Repaint의 차이점과 최적화 방법은?보통렌더링

04URL을 입력하면 브라우저에서 어떤 일이 일어나나요?보통동작 원리

05Intersection Observer API란 무엇이고 어떻게 사용하나요?보통API

06requestIdleCallback과 우선순위 스케줄링을 설명해주세요.보통API

07Performance API를 이용한 웹 성능 측정 방법을 설명해주세요.보통API

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

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