디자인 패턴은 소프트웨어 공학에서 반복적으로 발생하는 문제에 대한 일반적인 해결책을 제공합니다. JavaScript에서도 다양한 디자인 패턴이 사용되며, 이 패턴들을 통해 코드의 구조를 개선하고 유지보수를 용이하게 할 수 있습니다. 이번 글에서는 자주 사용되는 JavaScript의 디자인 패턴인 모듈 패턴, 싱글톤 패턴 등을 설명합니다.
1. 모듈 패턴 (Module Pattern)
모듈 패턴은 코드를 여러 개의 독립적인 모듈로 나누어 유지보수를 쉽게 하고 코드의 재사용성을 높입니다. 이 패턴은 클로저를 이용하여 구현됩니다.
사용 예시
javascript코드 복사const Module = (function() {
// 비공개 변수와 함수
let privateVariable = 'I am private';
function privateMethod() {
console.log(privateVariable);
}
return {
// 공개 변수와 함수
publicMethod: function() {
privateMethod();
}
};
})();
Module.publicMethod(); // I am private
console.log(Module.privateVariable); // undefined
설명
- 비공개 변수와 함수: 모듈 내부에서만 접근 가능.
- 공개 변수와 함수: 모듈 외부에서 접근 가능.
2. 싱글톤 패턴 (Singleton Pattern)
싱글톤 패턴은 클래스의 인스턴스를 하나만 만들도록 보장합니다. 전역 변수를 사용하지 않고 전역적으로 접근할 수 있는 단일 인스턴스를 제공하여, 애플리케이션에서 공유 자원을 관리하는 데 유용합니다.
사용 예시
javascript코드 복사const Singleton = (function() {
let instance;
function createInstance() {
const object = new Object('I am the instance');
return object;
}
return {
getInstance: function() {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true
설명
- createInstance 함수: 새로운 인스턴스를 생성.
- getInstance 함수: 인스턴스가 이미 존재하면 그 인스턴스를 반환하고, 존재하지 않으면 새로운 인스턴스를 생성하여 반환.
3. 퍼사드 패턴 (Facade Pattern)
퍼사드 패턴은 복잡한 시스템의 인터페이스를 단순화하여 제공합니다. 여러 개의 복잡한 하위 시스템에 접근하는 단일 인터페이스를 제공합니다.
사용 예시
javascript코드 복사const Module1 = {
methodA: function() {
console.log('Method A from Module 1');
}
};
const Module2 = {
methodB: function() {
console.log('Method B from Module 2');
}
};
const Facade = {
doSomething: function() {
Module1.methodA();
Module2.methodB();
}
};
Facade.doSomething(); // Method A from Module 1
// Method B from Module 2
설명
- 퍼사드 객체: 여러 개의 모듈을 감싸고 단순화된 인터페이스를 제공.
4. 옵저버 패턴 (Observer Pattern)
옵저버 패턴은 객체의 상태 변화에 따라 다른 객체들(옵저버들)이 자동으로 알림을 받도록 하는 패턴입니다. 주로 이벤트 핸들링 시스템에서 사용됩니다.
사용 예시
javascript코드 복사function Subject() {
this.observers = [];
}
Subject.prototype = {
subscribe: function(fn) {
this.observers.push(fn);
},
unsubscribe: function(fnToRemove) {
this.observers = this.observers.filter(fn => fn !== fnToRemove);
},
notify: function() {
this.observers.forEach(fn => fn());
}
};
const subject = new Subject();
function Observer1() {
console.log('Observer 1 notified');
}
function Observer2() {
console.log('Observer 2 notified');
}
subject.subscribe(Observer1);
subject.subscribe(Observer2);
subject.notify();
// Observer 1 notified
// Observer 2 notified
subject.unsubscribe(Observer1);
subject.notify();
// Observer 2 notified
설명
- Subject 객체: 관찰 대상 객체. 옵저버들을 관리하고 상태 변화 시 알림.
- subscribe 메서드: 옵저버를 추가.
- unsubscribe 메서드: 옵저버를 제거.
- notify 메서드: 모든 옵저버에게 알림.
5. 팩토리 패턴 (Factory Pattern)
팩토리 패턴은 객체 생성 코드를 캡슐화하여 객체 생성의 로직을 한 곳에서 관리합니다. 생성할 객체의 구체적인 클래스를 숨기고 인터페이스를 통해 객체를 생성합니다.
사용 예시
javascript코드 복사function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
function Truck(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
const VehicleFactory = {
createVehicle: function(type, make, model, year) {
switch(type) {
case 'car':
return new Car(make, model, year);
case 'truck':
return new Truck(make, model, year);
}
}
};
const car = VehicleFactory.createVehicle('car', 'Toyota', 'Corolla', 2021);
const truck = VehicleFactory.createVehicle('truck', 'Ford', 'F-150', 2022);
console.log(car); // Car { make: 'Toyota', model: 'Corolla', year: 2021 }
console.log(truck); // Truck { make: 'Ford', model: 'F-150', year: 2022 }
설명
- VehicleFactory 객체: 객체 생성 로직을 캡슐화하여, 특정 조건에 따라 다른 객체를 생성.
결론
JavaScript에서 디자인 패턴을 사용하는 것은 코드의 구조를 개선하고 유지보수를 용이하게 하는 데 큰 도움이 됩니다. 모듈 패턴, 싱글톤 패턴, 퍼사드 패턴, 옵저버 패턴, 팩토리 패턴 등은 각각의 목적과 용도에 따라 적절히 사용될 수 있습니다. 다양한 디자인 패턴을 이해하고 활용함으로써 더욱 효율적이고 관리하기 쉬운 코드를 작성할 수 있습니다.