From aa6561b9c36d625469daa95c8a99e27f904803e1 Mon Sep 17 00:00:00 2001 From: metacode22 Date: Tue, 5 Nov 2024 21:22:23 +0900 Subject: [PATCH] =?UTF-8?q?=EC=B1=95=ED=84=B07=5F2=20=EC=8B=A0=EC=8A=B9?= =?UTF-8?q?=EC=A4=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\354\213\240\354\212\271\354\244\200.md" | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git "a/\354\261\225\355\204\260_7/\354\213\240\354\212\271\354\244\200.md" "b/\354\261\225\355\204\260_7/\354\213\240\354\212\271\354\244\200.md" index 0b3f4af..0e295ff 100644 --- "a/\354\261\225\355\204\260_7/\354\213\240\354\212\271\354\244\200.md" +++ "b/\354\261\225\355\204\260_7/\354\213\240\354\212\271\354\244\200.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)