From 0a9899ed3e888d72dcb0bc27f5a863664a261f58 Mon Sep 17 00:00:00 2001
From: sumi-0011 <selina2000@naver.com>
Date: Tue, 29 Oct 2024 21:55:30 +0900
Subject: [PATCH 1/2] =?UTF-8?q?7.7=20=EA=B9=8C=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\353\263\200\354\210\230\353\257\270.md"  | 116 ++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 "\354\261\225\355\204\260_7/\353\263\200\354\210\230\353\257\270.md"

diff --git "a/\354\261\225\355\204\260_7/\353\263\200\354\210\230\353\257\270.md" "b/\354\261\225\355\204\260_7/\353\263\200\354\210\230\353\257\270.md"
new file mode 100644
index 0000000..ab5a271
--- /dev/null
+++ "b/\354\261\225\355\204\260_7/\353\263\200\354\210\230\353\257\270.md"
@@ -0,0 +1,116 @@
+## 7.1 생성패턴
+
+## 7.2 생성자 패턴
+
+자바스크립트의 클래스는 객체 템플릿을 정희하고 캡슐화, 상속을 구현할 수 있도록 하였다.
+
+클래스는 아래와 같은 특징을 가지고있습니다.
+
+- 초기화 하는 `construcot()` 메서드를 가지고 있어야한다.
+- new 키워드를 통해 생성자를 호출할 수 있다.
+- this 키워드는 새로 생성된 해당 객체를 가르킨다.
+
+예제에는 `Car`라는 생성자로 객체를 생성하는데, 이때 객체를 생성할 때 마다 공통적인 함수 `ex) toString()`과 같은 함수를 새로 정의한다 <- Car유형의 인스턴스는 하나의 `toString()`을 공유해야하므로, 효과적이지 않은 방법
+==> 프로토타입을 가진 생성자
+
+> 자바스크립트의 프로토타입 객체는 함수나 클래스 등 특정 객체의 모든 인스턴스 내에 **공통 메서드를 쉽게 정의**할 수 있도록 합니다.
+
+## 7.3 모듈 패턴
+
+### 7.3.1 객체 리터럴
+
+중괄호({}) 안에서 키와 값을 쉼표로 구분하여 객체를 정의하는 방법
+ex) const obj = { key : value }
+
+선언시 new 연산자를 필요로하지 않는다.
+코드를 캡슐화하여 깔끔하고 체계적으로 정리할 수 있다.
+
+> [레베카 머피가 작성한 글](https://github.com/rmurphey/rmurphey/blob/master/public/blog/using-objects-to-organize-your-code.md)
+
+### 7.3.2 모듈 패턴
+
+전통적인 소프트웨어 엔지니어링 분야에서 **클래스의 캡슐화를 위해 처음 고안** 되었다.
+
+모듈패턴은 클로저를 활용해 `비공개` 상태와 구성을 캡슐화한다.
+=> 공개 및 비공개 메서드와 변수를 묶어 전역 스코프로의 유출을 방지, 다른 개발자의 인터페이스와 충돌을 예방
+
+ES2019 이전의 자바스크립트에서는 접근제한자(#)을 지원하지 않아, `비공개`라는 개념이 존재하지않았다.
+-> 함수 스코프를 이용해 비공개 개념을 규현 (모듈 패턴에서는 클로저를 이용)
+-> 하지만 반환되는 객체에 포함된 메서드는 공개됨
+-> 반환된 객체에 포함된 변수도 비공개하려면 `WeakMap()`을 사용하면 된다.
+
+export : 모듈 외부에서 모듈 기능에 대한 액세스를 제공
+import : 모듈에서 내보낸 바인딩을 가져올 수 있도록 함
+
+모듈 패턴의 변형
+
+- Mixin 가져오기 변형 <- 주로 사용하는거?
+- 내보내기 변형
+
+장점
+
+- 자바스크립트 관점에서 볼 때 모듈패턴은 캡슐화 개념보다, 객체 지향 프로그래밍 지식을 가진 초보 개발자가 이해하기 쉽다 (ex, mixin 가져오기)
+- 비공개를 지원한다. - export 를 이용해 바깥으로 노출한 값들만 접근할 수 있다. - -> 전역 스코프 오염을방지할 수 있다.
+  단점
+- 공개와 비공개 멤버를 서로 다르게 접근해야한다.
+- 자동화 단위 테스트에서 비공개 멤버는 제외된다.
+
+### 7.3.4 WeakMap을 이용한 최신 모듈 패턴
+
+WeakMap은 기본적으로키가 약하게 유지되는 맵이다.
+<- 참조되지 않은 키는 가비지컬렉션의 대상이 된다.
+
+## 7.4 노출 모듈 패턴
+
+배경 : 공개 변수나 메서드에 접근하기 위해 가져온 메인 객체의 이름을 반복해서 사용해야한다는 점에 답답함을 느껴 생겨남
+
+> 모든 함수와 변수를 비공개 스코프에 정의하고, 공개하고 싶은 부분만 포인터를 통해 비공개 요소에 접근할 수 있게 해주는 익명 객체를 반환하는 패턴
+
+장점
+
+- 코드의 일관성 유지
+- 모듈의 가장 아래에 위치한 공개 객체를 더 알아보기 쉽게 바꾸어 가독성 향상
+  단점
+- 비공개 함수를 참조하는 공개 함수를 수정할 수 없다는 점
+- 비공개 변수를 참조하는 공개 객체 멤버 또한 수정 불가능
+
+> 기존 모듈 패턴보다 취약할 수 있다.
+
+## 7.5 싱글톤 패턴
+
+클래스의 **인스턴스가 오직 하나만 존재하도**록 제한하는 패턴
+**전역에서 접근** 및 공유해야하는 단 하나의 객체가 필요할 때 유용
+
+!싱글톤 패턴은 정적 클래스나 객체와는 다르게 초기화를 지연시킬 수 있다. (초기화 시점에 필요한 특정 정보가 유효하지 않을 수도 있기 때문)
+
+단점
+
+- 싱글톤임을 파악하는 것이 힘들다
+- 테스트 하기힘들다
+
+## 7.6 프로토타입 패턴
+
+이미 존재하는 객체를 복제해 만든 템플릿을 기반으로 새 객체를 생성하는 패턴
+프로토타입 패턴은 프로토타입의 상속을 기반으로 한다.
+
+- 프로토타입 상속은 클래스처럼 따로 정의되는 것이 아니라, 이미 존재하는 다른 객체를 복제하여 새로운 객체를 만들어낸다.
+- 다른 언어의 기능을 따라하지 않고, 자바스크립트만이 가진 고유의 방식으로 작업 가능
+- 객체 내에 함수를 정의할 때 복사본이 아닌 참조로 생성되어, ㅁ모든 자식 객체가 동일한 함수를 가리킨다 <- 성능 이점
+
+## 7.7 팩토리 패턴
+
+팩토리 패턴은 객체를 생성하는 생성패턴의 하나,
+다른 패턴과 달리 생성자를 필요로하지 않지만, 필요한 타입의 팩토리 객체를 생성하는 다른 방법을 제공
+
+> 동적인 요소나 애플리케이션 구조에 깊게 의지하는 등의 상황 처럼 **객체 생성 과정이 복잡할 때 유용**
+
+### 7.7.2 팩토리 패턴을 사용하면 안되는 상황
+
+`객체 생성 인터페이스 제공`이 작업중인 라이브러리나 프레임워크의 설계 목표가 아니라면 차라리 생성자를 사용하는것이 좋다.
+
+팩토리 패턴은 객체 생성과정을 인터페이스 뒤에 추상화 하기 때문에 객체 생성 과정이 복잡하다면, 단위 테스트의 복잡성도 증가시킬 수 있다.
+
+### 7.7.3 추상 팩토리 패턴
+
+같은 목표를 가진 각각의 팩토리들을 하나의 그룹으로 캡슐화 하는 패턴
+객체가 어떻게 생성되는지에 대한 세부사항을 알 필요없이 객체를 사용할 수 있도록 함

From aaca4cf069a29b0376982d2ed8e98c0de59528de Mon Sep 17 00:00:00 2001
From: sumi-0011 <selina2000@naver.com>
Date: Tue, 5 Nov 2024 21:01:48 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=EC=B1=95=ED=84=B0=207-2=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\353\263\200\354\210\230\353\257\270.md"  | 98 ++++++++++++++++++-
 1 file changed, 95 insertions(+), 3 deletions(-)

diff --git "a/\354\261\225\355\204\260_7/\353\263\200\354\210\230\353\257\270.md" "b/\354\261\225\355\204\260_7/\353\263\200\354\210\230\353\257\270.md"
index ab5a271..ab31727 100644
--- "a/\354\261\225\355\204\260_7/\353\263\200\354\210\230\353\257\270.md"
+++ "b/\354\261\225\355\204\260_7/\353\263\200\354\210\230\353\257\270.md"
@@ -2,7 +2,7 @@
 
 ## 7.2 생성자 패턴
 
-자바스크립트의 클래스는 객체 템플릿을 정희하고 캡슐화, 상속을 구현할 수 있도록 하였다.
+자바스크립트의 클래스는 객체 템플릿을 정의하고 캡슐화, 상속을 구현할 수 있도록 하였다.
 
 클래스는 아래와 같은 특징을 가지고있습니다.
 
@@ -57,7 +57,7 @@ import : 모듈에서 내보낸 바인딩을 가져올 수 있도록 함
 
 ### 7.3.4 WeakMap을 이용한 최신 모듈 패턴
 
-WeakMap은 기본적으로키가 약하게 유지되는 맵이다.
+WeakMap은 기본적으로 키가 약하게 유지되는 맵이다.
 <- 참조되지 않은 키는 가비지컬렉션의 대상이 된다.
 
 ## 7.4 노출 모듈 패턴
@@ -95,7 +95,7 @@ WeakMap은 기본적으로키가 약하게 유지되는 맵이다.
 
 - 프로토타입 상속은 클래스처럼 따로 정의되는 것이 아니라, 이미 존재하는 다른 객체를 복제하여 새로운 객체를 만들어낸다.
 - 다른 언어의 기능을 따라하지 않고, 자바스크립트만이 가진 고유의 방식으로 작업 가능
-- 객체 내에 함수를 정의할 때 복사본이 아닌 참조로 생성되어, ㅁ모든 자식 객체가 동일한 함수를 가리킨다 <- 성능 이점
+- 객체 내에 함수를 정의할 때 복사본이 아닌 참조로 생성되어, 모든 자식 객체가 동일한 함수를 가리킨다 <- 성능 이점
 
 ## 7.7 팩토리 패턴
 
@@ -114,3 +114,95 @@ WeakMap은 기본적으로키가 약하게 유지되는 맵이다.
 
 같은 목표를 가진 각각의 팩토리들을 하나의 그룹으로 캡슐화 하는 패턴
 객체가 어떻게 생성되는지에 대한 세부사항을 알 필요없이 객체를 사용할 수 있도록 함
+
+## 7.8 구조 패턴
+
+구조패턴은 클래스와 객체의 구성을 다룬다.
+상속의 개념을 통해 인터페이스와 객체를 구성하여 새로운 기능을 추가할 수 있는 것처럼
+
+## 7.9 퍼사드 패턴
+
+> 심층적인 복잡성을 숨기고 사용하기 편리한 높은 수준의 인터페이스를 제공하는 패턴
+
+주로 jQuery와 같은 라이브러리에서 흔히 볼 수 있는 패턴이다.
+
+- 광범위한 기능 구현을 가지고 있으면서도
+- 퍼사드 특징(실제 모습을 숨기고 꾸며낸 겉모습 만을 드러냄)을 가지거나, 제한된 추상화 메서드 만이 공개되어 사용 가능
+
+클래스의 인터페이스를 단순화 하고 코드의 구현 부분과 사용 부분을 분리합니다.
+-> 하위 시스템에 직접 접근하기 보다는 간접적으로 상호작용
+-> 사용자는 내부에서 무슨 일이 벌어나든, 구현 수준의 세부사항을 알지 않고도 사용할 수 있음
+
+## 7.10 믹스인 패턴
+
+(?)
+
+## 7.11 서브 클래싱
+
+> 부모 클래스를 확장하는 자식 클래스를 서브 클래스라고 한다.
+
+서브 클래싱이란 부모 클래스에서 속성을 상속받아 새로운 객체를 만드는 것
+
+- 오버라이드 된 부모 클래스의 메소드 호출 -> 메서드 체이닝
+- 오버라이드 된 부모 클래스의 생성자 호출 -> 생성자 체이닝
+
+여기서 나온 메서드 체이닝이 내가 아는 개념이랑 같은건가? 했는데,
+prototype등을 타고타고 메서드를 호출하는것도, 부모 클래스의 메소드를 호출하는것도 다 메서드 체이닝으로 부르는듯 합니다. -> https://www.geeksforgeeks.org/method-chaining-in-javascript/
+
+## 7.12 믹스인 패턴
+
+> 믹스인은 최소한의 복잡성으로 객체의 기능을 빌리거나 상속할 수 있게 해줍니다.
+> 다른 여러 클래스를 아울러 쉽게 공유할 수 있는 속성과 메서드를 가진 클래스입니다.
+
+장점 : 함수의 중복을 줄이고 재사용성을 높인다.
+단점: 복잡해짐.
+
+> 글의 저자는 문서화를 잘 해두면 괜찮을거다, 라고 이야기하였는데 웬만한 상황이 아니라면 믹스인 패턴은 안쓰는게 나을것 같다고 생각했습니다.
+
+## 7.13 데코레이터 패턴
+
+> 코드 재사용을 목표로 하는 구조패턴
+> 기존 클래스에 **동적으로 기능을 추가**하기 위해 사용, 하지만 기존 클래스에 필수적인 기능은 아니였던
+> 데코레이터 패턴은 객체의 생성을 신경쓰지 않는 대신 기능의 확장에 초점을 둡니다.
+
+책에서 써있듯 게임 예제가 잘 맞는다는 생각이 드네요.
+기존 클래스에서 필수 기능은 아니였지만, 다양한 캐릭터, 능력을 추가하기 위해 확장에 열려있어야한다는 점에서?
+
+## 7.14 의사클래스 데코레이터
+
+인터페이스 : 객체가 가져야할 메서드를 정의하는 방법. 단, 어떻게 구현해야하지는 명지하지 않음
+왜 인터페이스를 사용해야할까?
+: 인터페이스는 스스로 문서의 역할을 하고, 재사용성을 높이기 때문
+
+Interface 클래스를 만들어, 엄격한 기능 검사를 하는 패턴
+자바스크립트에 내장된 기능이 아니며 -> 인터페이스가 내장된 typescript를 사용하면 된다.
+
+### 7.14.2 추상 데코레이터
+
+추가 옵션, 데코레이터가 많아질 수록 기존 데코레이터 패턴은 모든 추가 옵션 조합에 대해 새로운 서브 클래스가 필요해집니다.
+
+```js
+const MacBook = new Interface('Macbook', ['addEngraving', 'add4GBRam',...])
+```
+
+나중에 더 많은 옵션을 추가할 수 있도록, 추상 데코레이터 클래스는 MacBook 인터페이스를 구현하기 위해 필요한 기본 메서드를 정의하며, 그 외 나머지 옵션은 서브 클래스가 됩니다.
+
+추상 데코레이터는 모든 가능한 조합의 클래스를 따로 정의하지 않고도, 필요한 만큼의 데코레이터만을 사용해 기본 클래스에 독립적으로 기능을 추가할 수 있도록 합니다.
+
+```
+class CaseDecorator extends MacBookDecorator {
+	contructor(macbook) {
+		super(macbook)
+	}
+	addCase() {
+		return `${this.macbook.addCase()}`
+	}
+}
+```
+
+## 7.15 데코레이터 장/단점
+
+단점
+
+- 네임스페이스에 작고 비슷한 객체를 추가하기 때문에 잘 관리하지 않으면 애플리케이션 구조를 복잡하게할 수 있다.
+- 패턴에 익숙하지 않다면, 패턴의 사용 목적을 파악하기 어렵다. <- 문서화나 패턴에 대한 이해도를 높여 해결 가능