디자인 패턴

• 프로그래머가 응용 프로그램이나 시스템을 디자인할 때 일반적인 문제를 해결하는 데에 사용할 수 있는 공식화된 모범 사례이다.

디자인 패턴의 장점

• 최고의 솔루션: 디자인 패턴은 이미 여러번 수정하면서 완성된 것이기 때문에 이미 잘 작동한다는 것을 알고 있다.
• 재사용성
• 풍부한 표현력: 큰 문제를 부분적으로 효율적으로 설명할 수 있다.
• 향상된 의사소통
• 필요없는 코드 리팩토링: 디자인 패턴은 다양한 문제에 대한 최적의 솔루션으로 불리기 때문에 디자인 패턴을 염두에 두고 응용 프로그램을 작성하는 경우 코드 리팩토링이 필요없다고 가정한다.
• 코드베이스 크기 감소

Singleton Pattern

• 클래스의 인스턴스화를 하나의 객체로 제한하는 디자인 패턴이다.
• 시스템 전체에서 작업을 조정하는 데 정확히 하나의 객체가 필요한 경우에 유용하다.
• 예) 여러 사용자가 볼륨을 제어할 수 있는 애플리케이션. 한 사용자가 볼륨을 8로 설정하면 애플리케이션 전체에 전역으로 설정된다. 다른 사용자가 볼륨을 조정하더라도 8부터 시작한다.

Factory Pattern

• 특수 함수인 팩토리 함수를 사용하여 비슷한 객체를 많이 만들 수 있다.
• 비슷한 객체를 반복적으로 생성해야하는 경우에 사용한다.

Mediator Pattern

• 객체 그룹에 대한 중앙 권한을 제공한다.
• 예) 채팅방(중재자)에 들어와 채팅 세션에 참여하는 3명의 참가자. 참가자는 서로에게 메시지를 보내고 채팅방에서 라우팅을 처리한다. (중재자가 채팅을 받은 후에 라우팅으로 채팅을 전달한다.) 죽, 메시지를 다이렉트로 보내는 것이 아닌 중재자를 거쳐서 메시지가 전달된다. 이를 통해 참가자를 정크 메시지로부터 보호하는 등의 기능을 추가할 수 있다.

State Pattern

• 각 객체가 특정 상태를 나타내는 제한된 객체 집합에 상태별 논리를 제공한다.
• 객체의 내부 상태에 따라 스스로 행동을 변경할 수 있게 허가하는 패턴이다.
• 객체는 마치 자기 자신의 클래스를 바꾸는 것처럼 보이게 된다.
• State 객체가 다음 상태로의 전환을 결정한다.

Module Pattern

• 코드를 더 작고 재사용 가능한 조각으로 분할해준다.
• ES2015는 내장 javascript 모듈을 도입했다.
• 모듈은 javascript가 포함된 파일이며, 특정 값을 쉽게 노출하고 숨길 수 있도록 한다.
• 모듈 내의 값은 기본적으로 모듈 내에서 비공개로 유지되고 수정할 수 없기 때문에 코드 캡슐화를 도와준다.
• export 키워드를 사용하여 명시적으로 내보낸 값만 다른 파일에서 엑세스 할 수 있다.

일반 스크립트와 모듈의 차이

모듈의 특징

엄격 모드 (use strict)

• 선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 발생시킨다.

한 번만 실행

• 중복된 스크립트는 무시한다.

지연 실행

• 보통 스크립트에서 지연 실행을 하려면 defer속성을 붙여야 하지만 모듈 스크립트는 defer속성 없이 지연 실행을 한다.
• 외부 모듈 스크립트를 다운로드 할 때 브라우저 html처리가 멈추지 않고, 스크립트 html 문서가 준비 완료된 후에 실행된다.

모듈 레벨의 스코프

• type="module"로 하면 그 파일안에 모듈안에 자신만의 스코프가 만들어지므로 모듈 내부에서 정의한 변수나 함수를 다른 스크립트에서 접근할 수 없다.
• 외부 오리진에서 스크립트를 불러오려면 Cors 헤더가 있어야 한다.

인라인 모듈 스크립트 비동기처리

• 일반 스크립트에서 async: 외부 스크립트를 불러올 때만 유효하다. 스크립트 로딩이 끝나면 다른 스크립트나 html 문서 처리를 기다리지 않고 바로 실행된다.
• 모듈 스크립트에서 async: 외부 스크립트를 불러올 때뿐만 아니라 인라인 스크립트에서 적용 가능하다. 인라인 스크립트에 async가 붙었기 때문에 다른 스크립트나 html 문서 처리를 기다리지 않고 바로 실행된다. -> 독립적인 기능을 구현할 때 유용하다.

Observer Pattern

event-driven 시스템을 이용하는 것을 Observer Design Pattern 이라고 한다.

• 특정 subject를 관찰하는 많은 Observer가 있다.
• 관찰자는 기본적으로 관심이 있고 해당 주제 내부에 변경 사항이 있을 때 알림을 받기를 원한다.
• 그래서 그들은 그 주제에 스스로를 등록(register)한다.
• 주제에 관심을 잃으면 등록을 취소한다.
• 게시자-구독자 모델이라고도 한다.
• 예) 트위터에서 유명인(주체, Subject)을 팔로우하는 추종자들(관찰자, Observer)