Module pattern
·
Frontend/JS Patterns
The module pattern allows you to split up your code into smaller, reusable pieces.modules allow you to keep certain values within your file private. Declarations within a module are scoped (encapsulated) to that module , by default.// export exampleexport function add(x, y) { return x + y;}export function multiply(x) { return x * 2;}export function subtract(x, y) { return x - y;}export functi..
Mixin pattern
·
Frontend/JS Patterns
An object used to Add reusable functionality to another object or class, without using inheritance.Simply, adding functionalities to the target prototype!We can add the dogFunctionality mixin to the Dog prototype with the Object.assign method. We can add animalFunctionality to the dogFunctionality prototype, using Object.assign. In this case, the target object is dogFunctionality.class Dog { co..
Middleware Pattern
·
Frontend/JS Patterns
실제로 요청과 응답 사이에 위치하는 미들웨어 기능 체인으로,하나 이상의 미들웨어 함수를 통해 요청 객체부터 응답까지 추적하고 수정할 수 있습니다. const app = require("express")(); const html = require("./data"); app.use( "/", (req, res, next) => { req.headers["test-header"] = 1234; next(); }, (req, res, next) => { console.log(`Request has test header: ${!!req.headers["test-header"]}`); next(); } ); app.get("/", (req, re..
Mediator Pattern
·
Frontend/JS Patterns
Mediator(중재자, 조정자) 패턴은component 가 중앙 지점인 중재자를 통해 서로 상호 작용할 수 있도록 합니다. 예를 들어,항공 교통 관제사가 모든 비행기가 다른 비행기에 충돌하지 않고안전하게 비행하는 데 필요한 정보를 받도록 하는 것과 같은 역할을 합니다. 모든 객체가 다른 객체와 직접 통신하여 many to many 관계가 되는 대신,객체의 요청은 Mediator 가 처리하는데, Mediator 는 이 요청을 처리하여 필요한 곳으로 전달합니다. Before. Mediator 패턴 적용 전. After. Mediator 패턴 적용 후. Chat room 이 예시 중 하나로,채팅방 내의 사용자들은 서로 직접 대화하지 않고, 대신, Chat room 이 사용자들 사이의 중재자 역할을 합니다. ..
Flyweight Pattern
·
Frontend/JS Patterns
Flyweight 패턴은 비슷한 객체를 대량으로 생성할 때 메모리를 보존하는 데 유용한 방법입니다. class Book { constructor(title, author, isbn) { this.title = title; this.author = author; this.isbn = isbn; }}const books = new Map(); // 중복된 책은 제외됨const bookList = []; // 중복된 책 포함 - 즉, 복사본이 있음.const addBook = (title, author, isbn, availability, sales) => { const book = { ...createBook(title, author, isbn), sales, avail..
Factory Pattern
·
Frontend/JS Patterns
The term “Factory Pattern” in JavaScript (and in software design in general) comes from the concept of a “factory” in real life, where a factory isa place where objects (products) are created.In the context of software design, the Factory Pattern is a creational design pattern that provides an interface for creating objects without specifying the exact class of object that will be created. 즉, ne..