Question 1

Proxy와 Reflect의 개념과 프론트엔드 활용 사례를 설명해주세요.

Accepted Answer

Proxy는 객체의 기본 동작을 **가로채서 커스텀 로직**을 실행합니다.

```javascript
const handler = {
  get(target, prop) {
    console.log(`[GET] ${prop}`);
    return Reflect.get(target, prop);
  },
  set(target, prop, value) {
    if (prop === 'age' && (value < 0 || value > 150)) {
      throw new RangeError('Invalid age');
    }
    return Reflect.set(target, prop, value);
  }
};
const user = new Proxy({ name: 'Kim', age: 25 }, handler);
```

**Reflect**: Proxy 트랩 내에서 원래 동작을 안전하게 실행하는 유틸리티

**프론트엔드 활용:**
1. **반응성 시스템*

Question 2

WeakMap과 WeakSet은 무엇이고 언제 사용하나요?

Accepted Answer

**WeakMap**과 **WeakSet**은 키(WeakMap) 또는 값(WeakSet)이 **약한 참조(weak reference)**로 유지되어 가비지 컬렉션을 방해하지 않는 컬렉션입니다.

**WeakMap:**
```js
const cache = new WeakMap();
function process(obj) {
  if (cache.has(obj)) return cache.get(obj);
  const result = /* 무거운 계산 */;
  cache.set(obj, result);
  return result;
}
// obj에 대한 다른 참조가 사라지면 캐시 항목도 자동 정리
```

**Map과의 차이:**
| | Map | WeakMap |
|---|---|---|
| 키 타입 | 아무 값 | 객체만 |
| 열거 | 가능 (size, forEach) | 불가 |
| GC | 키 참조 유지 → 메모리 누수 가능 | 키가 GC 대상이면 자동 제거 |

**We

Question 3

AbortController를 이용한 요청 취소 패턴을 설명해주세요.

Accepted Answer

AbortController는 진행 중인 비동기 작업을 취소할 수 있는 웹 API입니다.

**기본 사용법:**
```javascript
const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
  .catch(err => {
    if (err.name === 'AbortError') console.log('요청 취소됨');
  });
setTimeout(() => controller.abort(), 3000);
```

**React에서의 활용:**
```javascript
useEffect(() => {
  const controller = new AbortController();
  async function fetchData() {
    try {
      const res = await fetch(`/api/search?q=${query}`, {

Question 4

JavaScript 에러 핸들링 패턴과 커스텀 에러 클래스를 설명해주세요.

Accepted Answer

체계적인 에러 핸들링은 안정적인 애플리케이션의 핵심입니다.

**커스텀 에러 클래스:**
```javascript
class AppError extends Error {
  constructor(message, statusCode, code) {
    super(message);
    this.name = 'AppError';
    this.statusCode = statusCode;
    this.code = code;
  }
}
class NotFoundError extends AppError {
  constructor(resource) {
    super(`${resource}을(를) 찾을 수 없습니다`, 404, 'NOT_FOUND');
  }
}
```

**에러 핸들링 패턴:**
```javascript
// 1. try-catch
try {
  await fetchData();
} catch (err) {
  if (err instanceof NotFoundE

Question 5

requestAnimationFrame의 동작 원리와 최적 활용법을 설명해주세요.

Accepted Answer

requestAnimationFrame(rAF)은 브라우저 **렌더링 사이클에 동기화**된 애니메이션 API입니다.

```javascript
// 기본 애니메이션 루프
function animate(timestamp) {
  // timestamp: 페이지 로드 후 경과 시간 (ms)
  element.style.transform = `translateX(${timestamp * 0.1}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

// 프레임 레이트 제한 (30fps)
let lastTime = 0;
function animate30fps(timestamp) {
  if (timestamp - lastTime >= 33.33) { // 1000/30
    update();
    lastTime = timestamp;
  }
  requestAnimationFrame(animate30fps)

Question 6

Symbol의 용도와 Well-known Symbols를 설명해주세요.

Accepted Answer

Symbol은 **고유하고 변경 불가능한 원시 타입**으로, 주로 객체 속성의 키로 사용됩니다.

**기본 사용:**
```javascript
const id = Symbol('id');
const user = { [id]: 123, name: 'Kim' };

user[id]; // 123
Object.keys(user); // ['name'] — Symbol 키는 열거되지 않음
```

**Well-known Symbols (내장 심볼):**
```javascript
// Symbol.iterator — 객체를 iterable로 만들기
class Range {
  constructor(start, end) { this.start = start; this.end = end; }
  [Symbol.iterator]() {
    let current = this.start;
    const end = this.end;
    return {
      next() {

JavaScript

11Proxy와 Reflect의 개념과 프론트엔드 활용 사례를 설명해주세요.어려움고급

12WeakMap과 WeakSet은 무엇이고 언제 사용하나요?보통메모리

13AbortController를 이용한 요청 취소 패턴을 설명해주세요.보통비동기

14JavaScript 에러 핸들링 패턴과 커스텀 에러 클래스를 설명해주세요.보통에러 처리

15requestAnimationFrame의 동작 원리와 최적 활용법을 설명해주세요.보통애니메이션

16Symbol의 용도와 Well-known Symbols를 설명해주세요.보통고급