자바스크립트의 디자인 패턴
모듈 패턴 Module Pattern
- 하나의 대표 글로벌 변수 안에 여러 함수를 두는 것이 기본적인 모듈 패턴 방식이다.
사용 예
서버 개발, 라이브러리, API 개발
장점
- 모듈 간의 의존성을 최소화하거나 의존성을 파악하기 쉽다.
- 장기적이고 규모가 큰 프로젝트 관리에 유용하다.
- 복잡한 라이브러리에서 용도를 명확하게 구분하고자 모듈 패턴을 확장하여 네임스페이스로 활용한다.
- e.g. 구글의 API 를 사용하기 위해 다음과 같이 쓴다.
let latlng = new google.maps.LatLng(-34, 150);
이벤트 델리게이션 패턴 Event Delegation Pattern
방법 2가지
- 하나의 DOM으로 전체를 둘러싸서 처리하는 방법
- 주요 이벤트가 발생하는 부분 별로 나누어서 처리하는 방법
언제 사용하면 좋을까?
- 다수의 DOM에 한꺼번에 이벤트 리스너를 할당해야할 때 (예: 구글 스프레드시트)
- 동적인 DOM에 이벤트 리스너를 그 때 그때 할당해야할 때
유의할 점
- 바디 태그처럼 너무 상위의 DOM에 하나의 이벤트 리스너를 걸 경우 전파 단계에서 모든 이벤트를 처리하는 자원이 오히려 셀 하나하나 루프를 돌며 리스너를 부착하는 것보다 많이 들 수 있다. 그러니 DOM 트리의 적당한 단계에서 wrapper를 정의해야한다.
프락시 패턴 Proxy Pattern
- 프락시는 클라이언트와 서버 사이에서 중간자 역할을 한다.
- 클라이언트와 서버 양쪽 상황에 따라 (조건에 따라 통신하게 함으로써) 중간에서 흐름을 제어하는 기능으로 활용된다.
- 클릭 이벤트 발생 대상의 id를 기준으로 프락시의 속성에 접근해 함수를 호출한다.
장점
- 클라이언트가 서버에 직접 접근하지 못하도록 한 단 계 가상화 또는 캡슐화를 한다.
- 여러 요청을 묶어 한 번에 통신하여 순서를 보장하는 로직이 추가 되고, 서버 과부하도 방지할 수 있다.
프락시를 이용해 구현 가능한 기능
- 프락시를 활용해 wrapper 기능을 구현할 수 있다. wrapper 함수 안에서 현재 입력으로 들어오는 인자들의 조건에 따라 기존 함수 호출 여부를 결정하는 식으로 활용할 수 있다.
- 프락시를 활용해 캐시 기능을 구현할 수 있다. 클릭 이벤트가 발생해 해당하는 id의 태그를 찾아야할 때, 미리 cache 변수의 속성으로 저장해두고 있다가 사용하는 것이다.
- wrapper 함수를 활용해서 로그 기록을 구현할 수도 있다. 추가적인 전처리 로직을 삽입해서 디버깅, 사용자의 행동 패턴 분석, 라이브러리의 활용도를 통계적으로 분석하고자 할 때 활용한다.
