디자인 패턴 중 하나인 싱글톤 패턴.
요약:
전역적으로 사용할 수 있는 유일한 인스턴스를 생성하는 패턴.
설명:
싱글톤 패턴은 특정 인스턴스가 오직 하나만 존재하도록 보장하는 소프트웨어 설계 패턴이다. 전역 변수를 사용하지 않고도 해당 객체를 전역적으로 접근 할 수 있게 되며 공유 자원에 대한 동시 접근을 제어할 수 있다.
보통 싱글톤 패턴에 대해 설명할때 클래스를 기반으로 설명하는데 자바스크립트를 사용하는 이상 굳이 클래스를 쓰지 않아도 된다. 이는 자바스크립트가 프로토타입 기반의 언어이기 때문. 자바스크립트의 일반적인 함수와 객체, 클로저를 사용해서 구현이 가능하다.
class 문법을 이용한 싱글톤
기본예시:
Singleton 클래스를 만들어 만약 instance가 있는 경우에는 return instance를 통해 새로운 클래스가 생성되지 않도록 막고 있다.
data를 받지 않을 시 기본 데이터로 “Initial data”를 주고 있다.
기본적인 getData, setData 함수를 통해 Singleton 클래스 안에서 값을 가져오고, 업데이트 하는 기능을 제공한다.
사용 예시:
Singleton 클래스를 import 해와서 singleton 이라는 변수에 저장한다. 저장 함과 동시에 “First data” 라는 스트링을 전달해 Singleton의 constructor를 통해 this 바인딩을 통해 data = “First data”가 된다.
그래서 콘솔에 처음 찍히는 getData함수는 “First data”가 되고 Singeton은 새로운 변수에 저장하더라도 여전히 “First data” 라는 data 값을 갖고 있다.
이후 setData 함수를 통해 “Updated data” 라는 값을 갖게 되고
anotherSingleton 이라는 변수에 Singleton을 새로운 값으로 호출해도 이미 instance가 존재하기에 원래의 instance를 그대로 반환하게 된다.
그래서 콘솔 에 찍히는 값이 주석 값이 되는것이다.
생성자를 이용한 싱글톤 패턴, class 문법 X
함수, 생성자 그리고 프로토타입을 사용하면 class 없이 싱글톤 패턴을 구현할 수 있다. (사실 이게 원조입니다, class 문법은 ES6부터 추가됨)
기본 예시:
class랑 마찬가지로 Singleton이라는 함수를 만들어 인스턴스가 존재할 시 기존 인스턴스를 반환하고 있다. 역시나 data를 instance에 추가하고 있고 prototype을 통해 Singleton에 getData, setData라는 메소드를 추가한다. 이를 통해 Singleton 인스턴스가 생성될때 해당 메소드에 접근 할 수 있게 된다.
사용 예시:
사실 class 예시랑 너무 똑같아서 할 말이 없다. 이해 하셨을거라 믿습니다(누구든).
.
.
.
근데 사실 이해가 어려운건 즉시 실행 함수(표현식 함수)를 통해 만들어진 싱글톤 패턴이다(전 그랬음). 고로 그것도 추가 고.
즉시 실행 함수 싱글톤 패턴
이제 개념은 많이 했으니 바로 예시로.
기본 예시:
(function(){…})() 이게 기본적인 함수 표현식의 형태 인데 위의 예시에서는 Singleton 안에서 SingletonClass 라는 함수를 정의하고, 이를 반환한다.
즉, Singleton이라는 변수에 SingletonClass라는 인스턴스를 생성하는 함수를 저장한것이다.
어렵게 생각할 필요 없다. 구조 자체는 위에 쓴 예시랑 똑같다. 다른 점은 함수를 한번 감싼것 뿐! 이는 SingletonClass 함수를 내부에 캡슐화 했다는 뜻이다. SingletonClass 자체는 외부에서 직접 접근 할 수 없고 Singleton을 통해서만 인스턴스를 생성하거나 사용할 수 있다는 뜻이다.
사용 예시:
쨔잔 이번에도 사용 예시는 다를게 없습니다!
어떤 원리인지 다들 아실거라 믿고..
다시 한번 설명하자면 실제로 인스턴스를 생성하는 역할은 SingletonClass가 하고 있으나 Singleton 자체가 SingletonClass를 반환하기 때문에
let singleton = new Singleton("First data") 이렇게 쓰더라도 실 동작은
let singleton = new SingletonClass("First data") 이렇게 된다고 생각하면 된다.
이상 싱글톤 패턴에 대한 설명과 예시 끝!
정말 1년전에 처음 봤을때는 이게 뭔가 싶었는데 그래도 1년 지났다고 이제는 이해가 되네요.. (이게 되네..!)
이 글이 부디 다른 분들에게도 도움이 되었으면 좋겠고 저도 헷갈릴때마다 보러올것입니다. 제 체력이 허락하는대로 차츰차츰 다른 디자인 패턴도 정리해서 올려보려 합니다. 기대해주세요 (하지만 아무도 안봄)