JavaScript의 비밀스러운 삶: Proxy

Source: Dev.to

Timothy는 책상에 앉아 약간 압도된 표정을 짓고 있었다. 그는 간단한 user 객체를 가지고 있었지만, 코드에는 if 문이 여기저기 흩어져 있었다.

let user = {
    name: "Timothy",
    age: 25
};

// Timothy의 검증 코드
if (user.age

“데이터를 보호하고 싶어요,” Timothy가 조용히 말했다, “하지만 매 함수마다 검증 로직을 넣어 객체를 어지럽히고 싶지는 않아요. 더 깔끔한 방법이 있을까요?”

Margaret는 따뜻하게 미소 지으며 그 옆에 의자를 끌어당겼다. 비판가가 아니라 안내자였다.

“그것은 매우 성숙한 직관이에요, Timothy,” 그녀가 말했다. “당신이 찾고 있는 것은 메타프로그래밍이에요. 구체적으로는 Proxy라는 도구죠.”

중개자

Margaret는 칠판에 원을 그리고 Target이라고 라벨을 붙였다.

“보통 객체와 상호작용할 때는 직접 객체와 대화하죠,” 그녀가 설명했다. “Proxy를 사용하면 그 객체 앞에 ‘중개자’를 둘 수 있어요.”

const proxy = new Proxy(target, handler);

Target은 원본 객체이고, Handler는 규칙을 정의하는 객체다. 여기에는 상호작용을 가로채는 trap이 들어 있다.

Trap 1: 읽기 가로채기 (get)

“작동 방식을 확인하려고 무해한 장난을 해볼까요,” Margaret가 말했다. “엔진에게 거짓말을 가르쳐 보죠.”

const user = { name: "Timothy" };

const handler = {
    get(target, prop) {
        if (prop === "name") {
            return "The Great " + target[prop];
        }
        return target[prop];
    }
};

const proxyUser = new Proxy(user, handler);

console.log(proxyUser.name); // "The Great Timothy"

Timothy의 눈이 커졌다. “객체 자체를 바꾸진 않았어요. 단지 읽는 방식만 바꾼 거예요.”

“바로 그거예요,” Margaret가 고개를 끄덕였다. “실제 개발에서는 이를 이용해 데이터 접근을 로깅하거나 ‘프라이빗’ 속성을 만들곤 해요. 반환값을 결정하는 건 객체가 아니라 Proxy죠.”

Trap 2: 검증 (set)

“이제 당신의 문제를 해결해볼게요,” Margaret가 부드럽게 말했다. “잘못된 데이터가 객체에 들어가는 걸 막고 싶죠? set trap을 사용하면 됩니다.”

const validator = {
    set(target, prop, value) {
        if (prop === "age" && value

“정확히 그렇습니다,” Margaret가 말했다. “Logic(검증기)과 Data(user)를 분리했어요. 이것이 깔끔한 아키텍처의 핵심이죠.”

도구 모음: Reflect와 기타 Trap

“그게 전부인가요?” Timothy가 물었다.

“전혀 아니에요,” Margaret가 웃으며 답했다. “거의 모든 것을 가로챌 수 있거든요.”

• has trap: in 연산자를 가로채어 키를 숨깁니다.
• deleteProperty trap: 속성 삭제를 방지합니다.
• apply trap: 함수 호출을 가로챕니다.

“그리고 이를 더 쉽게 만들기 위해,” 그녀가 덧붙였다, “우리는 Reflect API를 사용합니다. 이것을 통해 기본 동작을 직접 타깃을 수정하지 않고 수행할 수 있죠.”

set(target, prop, value) {
    if (value

“고마워요, Margaret,” 그가 말했다. “이제 마치 초능력을 얻은 느낌이에요. 언어가 동작하는 방식을 바꿀 수 있거든요.”

Margaret는 그의 어깨를 두드렸다. “그렇죠, Timothy. 하지만 메타프로그래밍의 황금 규칙을 기억하세요.”

“마법에는 대가가 따릅니다. Proxy는 모든 연산에 작은 성능 오버헤드를 추가합니다. 중요한 검증에만 사용하고, 시스템 전체의 모든 객체에 남용하지 마세요. 명확성을 위해 힘을 쓰고, 혼란을 만들지는 마세요.”