[자바스크립트+리액트 디자인패턴] Chapter 01 ~ 06

 

본 글은 『Learning JavaScript Design Patterns』  책을 기반으로 작성한 글 입니다.

https://www.yes24.com/Product/Goods/129374961

자바스크립트 + 리액트 디자인 패턴 - 예스24

 

---

 

Chapter 01 - 디자인 패턴 소개

 

"좋은 코드는 후임 개발자에게 보내는 러브레터와도 같다!"

 

디자인 패턴은 코드를 체계화 하기 위한 공통적인 패턴을 제공하여 코드를 쉽게 이해하도록  도와준다.

 

 

Chapter 02 - 패턴성 검증, 프로토 패턴 그리고 세 가지 법칙

 

프로토 패턴이란 ? "패턴성" 검증을 모두 통과하지 못한 미숙한 패턴

 

좋은 패턴을 위해서는 목적 적합성, 유용성, 적용 가능성 3가지에 답할 수 있어야 한다.

 

 

Chapter 03 - 패턴 구조화 및 작성

 

패턴의 작성자는 패턴의 설계, 구현 방법 및 목적을 설명해야 한다. 

관계성을 생각하여 규칙의 형태로 패턴을 제시..

 

디자인 패턴의 구성 요소

- 이름, 설명, 컨텍스트 개요, 문제 제시, 해결 방법 등..

 

좋은 패턴은 사용자에게 충분한 참고 자료를 제공해야 하며 그 근거가 있어야 한다.

 

Chapter 04 - 안티 패턴

 

안티 패턴은 겉으로만 해결책처럼 생긱 패턴을 뜻한다.

 

1. 자바스크립트 대표적인 안티 패턴

 

1) 전역 건텍스트에서 수많은 변수를 정의하여 전역 네임스페이스를 오염시키기

자바스크립트에서 대표적인 전역 객체는 "window"

함수 밖에서 선언한 변수는 전역 변수가 되므로, 네임스페이스 패턴이나 즉시 실행 함수를 이용해야 한다.

 

2) setTimeout 이나 setInterval 에 함수가 아닌 문자열을 전달하여 내부적으로 eval() 실행되게 하기

setTimeout("console.log('hi')", 1000);

 

setTimeout/setInterval 의 첫 번째 인자에는 문자열이 들어갈 수 있는데 이게 내부적으로 eval로 처리되어 실행속도가 늦어진다.

ㄷㄷ;;

 

3) 네이티브 객체의 프로토타입을 수정하기 

자바스크립트는 이미 선언된 객체의 프로퍼티를 추가하거나 수정이 가능하다.

이미 존재하는 객체를 오버라이드 하면  네이티브 객체의 기본 동작을 기대한 다른 개발자에게 혼란을 줄 수 있다.

 

4) 자바스크립트를 인라인으로 사용하여 유연성을 떨어뜨리기 

Dom 엘리먼트에 직접적으로 이벤트 바인딩 하지 않기 !

 

5) document.createElement 대신 document.write 사용

document.write는 이미 페이지가 로드된 상태에서 덮어쓰기 하기 때문에 의도치 않은 동작이 발생할 수 있다.

 

Chapter 05 - 최신 자바스크립트 문법과 기능

 

(생략)

 

Chapter 06 - 디자인 패턴의 유형

디자인 패턴은 어떤 문제를 해결하느냐에 따라 세 가지 유형으로 분류된다.

 

1. 생성 패턴

주어진 상황에 적합한 객체를 생성하는 방법에 중점을 둔다.

생성 패턴은 객체 생성 과정을 제어하여 문제를 해결하는 것을 목표로 한다.

• 싱글톤(Singleton): 클래스의 인스턴스를 하나로 제한하고, 어디서든 접근 가능하게 함.
• 팩토리 메서드(Factory Method): 객체 생성을 서브클래스에 위임하여 캡슐화.
• 추상 팩토리(Abstract Factory): 관련 객체들의 그룹 생성을 위한 인터페이스 제공.
• 빌더(Builder): 복잡한 객체를 단계별로 생성하며 표현과 생성을 분리.
• 프로토타입(Prototype): 기존 객체를 복제하여 새로운 객체 생성.

2. 구조 패턴

객체의 구성과 각 객체 간의 관계를 인식하는 방법에 중점을 둔다.

• 어댑터(Adapter): 클래스 인터페이스를 다른 인터페이스로 변환하여 호환성 제공.
• 브리지(Bridge): 구현부와 추상부를 분리하여 독립적인 확장 가능.
• 컴포지트(Composite): 트리 구조로 객체를 구성해 단일 객체와 복합 객체를 동일하게 다룸.
• 데코레이터(Decorator): 객체에 동적으로 새로운 기능을 추가.
• 퍼사드(Facade): 복잡한 서브시스템에 대한 간단한 인터페이스 제공.
• 플라이웨이트(Flyweight): 공유를 통해 메모리 사용을 최소화.
• 프록시(Proxy): 접근 제어나 대리 역할을 수행하는 객체 제공.

 

3. 행위 패턴

시스템 내의 객체 간 커뮤니케이션을 개선하거나 간소화 하는 방법에 중점을 둔다.

• 책임 연쇄(Chain of Responsibility): 요청을 처리할 수 있는 객체가 있을 때까지 전달.
• 커맨드(Command): 요청을 캡슐화하여 실행, 취소 등을 가능하게 함.
• 인터프리터(Interpreter): 언어의 문법을 표현하고 해석.
• 반복자(Iterator): 컬렉션 요소에 순차적으로 접근하는 방법 제공.
• 중재자(Mediator): 객체 간 상호작용을 캡슐화해 직접적인 참조 제거.
• 메멘토(Memento): 객체 상태 저장 및 복원 지원.
• 옵저버(Observer): 상태 변화 시 관련 객체들에게 알림 전송.
• 상태(State): 상태에 따라 다른 동작 수행.
• 전략(Strategy): 알고리즘 군을 정의하고 교환 가능하게 캡슐화.
• 템플릿 메서드(Template Method): 알고리즘 골격 정의, 세부 구현은 서브클래스에서 처리.
• 방문자(Visitor): 연산을 별도의 클래스로 분리해 확장성 제공.