일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 진행기록
- package management
- 모던 자바스크립트 Deep Dive
- const
- js pattern
- 브라우저의 렌더링 과정
- 프론트엔드 성능 최적화 가이드
- 학습내용정리
- pr review
- 올림픽 통계 서비스 최적화
- DOM
- 이미지 갤러리 최적화
- 프로그래머스
- Babel과 Webpack
- version management
- js pattern
- unique identifiers
- 자바스크립트 패턴
- peerdependencies
- 딥다이브
- middleware pattern
- 커리어
- 이벤트
- 블로그 서비스 최적화
- 새 코드 받아오기
- 제너레이터와 async/await
- 스코프
- mixin pattern
- 자바스크립트 딥다이브
- 자바스크립트
- Today
- Total
목록Development Notes/JS Patterns (8)
Dev Blog

With the observer pattern,we can subscribe certain objects, the observers, to another object, called the observable. Whenever an event occurs, the observable notifies all its observers! observers: an array of observers that will get notified whenever a specific event occursAn observable object usually contains 3 important parts: subscribe(): a method in order to add observers to the observers li..
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..
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..

실제로 요청과 응답 사이에 위치하는 미들웨어 기능 체인으로,하나 이상의 미들웨어 함수를 통해 요청 객체부터 응답까지 추적하고 수정할 수 있습니다. 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(중재자, 조정자) 패턴은component 가 중앙 지점인 중재자를 통해 서로 상호 작용할 수 있도록 합니다. 예를 들어,항공 교통 관제사가 모든 비행기가 다른 비행기에 충돌하지 않고안전하게 비행하는 데 필요한 정보를 받도록 하는 것과 같은 역할을 합니다. 모든 객체가 다른 객체와 직접 통신하여 many to many 관계가 되는 대신,객체의 요청은 Mediator 가 처리하는데, Mediator 는 이 요청을 처리하여 필요한 곳으로 전달합니다. Before. Mediator 패턴 적용 전. After. Mediator 패턴 적용 후. Chat room 이 예시 중 하나로,채팅방 내의 사용자들은 서로 직접 대화하지 않고, 대신, Chat room 이 사용자들 사이의 중재자 역할을 합니다. ..

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..

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..

특정 작업을 실행하는 객체와메서드(아래의 placeOrder 등)를 호출하는 객체를 분리할 수 있습니다.class OrderManager() { constructor() { this.orders = [] } placeOrder(order, id) { this.orders.push(id) return `You have successfully ordered ${order} (${id})`; } trackOrder(id) { return `Your order ${id} will arrive in 20 minutes.` } cancelOrder(id) { this.orders = this.orders.filter(order => order.id !== id) retu..