[신승준] 챕터 7: 자바스크립트 디자인 패턴 (2/3)

챕터_7/신승준.md

@@ -182,3 +182,80 @@ marketingManager.takeInterview(); // 출력: Asking about community building.
 ## 참고
 
 - [(번역) 우리들을 위한 디자인 패턴](https://soobing.github.io/cs/design-patterns-for-humans/)
+
+---
+
+## 구조 패턴
+
+클래스와 객체의 구성을 다룬다. 상속의 개념을 통해, 인터페이스와 객체를 구성하여 새로운 기능을 추가한다.
+
+### 퍼사드 패턴
+
+facade, 실제 모습을 숨기고 꾸며낸 겉모습만 세상에 드러냄.
+
+심층적인 복잡성은 숨기고, 사용하기에 편리한 높은 수준의 인터페이스만 제공한다.
+
+> 알게 모르게 많은 것들을 퍼사드 패턴으로 작성하고, 사용도 하지 않았나 싶네요! 이 회사 들어올 때 todo list를 관리하는 class를 만들어보는 라이브 코딩을 했었는데 그게 생각이 나네요.
+
+### 서브 클래싱
+
+> 저 class에서 super가 뭔지 몰랐는데 이번에 알았음용...
+
+- [super](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/super)
+
+클래스 본문 내에서 super의 참조는 실행 맥락이 인스턴스 생성인지 클래스 초기화인지에 따라 슈퍼클래스의 생성자 자체 이거나 생성자의 prototype이 될 수 있다.
+
+> 실행 맥락이 인스턴스 생성이라면 슈퍼클래스의 생성자를 호출하고, 클래스 초기화라면 슈퍼클래스의 prototype을 참조할 것 같네요.
+
+### 믹스인
+
+새롭게 만들어지는 클래스는 부모 클래스로부터 메서드와 속성을 부여 받는다.
+
+> 동적으로 클래스를 만들 수 있는게 신기했어요.
+
+```typescript
+const Person = (SuperClass) =>
+  class extends SuperClass {
+    walk() {
+      console.log("walk");
+    }
+  };
+
+class Student {
+  study() {
+    console.log("study");
+  }
+}
+
+class StudentPerson extends Person(Student) {}
+
+const student = new StudentPerson();
+student.walk(); // () => void;
+student.study(); // any;
+```
+
+> 근데 동적으로 정의된 method에 대해 타입 추론이 안되는 것 같네요..?
+
+믹스인은 함수의 중복을 줄이고 재사용성을 높인다.
+
+[리액트 개발팀은 컴포넌트의 유지보수와 재사용을 복잡하게 만든다는 이유로 믹스인을 반대했다.](https://ko.legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html)
+
+- 종속성이 명확하지 않음. 어떤 mixin에서 선언되었길래 사용할 수 있는건지 모름
+- 이름이 충돌할 수 있음. AMixin에서 handleChange, BMixin에서도 handleChange를 선언할 수도 있음. 마지막에 선언된 것을 사용하겠지만 명식적이지 않아 버그 발생 가능성이 높음.
+- 코드 복잡도가 증가함. 유지보수가 어려워짐
+
+### 데코레이터
+
+코드 재사용을 목표로 한다. 기존 클래스에 동적으로 기능을 추가하기 위해 사용하는 패턴.
+
+데코레이터 자체는 클래스의 기본 기능에 필수적이지 않다. 필수적이었다면 부모 클래스에 이미 구현되었을 것.
+
+데코레이터를 사용하면 기존 시스템의 내부 코드를 힘겹게 바꾸지 않아도 기능을 추가할 수 있다.
+
+> 전 이 데코레이터 설명이 믹스인과 어떻게 다른지 사실 잘 감이 안 왔어요...
+
+### 인터페이스
+
+> JavaScript에서 구현된 Interface 코드를 찾아봤읍니다. 무려 10년 전!
+
+[JavaScript에서 구현한 Interface](https://github.com/RestlessThinker/Javascript-Interface/blob/master/interface.js)