Question 1

싱글톤 패턴이란 무엇이며 프론트엔드에서 어떻게 사용되나요?

Accepted Answer

싱글톤 패턴은 클래스의 인스턴스가 오직 하나만 생성되도록 보장하는 패턴입니다.

```javascript
// JavaScript 모듈 자체가 싱글톤
// api-client.js
class ApiClient {
  constructor() {
    this.baseURL = '/api';
  }
  get(url) { return fetch(this.baseURL + url); }
}

export const apiClient = new ApiClient(); // 모듈은 한 번만 실행

// 클래식 싱글톤
class Database {
  static instance;
  static getInstance() {
    if (!Database.instance) {
      Database.instance = new Database();
    }
    return Database.instance;
  }
}
```

- JavaScript 모듈 시스템(ES Modules)

Question 2

옵저버 패턴을 설명하고 프론트엔드 사례를 들어주세요.

Accepted Answer

옵저버 패턴은 객체의 상태 변화를 관찰하는 구독자들에게 자동으로 알림을 보내는 패턴입니다.

```javascript
class EventEmitter {
  #listeners = {};

on(event, callback) {
    (this.#listeners[event] ??= []).push(callback);
    return () => this.off(event, callback); // unsubscribe 함수 반환
  }

off(event, callback) {
    this.#listeners[event] = this.#listeners[event]?.filter(cb => cb !== callback);
  }

emit(event, ...args) {
    this.#listeners[event]?.forEach(cb => cb(...args));
  }
}

// 사용
const emitter = new EventEmitter();
con

Question 3

HOC(Higher-Order Component)와 Render Props 패턴을 설명해주세요.

Accepted Answer

두 패턴 모두 React에서 컴포넌트 로직을 재사용하기 위한 패턴입니다. ```typescript // HOC (Higher-Order Component) function withAuth

(WrappedComponent: React.ComponentType

) { return function AuthComponent(props: P) { const user = useUser(); if (!user) return ; return ; }; } const ProtectedPage = withAuth(Dashboard); // Render Props function MouseTracker({ render }: { render: (pos: Point) => ReactNode }) { const [pos, setPos] = useSt

Question 4

프록시 패턴과 JavaScript Proxy의 관계를 설명해주세요.

Accepted Answer

프록시 패턴은 객체에 대한 접근을 제어하는 대리 객체를 제공합니다.

**전통적 프록시 패턴:**
```javascript
class ApiProxy {
  constructor(api) {
    this.api = api;
    this.cache = new Map();
  }

async getData(key) {
    if (this.cache.has(key)) {
      console.log('Cache hit');
      return this.cache.get(key);
    }
    const data = await this.api.getData(key);
    this.cache.set(key, data);
    return data;
  }
}
```

**JavaScript Proxy 활용:**
```javascript
// 접근 로깅 프록시
function createLoggingProxy(obj) {
  return new Proxy(obj

Question 5

팩토리 패턴(Factory Pattern)을 설명해주세요.

Accepted Answer

**팩토리 패턴**은 객체 생성 로직을 별도의 함수/클래스로 분리하여, 사용하는 쪽이 구체적인 생성 과정을 알 필요 없게 하는 생성 패턴입니다.

**Simple Factory:**
```js
function createNotification(type, message) {
  switch (type) {
    case 'success': return { type, message, icon: '✅', color: 'green' };
    case 'error':   return { type, message, icon: '❌', color: 'red' };
    case 'warning': return { type, message, icon: '⚠️', color: 'yellow' };
    default: throw new Error('Unknown type');
  }
}

const noti = createNotification('success', '저장 완료');
```

Question 6

전략 패턴(Strategy Pattern)과 프론트엔드 적용 사례는?

Accepted Answer

**전략 패턴**은 알고리즘(전략)을 캡슐화하여 런타임에 교체할 수 있게 하는 행위 패턴입니다.

**핵심 구조:**
```ts
// 전략 인터페이스
interface SortStrategy {
  sort(data: number[]): number[];
}

// 구체적 전략
const bubbleSort: SortStrategy = { sort: (data) => { /* ... */ } };
const quickSort: SortStrategy  = { sort: (data) => { /* ... */ } };

// 컨텍스트 (전략 사용자)
function processData(data: number[], strategy: SortStrategy) {
  return strategy.sort(data);
}
```

**프론트엔드 적용 사례:**

1. **폼 유효성 검사:**
```ts
const validators = {
  email: (v: string) => /^[^

Question 7

MVC, MVP, MVVM 아키텍처 패턴을 비교해주세요.

Accepted Answer

UI 아키텍처 패턴은 관심사의 분리 방식이 다릅니다.

**MVC (Model-View-Controller):**
- Controller가 사용자 입력을 받아 Model 업데이트
- Model이 변경되면 View가 갱신
- View와 Model이 직접 통신 가능
- 예: Express.js (백엔드)

**MVP (Model-View-Presenter):**
- Presenter가 View와 Model 사이의 중재자
- View는 Presenter만 알고, Model은 모름
- View ↔ Presenter ↔ Model
- 테스트 용이 (Presenter 단위 테스트)

**MVVM (Model-View-ViewModel):**
- ViewModel이 데이터 바인딩으로 View와 자동 동기화
- View ←바인딩→ ViewModel ↔ Model
- 예: Vue.js (양방향 바인딩), Angular

| 패턴 | 통신 | 특징 | 프레임워크 |
|------|------|----

Question 8

데코레이터 패턴과 프론트엔드에서의 활용을 설명해주세요.

Accepted Answer

데코레이터 패턴은 객체에 **동적으로 새로운 기능을 추가**하는 구조 패턴입니다.

**JavaScript 데코레이터:**
```javascript
// 함수 데코레이터: 로깅 추가
function withLogging(fn) {
  return function(...args) {
    console.log(`Calling ${fn.name} with`, args);
    const result = fn.apply(this, args);
    console.log(`Result:`, result);
    return result;
  };
}

const add = (a, b) => a + b;
const loggedAdd = withLogging(add);
loggedAdd(1, 2); // Calling add with [1, 2] → Result: 3

// 디바운스 데코레이터
function withDebounce(fn, delay) {
  let timer;
  re

디자인패턴

01싱글톤 패턴이란 무엇이며 프론트엔드에서 어떻게 사용되나요?보통생성 패턴

02옵저버 패턴을 설명하고 프론트엔드 사례를 들어주세요.보통행위 패턴

03HOC(Higher-Order Component)와 Render Props 패턴을 설명해주세요.보통행위 패턴

04프록시 패턴과 JavaScript Proxy의 관계를 설명해주세요.보통구조 패턴

05팩토리 패턴(Factory Pattern)을 설명해주세요.보통생성 패턴

06전략 패턴(Strategy Pattern)과 프론트엔드 적용 사례는?보통행위 패턴

07MVC, MVP, MVVM 아키텍처 패턴을 비교해주세요.보통아키텍처

08데코레이터 패턴과 프론트엔드에서의 활용을 설명해주세요.보통행위 패턴