Question 1

Core Web Vitals(LCP, FID, CLS)을 설명해주세요.

Accepted Answer

Core Web Vitals는 Google이 정의한 사용자 경험의 핵심 지표 3가지입니다.

**1. LCP (Largest Contentful Paint) — 로딩 성능**
- 뷰포트 내 가장 큰 콘텐츠 요소가 렌더링되는 시점
- Good: ≤ 2.5s / Needs Improvement: ≤ 4s / Poor: > 4s

**2. INP (Interaction to Next Paint) — 상호작용 응답성**
- 페이지 전체 생명주기 동안 발생하는 모든 클릭·키 입력·탭에 대한 응답 지연의 대표값
- 2024년 3월, FID(First Input Delay)를 공식 대체
- Good: ≤ 200ms / Needs Improvement: ≤ 500ms / Poor: > 500ms
- FID는 첫 번째 입력만 측정했지만, INP는 전체 상호작용을 측정해 더 포괄적

**3. CLS (Cumulative Layout Shift) — 시각적 안정성**
- 페이지 로드 중 발생하는 예기치

Question 2

코드 스플리팅과 레이지 로딩을 설명해주세요.

Accepted Answer

코드 스플리팅은 번들을 여러 청크로 나누어 필요할 때만 로드하는 기법입니다. ```typescript // React.lazy + Suspense import { lazy, Suspense } from 'react'; const HeavyComponent = lazy(() => import('./HeavyComponent')); function App() { return ( 로딩 중...}> ); } // Next.js dynamic import import dynamic from 'next/dynamic'; const Chart = dynamic(() => import('./Chart'), { loading: () =>

차트 로딩 중...

, ssr: false, // 클라이언트에서만 렌더링 }); ``` - 초

Question 3

이미지 최적화 전략에는 어떤 것들이 있나요?

Accepted Answer

이미지는 웹 페이지에서 가장 큰 용량을 차지하므로 최적화가 중요합니다. ```html

``` **최적화 방법:** - **포맷**: WebP, AVIF 사용 (JPEG 대비 25-50% 작음) - **레이지 로딩**: `loading="lazy"`로 뷰포트 밖 이미지 지연 로드 - **사이즈 지정**: width, height를 명시하여 CLS 방지 - **CDN**: 이미지 CDN으로 자동 리사이즈/포맷 변환 - **Next.js Image**: `next/ima

Question 4

debounce와 throttle의 차이점은 무엇인가요?

Accepted Answer

둘 다 이벤트 발생 빈도를 제어하는 기법이지만, 동작 방식이 다릅니다.

**Debounce**: 마지막 호출 후 일정 시간이 지나면 실행 (검색 입력에 적합)

**Throttle**: 일정 시간 간격으로 최대 1회 실행 (스크롤 이벤트에 적합)

```javascript
// Debounce 구현
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

// Throttle 구현
function throttle(fn, limit) {
  let inThrottle = false;
  return (...args) => {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(

Question 5

INP(Interaction to Next Paint)란 무엇이고 어떻게 개선하나요?

Accepted Answer

INP는 FID를 대체한 Core Web Vitals 지표로, **사용자 상호작용 후 화면 업데이트까지의 지연 시간**을 측정합니다.

**측정 기준:**
- 클릭, 탭, 키보드 입력 등 모든 상호작용의 지연 시간 중 가장 느린 값
- 좋음: 200ms 이하 / 개선 필요: 200~500ms / 나쁨: 500ms 초과

**INP가 느려지는 원인:**
1. 메인 스레드를 오래 점유하는 JavaScript 실행
2. 큰 컴포넌트 리렌더링
3. 레이아웃 스래싱 (강제 동기 레이아웃)
4. 서드파티 스크립트 간섭

**개선 전략:**
```javascript
// 1. 긴 작업 분리 (yield to main thread)
function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}
async function processItems(items) {
  for (const item of items) {

Question 6

Tree Shaking이란 무엇인가요?

Accepted Answer

**Tree Shaking**은 번들러가 사용되지 않는 코드(dead code)를 최종 번들에서 제거하는 최적화 기법입니다.

**동작 원리:**
1. ES Modules의 정적 `import`/`export` 구문을 분석
2. 실제로 사용(import)된 코드만 식별
3. 사용되지 않은 export를 번들에서 제거

**예시:**
```js
// utils.js
export function used() { return 'used'; }
export function unused() { return 'unused'; }

// app.js
import { used } from './utils';
used();
// → 번들에 unused()는 포함되지 않음
```

**Tree Shaking이 안 되는 경우:**
- CommonJS(`require`): 동적이라 정적 분석 불가
- 사이드 이펙트가 있는 모듈: `import 'polyfill'` 형태
- 동적 프로퍼티 접근: `obj[

Question 7

리스트 가상화(Virtualization/Windowing)를 설명해주세요.

Accepted Answer

**리스트 가상화**는 화면에 보이는 항목만 렌더링하고 나머지는 DOM에서 제거하는 기법입니다.

**문제:** 10,000개 항목 리스트 → 10,000개 DOM 노드 → 메모리 과다, 렌더링 지연

**해결 — Windowing:**
```
전체 리스트: [1] [2] [3] [4] [5] [6] ... [10000]
실제 렌더:           [3] [4] [5] [6]  ← 보이는 영역 + 버퍼
```

**동작 원리:**
1. 컨테이너에 전체 높이를 가상으로 설정 (스크롤바 유지)
2. 스크롤 위치에 따라 보여야 할 항목 인덱스 계산
3. 해당 항목만 절대 위치로 렌더링
4. 스크롤 시 DOM 재사용 (항목 교체)

**주요 라이브러리:**
| 라이브러리 | 특징 |
|---|---|
| `@tanstack/react-virtual` | 경량, React 친화적, 유연한 API |
| `react-window` | 가볍고 간단 (react-virtualized 경량 버전

Question 8

프론트엔드 메모리 누수의 원인과 디버깅 방법을 설명해주세요.

Accepted Answer

메모리 누수는 더 이상 필요 없는 메모리가 해제되지 않아 점진적으로 메모리가 증가하는 현상입니다.

**주요 원인:**
1. **해제 안 된 이벤트 리스너**: addEventListener 후 removeEventListener 누락
2. **해제 안 된 타이머**: setInterval/setTimeout 후 clear 누락
3. **클로저 참조**: 콜백이 큰 객체를 참조하여 GC 방지
4. **분리된 DOM**: DOM에서 제거했지만 JS 변수가 참조 유지
5. **전역 변수 누적**: window 객체에 계속 데이터 추가

**React에서의 누수:**
```javascript
// BAD: cleanup 없는 useEffect
useEffect(() => {
  const ws = new WebSocket('ws://...');
  ws.onmessage = (e) => setData(JSON.parse(e.data));
  // WebSocket이 닫히지 않음!
}, [

Question 9

Web Worker를 활용한 프론트엔드 성능 최적화 사례를 설명해주세요.

Accepted Answer

Web Worker는 메인 스레드와 별도로 **백그라운드 스레드에서 JavaScript를 실행**합니다.

**기본 사용:**
```javascript
// worker.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

// main.js
const worker = new Worker('worker.js');
worker.postMessage(largeData);
worker.onmessage = (e) => updateUI(e.data);
```

**React에서 활용 (Comlink):**
```javascript
// worker.ts
import { expose } from 'comlink';
const api = {
  sortData: (data) => data.sort((a, b) => a.score - b.score),
  parse

Question 10

preload, prefetch, preconnect의 차이점은?

Accepted Answer

브라우저에게 리소스 로딩 우선순위를 알려주는 리소스 힌트입니다. **preload — 현재 페이지에 반드시 필요한 리소스:** ```html ``` - 높은 우선순위로 즉시 로드 - 현재 페이지 렌더링에 필수적인 리소스에 사용 - `as` 속성 필수 (font, image, script, style 등) **prefetch — 다음 페이지에서 필요할 리소스:** ```html ``` - 낮은 우선순위로 유휴 시간에 로드 - 사용자가 이동할 가능성이 높은 페이지의 리소스 - 현재 페이지 성능에 영향 없음 **preconnect — 외부 도메인에 미리 연결:** ```html

성능 최적화

01Core Web Vitals(LCP, FID, CLS)을 설명해주세요.보통Core Web Vitals

02코드 스플리팅과 레이지 로딩을 설명해주세요.보통최적화

03이미지 최적화 전략에는 어떤 것들이 있나요?보통이미지

04debounce와 throttle의 차이점은 무엇인가요?쉬움최적화

05INP(Interaction to Next Paint)란 무엇이고 어떻게 개선하나요?보통측정

06Tree Shaking이란 무엇인가요?보통최적화

07리스트 가상화(Virtualization/Windowing)를 설명해주세요.보통최적화

08프론트엔드 메모리 누수의 원인과 디버깅 방법을 설명해주세요.어려움최적화

09Web Worker를 활용한 프론트엔드 성능 최적화 사례를 설명해주세요.보통최적화

10preload, prefetch, preconnect의 차이점은?쉬움최적화