Design Patterns Intro (in JS)
Singleton Pattern
개념
싱글톤 패턴은 싱글 오브젝트에 대해 클래스 인스턴스를 제한하는 것이다. 생성자가 여러번 호출되더라도 처음 생성된 first 인스턴스가 반환된다.
예시
버튼 클래스가 있고, 버튼이 눌릴 때마다 횟수를 카운트 하고 싶다. 버튼은 여러 개이며 각각 눌리는 횟수도 다를 것이다. 이 때에 각 버튼을 별개의 인스턴스로 만든다면 컴포넌트 간 관계나 교류가 복잡해진다. 이 때문에 카운트 state가 부정확해질 가능성도 있으며, 어떤 버튼 인스턴스의 state를 보여줘야 할지도 분명하지 않다.
그러나 버튼은 여러개이지만 한 개의 인스턴스만을 공유한다면, counter state는 한 곳에서 업데이트되며 따라서 간결하고 정확하게 state을 유지할 수 있고 이를 보여주기도 쉽다.
사용되는 곳
앵귤러(Angular)가 대표적으로 싱글톤 패턴을 사용하는 자바스크립트 프레임워크이다.
Observer Pattern
개념
서브젝트(subject)라고 불리는 오브젝트의 디자인 패턴이다. 서브젝트는 의존성을 관리하는 리스트(옵저버, observer)를 갖고 있으며 옵저버에게 상태 변화(state change)가 있을 때에 메서드 호출을 통해 알려주는 일을 한다.
예시
내가 좋아하는 작가의 차기작 출판을 기다리고 있다고 하자. 하지만 언제 나올 지 모르기 때문에 시시때때로 서점에 가서 차기작이 나왔는지 확인하고, 아직 출판되지 않았음을 확인하고 수확없이 집으로 돌아오는 일은 비효율적이다.
(자바스크립트로 치면 원하는 결과를 얻을 때까지 계속 loop하고 있는 것)
만약 내가 작가의 신작에 대한 state update를 받을 수 있도록 구독(subscribe)한다면, 신작이 출시되었을 때 나에게 알려줄 것이고, 나는 그 때에만 서점에 가서 책을 사면 된다.
단 이를 위해서는 내가 구독하기 원하는 이벤트를 서브젝트에게 알려줘야 하며, 새로운 데이터가 업데이트 되었을 때에 실행시킬 콜백함수를 제공해야 한다.
이 때 나는 일종의 옵저버가 되는 셈이며, 한 서브젝트에 대해 여러 옵저버가 있을 수 있다.
사용되는 곳
ReactiveX, RxJS 라이브러리는 비동기 데이터 스트림을 처리하는 api를 제공한다.
Facade Pattern
개념
facade는 frontage, face 등을 의미한다. 이는 건축물의 바깥을 의미하며 특히 앞면을 일컫는다. 소프트웨어 개발에서 facade pattern은 내부의 복잡성을 front 뒤에 숨기고 효율적으로 api를 사용할 수 있도록 하는 것이다.
이는 코드의 복잡성을 감추어 쉽게 이해할 수 있도록 하며 dependency들이 가능한 느슨하게 커플링되도록 한다.
예시
facade를 통해서 여러 object를 변경하고 읽을 수 있으며, 여러 state management system을 사용하더라도 facade의 api를 사용해서 접근할 수 있다.
사용되는 곳
Apollo, MobX, Akita, NgRx , Redux, Angular...