흔히 프락시(Proxy) 라고 한다면 클라이언트와 서버 사이의 중간 역할을 담당한다고 이해합니다. 이 경우에 프락시는 클라이언트가 서버에 직접 접근하지 않도록 가상화 또는 캡슐화할 수 있습니다. 직접적으로 클라이언트가 서버에 접근하지 않기 때문에 우리는 서버의 기능을 노출할 필요가 없게 됩니다. 자바스크립트로 코딩할 때 위와 같은 프락시 패턴을 활용할 수 있습니다. 하나하나 살펴보겠습니다.

이벤트 관리

하나의 DIV 안에 3개의 버튼이 있고, 이에 대해 각각 이벤트를 부여해야하는 경우를 생각해봅니다.

보통의 각각의 버튼에 이벤트를 부여하는 방식으로 간단하게 문제를 해결할 수 있습니다.

위의 방식은 매우 간단하게 이벤트를 생성하고 작성할 수 있습니다. 하지만 엘리먼트가 많아지고, 이벤트 버블링과 캡처링 등 복잡한 상황이 발생하게 되면 관리하는데 불편함을 줄 수 있습니다. 그러나 프락시 패턴은 이러한 문제를 심플하게 해결해줍니다.

먼저 하나의 객체를 생성합니다. 위의 객체는 분산된 이벤트를 하나로 묶은 모습입니다.

이렇게 이벤트 각각을 "아이디" : "각각의 이벤트" 형태로 묶은 다음 버튼의 부모 엘리먼트에 이벤트를 부여합니다.

코드를 살펴보면 기존엔 3개의 엘리먼트 각각에 이벤트를 부여했습니다. 그러나 이제는 하나의 엘리먼트에 이벤트를 부여하고, 3개의 자식 엘리먼트의 이벤트를 관리할 수 있게 됐습니다. 또한 이벤트 전체를 하나의 객체로 관리하기 때문에 관리의 편리함도 생겼습니다. 이렇게 간단한 경우를 살펴봤으니 조금 더 깊게 들어가보겠습니다.

캐시를 통한 상태 저장

프락시는 중간자의 역할을 감당하기도 하지만 캐시라는 중요한 특징도 가지고 있습니다. 캐시를 통해 저장하고자 하는 상태를 관리할 수 있습니다.

위의 예시에서 alert 명령이 아닌 서버 요청 이벤트를 버튼에 부여해봅시다. 만약 사용자가 버튼을 반복적으로 누른다면 서버에 부담을 줄 수 있습니다. 하지만 이를 티 안나게 막을 수 있는 방법이 바로 캐시입니다.

캐시 역할의 변수 cache를 생성했고, 요청이 발생하면 cache 변수에 해당 키를 추가합니다. 해당 키는 1초 후에 삭제됩니다. 만약 사용자가 1초 안에 여러번 클릭을 한다면 수 많은 요청은 무시하고 1번만 요청을 하게 됩니다.

위의 코드를 조금만 수정하면 반복적인 요청을 제어할 뿐 아니라 요청을 취소하는 경우도 생각해볼 수 있습니다. 우리가 웹서핑할 때 잘못 클릭하는 경우가 생기곤 합니다. 그럼 창이 바뀌기 전에 다른 버튼을 클릭합니다. 이 경우 사용자 입장에선 한 개의 페이지만 조회하겠지만 서버에는 2번의 요청이 진행됩니다. 이를 프락시 패턴으로 처리할 수 있습니다.

위의 코드는 요청이 바로 진행되지 않고, 0.6초 후에 요청이 진행됩니다. 0.6초 안에 다른 요청이 발생하면 기존 요청이 아닌 두번째 요청을 진행하게 됩니다.

잦은 요청 통제하기

때로는 수 많은 요청을 하나하나 처리하는게 비효율적일 수 있습니다. 예를 들면 채팅 서버입니다. 사용자가 쓴 채팅 하나하나마다 요청을 보낸다면 카카오톡 서버는 지금보다 몇 배는 더 커져야할겁니다. 하지만 프락시 패턴을 활용하면 사용자의 여러 메시지를 마치 하나인 것처럼 처리할 수 있고, 또한 서버에 부담도 덜 줄 수 있습니다.

이제 처음 예시로 만든 버튼이 각각 자신의 아이디값을 메시지 형태로 서버로 보낸다고 가정합니다.

프락시 패턴은 여기에서 두 가지 변수를 더해줍니다. 첫번째 변수는 요청이 진행 중인지를 확인하는 변수(isPending) 와 두번째는 요청이 진행 중일 때 사용자가 요청한 메시지 배열(messages) 입니다.

proxyRequest 함수는 사용자가 응답받기도 전에 온 요청에 대해서는 저장하고, 응답이 완료되면 메시지 묶음(배열)으로 서버에 전송합니다. 이렇게 하면 서버는 메시지를 하나씩 요청할 때보다 훨씬 더 효율적으로 작동할 수 있게 됩니다.