소개

Javascript에서 프록시를 사용하면 특정 개체 작업을 포착하고 사용자 정의할 수 있습니다. 프록시는 객체와 "실제 세계" 사이의 중개자 역할을 합니다. 따라서 객체 기본 작업을 향상하여 더 복잡한 논리를 구현하거나 필요에 맞게 기본 작업을 재정의할 수 있습니다.

사용 사례에는 다음이 포함됩니다.

• 로그 속성 액세스, 디버깅에 유용함
• 객체와의 모든 상호 작용 유효성 검사(예: 양식 유효성 검사)
• 일관된 형식을 적용하는 데 도움이 됩니다.

프록시는 두 가지 매개변수를 사용합니다:

• 대상: 프록시하려는 원본 개체입니다.
• 핸들러: 가로챌 작업과 해당 작업을 재정의하는 방법을 정의하는 개체

기본 예

const target = {
    greeting1: "Hello",
    greeting2: "Good morning"
}

const handler = {
    get(target, prop, receiver) {
        return target[prop]   " friends!"
    }
}

const proxy = new Proxy(target, handler)

console.log(proxy.greeting1) // Hello friends!
console.log(proxy.greeting2) // Good morning friends!

이 예에서는 프록시를 정의합니다. 대상 개체에는 두 가지 속성이 있습니다. get() 핸들러의 구현을 제공하는 핸들러를 정의합니다. get 트랩은 대상 객체의 모든 속성에 대한 액세스를 가로채고 그 안에서 필요에 따라 동작을 수정할 수 있습니다.

이 설정을 사용하면 대상 객체의 속성에 액세스할 때마다 핸들러가 이를 가로채서 구현한 코드를 실행한다는 의미입니다. 우리의 경우에는 속성 값을 가져와 친구를 추가합니다!.

반영하다

프록시는 Reflect API와 함께 사용되는 경우가 많습니다. Reflect는 Proxy 트랩과 동일한 이름을 가진 메서드를 제공합니다. 이름에서 알 수 있듯이 해당 객체 내부 메서드를 호출하기 위한 의미를 반영합니다.

const target = {
    greeting1: "Hello",
    greeting2: "Good morning"
}

const handler = {
    get(target, prop, receiver) {
        return Reflect.get(...arguments)   " friends!"
    }
}

const proxy = new Proxy(target, handler)

console.log(proxy.greeting1) // Hello friends!
console.log(proxy.greeting2) // Good morning friends!

Reflect는 프록시를 사용하는 데 필수는 아니지만 Reflect를 사용하면 동작이 기본 Javascript 엔진 작업과 일치하는지 확인할 수 있습니다. 또한 향후 업데이트와의 호환성을 보장하고 의도하지 않은 부작용을 방지하며 코드를 단순화합니다. 이것이 없으면 개발자는 오류가 발생하기 쉽고 Javascript의 기본 동작과 일치하지 않을 수 있는 속성 액세스, 할당, 삭제와 같은 동작을 다시 구현해야 합니다.

예

프록시로 무엇을 할 수 있는지 알아보기 위해 몇 가지 예를 만들어 보겠습니다.

벌채 반출

첫 번째 예에서는 객체에 대해 어떤 작업이 수행되었는지 기록하려고 한다고 가정해 보겠습니다. 속성을 가져오거나 설정하거나 삭제할 때마다 콘솔에 인쇄하고 싶습니다. 이는 디버깅 목적으로 유용할 수 있습니다.

const target = {
    name: "Damien",
    age: 32,
    status: "WRITING"
}

const loggerHandler = {
    get(target, prop, receiver) {
        if (prop in target) {
            console.log(`[LOG] Accessing property ${prop}. Current value is ${target[prop]}`)
            return Reflect.get(...arguments)
        } else {
            console.error(`[LOG] Error accessing non-existent property ${prop}`)
        }

    },

    set(target, key, value) {
        console.log(`[LOG] Setting property ${key}. New value: ${value}`)
        return Reflect.set(...arguments)
    },

    deleteProperty(target, prop) {
        console.warn(`[LOG] Deleting property: ${prop}`)
        return Reflect.deleteProperty(...arguments)
    }
}

const proxy = new Proxy(target, loggerHandler)

proxy.name // [LOG] Accessing property name. Current value is Damien
proxy.status // [LOG] Accessing property status. Current value is WRITING

proxy.name = "Bob" // [LOG] Setting property name. New value: Bob
proxy.status = "NAPPING" // [LOG] Setting property status. New value: NAPPING

proxy.job = "Developer" // [LOG] Setting property job. New value: Developer

delete proxy.job // [LOG] Deleting property: job

proxy.job // [LOG] Error accessing non-existent property job

우리는 3가지 기본 작업인 가져오기, 설정 및 삭제를 재정의하는 loggerHandler를 정의했습니다. 각 작업에 대해 무슨 일이 일어나고 있는지 설명하는 내용을 콘솔에 기록합니다. Proxy의 장점은 매번 콘솔 명령문을 작성할 필요가 없다는 것입니다. 우리는 항상 그렇듯이 객체와 상호 작용하고 프록시는 로깅 동작을 처리합니다. 정말 멋지죠?

입력 검증

두 번째 예에서는 프록시를 사용하여 양식 데이터에 대한 입력 유효성 검사를 수행합니다.

const validationRules = {
    name: value => value.length >= 3 || "Name must be at least 3 characters long",
    age: value => Number.isInteger(value) || "Age must be a number",
    email: value => value.includes('@') || "Enter a valid email"
}

let formData = {
    name: "",
    age: null,
    email: ""
}

const formHandler = {
    set(target, key, value) {
        if (typeof value === "string") {
            value = value.trim()
        }
        const validationResult = validationRules[key](value)
        if (validationResult !== true) {
            console.error(`Validation failed for property ${key}: ${validationResult}`)
            return false;
        }

        return Reflect.set(...arguments)
    }
}

const formProxy = new Proxy(formData, formHandler)

formProxy.age = "32 years old" // Validation failed for property age: Age must be a number
formProxy.name = "Da" // Validation failed for property name: Name must be at least 3 characters long
formProxy.email = "damcoss mail.com" // Validation failed for property email: Enter a valid email

formProxy.age = 32 // OK
formProxy.name = "Damien" // OK
formProxy.email = "[email protected]" // OK

여기에서는 값이 유효한지 여부를 확인하는 데 사용되는 다양한 방법으로 객체를 정의합니다. 그런 다음 동일한 논리를 사용합니다. 프록시하려는 대상 개체 formData가 있습니다. formHandler에서 set() 메서드를 재정의하여 입력 값에 유효성 검사 규칙을 적용합니다.

결론

Reflect API와 결합된 프록시는 객체에 대한 작업을 가로채고 사용자 정의할 수 있는 유연하고 강력한 도구입니다. 이를 사용하면 동작을 동적으로 향상하고 제어할 수 있습니다. Reflect API를 사용하면 동작이 Javascript 엔진과 일치하는지 확인할 수도 있습니다.

프록시는 반응형 프로그래밍, API 래퍼, 속성 관찰과 같은 고급 동작을 지원하기 위해 라이브러리와 프레임워크에서 자주 사용됩니다.

즐거운 시간 보내세요 ❤️