🎧

오늘은 싱글턴패턴에 대해 알아볼 것입니다.

프론트엔드에서 디자인 패턴이란 반복적으로 발생하는 문제를 효과적으로 해결하기 위한 "검증된 코드 구조나 설계 방식"을 의미합니다.

즉, 어떤 기능이나 구조를 만들 때 좀 더 나은 설계와 유지보수를 위해 사용할 수 있는

"코딩 방식의 정석"이라고 할 수 있습니다.

말로만 들어서는 어떤 걸 의미하는지 와닿지 않기도 합니다.

아래 설명과 예제 코드를 보며 1. 싱글턴 패턴에 대해 알아봅시다.

프론트엔드 개발 실무에서는 어떻게 적용하면 좋을지도 같이 알아보도록 하겠습니다.

싱글턴 패턴 (Singleton Pattern)

싱글턴 패턴은 애플리케이션에서 단 하나의 인스턴스만 존재하도록 보장하는 생성 패턴(Creational Pattern)입니다.

주로 *환경 설정, 앱의 전역 상태, 공용 리소스 등을 한 곳에서 관리해야 할 때 사용됩니다.

여기서 잠깐! 왜 환경설정, 앱 전역, 공용리소스에 사용할까?

1. 일관된 상태 관리
예: 로그인 상태, 사용자 설정, 테마, 언어 등이런 정보는 앱 전체에서 일관되게 유지되어야 합니다.
여러 컴포넌트에서 동일한 정보가 필요한데,각각의 컴포넌트가 이 정보를 따로 관리하면 데이터 불일치, 버그 발생 가능성이 큽니다.
📌 Singleton 패턴으로 하나의 전역 인스턴스에서 관리하면 항상 동일한 상태를 참조할 수 있습니다.

2. 불필요한 중복 제거
공용 리소스 (예: API 인스턴스, DB 커넥션, WebSocket 연결 등)는하나만 있으면 되는데 여러 개 만들면
메모리 낭비성능 저하불필요한 네트워크 트래픽 유발 가능성
📌 이런 경우에도 하나의 인스턴스만 생성되도록 제한하는 Singleton 패턴이 효과적입니다.

3. 중앙 집중식 관리 → 유지보수 편리
환경 설정, 공통 로직, 전역 상태 등을 여기저기 흩뿌려두면…
나중에 수정하려면 모든 파일을 찾아다녀야 함실수로 다른 곳에서 설정을 덮어쓸 수 있음
📌 전역에서 접근 가능한 단 하나의 인스턴스로 통제하면,중앙에서 쉽게 관리하고 수정 사항도 한 군데만 변경하면 끝입니다.

4. 클라이언트가 늘어나도 동일한 인스턴스를 공유
프론트엔드 앱에서는 사용자 상호작용에 따라 여러 컴포넌트, 페이지가 동시에 생기고 사라집니다.
이때도 매번 인스턴스를 새로 생성하지 않고하나의 고정된 인스턴스를 계속 재사용하면
👉 성능상 이점 + 코드 간 연결성 유지

그럼 다시 본론으로 돌아와서!

싱글턴 패턴의 핵심 개념은

1. 인스턴스는 단 하나만 생성된다.

2. 외부에서 직접 생성자를 호출할 수 없다.

3. 항상 동일한 인스턴스를 반환하는 정적(static) 메서드를 제공한다.

일단 코드부터 보면서 이해해볼게요.

아래 코드는 싱글턴패턴의 Javascript 예제 코드입니다.

class Singleton {
  constructor() {
    if (Singleton.instance) {
      return console.warn(
        'Warning: Singleton class already instantiated'
      );
    }
    Singleton.instance = this;
    this.version = Date.now();
    this.config = 'test';
  }

  static getInstance() {
    if (!this.instance) {
      this.instance = new Singleton();
    }
    return this.instance;
  }
}

구조 설명

• 생성자(private or 제한적 접근)
  • 인스턴스를 외부에서 새로 만들지 못하도록 막습니다.
• 정적 프로퍼티(static instance)
  • 인스턴스를 메모리에 한 번만 생성하고 재사용합니다.
• 정적 메서드(static getInstance)
  • 인스턴스를 외부에서 접근할 수 있게 해줍니다. 새로운 인스턴스를 만들지 않고 기존 인스턴스를 반환합니다

그럼 위 작성된 코드를 호출해볼까요?

const s1 = new Singleton();
const s2 = new Singleton();

이렇게 호출하면 어떻게 될까요?

결과는..

const s1 = new Singleton(); // 정상 생성
const s2 = new Singleton(); // 경고 발생

Singleton { version: 1754567722799, config: 'test' }
Warning: Singleton class already instantiated
Singleton {}

첫번째 결과에는 Singleton의 instance가 나왔지만, 두번째 결과는 Warning을 뱉으며,

인스턴스를 찾지 못하는 것을 알 수 있습니다.

그 이유는

❌ constructor를 직접 호출하면 싱글턴의 규칙이 깨질 수 있습니다.

이 예제에서는 경고만 띄우지만, 실제로는 constructor를 private 또는 protected로 만들어 완전히 차단하는 것이 더 안전합니다. (TypeScript 등에서는 private constructor 사용 가능)

그럼 이제 제대로 호출을 해보겠습니다.

const s1 = Singleton.getInstance();
const s2 = Singleton.getInstance();

console.log(s1); // Singleton { version: ..., config: 'test' }
console.log(s2); // Singleton { version: ..., config: 'test' }
console.log(s1 === s2); // true

위 코드처럼 s1과 s2의 결과값이 같으며, 동등비교를 해도 true값이 나오며 동일한 인스턴스를

반환하는 것을 알 수 있네요!

* 항상 getInstance()를 통해 동일한 인스턴스에 접근해야 합니다.

보완 사항

1. 자바스크립트에서 생성자 차단하려면?

• 완벽히 차단은 불가능하지만, 관례적으로 직접 호출을 금지하는 구조를 만들 수 있습니다.
• TypeScript에서는 private constructor를 활용하여 명확하게 제어할 수 있습니다. 아래는 타입스크립트 예제 코드입니다.

class Singleton {
  private static instance: Singleton;

  private constructor() {
    // 외부에서 new Singleton()을 절대 못 씀
  }

  static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

• private constructor: 외부에서 new Singleton() 직접 호출 불가
• Java, C# 등 클래스 기반 언어의 싱글턴과 거의 유사한 방식으로 안전하게 구현 가능

2. 멀티스레드 환경이라면?

• Java, C++ 같은 언어에서는 동기화(Synchronized)를 고려해야 합니다.
• JS는 기본적으로 싱글 스레드이지만, WebWorker나 Node.js에서 멀티 프로세스를 쓸 경우 주의가 필요합니다.
• -> 멀티스레드에서는 여러 쓰레드가 동시에 getInstance()를 호출할 수 있고 두 개 이상의 인스턴스가 생성될 가능성이 있기 때문입니다.
• Java, C++ 등 멀티스레드 언어에선 동기화(Synchronization) 필요

public class Singleton {
  private static Singleton instance;

  public static synchronized Singleton getInstance() {
    if (instance == null) {
      instance = new Singleton();
    }
    return instance;
  }
}

• synchronized: 한 번에 하나의 스레드만 접근 허용
• Double-checked locking 등의 최적화도 사용함

그럼 싱글턴패턴은 여기까지 알아보도록 하겠습니다!

참고영상: Youtube 코딩문