Implement Parent Server
๋ถ๋ชจ์ ์๋ฒ(ํธ์คํธ) ๊ตฌํํ๊ธฐ
์ด์ ๋จ๊ณ์์ ๋ง๋ ํด๋ผ์ด์ธํธ(๊ฒ์คํธ)์ rpc๋ฅผ ์ ๊ณตํด์ค ์๋ฒ(ํธ์คํธ)๋ฅผ ๋ง๋ค์ด ๋ณด๊ฒ ์ต๋๋ค.
์ด์ ์ ํด๋ผ์ด์ธํธ๋ฅผ ๋ง๋ค ๋๋ iframe ํต์ ์ ๋ํ ๊ณ ๋ฏผ์ ํ ํ์๊ฐ ์์์ต๋๋ค. iframe ๋ด๋ถ์ ํ์ด์ง๋
window.parent.postMessage
๋ฅผ ์ด์ฉํด ๋ถ๋ชจ ํ์ด์ง์ ์ ๊ทผํ์ฌ ๋ฉ์ธ์ง๋ฅผ ๋ณด๋ผ ์ ์๊ธฐ ๋๋ฌธ์
๋๋ค. ๋ฐ๋ฉด ๋ถ๋ชจ ํ์ด์ง
์
์ฅ์์๋ ์ ์ญ ๊ฐ์ฒด๋ฅผ ํตํด iframe element๋ฅผ ์ ๊ทผํ ์ ์์ผ๋ฏ๋ก ๋ ๊ฒฝ์ฐ๋ฅผ ์ ๊ฒฝ์จ์ค์ผ ํฉ๋๋ค.
๋ฐ๋ผ์ iframe ๊ตฌ์กฐ์์์ ๋ถ๋ชจ์ ๊ฒฝ์ฐ HTMLIframeElement๋ฅผ ๋ฐ์ ์์ผ์ ๊ตฌ์ฑํ๋ ํน์ํ ์์ผ์ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
์ ๋นํ Server.tsx
๋ฅผ ์ค๋นํด์ฃผ์ธ์.
import React from "react";
const Server = () => {
return (
<>
<iframe src="/client" />
</>
);
};
export default Server;
์๋ฒ๋ฅผ ๋ง๋ค๊ธฐ ์ํด์๋ createPrimitiveWrpAtomSetAtom
ํจ์๋ฅผ ์ด์ฉํด WRP ์์๋ค์ ๋ด์ jotai atom์
์์ฑํด์ผ ํฉ๋๋ค. ์ด atom์ ์ด๋ฆ์ ์ค์ฌ pwasa
๋ผ๊ณ ๋ถ๋ฅด๊ณ ์์ต๋๋ค. (๋ค๋ฅธ ์์ฒญ๋ ์๋ฏธ๋ ์์ต๋๋ค)
import React from "react";
+ import { createPrimitiveWrpAtomSetAtom } from "@pbkit/wrp-jotai/pwasa";
+ const pwasa = createPrimitiveWrpAtomSetAtom();
๋ค์์ผ๋ก๋ useIframeWrpAtomSetUpdateEffect
hook์ ์ด์ฉํด React ์ปดํฌ๋ํธ ์๋ช
์ฃผ๊ธฐ ๋ด์์ iframe
element์ผ๋ก WRP ์์์ ๋ง๋ค๊ณ pwasa
๋ฅผ ์
๋ฐ์ดํธ ํด์ฃผ์ด์ผ ํฉ๋๋ค.
import React from "react";
import { createPrimitiveWrpAtomSetAtom } from "@pbkit/wrp-jotai/pwasa";
+ import { useIframeWrpAtomSetUpdateEffect } from "@pbkit/wrp-jotai/iframe";
const pwasa = createPrimitiveWrpAtomSetAtom();
const Server = () => {
+ const { iframeRef } = useIframeWrpAtomSetUpdateEffect(pwasa);
return (
<>
+ <iframe ref={iframeRef} src="/client" />
</>
);
};
์ด์ iframeRef๋ฅผ ๋ฑ๋กํ์ผ๋ WRP ์์๋ค์ ๋ด์ atom์ธ pwasa
๊ฐ ์
๋ฐ์ดํธ ๋ ๊ฒ์
๋๋ค.
pwasa
๋ WRP ์์์ atom๋ค๋ก ๋ด๊ณ ์๊ธฐ ๋๋ฌธ์ ์์์ ์ป๊ธฐ ์ํ ์ ํธ hook๋ค๋ ์ ๊ณตํฉ๋๋ค. ์ด hook์ ์ด์ฉํด ์ฑ๋์
๊ฐ์ ธ์ค๊ฒ ์ต๋๋ค.
import React from "react";
+ import { createPrimitiveWrpAtomSetAtom, channel } from "@pbkit/wrp-jotai/pwasa";
import { useIframeWrpAtomSetUpdateEffect } from "@pbkit/wrp-jotai/iframe";
const pwasa = createPrimitiveWrpAtomSetAtom();
const Server = () => {
const { iframeRef } = useIframeWrpAtomSetUpdateEffect(pwasa);
+ const channel = useChannel(pwasa);
return (
<>
<iframe ref={iframeRef} src="/client" />
</>
);
};
์ด์ useWrpServer
hook์ ์ด์ฉํด ์ฑ๋๋ก ์๋ฒ๋ฅผ ๊ตฌํํ ์ ์์ต๋๋ค. ์ด์ ๋จ๊ณ์ client์ ๋ง์ฐฌ๊ฐ์ง๋ก ์๋ฒ๋ฅผ ๊ตฌํํ๋
๋ฐ์๋ ํต์ ๋ฐฉ๋ฒ๊ณผ ์๋น์ค ์ ๋ณด๊ฐ ํ์ํฉ๋๋ค. ํต์ ๋ฐฉ๋ฒ์ ํด๋นํ๋ ์ฑ๋์ด ์ด๋ฏธ ์ค๋น๋์ด ์์ผ๋, ์คํค๋ง๋ฅผ ํตํด ์์ฑ๋ ์ฝ๋๋ฅผ ์ด์ฉํด ์๋น์ค
์ ๋ณด๋ฅผ ์ฑ์๋ฃ์ผ๋ฉด ๋ฉ๋๋ค. ์ด ์๋น์ค์ ์๋ rpc method ์ ๋ณด๋ฅผ methodDescriptor
๋ผ๊ณ ๋ถ๋ฆ
๋๋ค.
import React from "react";
import { createPrimitiveWrpAtomSetAtom, useChannel } from "@pbkit/wrp-jotai/pwasa";
import { useIframeWrpAtomSetUpdateEffect } from "@pbkit/wrp-jotai/iframe";
+ import { useWrpServer } from "@pbkit/wrp-react";
+ import { methodDescriptors } from "../generated/services/pbkit/wrp/example/WrpExampleService";
const pwasa = createPrimitiveWrpAtomSetAtom();
const Server = () => {
const { iframeRef } = useIframeWrpAtomSetUpdateEffect(pwasa);
const channel = useChannel(pwasa);
+ useWrpServer(channel, {}, [
+ [
+ methodDescriptors.getTextValue,
+ ({ res }) => {
+ res.header({});
+ res.send({ text: "hello" });
+ res.end({});
+ }
+ ]
+ ]);
return (
<>
<iframe ref={iframeRef} src="/client" />
</>
);
};
useWrpServer
์ ์๋ ์ธ ๋ฒ์งธ ์ธ์์ ์ฃผ๋ชฉํด์ฃผ์ธ์. ์ธ ๋ฒ์งธ ์ธ์์๋ [methodDescriptor, function]
๋ก ๋
๋ฉ์๋ ๊ตฌํ์ ๋ฐฐ์ด์ ๋ฐ์ต๋๋ค. ๊ฐ ์์ฒญ์ด ์ฌ๋๋ง๋ค, ์๋ง์ methodDescriptor
์ ๋ฑ๋ก๋ ํจ์๊ฐ ์คํ๋๊ฒ ๋ฉ๋๋ค. ํจ์ ์๋
res
๊ฐ์ฒด๊ฐ ์ ๋ฌ๋๋ฉฐ res
๋ฅผ ํตํด ์๋ต์ ํค๋, ๋ด์ฉ(payload), ํธ๋ ์ผ๋ฌ๋ฅผ ์ ์กํ ์ ์์ต๋๋ค.
์ด์ iframe ๋ด์ ์๋, ์ด์ ๋จ๊ณ์ ๊ตฌํํ ํด๋ผ์ด์ธํธ์ ๋ฒํผ์ ๋๋ฌ๋ณด์ธ์. ๊ทธ๋ฌ๋ฉด ๊ฒฐ๊ณผ์ hello
๊ฐ ๋จ๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค!
๋ค์ ์น์ ์์๋ ๋๋จธ์ง(๋ถ๋ชจ ์๋์ฐ์ ํด๋ผ์ด์ธํธ, ์์ ์๋์ฐ์ ์๋ฒ) ๊ตฌํ์ ํตํด WRP์ ๋ชจ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ ๋ฒ์ ์์๋ณด๊ฒ ์ต๋๋ค.
์ด๋ฒ ์น์ ์์ ๊ตฌํํ ๋ด์ฉ์ ์๋์์ ํ์ธํด๋ณด์ธ์!