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

Proxy는 객체의 기본 동작을 **가로채서 커스텀 로직**을 실행합니다. ```javascript const handler = { get(target, prop) { console.log(`[GET] ${prop}`); return Reflect.get(target, prop); }, set(target, prop, value) { if (prop === 'age' && (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 1

Generator와 Iterator 패턴을 설명하고 실무 활용 예시를 들어주세요.

Accepted Answer

Iterator는 순회 프로토콜, Generator는 Iterator를 쉽게 만드는 특수 함수입니다.

**Iterator Protocol:**
```javascript
const range = {
  [Symbol.iterator]() {
    let current = 1;
    return {
      next() {
        return current <= 5 ? { value: current++, done: false } : { done: true };
      }
    };
  }
};
for (const n of range) console.log(n); // 1,2,3,4,5
```

**Generator Function:**
```javascript
function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}
const fib

Question 2

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 3

실행 컨텍스트를 들어 본 적 있나요?

Accepted Answer

실행 컨텍스트(Execution Context)는 **JavaScript 코드가 실행되기 위해 필요한 환경 정보를 담은 객체**입니다. 호이스팅·스코프·클로저·`this`가 왜 그렇게 동작하는지를 하나로 설명하는 개념입니다.

## 종류 3가지

1. **전역 실행 컨텍스트(GEC)** — 프로그램 시작 시 1개 생성
2. **함수 실행 컨텍스트(FEC)** — 함수가 **호출될 때마다** 생성
3. **eval 실행 컨텍스트** — 실무에서는 사용하지 않음

## 콜 스택

실행 컨텍스트는 **스택(LIFO)**으로 관리됩니다.

```js
function a() { b(); }
function b() { console.log('b'); }
a();
```

```
[ b EC ]  ← 실행 중
[ a EC ]
[ Global EC ]
```

b가 끝나면 pop되고 a로 돌아갑니다. 재귀가 끝나지 않으면 이 스택이 넘쳐 `RangeError: Maximum call stack s

JavaScript

01Generator와 Iterator 패턴을 설명하고 실무 활용 예시를 들어주세요.어려움고급

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

03실행 컨텍스트를 들어 본 적 있나요?어려움실행 컨텍스트