JavaScript 디자인 패턴 | 싱글톤, 팩토리, 옵저버 패턴
이 글의 핵심
JavaScript 디자인 패턴: 싱글톤, 팩토리, 옵저버 패턴. 싱글톤 패턴 (Singleton)·팩토리 패턴 (Factory).
들어가며
디자인 패턴이란?
디자인 패턴(Design Pattern)은 반복되는 설계 문제에 대해 이름 붙여 둔 검증된 해결 템플릿입니다. 팀 안에서 “팩토리 쓰자”처럼 짧게 의사소통할 때도 도움이 됩니다. 패턴을 알아 두면 좋은 이유:
- ✅ 검증된 해결책: 이미 검증된 방법
- ✅ 코드 품질: 유지보수 쉬움
- ✅ 의사소통: 개발자 간 공통 언어
- ✅ 재사용성: 다양한 상황에 적용
실전 경험에서 배운 교훈
이 기술을 실무 프로젝트에 처음 도입했을 때, 공식 문서만으로는 알 수 없었던 많은 함정들이 있었습니다. 특히 프로덕션 환경에서 발생하는 엣지 케이스들은 로컬 개발 환경에서는 재현조차 되지 않았죠.
가장 어려웠던 점은 성능 최적화였습니다. 처음엔 “동작만 하면 되겠지”라고 생각했지만, 실제 사용자 트래픽이 몰리면서 병목 지점들이 하나씩 드러났습니다. 특히 데이터베이스 쿼리 최적화, 캐싱 전략, 에러 핸들링 구조 등은 여러 번의 장애를 겪으면서 개선해 나갔습니다.
이 글에서는 그런 시행착오를 통해 얻은 실전 노하우와, “이렇게 하면 안 된다”는 교훈들을 함께 정리했습니다. 특히 트러블슈팅 섹션은 실제 장애 대응 경험을 바탕으로 작성했으니, 비슷한 문제를 마주했을 때 참고하시면 도움이 될 것입니다.
1. 싱글톤 패턴 (Singleton)
개념
하나의 인스턴스만 생성하고 전역에서 접근 가능하게 합니다.
구현
class Database {
constructor() {
if (Database.instance) {
return Database.instance;
}
this.connection = null;
Database.instance = this;
}
connect() {
if (!this.connection) {
this.connection = "DB 연결됨";
console.log(this.connection);
}
return this.connection;
}
}
// 사용
const db1 = new Database();
const db2 = new Database();
console.log(db1 === db2); // true (같은 인스턴스)
db1.connect(); // DB 연결됨
db2.connect(); // (이미 연결됨)모던 방식 (ES6 Module)
// database.js
class Database {
constructor() {
this.connection = null;
}
connect() {
if (!this.connection) {
this.connection = "DB 연결됨";
}
return this.connection;
}
}
export default new Database();// main.js
import db from './database.js';
db.connect();2. 팩토리 패턴 (Factory)
개념
객체 생성 로직을 캡슐화하여 유연하게 객체를 생성합니다.
구현
class User {
constructor(name, role) {
this.name = name;
this.role = role;
}
getPermissions() {
return [];
}
}
class Admin extends User {
getPermissions() {
return ['read', 'write', 'delete'];
}
}
class Guest extends User {
getPermissions() {
return ['read'];
}
}
class Member extends User {
getPermissions() {
return ['read', 'write'];
}
}
// Factory
class UserFactory {
static createUser(name, role) {
switch (role) {
case 'admin':
return new Admin(name, role);
case 'member':
return new Member(name, role);
case 'guest':
return new Guest(name, role);
default:
throw new Error(`알 수 없는 역할: ${role}`);
}
}
}
// 사용
const admin = UserFactory.createUser("홍길동", "admin");
console.log(admin.getPermissions()); // ['read', 'write', 'delete']
const guest = UserFactory.createUser("손님", "guest");
console.log(guest.getPermissions()); // ['read']3. 모듈 패턴 (Module)
개념
캡슐화를 통해 private 변수와 public 메서드를 구분합니다.
구현 (IIFE)
const Counter = (function() {
// Private 변수
let count = 0;
// Private 함수
function log() {
console.log(`현재 카운트: ${count}`);
}
// Public API
return {
increment() {
count++;
log();
},
decrement() {
count--;
log();
},
getCount() {
return count;
}
};
})();
// 사용
Counter.increment(); // 현재 카운트: 1
Counter.increment(); // 현재 카운트: 2
console.log(Counter.getCount()); // 2
console.log(Counter.count); // undefined (private)모던 방식 (ES6 Class)
class Counter {
#count = 0; // Private field
increment() {
this.#count++;
this.#log();
}
decrement() {
this.#count--;
this.#log();
}
getCount() {
return this.#count;
}
#log() {
console.log(`현재 카운트: ${this.#count}`);
}
}
const counter = new Counter();
counter.increment(); // 현재 카운트: 1
console.log(counter.getCount()); // 1
console.log(counter.#count); // SyntaxError (private)4. 옵저버 패턴 (Observer)
개념
객체의 상태 변화를 구독자들에게 알립니다.
구현
class Subject {
constructor() {
this.observers = [];
}
subscribe(observer) {
this.observers.push(observer);
}
unsubscribe(observer) {
this.observers = this.observers.filter(obs => obs !== observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
class Observer {
constructor(name) {
this.name = name;
}
update(data) {
console.log(`${this.name}이(가) 알림 받음:`, data);
}
}
// 사용
const subject = new Subject();
const observer1 = new Observer("관찰자1");
const observer2 = new Observer("관찰자2");
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify("새 데이터!");
// 관찰자1이(가) 알림 받음: 새 데이터!
// 관찰자2이(가) 알림 받음: 새 데이터!
subject.unsubscribe(observer1);
subject.notify("또 다른 데이터");
// 관찰자2이(가) 알림 받음: 또 다른 데이터실전 예제: 이벤트 시스템
class EventEmitter {
constructor() {
this.events = {};
}
on(event, listener) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(listener);
}
off(event, listener) {
if (!this.events[event]) return;
this.events[event] = this.events[event].filter(l => l !== listener);
}
emit(event, data) {
if (!this.events[event]) return;
this.events[event].forEach(listener => listener(data));
}
once(event, listener) {
const wrapper = (data) => {
listener(data);
this.off(event, wrapper);
};
this.on(event, wrapper);
}
}
// 사용
const emitter = new EventEmitter();
function onUserLogin(user) {
console.log(`${user.name} 로그인`);
}
emitter.on('login', onUserLogin);
emitter.on('login', (user) => {
console.log(`환영합니다, ${user.name}님!`);
});
emitter.emit('login', { name: '홍길동' });
// 홍길동 로그인
// 환영합니다, 홍길동님!
// once: 한 번만 실행
emitter.once('logout', (user) => {
console.log(`${user.name} 로그아웃`);
});
emitter.emit('logout', { name: '홍길동' }); // 홍길동 로그아웃
emitter.emit('logout', { name: '홍길동' }); // (실행 안 됨)5. 프록시 패턴 (Proxy)
개념
객체에 대한 접근을 제어하거나 추가 기능을 제공합니다.
구현 (ES6 Proxy)
const user = {
name: "홍길동",
age: 25,
email: "[email protected]"
};
const handler = {
get(target, prop) {
console.log(`${prop} 읽기`);
return target[prop];
},
set(target, prop, value) {
console.log(`${prop}을(를) ${value}로 설정`);
// 유효성 검사
if (prop === 'age' && typeof value !== 'number') {
throw new TypeError("나이는 숫자여야 합니다");
}
target[prop] = value;
return true;
}
};
const proxyUser = new Proxy(user, handler);
console.log(proxyUser.name); // name 읽기 -> 홍길동
proxyUser.age = 26; // age을(를) 26로 설정
// proxyUser.age = "26"; // TypeError실전 예제: 캐싱 프록시
function createCachedFunction(fn) {
const cache = new Map();
return new Proxy(fn, {
apply(target, thisArg, args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
console.log("캐시에서 반환");
return cache.get(key);
}
console.log("계산 중...");
const result = target.apply(thisArg, args);
cache.set(key, result);
return result;
}
});
}
// 사용
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
const cachedFib = createCachedFunction(fibonacci);
console.log(cachedFib(10)); // 계산 중....-> 55
console.log(cachedFib(10)); // 캐시에서 반환 -> 556. 전략 패턴 (Strategy)
개념
알고리즘을 캡슐화하여 런타임에 선택할 수 있게 합니다.
구현
// 전략들
class CreditCardStrategy {
pay(amount) {
console.log(`신용카드로 ${amount}원 결제`);
}
}
class PayPalStrategy {
pay(amount) {
console.log(`PayPal로 ${amount}원 결제`);
}
}
class CryptoStrategy {
pay(amount) {
console.log(`암호화폐로 ${amount}원 결제`);
}
}
// Context
class PaymentContext {
constructor(strategy) {
this.strategy = strategy;
}
setStrategy(strategy) {
this.strategy = strategy;
}
executePayment(amount) {
this.strategy.pay(amount);
}
}
// 사용
const payment = new PaymentContext(new CreditCardStrategy());
payment.executePayment(10000); // 신용카드로 10000원 결제
payment.setStrategy(new PayPalStrategy());
payment.executePayment(20000); // PayPal로 20000원 결제7. 실전 예제: 상태 관리
class Store {
constructor(initialState = {}) {
this.state = initialState;
this.listeners = [];
}
getState() {
return this.state;
}
setState(newState) {
this.state = { ...this.state, ...newState };
this.notify();
}
subscribe(listener) {
this.listeners.push(listener);
return () => {
this.listeners = this.listeners.filter(l => l !== listener);
};
}
notify() {
this.listeners.forEach(listener => listener(this.state));
}
}
// 사용
const store = new Store({ count: 0, user: null });
const unsubscribe = store.subscribe((state) => {
console.log("상태 변경:", state);
});
store.setState({ count: 1 });
// 상태 변경: { count: 1, user: null }
store.setState({ user: { name: "홍길동" } });
// 상태 변경: { count: 1, user: { name: "홍길동" } }
unsubscribe(); // 구독 해제정리
핵심 요약
- 싱글톤: 하나의 인스턴스
- 팩토리: 객체 생성 캡슐화
- 모듈: private/public 구분
- 옵저버: 상태 변화 알림
- 프록시: 접근 제어
- 전략: 알고리즘 교체
다음 단계
- TypeScript 시작하기
- React 디자인 패턴
- Node.js 디자인 패턴
관련 글
심화 부록: 구현·운영 관점
이 부록은 앞선 본문에서 다룬 주제(「JavaScript 디자인 패턴 | 싱글톤, 팩토리, 옵저버 패턴」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.
내부 동작과 핵심 메커니즘
flowchart TD A[입력·요청·이벤트] --> B[파싱·검증·디코딩] B --> C[핵심 연산·상태 전이] C --> D[부작용: I/O·네트워크·동시성] D --> E[결과·관측·저장]
sequenceDiagram participant C as 클라이언트/호출자 participant B as 경계(런타임·게이트웨이·프로세스) participant D as 의존성(API·DB·큐·파일) C->>B: 요청/이벤트 B->>D: 조회·쓰기·RPC D-->>B: 지연·부분 실패·재시도 가능 B-->>C: 응답 또는 오류(코드·상관 ID)
- 불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
- 결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
- 경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
- 백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.
프로덕션 운영 패턴
| 영역 | 운영 관점 질문 |
|---|---|
| 관측성 | 요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가 |
| 안전성 | 입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가 |
| 신뢰성 | 재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가 |
| 성능 | 캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가 |
| 배포 | 롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가 |
| 용량 | 피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가 |
스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.
확장 예시: 엔드투엔드 미니 시나리오
앞선 본문 주제(「JavaScript 디자인 패턴 | 싱글톤, 팩토리, 옵저버 패턴」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.
- 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
- 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
- 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
- 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
- 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.
handle(request):
ctx = newCorrelationId()
validated = validateSchema(request)
authorize(validated, ctx)
result = domainCore(validated)
persistOrEmit(result, idempotentKey)
recordMetrics(ctx, latency, outcome)
return result문제 해결(Troubleshooting)
| 증상 | 가능 원인 | 조치 |
|---|---|---|
| 간헐적 실패 | 레이스, 타임아웃, 외부 의존성, DNS | 최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검 |
| 성능 저하 | N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스 | 프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거 |
| 메모리 증가 | 캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납 | 상한·TTL·힙/FD 스냅샷 비교 |
| 빌드·배포만 실패 | 환경 변수, 권한, 플랫폼 차이, lockfile | CI 로그와 로컬 diff, 런타임·이미지 버전 핀 |
| 설정 불일치 | 프로필·시크릿·기본값, 리전 | 스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화 |
| 데이터 불일치 | 비멱등 재시도, 부분 쓰기, 캐시 무효화 누락 | 멱등 키·아웃박스·트랜잭션 경계 재검토 |
권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.
배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.
자주 묻는 질문 (FAQ)
Q. 이 내용을 실무에서 언제 쓰나요?
A. JavaScript 디자인 패턴: 싱글톤, 팩토리, 옵저버 패턴. 싱글톤 패턴 (Singleton)·팩토리 패턴 (Factory)로 흐름을 잡고 원리·코드·실무 적용을 한글로 정리합니다. Start now. 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.
Q. 선행으로 읽으면 좋은 글은?
A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. JavaScript 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.
Q. 더 깊이 공부하려면?
A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.
같이 보면 좋은 글 (내부 링크)
이 주제와 연결되는 다른 글입니다.
- Java 클래스와 객체 | OOP, 상속, 인터페이스
- JavaScript 에러 처리 | try-catch, Error 객체, 커스텀 에러
- Kotlin 테스팅 | JUnit, MockK, 테스트 작성법
이 글에서 다루는 키워드 (관련 검색어)
JavaScript, 디자인패턴, 싱글톤, 팩토리, 옵저버, 프록시 등으로 검색하시면 이 글이 도움이 됩니다.