JS & TS/pattern in JS

중재자 패턴(Mediator Pattern)은 여러 객체들이 서로 직접 통신하지 않고, 중재자를 통해 상호작용하게 하여 시스템의 결합도를 낮추고 유연성을 제공한다. 예를 들어, 카페에서 손님은 바리스타에게 직접 주문하지 않고, 캐셔라는 중재자를 통해 주문을 전달하여 바리스타가 음료를 준비하게 된다. 음료 전달은 이 반대로 캐셔를 통해 손님에게 전달된다. 이를 통해 객체 간의 결합도를 낮추고 시스템을 더 유연하게 유지할 수 있다. 객체의 관계를 다대다에서 일대다로 변환한다는 점에서는 옵저버 패턴과 비슷하게 느껴질 수 있다. 하지만 옵저버 패턴이 주체 객체의 상태 변화를 여러 옵저버 객체들에게 자동으로 전달하는 데 반해, 중재자 패턴은 여러 객체들이 중재자를 통해 상호작용함으로써 객체들 간의 직접적인 의존성..

메멘토 패턴(Memento Pattern)은 객체의 내부 상태를 캡슐화하여 저장하고, 필요할 때 그 상태를 복원할 수 있게 한다. 상태 변화가 일어날 때마다 그 상태를 메멘토 객체로 저장하여 보관하고, 필요할 경우 복원할 수 있다. 주로 데이터의 손실 방지, 취소, 복구에 사용되기 때문에 적용 시나리오의 범위가 명확하고 제한적이다. 백업 전략을 선택하는 것은 시스템의 요구 사항에 따라 달라지며, 메멘토 패턴에서는 필요에 따라 상태를 저장하는 방식을 조정할 수 있다.다만, 객체 상태를 계속해서 저장하고 관리해야 하므로 메모리나 저장 공간의 사용에 신경을 써야 할 필요가 있다. 이 문제를 해결하기 위해 주로 전체 백업full backup과 증분 백업incremental backup이 사용된다. 전체 백업은 ..

상태 패턴(State Pattern)은 객체의 상태를 클래스로 분리하고, 상태가 변할 때 객체의 동작을 변경할 수 있도록 해 조건문을 사용하지 않고도 상태 전환을 관리할 수 있다. 이를 통해 코드의 복잡도를 낮추고 유지보수성을 높일 수 있으며, 새로운 상태를 추가할 때 기존 코드에 영향을 최소화할 수 있다. 또한, 각 상태를 독립적인 클래스로 분리함으로써 상태별 동작을 명확하게 정의할 수 있어 객체의 책임이 분리되고 코드의 가독성이 향상된다.테이블 조회 방법은 상태 전이 규칙을 데이터로 관리하기 때문에 새로운 상태를 추가할 때 기존 로직을 수정하지 않아도 된다는 장점이 있지만, 상태별 동작이 복잡해질 경우 테이블만으로 이를 표현하기 어려울 수 있다. 반면, 상태 패턴은 각 상태를 개별 클래스로 구현하므로..

책임 연쇄 패턴(Chain of Responsibility Pattern)은 여러 개의 처리 객체들이 연쇄적으로 연결되어 있다. 이 체인은 각 객체가 자신에게 주어진 요청을 처리하거나, 처리할 수 없으면 그 요청을 다음 객체로 넘기면서 요청이 처리될 때까지 순차적으로 전달된다. 이를 통해 시스템에서 요청이 처리될 수 있는 경로를 동적으로 정의할 수 있다. 이 패턴을 활용하면 사용자 입력에 대한 처리 과정에서 여러 단계의 검증을 거쳐야 할 때, 또는 로그 기록, 보안 검사와 같은 처리 과정을 단계적으로 수행해야 할 때 효과적이다.이 포스트에서는 책임 연쇄 패턴을 활용하여 내가 만들고 관리하는 라이브러리 sicilian에서 input value를 검증할 때 쓰는 함수 execValidate를 리팩토링 해보려..

전략 패턴(Strategy Pattern)은 알고리즘을 인터페이스로 정의하고, 이를 구현한 여러 전략 클래스를 사용하여 알고리즘을 동적으로 교체할 수 있도록 한다. 알고리즘을 객체로 캡슐화하여, 알고리즘을 사용하는 객체(컨텍스트)와 알고리즘을 분리함으로써 유연성과 확장성을 제공한다. 예를 들어, 결제 시스템에서 신용카드, 페이팔 등 다양한 결제 방식을 전략 패턴으로 구현하면, 결제 방식이 변경되거나 추가될 때 클라이언트 코드의 수정 없이 전략만 교체하면 된다.// 🔹 전략 인터페이스 정의interface PaymentStrategy { pay(amount: number): void;}// 🔹 구체적인 전략 클래스 1: 신용카드 결제class CreditCardPayment implements Pay..

템플릿 메서드 패턴(Template Method Pattern)은 알고리즘의 전체 흐름을 상위 클래스에서 정의하고, 알고리즘의 세부 구현을 서브클래스에 위임하는 방식이다. 여기서 말하는 알고리즘은 넓은 의미에서 비즈니스 로직이라고 볼 수 있다. 이 패턴은 비즈니스 로직의 흐름을 관리하면서도, 각 단계를 서브클래스에서 구체적으로 정의할 수 있게 해줍니다. 이를 통해 코드의 재사용성과 유연성을 높이며, 특히 프레임워크 개발에서 자주 활용됩니다. 템플릿 메서드 패턴을 사용하면 프레임워크의 핵심 흐름은 그대로 유지하면서도, 사용자는 필요에 맞게 세부적인 로직만 수정할 수 있어 효율적인 확장이 가능하다.템플릿 메서드 패턴은 상위 클래스가 제공하는 기본 알고리즘 흐름 내에서 서브클래스가 특정 행위를 선택적으로 추..

옵저버 패턴(Observer Pattern)은 객체 간의 1:N 관계를 정의하여, 한 객체의 상태가 변경될 때 이를 의존하는 다른 객체들이 자동으로 갱신되도록 하는 디자인 패턴이다. 옵저버 패턴의 구조는 이벤트를 중앙에서 관리하는 디스패처(Dispatcher) 와, 특정 이벤트에 반응하는 리스너(Listener) 로 나눌 수 있다.디스패처는 이벤트를 중앙에서 관리하고, 발생한 이벤트를 적절한 리스너에게 전달하는 역할을 한다. 반면 리스너는 특정 이벤트에 반응하는 객체로, 디스패처에 등록되어 특정 이벤트가 발생하면 정의된 동작을 수행한다. 예를 들어, 자바스크립트에서는 EventEmitter가 디스패처 역할을 하며, on 메서드를 사용해 이벤트 리스너를 등록하고, emit 메서드로 이벤트를 발생시킬 수 있..

플라이웨이트는 권투 등의 격투기에서 '경량급'을 지칭하는 표현이다. 이처럼 플라이웨이트 패턴(Flyweight Pattern)은 동일한 데이터를 여러 객체 간에 공유하는 방식으로 객체를 경량화하는, 메모리 효율성을 극대화하는 디자인 패턴이다. 이 패턴의 핵심은 공유 가능한 데이터(intrinsic)를 하나의 객체로 관리하고, 객체마다 달라야 하는 데이터(extrinsic)는 별도로 처리하는 것이다.플라이웨이트 패턴에서는 FlyweightFactory 클래스를 사용해 동일한 내부 상태를 공유하는 객체들을 재사용하여 메모리 사용을 최적화한다. 내부 상태는 여러 객체에서 공유되는 불변의 데이터로, FlyweightFactory가 관리하는 객체들에 의해 공통적으로 사용된다. 객체를 요청하면, FlyweightF..

파사드 패턴은 복잡한 시스템의 내부 구현을 숨기고, 외부에 간단하고 일관된 인터페이스를 제공하는 구조를 뜻한다. 이렇게 함으로써 클라이언트는 시스템의 복잡한 구성 요소와 상호작용할 필요 없이, 필요한 기능을 더 쉽게 사용할 수 있다. 파사드 패턴은 주로 서브시스템이 복잡하거나 여러 개의 모듈을 다뤄야 할 때 유용하다. 이를 통해 각 모듈이나 클래스를 개별적으로 이해하거나 다룰 필요 없이, 하나의 간단한 인터페이스를 통해 복잡한 작업을 수행할 수 있다. 예를 들어, 다양한 하위 시스템을 하나의 메서드를 통해 호출하도록 묶어서, 클라이언트가 시스템의 세부 사항에 신경 쓰지 않고도 필요한 기능을 쉽게 이용할 수 있도록 한다.즉, 파사드 패턴은 여러 시스템의 복잡한 구현을 한 번에 감추고, 그 위에 간단하고 일..

브리지 패턴(Bridge Pattern)은 객체의 구조와 구현을 분리하여, 두 부분을 독립적으로 변경할 수 있도록 하는 디자인 패턴이다. 이 패턴은 추상화(Abstraction)와 구현(Implementation)을 분리함으로써, 각 부분을 독립적으로 변경하고 확장할 수 있게 한다. 즉, 추상화 계층과 구현 계층이 서로 독립적으로 발전할 수 있도록 도와주며, 서로의 변경이 다른 부분에 영향을 미치지 않도록 한다.브리지 패턴은 주로 클래스나 객체가 두 가지 이상의 변형이 필요할 때 유용하다. 예를 들어, 다양한 형태의 DB 연결 객체와 다양한 Logger 객체가 있을 때, DB 연결 객체의 형태와 Logging 방식을 각각 독립적으로 변경할 수 있도록 하여 유연성을 제공한다. 이를 통해 코드 중복을 줄이고..

어댑터 패턴(Adapter Pattern)은 서로 다른 인터페이스를 가진 클래스들이 원활하게 협력할 수 있도록 중간에서 변환 역할을 하는 구조적 패턴이다. 기존 코드를 수정하지 않고도 호환되지 않는 인터페이스를 연결할 수 있어, 레거시 코드와 새로운 시스템을 통합하거나 외부 라이브러리를 적용할 때 유용하다. 이 패턴을 활용하면 코드의 재사용성을 높이고, 시스템 간의 결합도를 낮출 수 있다. 또한, 객체 지향 설계 원칙 중 단일 책임 원칙(SRP)과 개방-폐쇄 원칙(OCP)을 지키면서도 유연한 아키텍처를 구성하는 데 도움이 된다.참고로 프록시, 데코레이터, 어댑터 패턴을 통틀어서 래퍼 패턴(Wrapper Pattern)이라고도 부른다. 이 래퍼 패턴에 해당하는 패턴들은 모두 원본 클래스를 래퍼 클래스를 통..

이 포스트는 어떤 개념을 설명하거나 결론을 내리지 않는다. 그저 내가 만든 전역 상태 관리 라이브러리 Caro-Kann의 middleware에 프록시 패턴과 데코레이터 패턴을 적용해보다가 떠오른 생각과 고민을 가능한 두서 있게 남길 뿐이다. 아래는 패턴을 적용하기 전의 persist 미들웨어이다. persist 미들웨어는 클라이언트가 변경한 상태를 브라우저의 로컬 스토리지 등에 지속적으로 백업해야 하기에, Store 객체의 setStore 메서드의 기능을 오버라이드 해야한다. 하지만 상태를 백업하는 행위가 리턴 값에 영향을 미치는 것은 아니기 때문에 setStore 메서드는 타입적으로 이전과 이후가 동일하다.export const persist: Middleware["persist"] = (initSta..