\uc774\ubca4\ud2b8 \uc885\ub958\ub9c8\ub2e4 \uc804\ub2ec\ub418\ub294 \ub370\uc774\ud130, \uc989 \ud398\uc774\ub85c\ub4dc(payload)\uc758 \ud0c0\uc785\uc740 \ubaa8\ub450 \ub2e4\ub985\ub2c8\ub2e4. \uc608\ub97c\ub4e4\uc5b4 \uc544\ub798\uc758 \uac1d\uccb4\uc5d0\uc11c key\ub294 \uc774\ubca4\ud2b8 \uc774\ub984, \uac12\uc740 \ud398\uc774\ub85c\ub4dc \ud615\uc2dd\uc785\ub2c8\ub2e4.<\/p>\n
\r\n\/\/ \uc774\ubca4\ud2b8 \ub9f5 \uc815\uc758: \uc774\ubca4\ud2b8 \uc774\ub984 -> \ud398\uc774\ub85c\ub4dc \ud0c0\uc785\r\ntype EventMap = {\r\n login: { userId: string; timestamp: number };\r\n logout: { userId: string };\r\n purchase: { itemId: string; price: number };\r\n};\r\n<\/pre>\n\uc774\uc81c \uc704\uc5d0\uc11c \uc815\uc758\ub41c \uc774\ubca4\ud2b8\ub97c \ub4f1\ub85d\ud558\uace0 \ubc1c\uc0dd\ud574\uc8fc\ub294(Emit) \ub2e4\uc74c\uacfc \uac19\uc740 \ubc94\uc6a9 \ud074\ub798\uc2a4\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nclass TypedEventEmitter<Events extends Record<string, any>> {\r\n ...\r\n}\r\n<\/pre>\n\uc704\uc758 TypedEventEmitter<\/code>\ub294 \uc774\ubca4\ud2b8\ub97c \ub4f1\ub85d(on<\/code> \ub9e4\uc11c\ub4dc)\ud560 \uc218 \uc788\uc5b4\uc57c \ud558\uace0 \ud2b9\uc815 \uc0c1\ud669\uc5d0\uc11c \uc774\ubca4\ud2b8\ub97c \ubc1c\uc0dd(emit<\/code> \ub9e4\uc11c\ub4dc)\ud560 \uc218 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uadf8\ubcf4\ub2e4 \uba3c\uc800 \ub4f1\ub85d\ub420 \uc774\ubca4\ud2b8\ub97c \uc800\uc7a5\ud558\uae30 \uc704\ud55c \ucee8\ud14c\uc774\ub108 \ud544\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \uc544\ub798\ucc98\ub7fc\uc694.<\/p>\n\r\n private listeners: {\r\n [K in keyof Events]?: Array<(payload: Events[K]) => void>;\r\n } = {};\r\n<\/pre>\n\uc774\ubca4\ud2b8\ub97c \ub4f1\ub85d\ud558\ub294 on<\/code> \ub9e4\uc11c\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\n on<K extends keyof Events>(\r\n event: K,\r\n callback: (payload: Events[K]) => void\r\n ): void {\r\n if (!this.listeners[event]) {\r\n this.listeners[event] = [];\r\n }\r\n this.listeners[event]!.push(callback);\r\n }\r\n<\/pre>\n\uadf8\ub9ac\uace0 \uc774\ubca4\ud2b8\ub97c \ubc1c\uc0dd\uc2dc\ud0a4\ub294 emit<\/code> \ub9e4\uc11c\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694.<\/p>\n\r\n emit<K extends keyof Events>(event: K, payload: Events[K]): void {\r\n this.listeners[event]?.forEach((cb) => cb(payload));\r\n }\r\n<\/pre>\n\uc774\ub807\uac8c \ub9cc\ub4e0 \ud074\ub798\uc2a4\ub294 \ub2e4\uc74c\ucc98\ub7fc \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n\/\/ \uc0ac\uc6a9 \uc608\uc2dc\r\nconst emitter = new TypedEventEmitter<EventMap>();\r\n\r\nemitter.on(\"login\", (payload) => {\r\n \/\/ payload\ub294 \uc790\ub3d9\uc73c\ub85c { userId: string; timestamp: number } \ud0c0\uc785\uc73c\ub85c \ucd94\ub860\ub428\r\n console.log(`${payload.userId}\ub2d8\uc774 \ub85c\uadf8\uc778\ud588\uc2b5\ub2c8\ub2e4. (${payload.timestamp})`);\r\n});\r\n\r\nemitter.on(\"purchase\", (payload) => {\r\n console.log(`\uc544\uc774\ud15c ${payload.itemId} \uad6c\ub9e4, \uac00\uaca9: ${payload.price}\uc6d0`);\r\n});\r\n\r\nemitter.emit(\"login\", { userId: \"user123\", timestamp: Date.now() });\r\nemitter.emit(\"purchase\", { itemId: \"item-42\", price: 15000 });\r\n\r\n\/\/ \uc544\ub798\ucc98\ub7fc \uc798\ubabb\ub41c \ud398\uc774\ub85c\ub4dc\ub97c \ub118\uae30\uba74 \ucef4\ud30c\uc77c \ud0c0\uc784\uc5d0 \uc5d0\ub7ec \ubc1c\uc0dd!\r\n\/\/ emitter.emit(\"login\", { itemId: \"wrong\" }); \/\/ \u274c Type error\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"\uc774\ubca4\ud2b8 \uc885\ub958\ub9c8\ub2e4 \uc804\ub2ec\ub418\ub294 \ub370\uc774\ud130, \uc989 \ud398\uc774\ub85c\ub4dc(payload)\uc758 \ud0c0\uc785\uc740 \ubaa8\ub450 \ub2e4\ub985\ub2c8\ub2e4. \uc608\ub97c\ub4e4\uc5b4 \uc544\ub798\uc758 \uac1d\uccb4\uc5d0\uc11c key\ub294 \uc774\ubca4\ud2b8 \uc774\ub984, \uac12\uc740 \ud398\uc774\ub85c\ub4dc \ud615\uc2dd\uc785\ub2c8\ub2e4. \/\/ \uc774\ubca4\ud2b8 \ub9f5 \uc815\uc758: \uc774\ubca4\ud2b8 \uc774\ub984 -> \ud398\uc774\ub85c\ub4dc \ud0c0\uc785 type EventMap = { login: { userId: string; timestamp: number }; logout: { userId: string }; purchase: { itemId: string; price: number }; }; \uc774\uc81c \uc704\uc5d0\uc11c \uc815\uc758\ub41c \uc774\ubca4\ud2b8\ub97c … <\/p>\n