Prototype Pattern 최신 기능 완벽 가이드

JavaScript/TypeScript의 Prototype Pattern을 활용한 최신 객체 생성 패턴을 소개합니다. Object.create()부터 ES6+ 문법까지 실전 예제로 학습합니다.

---

---

들어가며

이 글에서는 Prototype Pattern 최신 기능 완벽 가이드에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. 기본_Prototype_패턴
2. Clone_메서드_구현
3. 구조적_복제_API
4. Factory_함수와_Prototype
5. Mixin_패턴_활용
6. 성능_최적화_패턴
7. Proxy와_Prototype
8. WeakMap_기반_프라이빗_데이터
9. 함수형_Prototype_패턴
10. 조건부_Prototype_체인
11. Prototype_체이닝_최적화
12. Symbol을_활용한_Prototype

---

1. 기본 Prototype 패턴

개요

Prototype 패턴은 객체를 복제하여 새 인스턴스를 생성하는 디자인 패턴입니다. Object.create()를 사용해 프로토타입 체인을 구성합니다.

코드 예제

const carPrototype = {
  wheels: 4,
  start() { return `${this.model} starting...`; }
};

const tesla = Object.create(carPrototype);
tesla.model = "Model S";
console.log(tesla.start()); // "Model S starting..."

설명

Object.create()로 carPrototype을 상속받아 tesla 객체를 생성합니다. 프로토타입 체인을 통해 start 메서드를 사용할 수 있습니다.

---

2. Clone 메서드 구현

개요

객체 자체에 clone 메서드를 구현하여 자기 자신을 복제하는 패턴입니다. 깊은 복사와 얕은 복사를 구분하여 처리합니다.

코드 예제

class Prototype {
  clone() {
    return Object.assign(Object.create(Object.getPrototypeOf(this)), this);
  }
}

class User extends Prototype {
  constructor(public name: string, public role: string) { super(); }
}

const admin = new User("Alice", "admin");
const copy = admin.clone();

설명

Object.assign()과 Object.create()를 조합하여 프로토타입 체인을 유지하면서 속성을 복사합니다. 타입 안정성을 위해 TypeScript를 활용합니다.

---

3. 구조적 복제 API

개요

최신 structuredClone() API를 사용하면 깊은 복사를 간단하게 구현할 수 있습니다. Date, Map, Set 등 복잡한 타입도 복제 가능합니다.

코드 예제

const original = {
  date: new Date(),
  map: new Map([["key", "value"]]),
  nested: { data: [1, 2, 3] }
};

const cloned = structuredClone(original);
cloned.nested.data.push(4);
console.log(original.nested.data); // [1, 2, 3]

설명

structuredClone()은 순환 참조도 처리하며 깊은 복사를 수행합니다. 원본 객체는 변경되지 않고 독립적인 복사본이 생성됩니다.

---

4. Factory 함수와 Prototype

개요

Factory 함수와 Prototype 패턴을 결합하여 유연한 객체 생성 시스템을 구축합니다. 메모리 효율성과 성능을 동시에 확보합니다.

코드 예제

const animalMethods = {
  eat() { return `${this.name} is eating`; },
  sleep() { return `${this.name} is sleeping`; }
};

function createAnimal(name: string, species: string) {
  return Object.assign(Object.create(animalMethods), { name, species });
}

const lion = createAnimal("Simba", "Lion");

설명

메서드는 프로토타입에 한 번만 정의되어 메모리를 절약하고, 각 인스턴스는 고유한 속성만 가집니다.

---

5. Mixin 패턴 활용

개요

여러 프로토타입의 기능을 조합하여 객체를 확장하는 Mixin 패턴입니다. 다중 상속과 유사한 효과를 얻을 수 있습니다.

코드 예제

const canFly = { fly() { return "Flying!"; } };
const canSwim = { swim() { return "Swimming!"; } };

function mixin(target: any, ...sources: any[]) {
  return Object.assign(target, ...sources);
}

const duck = mixin({ name: "Donald" }, canFly, canSwim);
console.log(duck.fly(), duck.swim());

설명

Object.assign()으로 여러 소스 객체의 메서드를 하나의 타겟 객체에 병합합니다. 코드 재사용성이 극대화됩니다.

---

6. 성능 최적화 패턴

개요

Prototype 패턴을 활용한 객체 풀링으로 반복적인 객체 생성 비용을 줄입니다. 게임이나 대량 데이터 처리에 효과적입니다.

코드 예제

class ObjectPool {
  private pool: any[] = [];

  acquire(prototype: any) {
    return this.pool.pop() || Object.create(prototype);
  }

  release(obj: any) {
    Object.keys(obj).forEach(key => delete obj[key]);
    this.pool.push(obj);
  }
}

설명

객체를 재사용하여 가비지 컬렉션 부담을 줄입니다. acquire()로 객체를 꺼내고 release()로 풀에 반환합니다.

---

7. Proxy와 Prototype

개요

ES6 Proxy를 결합하여 프로토타입 접근을 제어하고 동적 동작을 추가합니다. 속성 접근, 수정, 삭제를 인터셉트할 수 있습니다.

코드 예제

const prototypeObj = { version: "1.0" };

const handler = {
  get(target: any, prop: string) {
    console.log(`Accessing: ${prop}`);
    return target[prop];
  }
};

const proxied = new Proxy(Object.create(prototypeObj), handler);
console.log(proxied.version); // Logs: "Accessing: version"

설명

Proxy는 프로토타입 체인의 모든 접근을 가로채서 로깅, 검증, 캐싱 등의 부가 기능을 추가할 수 있습니다.

---

8. WeakMap 기반 프라이빗 데이터

개요

WeakMap과 Prototype을 결합하여 진정한 프라이빗 데이터를 구현합니다. 메모리 누수 없이 은닉성을 확보합니다.

코드 예제

const privateData = new WeakMap();

class SecureUser {
  constructor(name: string, password: string) {
    privateData.set(this, { password });
    this.name = name;
  }

  authenticate(pwd: string) {
    return privateData.get(this).password === pwd;
  }
}

설명

WeakMap의 키는 약한 참조로 저장되어 객체가 사라지면 자동으로 메모리에서 제거됩니다. password는 외부에서 접근 불가능합니다.

---

9. 함수형 Prototype 패턴

개요

함수형 프로그래밍 스타일로 Prototype 패턴을 구현합니다. 불변성과 순수 함수를 유지하면서 객체를 복제합니다.

코드 예제

const createPrototype = <T extends object>(proto: T) => ({
  clone: (overrides: Partial<T> = {}) => ({
    ...proto,
    ...overrides,
    clone: createPrototype({...proto, ...overrides}).clone
  })
});

const userProto = createPrototype({ name: "Guest", role: "user" });
const admin = userProto.clone({ role: "admin" });

설명

제네릭과 스프레드 연산자로 타입 안전한 복제 함수를 구현합니다. 모든 복제본은 독립적이며 불변성을 유지합니다.

---

10. 조건부 Prototype 체인

개요

런타임에 프로토타입 체인을 동적으로 변경하여 객체의 동작을 상황에 따라 조정합니다. Object.setPrototypeOf()를 활용합니다.

코드 예제

const normalMode = { display() { return "Normal"; } };
const debugMode = { display() { return "Debug"; } };

class App {
  constructor(private mode = normalMode) {
    Object.setPrototypeOf(this, mode);
  }

  switchMode(newMode: any) {
    Object.setPrototypeOf(this, newMode);
  }
}

설명

Object.setPrototypeOf()로 런타임에 프로토타입을 교체하여 Strategy 패턴과 유사한 효과를 얻습니다. 성능에 주의하여 사용해야 합니다.

---

11. Prototype 체이닝 최적화

개요

프로토타입 체인 탐색을 최적화하여 속성 접근 성능을 향상시킵니다. hasOwnProperty()와 in 연산자를 전략적으로 사용합니다.

코드 예제

class OptimizedPrototype {
  private cache = new Map<string, any>();

  get(prop: string) {
    if (this.cache.has(prop)) return this.cache.get(prop);

    const value = (this as any)[prop];
    this.cache.set(prop, value);
    return value;
  }
}

설명

프로토타입 체인 탐색 결과를 캐싱하여 반복적인 접근 비용을 줄입니다. Map을 사용해 O(1) 조회 성능을 보장합니다.

---

12. Symbol을 활용한 Prototype

개요

Symbol을 사용하여 프로토타입 메서드의 이름 충돌을 방지하고 진정한 프라이빗 메서드를 구현합니다.

코드 예제

const cloneSymbol = Symbol('clone');
const validateSymbol = Symbol('validate');

class Entity {
  [cloneSymbol]() {
    return Object.create(Object.getPrototypeOf(this));
  }

  [validateSymbol]() { return true; }

  publicClone() { return this[cloneSymbol](); }
}

설명

Symbol로 정의된 메서드는 일반적인 속성 열거에서 제외되며 외부에서 직접 접근하기 어렵습니다. 프레임워크 개발에 유용합니다.

---

마치며

이번 글에서는 Prototype Pattern 최신 기능 완벽 가이드에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#JavaScript #Prototype #ObjectCloning #DesignPattern #Performance