diff --git "a/\354\261\225\355\204\260_7/\354\203\201\353\262\224.md" "b/\354\261\225\355\204\260_7/\354\203\201\353\262\224.md" index 0f19d35..e71209b 100644 --- "a/\354\261\225\355\204\260_7/\354\203\201\353\262\224.md" +++ "b/\354\261\225\355\204\260_7/\354\203\201\353\262\224.md" @@ -1,3 +1,149 @@ +# 챕터7 자바스크립트 디자인 패턴 + +## 7.1 생성 패턴 +- 생성자 패턴 +- 모듈 패턴 +- 노출 묘듈 패턴 +- 싱글톤 패턴 +- 프로토타입 패턴 +- 팩토리 패턴 + +## 7.2 생성자 패턴 +- es6 출시 이후로 생성자 가진 클래스 만들 수 있게 됨 +- 클래스는 자바스크립트가 가진 프로토타입의 상속을 이용한 문법적 설탕임 +- 새 객체를 초기화하는 constructor() 메서드를 갖고 있어야 됨. new 키워드는 생성자 호출하고 생성자 내부의 this는 새로 생성된 해당 객체 가리킴 + +```js +class Car { + constructor(...) { + ... + } + toString() { + } +} +``` + +생성자 기본 예제인데 여기서 몇가지 문제 있음 +- 상속 어려워짐 +- 생성자로 인스턴스 생성하면 같은 함수 새로 정의하게 됨 + +```js +class Car { + constructor(...) { + ... + } + Car.prototype.toString = function() { + } +} +``` + +이를 해결하기 위해 생성자의 프로토타입에 메서드 추가하면 됨. 그러면 공유함 + +## 7.3 모듈 패턴 +객체 리터럴 => 우리가 흔히 작성하는 방식 + +es10 이전엔 접근 제한자(#)가 없었어서 변수 비공개 개념이 존재하지 않았음 +=> 이걸 함수 스코프를 이용해 비공개 개념을 구현함. 선언된 모듈 내부에서만 변수, 메서드 사용 가능 +=> 근데 반환되는 객체에 포함된 변수, 메서드는 공개되잖아? +=> 반환된 객체에 포함된 변수를 비공개하려면 WeakMap() 사용하면 됨 + +> [예제 링크](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/WeakMap#%EB%B9%84%EA%B3%B5%EA%B0%9C_%EB%A9%A4%EB%B2%84_%ED%9D%89%EB%82%B4%EB%82%B4%EA%B8%B0) + +아래 처럼 모듈 내에서 변수를 내보내지 않고 비공개로 사용 가능 ㄷ ㄷ + +```js +let _counter = new WeakMap(); + +class Module { + constructor() { + // 비공개 카운터 변수 + _counter.set(this, 0); + } + incrementCounter() { + let counter = _counter.get(this); + counter++; + _counter.set(this, counter); + return _counter.get(this); + } + resetCounter() { + console.log(`counter value prior to reset: ${_counter.get(this)}`); + _counter.set(this, 0); + } +} + +const testModule = new Module(); +``` + +믹스인 가져오기 변형, 내보내기 변형.. 시간이 지나면서 각자의 입맛에 맞는 모듈 패턴의 변형들이 등장하기 시작함 + +### 장점 +- 초보 개발자들도 이해하기 쉬움 (중요!) +- 사용하기 쉽고 모듈 사이의 의존성 관리하고 전역 요소를 원하는 만큼만 넘겨주어 유지보수 용이하게 됨 +- 바깥으로 노출 안하면 모듈 내부에 비공개로 유지 + +### 단점 +- 필요한 오류를 고칠 때 복잡도를 높일 수가 있다 + +## 7.4 노출 모듈 패턴 +일만이 행님이 답답해서 만든 패턴 + +비공개 함수와 속성에 접근하는 공개 포인터를 만듦. +이렇게 하면 모듈 가장 아래에 위치한 공개 객체를 더 알아보기 쉬워서 가독성 좋음 + +> 회사에서도 커스텀 훅은 다 노출 모듈 패턴으로 작성함 + + +## 7.5 싱글톤 패턴 +클래스의 인스턴스가 오직 하나만 존재하도록 제한하는 패턴 + +주의할 점은 실근톤이 '객체'나 '클래스'가 아닌 '구조'라는 점. 클로저 변수 변수 자체가 클로저가 아니라 클로저 제공하는 함수 스코프가 클로저를 뜻하는 거처럼.. + +```js +constructor() { + if (this._instance == null) { + if ( isFoo() ) { + this._instance = new FooSingleton(); + } else { + this._instance = new BasicSingleton(); + } + } + return this._instance; +}; +``` + +싱글톤은 지연된 실행이 중요! + +싱글톤을 정적 인스턴스로 구현했다 하더라도, 필요할 때까지는 리소스나 메모리를 소모하지 않도록 지연 생성 될 수 있다고 함 + +리액트에선 싱글톤 대신 context API 나 리덕스 같은 전역 상태 관리 도구 이용하여 개발 함 + +## 7.6 프로토타입 패턴 +이미 존재하는 객체를 복제해 만든 템플릿을 기반으로 새 객체를 생성하는 패턴 + +자바스크립트만이 가진 고유의 방식으로 작업 가능함 + +프로토타입 패턴은 상속 구현하는 쉬운 방법이면서 성능상 이점도 챙기기 가능 +=> 객체 내에 함수를 정의할 때 복사본이 아니라 참조로 생성되어 모든 자식 객체가 동일한 함수 가리키게 할 수 있음 + +## 7.7 팩토리 패턴 + +### 사용하면 좋은 상황 +- 객체나 컴포넌트 생성의 복잡성을 가질 때 +- 다양한 객체를 생성해야 할 때 +- 같은 속성을 공유하는 작은 객체를 다룰 때 +- 덕타이핑 같은 api 규칙만 충족하면 되는 다른 객체 인스턴스와 객체를 구성할 때 + +### 사용하면 안되는 상황 +- 객체 생성 과정이 인터페이스 뒤에 추상화하기 때문에 생성과정이 복잡할 경우 사용하지 마라 + +## 추상 팩토리 패턴 + +같은 목표를 가진 각각 팩토리를 하나의 그룹으로 캡슐화하는 패턴 + +추상 팩토리는 자동차나 트럭같은 차량 타입만 정의, 구체적 팩토리는 차량의 공통 기능을 충족하는 클래스만 구현 + +--- + ## 구조 패턴 구조 패턴은 클래스와 객체의 구성을 다룬다 - 퍼사드 패턴