Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[변수미] 챕터 7: 자바스크립트 디자인 패턴 (3/3) #64

Merged
merged 1 commit into from
Dec 2, 2024
Merged

[변수미] 챕터 7: 자바스크립트 디자인 패턴 (3/3) #64

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 58 additions & 3 deletions 챕터_7/변수미.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

자바스크립트의 클래스는 객체 템플릿을 정의하고 캡슐화, 상속을 구현할 수 있도록 하였다.


클래스는 아래와 같은 특징을 가지고있습니다.

- 초기화 하는 `construcot()` 메서드를 가지고 있어야한다.
Expand Down Expand Up @@ -100,7 +99,6 @@ WeakMap은 기본적으로 키가 약하게 유지되는 맵이다.

- 객체 내에 함수를 정의할 때 복사본이 아닌 참조로 생성되어, 모든 자식 객체가 동일한 함수를 가리킨다 <- 성능 이점


## 7.7 팩토리 패턴

팩토리 패턴은 객체를 생성하는 생성패턴의 하나,
Expand All @@ -119,7 +117,6 @@ WeakMap은 기본적으로 키가 약하게 유지되는 맵이다.
같은 목표를 가진 각각의 팩토리들을 하나의 그룹으로 캡슐화 하는 패턴
객체가 어떻게 생성되는지에 대한 세부사항을 알 필요없이 객체를 사용할 수 있도록 함


## 7.8 구조 패턴

구조패턴은 클래스와 객체의 구성을 다룬다.
Expand Down Expand Up @@ -212,3 +209,61 @@ class CaseDecorator extends MacBookDecorator {
- 네임스페이스에 작고 비슷한 객체를 추가하기 때문에 잘 관리하지 않으면 애플리케이션 구조를 복잡하게할 수 있다.
- 패턴에 익숙하지 않다면, 패턴의 사용 목적을 파악하기 어렵다. <- 문서화나 패턴에 대한 이해도를 높여 해결 가능

## 7.16 Flyweight Pattern

책에서는 어떤 패턴인지 정확히 이해하지 못해서 추가적으로 내용을 찾아보았습니다.
특히 많이 참고한 곳 [링크](https://inpa.tistory.com/entry/GOF-%F0%9F%92%A0-Flyweight-%ED%8C%A8%ED%84%B4-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EB%B0%B0%EC%9B%8C%EB%B3%B4%EC%9E%90#flyweight_pattern)

해당 블로그에서는 아래와 같이 이야기합니다.

> 플라이웨이트 패턴(Flyweight Pattern)은 **재사용 가능한 객체 인스턴스를 공유**시켜 **메모리 사용량을 최소화**하는 구조 패턴 => **경량 패턴**

위 블로그에서 말해주는 예시들이 기가막히니 책 내용이 이해가지 않았다면 블로그를 한번 보는것을 추천합니다 👍

## 7.17 행위 패턴

> 객체 간의 의사소통을 돕는 패턴
> 시스템 내 서로 다른 객체 간의 의사소통 방식을 개선하고 간소화 하는 것을 목적으로 함

- 관찰자 패턴
- 중재자 패턴
- 커멘드 패턴

## 7.18 관찰자 패턴

> 한 객체가 변경 될 때 다른 객체들에 변경되었음을 알릴 수 있게 해주는 패턴
> 변경된 객체는 누가 자신을 구독하는지 알 필요없이 알림을 보낼 수 있다.

### 7.18.1 관찰자 패턴과 발행/구독 패턴의 차이점

자바스크립트 환경에서는 `발행/구독` 이라는 변형된 구현의 패턴이 널리 사용되는데,

> **발행/구독 패턴**
> 이벤트 알림을 받는 구독자와 이벤트를 발생시키는 발행자 사이에 토픽/이벤트 채널을 두고, 발행자와 구독자를 각자 독립적으로 유지하는 패턴

### 7.18.2 장점

시스템의 구성 요소가 결합도를 낮추는 훌륭한 도구

### 7.18.3 단점

구독자와 발행자 사이의 관계가 동적으로 결정되기 때문에 어떤 구독자가 어떤 발행자에 의존하는지 추적하기 어려울 수 있다.

## 7.19 중재자 패턴

> 하나의 객체가 이벤트 발생 시 다른 여러 객체들에게 알림을 보낼 수 있는 패턴
> ex) DOM 이벤트 버블링과 이벤트 위임

#### 관찰자 패턴과 다른점

중재자 패턴은 하나의 객체가 다른 객체에서 발생한 특정 유형의 이벤트에 대해 알림을 받을 수 있다. 하지만 관찰자 패턴은 하나의 객체가 다른 객체에게 발생하는 다수의 이벤트를 구독할 수 있다.

> 활용 방법이 확 와닿은 패턴은 아니였는데,,
> 중재자 패턴을 미들웨어에서 사용하는 부분은 좀 와닿았던것 같아요

## 7.20 커맨드 패턴

> 메소드 호출, 요청 또는 작업을 단일 객체로 캡슐화하여 추후에 실행할 수 있도록,
> 기본 원칙 : 명령을 내리는 객체와 명령을 실행하는 객체의 책임을 분리하는 것
> -> 책임을 다른 객체에 위임함으로써 역할 분리를 실현
> -> 명령을 실행하는 객체와 명령을 호출하는 객체 간의 결합을 느슨하게 하여 구체적인 클래스의 변경에 대한 유연성을 향상 시킴
Loading