Prototype Pattern 성능 최적화 가이드

객체 생성 비용이 높을 때 사용하는 Prototype Pattern의 개념부터 실전 최적화 기법까지 초급 개발자를 위한 완벽 가이드입니다. 실제 성능 비교와 함께 실무에서 바로 적용 가능한 예제를 제공합니다.

---

---

들어가며

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

목차

1. Prototype_Pattern_기본_개념
2. 얕은_복사_vs_깊은_복사
3. Prototype_Registry_패턴
4. 객체_복제_성능_비교
5. 복잡한_객체_프로토타입_최적화
6. 함수형_프로토타입_패턴
7. 배열_프로토타입_최적화
8. Immutable_Prototype_패턴
9. 프로토타입_체인_활용
10. 실전_캐싱_전략

---

1. Prototype Pattern 기본 개념

개요

Prototype Pattern은 기존 객체를 복제하여 새로운 객체를 생성하는 디자인 패턴입니다. 객체 생성 비용이 높을 때 유용합니다.

코드 예제

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

const original = new Prototype();
original.name = "원본";
const copy = original.clone();
console.log(copy.name); // "원본"

설명

Object.create()를 사용하여 원본 객체의 프로토타입을 상속받는 새로운 객체를 생성합니다. 이를 통해 빠르게 객체를 복제할 수 있습니다.

---

2. 얕은 복사 vs 깊은 복사

개요

얕은 복사는 참조만 복사하고, 깊은 복사는 값 자체를 복사합니다. 중첩 객체가 있을 때 주의가 필요합니다.

코드 예제

const original = { name: "원본", data: { value: 100 } };

// 얕은 복사
const shallow = { ...original };
shallow.data.value = 200;
console.log(original.data.value); // 200 (영향받음)

// 깊은 복사
const deep = structuredClone(original);
deep.data.value = 300;
console.log(original.data.value); // 200 (영향 없음)

설명

얕은 복사는 중첩 객체의 참조를 공유하지만, structuredClone()을 사용한 깊은 복사는 완전히 독립적인 객체를 생성합니다.

---

3. Prototype Registry 패턴

개요

미리 생성된 프로토타입 객체들을 저장하고 필요할 때 복제하여 사용하는 레지스트리 패턴입니다.

코드 예제

class PrototypeRegistry {
  constructor() {
    this.prototypes = {};
  }

  register(key, prototype) {
    this.prototypes[key] = prototype;
  }

  create(key) {
    return structuredClone(this.prototypes[key]);
  }
}

const registry = new PrototypeRegistry();
registry.register('user', { type: 'user', permissions: [] });
const newUser = registry.create('user');

설명

자주 사용되는 객체 템플릿을 레지스트리에 저장해두고, 필요할 때마다 복제하여 사용하므로 초기화 비용을 절약할 수 있습니다.

---

4. 객체 복제 성능 비교

개요

다양한 복제 방법의 성능을 비교하여 상황에 맞는 최적의 방법을 선택할 수 있습니다.

코드 예제

const obj = { name: "test", value: 123, nested: { x: 1 } };

// 방법 1: Spread (빠름, 얕은 복사)
const copy1 = { ...obj };

// 방법 2: Object.assign (빠름, 얕은 복사)
const copy2 = Object.assign({}, obj);

// 방법 3: structuredClone (느림, 깊은 복사)
const copy3 = structuredClone(obj);

// 방법 4: JSON (중간, 깊은 복사, 제한적)
const copy4 = JSON.parse(JSON.stringify(obj));

설명

단순 객체는 Spread나 Object.assign을 사용하고, 중첩 객체는 structuredClone()을 사용하는 것이 좋습니다.

---

5. 복잡한 객체 프로토타입 최적화

개요

복잡한 초기화 로직을 가진 객체를 프로토타입 패턴으로 최적화하여 생성 비용을 줄입니다.

코드 예제

class HeavyObject {
  constructor() {
    this.data = new Array(1000).fill(0);
    this.config = { /* 복잡한 설정 */ };
  }

  clone() {
    const cloned = Object.create(Object.getPrototypeOf(this));
    cloned.data = [...this.data];
    cloned.config = { ...this.config };
    return cloned;
  }
}

const prototype = new HeavyObject();
const instance = prototype.clone(); // 빠른 복제

설명

무거운 초기화는 한 번만 수행하고, 이후에는 clone() 메서드로 빠르게 복제하여 성능을 크게 향상시킵니다.

---

6. 함수형 프로토타입 패턴

개요

클래스 없이 함수와 클로저를 활용하여 프로토타입 패턴을 구현할 수 있습니다.

코드 예제

function createPrototype(baseConfig) {
  return function create(overrides = {}) {
    return {
      ...baseConfig,
      ...overrides,
      createdAt: new Date()
    };
  };
}

const userFactory = createPrototype({ role: 'user', active: true });
const user1 = userFactory({ name: 'Alice' });
const user2 = userFactory({ name: 'Bob' });

설명

팩토리 함수를 사용하여 기본 설정을 유지하면서 필요한 속성만 오버라이드하는 깔끔한 패턴입니다.

---

7. 배열 프로토타입 최적화

개요

대량의 유사한 객체를 생성할 때 프로토타입 패턴으로 메모리와 성능을 최적화합니다.

코드 예제

const template = {
  type: 'product',
  stock: 0,
  price: 0,
  calcTotal(qty) { return this.price * qty; }
};

const products = ['A', 'B', 'C'].map(name => ({
  ...template,
  name,
  price: Math.random() * 100
}));

console.log(products[0].calcTotal(5));

설명

공통 속성과 메서드를 템플릿으로 만들고, 개별 속성만 변경하여 대량의 객체를 효율적으로 생성합니다.

---

8. Immutable Prototype 패턴

개요

불변 객체를 프로토타입으로 사용하여 안전하고 예측 가능한 코드를 작성할 수 있습니다.

코드 예제

const createImmutablePrototype = (base) => {
  return Object.freeze({ ...base });
};

const baseConfig = createImmutablePrototype({
  apiUrl: 'https://api.example.com',
  timeout: 5000
});

const devConfig = { ...baseConfig, apiUrl: 'http://localhost:3000' };
// baseConfig.timeout = 10000; // 에러 발생 (frozen)

설명

Object.freeze()로 프로토타입 객체를 불변으로 만들어 의도치 않은 수정을 방지하고, 복제 시에만 변경 가능합니다.

---

9. 프로토타입 체인 활용

개요

JavaScript의 프로토타입 체인을 활용하여 메모리 효율적인 상속 구조를 만듭니다.

코드 예제

const animal = {
  eat() { console.log('먹는 중...'); }
};

const dog = Object.create(animal);
dog.bark = function() { console.log('멍멍!'); };

const myDog = Object.create(dog);
myDog.name = '바둑이';

myDog.eat();  // "먹는 중..." (animal에서 상속)
myDog.bark(); // "멍멍!" (dog에서 상속)

설명

Object.create()로 프로토타입 체인을 구성하면 메서드를 공유하여 메모리를 절약하고 효율적인 상속을 구현합니다.

---

10. 실전 캐싱 전략

개요

프로토타입 패턴과 캐싱을 결합하여 반복적인 객체 생성의 성능을 극대화합니다.

코드 예제

class CachedPrototype {
  constructor() {
    this.cache = new Map();
  }

  create(key, factory) {
    if (!this.cache.has(key)) {
      this.cache.set(key, factory());
    }
    return structuredClone(this.cache.get(key));
  }
}

const cache = new CachedPrototype();
const user = cache.create('admin', () => ({ role: 'admin', level: 5 }));

설명

생성 비용이 높은 객체를 캐시에 저장하고, 요청 시 복제하여 반환함으로써 성능과 메모리를 동시에 최적화합니다.

---

마치며

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

관련 태그

#JavaScript #PrototypePattern #DesignPatterns #Performance #Cloning