Proxy 객체 및 Lazy Loading

01. Proxy 객체란?

프록시(proxy)는 대리(행위) 라는 뜻이다. Proxy 객체를 사용하면 한 객체에 대한 기본 작업을 가로채고 재정의하는 프록시를 만들 수 있다. 2개의 파라미터를 사용하여 Proxy를 생성한다.

• target : 프록시할 원본 객체
• handler : 가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의하는 객체

02. 예시

첫번째로, 프록시할 원본 객체를 만든다.

const target = {
    name: 'Alice',
    age: 30,
};

그 다음, 프록시 객체를 만든다.

// 프록시 객체 생성
const handler = {
    // 프로퍼티 읽기를 가로채서 특정 동작을 수행
    get: function (target, property) {
        console.log(`접근한 프로퍼티: ${property}`);
        return target[property];
    },

    // 프로퍼티 쓰기를 가로채서 특정 동작을 수행
    set: function (target, property, value) {
        console.log(`설정한 프로퍼티: ${property}, 값: ${value}`);
        target[property] = value;
    },
};

const proxy = new Proxy(target, handler);

프록시 객체를 생성했기 때문에 원본 객체 대신 프록시 객체에 접근한다.

console.log(proxy.name);  // 접근한 프로퍼티: name, 출력: Alice
proxy.age = 35;          // 설정한 프로퍼티: age, 값: 35
console.log(proxy.age);   // 접근한 프로퍼티: age, 출력: 35

target 객체는 일반적으로 볼수 있는 객체다. handler 객체는 프록시의 동작을 정의하는 핸들러 객체다. get 메서드는 프로퍼티를 읽을 때 호출되며, set 메서드는 프로퍼티를 변경할 때 호출된다.

proxy 객체를 통해 target 객체에 접근하면, handler 객체의 get 및 set 메서드가 호출되고, 이 메서드들은 특정 동작을 수행하고, 원본 객체에 해당 동작을 반영한다.

get 메서드가 프로퍼티에 접근할 때마다 해당 프로퍼티를 출력하고, set 메서드가 프로퍼티를 변경할 때마다 변경한 프로퍼티와 값을 출력한다.

따라서 proxy.name은 get 메서드가 호출되어 name 프로퍼티를 출력하고, proxy.age = 35는 set 메서드가 호출되어 age 프로퍼티를 변경하고, 변경한 프로퍼티와 값을 출력한다.

03. Lazy Loading

현대의 웹 페이지는 대용량의 이미지, 동영상, 자바스크립트 파일 등 다양한 리소스를 포함하고 있다. 이로 인해 페이지 로딩 속도가 느려지고 사용자 경험이 저하될 수 있다. 이러한 문제를 해결하기 위해 Lazy Loading이라는 기법이 등장했다. Lazy Loading은 페이지가 초기 로드될 때 필요한 리소스만 로드하고, 나머지 리소스는 필요한 시점에 동적으로 로드하는 방식이다.

04. Lazy Loading이란?

사용자가 해당 리소스를 요청하기 전까지는 로딩하지 않으며, 필요한 리소스만 로드함으로써 초기 페이지 로딩 속도를 향상시킬 수 있다. 일반적으로 이미지, 동영상, 스크롤 이벤트에 반응하는 콘텐츠 등에 적용할수 있다.

Lazy Loading의 장점

• 페이지 로딩 속도 개선: 필요한 리소스만 로드하기 때문에 초기 페이지 로딩 속도가 향상된다. 사용자는 빠른 페이지 표시를 경험하며, 페이지 전체 로딩이 완료될 때까지 기다릴 필요가 없기 때문.
• 대역폭 절약: 페이지에 포함된 모든 리소스를 한 번에 로드하지 않고 필요한 시점에 로드하기 때문에 대역폭을 절약할 수 있다. 특히, 이미지와 같은 큰 용량의 리소스를 지연해서 로드하면 초기 페이지 로딩 시의 대역폭 사용을 줄일 수 있다.
• UX 개선 : 초기 페이지 로딩 속도가 개선되고 대역폭이 절약되므로, 사용자는 빠른 페이지 응답과 원활한 스크롤 등 개선된 경험을 할수 있다.

Lazy Loading의 구현 방법

• Intersection Observer API 활용: Intersection Observer API를 사용하면 요소가 뷰포트에 들어왔는지 여부를 감지할 수 있다. 이를 활용하여 이미지나 동영상 등을 로드하는 시점을 제어할 수 있다.
• 서버 사이드 렌더링 (SSR): 서버 사이드 렌더링을 통해 페이지를 최초 로딩할 때 필요한 리소스를 동적으로 결정하여 보내는 방법이다. 이를 통해 초기 로딩 시에 필요한 리소스만 로드할 수 있으며, 클라이언트 측에서 추가적인 로딩이 필요하지 않게된다.