프로그래밍(Basic)/디자인 패턴(JS)

[바미] 미들웨어 패턴(Middleware Pattern)

미들웨어 패턴(Middleware Pattern)이란? 미들웨어 패턴은 소프트웨어 엔지니어링에서 클라이언트 요청과 서버 응답 사이에 위치하는 중간 처리 계층을 의미하는데 이 패턴을 통해 개발자는 요청 처리 파이프라인에 여러 처리 단계를 도입할 수 있으며, 각 단계는 순차적으로 요청을 처리하고, 필요에 따라 다음 미들웨어로 요청을 전달하거나 응답을 반환할 수 있습니다. 예시 미들웨어 패턴은 Node(Express)에서 사용하여 로깅, 인증, 세션 관리 등의 기능을 구현할 때 어떻게 구현하는 지 예시를 들어보겠습니다. app.js const express = require('express'); const app = express(); // 로깅 미들웨어 app.use((req, res, next) => { ..

[바미] 스트래티지 패턴(Strategy Pattern)

스트래티지 패턴(Strategy Pattern)? 스트래티지 패턴은 알고리즘의 그룹을 정의하고, 각 알고리즘을 캡슐화하며, 이들을 상호 교체 가능하게 만듭니다. 이를 통해 알고리즘을 사용하는 클라이언트와 독립적으로 알고리즘을 변경할 수 있습니다. Node.js에서 스트래티지 패턴은 로깅, 데이터 검증, 통신 프로토콜 등 다양한 방법에서 사용될 수 있습니다. 예제 그럼 스트래티지 패턴을 사용하여 여러 로깅 메커니즘(예: 콘솔, 파일, 원격 서버)을 지원하는 간단한 예제로 알아봅시다. LoggerStrategy.js class LoggerStrategy { static toConsole(message) { console.log(`Console: ${message}`); } static toFile(messa..

[바미] Command 패턴

Command 패턴 명령을 처리하는 객체를 통해 메서드와 실행되는 동작의 결합도를 낮출 수 있다 📜 원문: patterns.dev - command pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/command-pattern/ 커맨드 패턴을 사용하면 특정 작업을 실행하는 개체와 메서드를 호출하는 개체를 분리할 수 있습니다. 예를 들어 온라인 음식 배달 플랫폼을 개발한다고 가정해 보죠. 사용자는 주문하거나, 주문한 음식이 어디쯤 왔는지 확인하거나, 주문을 취소할 수 있습니다. class OrderManager() { constructor() { this.orders = [] } placeOrder(order, id) { this.orders..

[바미] Compound 패턴

Compound 패턴 하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 한다. 📜 원문: patterns.dev - compound pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/compound-pattern/ 앱을 개발하다 보면 종종 서로를 참조하는 컴포넌트를 만들기도 합니다. 컴포넌트들은 서로 상태를 공유하기도 하고 특정 로직을 함께 사용하기도 하죠. 아마 이런 코드는 select, 드롭다운 컴포넌트 또는 메뉴 컴포넌트에서 보았을 것입니다. 컴파운드 컴포넌트 패턴은 여러 컴포넌트들이 모여 하나의 동작을 할 수 있게 해 줍니다. Context API 아래 예제에서는 다람쥐 사진 목록을 보여주고 있습니다. 여기에 버튼을 추가하여..

[바미] - Hooks 패턴

Hooks 패턴 앱 전체에서 함수를 통해 상태를 가진 로직을 여러 컴포넌트들에서 사용한다 📜 원문: patterns.dev - hooks pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/hooks-pattern/ React 16.8 버전에는 Hooks라는 기능이 추가되었습니다. Hooks는 React의 상태와 생명 주기 함수들을 ES2015의 클래스를 사용하지 않고 쓸 수 있게 해 줍니다. Hooks가 디자인 패턴이 아닐순 있지만 Hooks는 앱에서 아주 중요한 역할을 합니다. 여러 전통적인 디자인 패턴들은 모두 Hooks로 변경할 수 있습니다. 클래스 컴포넌트 Hooks가 추가되기 전에 React에서 상태와 생명 주기 함수를 사용하려면 ..

[바미] Render Props 패턴

Render Props 패턴 JSX 엘리먼트를 props를 통해 컴포넌트에게 전달한다 📜 원문: patterns.dev - render props pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/render-props-pattern/ 고차 컴포넌트 섹션에서 여러 컴포넌트가 동일한 데이터나 동일한 로직을 포함해야 할 때 컴포넌트의 로직을 재사용할 수 있게 되면 편해질 수 있다는 것을 알았습니다. 컴포넌트를 재사용 가능하게 할 수 있는 또 다른 방법으로, render prop 패턴을 사용하는 방법이 있습니다. render prop은 컴포넌트의 prop으로 함수이며 JSX 엘리먼트를 리턴합니다. 컴포넌트 자체는 아무런 것도 렌더링하지 않지 만 ..

[바미] HOC 패턴

HOC 패턴 앱 전반적으로 재사용 가능한 로직을 prop으로 컴포넌트에게 제공한다 📜 원문: patterns.dev - hoc pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/hoc-pattern/ 종종 여러 컴포넌트에서 같은 로직을 사용해야 하는 경우가 있습니다. 이런 로직은 컴포넌트의 스타일시트를 설정하는 것 일 수 있고. 권한을 요청하거나 전역 상태를 추가하는 것일 수 있습니다. 같은 로직을 여러 컴포넌트에서 재사용하는 방법 중 하나로 고차 컴포넌트 패턴을 활용하는 방법이 있습니다. 이 패턴은 앱 전반적으로 재사용 가능한 로직을 여러 컴포넌트들이 쓸 수 있게 해 줍니다. 고차 컴포넌트란 다른 컴포넌트를 받는 컴포넌트를 뜻합니다. HO..

[바미] Mediator/Middleware 패턴

Mediator/Middleware 패턴 중재자 역할을 하는 객체 통해 컴포넌트들이 서로 통신하도록 한다 📜 원문: patterns.dev - mediator pattern 📜 번역 : https://patterns-dev-kr.github.io/design-patterns/mediator-middleware-pattern/ 컴포넌트들이 서로 직접 통신하는 대신 중재자 역할을 하는 객체를 통하도록 합니다. 중재가 객체가 요청을 받아 이를 필요 로 하는 객체들에게 전달하는 것이다. 중재자는 보통 객체나 함수로 구현됩니다. 이 패턴은 공항에서 비행기의 동선을 관리하는 관제소에 비교할 수 있다. 비행기끼리 직접 통신하면 사고로 이어질 수 있겠 지만 관제소에서 상황을 전달받아 통제를 하게 되면 서로 충돌 없이 ..

[바미] Mixin 패턴

Mixin 패턴 상속 없이 객체에 기능을 추가한다 📜 원문: patterns.dev - mixin pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/mixin-pattern/ Mixin은 상속 없이 어떤 객체나 클래스에 재사용 가능한 기능을 추가할 수 있는 객체입니다. Mixin은 단독으로 사용할 순 없고 상속 없이 객체나 클래스에 기능을 추가하는 목적으로 사용됩니다. 앱에서 여러 강아지를 만들어야 한다고 가정해 볼 때 아래 강아지 클래스는 name 프로퍼티 외에 다른 프로퍼티를 가지고 있지 않습니다. class Dog { constructor(name) { this.name = name } } 강아지는 이름 외에도 짖거나 꼬리를 흔들거나 ..