
React Native์ ์น์ด ๊ณต์กดํ๋ ๋ ํ๋์ ๋ฐฉ๋ฒ (1)
React Native์ ์น์ด ๊ณต์กดํ๋ ๋ ํ๋์ ๋ฐฉ๋ฒ (1) ๊ด๋ จ
FEConf2024์์ ๋ฐํํ <React Native์ ์น์ด ๊ณต์กดํ๋ ๋ ํ๋์ ๋ฐฉ๋ฒ>์ ์ ๋ฆฌํ ๊ธ์ ๋๋ค. ๋ฐํ ๋ด์ฉ์ 2ํ๋ก ๋๋์ด ๋ฐํํฉ๋๋ค. 1ํ์์๋ ์น๊ณผ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๊ฐ ํต์ ํ๋ฉฐ ์๊ธด ๋ฌธ์ ์ ๊ณผ ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ด ๋๋ค. 2ํ์์๋ ์ค์ ์ฌ๋ก๋ฅผ ํด๊ฒฐํ๋ ๊ณผ์ ๊ณผ ์ด ๊ณผ์ ์ ํตํด Type-Safe์ ์น๊ณผ ์ฑ์ ๋๊ธฐํ์ ๋ํด ์์๋ด ๋๋ค. ๋ณธ๋ฌธ์ ์ฝ์ ๋ ์ด๋ฏธ์ง์ ์ถ์ฒ๋ ๋ชจ๋ ์ด ์ฝํ ์ธ ์ ๊ฐ์ ์ ๋ชฉ์ ๋ฐํ ์๋ฃ๋ก, ๋ฐ๋ก ์ถ์ฒ๋ฅผ ํ๊ธฐํ์ง ์์์ต๋๋ค.
์๋ ํ์ธ์. โReact Native์ ์น์ด ๊ณต์กดํ๋ ๋ ํ๋์ ๋ฐฉ๋ฒโ์ด๋ผ๋ ์ ๋ชฉ์ ๋ฐํ๋ฅผ ์งํํ ๊ฐ์ ๊ท์ ๋๋ค. ์ ๋ ์ธ์๋ํธ์์ ๋ธ๋๋์ ํฌ๋ฆฌ์์ดํฐ๋ฅผ ์ด์ด์ฃผ๋ ํ๋ซํผ, โ๋ธ๋๋์งโ์ด๋ผ๋ ์๋น์ค๋ฅผ ๊ฐ๋ฐํ๊ณ ์์ต๋๋ค. ํ์ ์คํ์์ค์ ๊ด์ฌ์ด ๋ง๊ณ , ๊ฐ๋ฐ์ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์๋ ๋ฐฉ๋ฒ์ ๋ํ ๊ณ ๋ฏผ์ ๋ง์ด ํ๊ณ ์์ต๋๋ค.
์ ๋ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ ์น๋ทฐ์ ์น ๊ฐ์ ํต์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค์ด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฐ๋ฐํ์ต๋๋ค. ์ด๋ฒ ๋ฐํ์์๋ ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ฐํ์ผ๋ก ์น๋ทฐ ๊ฐ๋ฐ์ ํ์ํ ํต์ ์ ๋ํ ๋ด์ฉ์ ์๊ฐํฉ๋๋ค.
์๋ ์ฃผ์๋ก ๋ค์ด๊ฐ๋ฉด ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํ ๋ฌธ์๊ฐ ์ค๋น๋์ด ์์ผ๋, ํจ๊ป ๋ณด๋ฉด์ ๋ฐ๋ผ์ค๋ฉด ๋ ์ดํดํ๊ธฐ ์์ํ ๊ฒ์ด๋ผ ์๊ฐ๋ฉ๋๋ค.

์ฝ๋ฅด๋๋ฐ์์ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ก์ ์ ํ
๋ณธ๊ฒฉ์ ์ธ ๋ด์ฉ์ ์์ ์๋น์ค๋ฅผ ๋ง๋ค๋ฉฐ ์์๋ ์ผ์ ๋ํด ๋จผ์ ์๊ฐํ๊ฒ ์ต๋๋ค. ๊ธฐ์กด ๋ธ๋๋์ง ์๋น์ค๋ ์ฝ๋ฅด๋๋ฐ๋ก ๊ฐ๋ฐ๋์ด ์์๊ณ , ์ด๋ฅผ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ก ์ ํํ๊ฒ ๋์์ต๋๋ค. ์ฝ๋ฅด๋๋ฐ๋ก ์์ฑ๋ ์ฝ๋์๋ ๋ ๊ฑฐ์ ์ฝ๋๊ฐ ๋ง์ด ๋จ์ ์์๊ณ , ์ด๋ฅผ ์ ์ง์ ์ผ๋ก ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ก ์ ํํ๋ฉฐ ๋ ๊ฑฐ์์์ ๋ฐ์ํ๋ ๋ค์ํ ๋ฌธ์ ๋ค์ ํด๊ฒฐํ๊ณ ์ ํ์ต๋๋ค.
์ฝ๋ฅด๋๋ฐ
๋จผ์ ์ฝ๋ฅด๋๋ฐ์ ๋ํด ๊ฐ๋จํ๊ฒ ์์๋ณด๊ฒ ์ต๋๋ค. ์ฝ๋ฅด๋๋ฐ๋ ์น ์ฑ์ผ๋ก ๊ฐ๋ฐ๋ ์๋น์ค๋ฅผ ์ฑ์ผ๋ก ํจํค์ง ํ์ฌ ๋ฐฐํฌํ๋ ๋๊ตฌ์ ๋๋ค. ํ์ฌ์ ๊ธฐ์กด ์๋น์ค๋ Vue2 ๊ธฐ๋ฐ์ 100% ์น ์ฑ์ผ๋ก ๋ง๋ค์ด์ก๊ธฐ ๋๋ฌธ์ ์ฑ์คํ ์ด์ ์ถ์ํ๊ธฐ ์ํด์๋ ์น ์ฑ์ ์ฑ์ผ๋ก ๋ํํ๋ ๋๊ตฌ๊ฐ ํ์ํ์ต๋๋ค. ์ด ๋ํ ๋ถ๋ถ์ ์ฝ๋ฅด๋๋ฐ๋ฅผ ํ์ฉํด ๊ฐ๋ฐํ์ฌ ์ฑ์คํ ์ด์ ์ถ์ํ ์ํฉ์ด์์ต๋๋ค.

๋ ๊ฑฐ์ ์ฝ๋
์๋ ์ด๋ฏธ์ง๋ ๊ธฐ์กด ์๋น์ค์ ๋ผ์ดํธํ์ฐ์ค ์ ์์ ๋๋ค. ์๊ฐ๋ณด๋ค ์ฒ์ฐธํ ์ ์๋ฅผ ๋ณด์ฌ์ฃผ๋๋ฐ, ์ด๋ ๊ฒ ๋ ์ด์ ๋ ๊ธฐ์กด ๋ ๊ฑฐ์ ์ฝ๋์์ ์ฐพ์ ์ ์์ต๋๋ค. ์์ ๋งํ Vue2 ๊ธฐ๋ฐ์ผ๋ก ๋ ๊ฑฐ์ํ๊ฒ ๊ด๋ฆฌํ๋ค ๋ณด๋, ์ ์ ๋ ๋ ๊ฑฐ์ ์ฝ๋๋ง ์์ฑํ ์๋ฐ์ ์๋ ์ํฉ์ด์์ต๋๋ค.

์ด๋ก ์ธํด ๋ ๊ฑฐ์ ์ฝ๋๋ฅผ ์ฒญ์ฐํ๊ณ ์ ์ง์ ์ผ๋ก ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ก ์ ํํ์๋ ๊ฒฐ์ ์ ๋ด๋ฆฌ๊ฒ ๋์ต๋๋ค. ๊ฒฐ๊ตญ ์๋ก ๋ง๋ค์ด์ง๋ ํ๋ฉด์ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ก ๊ฐ๋ฐํ๊ณ , ๊ธฐ์กด์ ์๋ Vue.js ๋ถ๋ถ์ ์น๋ทฐ๋ก ๋ํ ํ๋ฉด์ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์ ์น๋ทฐ๊ฐ ๊ณต์กดํ๋ ์ํ์ ์ฑ์ด ๋์์ต๋๋ค.
์น๋ทฐ ํต์
๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ก์ ์ ํ์ ํตํด ๋ณธ๊ฒฉ์ ์ผ๋ก ์น๋ทฐ๋ฅผ ๊ฐ๋ฐํ๊ฒ ๋์์ต๋๋ค. ์น๋ทฐ๋ฅผ ํ์ฉํ ๊ฐ๋ฐ์ ํ๋ค ๋ณด๋ฉด ํต์ ๋ฌธ์ ๋ฅผ ๋ง๋๊ฒ ๋ฉ๋๋ค.
์น๋ทฐ ํต์ ์ ์ ํ์ํ๊ณ , ์ ๊ฐ ๊ฒช์ ํต์ ๋ฌธ์ ๋ ์ด๋ป๊ฒ ํด๊ฒฐํ์์๊น์? ์ด๋ฒ ๊ธ์์๋ ์๋์ ๊ฐ์ 3๊ฐ์ง ์ํฉ์ ๋ํด ์์๋ณด๊ฒ ์ต๋๋ค.
- ์ธ์ฑ ๋ธ๋ผ์ฐ์
- ๋ค์ดํฐ๋ธ ๋ด๋น๊ฒ์ด์
- ๊ณต์ ๋ฐ์ดํฐ

์ธ์ฑ ๋ธ๋ผ์ฐ์ ๋ ๋ค์ดํฐ๋ธ ์ฑ์์ ์ธ์ฑ์ผ๋ก ๋ธ๋ผ์ฐ์ ๋ฅผ ์คํํด ์ฃผ๋ ๊ธฐ๋ฅ์ ๋๋ค. ํด๋น ๊ธฐ๋ฅ์ ์น์์ ์ฌ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์ ๋ค์ดํฐ๋ธ ์ฑ์ ํ์ ๋น๋ ค์ผ ํฉ๋๋ค. ๋ํ, ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ก ์ ์ง์ ์ธ ์ ํ์ ํ๊ณ ์์๊ธฐ ๋๋ฌธ์ ์น์์๋ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์ ํ๋ฉด์ผ๋ก ์ด๋ํ ์ ์์ด์ผ ํ์ต๋๋ค. ๋ง์ง๋ง์ผ๋ก ์ธ์ฆ ์ ๋ณด์ ๊ฒฝ์ฐ ๋๋ถ๋ถ ๋ค์ดํฐ๋ธ ์ฑ์ ์ ์ฅ๋๊ธฐ ๋๋ฌธ์ ์น์์ ๋ค์ดํฐ๋ธ ์ฑ์ ๊ณต์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ ์ฌ์ฉํ ์ ์์ด์ผ ํฉ๋๋ค.
์น๋ทฐ ํต์ ๋ ์ดํดํ ํ์๊ฐ ์์ต๋๋ค. ์๋ ์ฝ๋๋ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์ ์ ๊ณตํ๋ ๊ธฐ๋ณธ์ ์ธ ํต์ ๋ฐฉ๋ฒ์ ๋๋ค. ์น์์ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ก ํต์ ํ ๋๋ ์น์ ReactNativeWebView์ postMessage๋ฅผ ํตํด ๋ฌธ์์ด์ ์ ์กํ ์ ์์ต๋๋ค. ์น๋ทฐ์์๋ onMessage๋ผ๋ props๋ฅผ ํตํด ์ ์ก๋ฐ์ ๋ฌธ์์ด์ ์ฒ๋ฆฌํฉ๋๋ค.

๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์ ์น์ผ๋ก ํต์ ํ ๋๋ injectJavascript๋ผ๋ props๋ฅผ ํตํด์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฃผ์ ํ ์ ์์ต๋๋ค. ๋ํ ๋ ํผ๋ฐ์ค(ref)๋ฅผ ๊บผ๋ด์ ๋์ผํ ๋ฐฉ์์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฃผ์ ํ๋ ๋ฐฉ๋ฒ๋ ์กด์ฌํฉ๋๋ค.


์ฒ์์๋ ์ด๋ฐ ๋ฐฉ๋ฒ์ ํ์ฉํด์ ๊ฐ๋ฐ์ ์งํํ๊ณ , ํต์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค์์ต๋๋ค.
๊ทธ๋๋ก ์งํํ๋ค๊ณ ํ๋ค๋ฉด, ์ฑ๊ณต์ ์ผ๋ก ๊ฐ๋ฐ์ ๋ง์น ์ ์์์๊น์? ์ด ๋ฐฉ๋ฒ์ ์ฌ๋ฌ ๊ฐ์ง ๋ฌธ์ ์ ์ ๊ฐ์ ธ์์ต๋๋ค.
์น๋ทฐ ํต์ ์ ํ๋ฉฐ ๊ฒช์ ๋ฌธ์ ์
1. onMessage์ ๋ถ๊ธฐ
์ฒซ ๋ฒ์งธ ๋ฌธ์ ์ ์ onMessage์์์ ๋ฌด์ํ ๋ง์ ๋ถ๊ธฐ์ ๋๋ค. ์๋ ์ฝ๋์ฒ๋ผ ๋ชจ๋ ์ด๋ฒคํธ ๊ธฐ๋ฐ ๋ก์ง๋ค์ onMessage์์ ๋ถ๊ธฐ ์ฒ๋ฆฌํด์ผ ํ๋ ๋ฌธ์ ์ ์ด ์์ต๋๋ค. ์๋๋ 3๊ฐ์ง ๊ฒฝ์ฐ์ ๋ํด์๋ง ๋์ํ๋ ์ฝ๋์ด์ง๋ง, ์ค์ ์ํฉ์์๋ ๋ฌด์ํ ๋ง์ ํต์ ์ํฉ์ ์๊ตฌํ๊ธฐ ๋๋ฌธ์, ์ ์ ๋ ๋ณต์กํ๊ณ ๋ฌด๊ฑฐ์ด ์ฝ๋๊ฐ ๋ ๊ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๋ฐ๋ผ์ ์ ์ง ๋ณด์๋ ์ด๋ ค์์ง๋ ๋ฌธ์ ์ ์ด ์๊น๋๋ค.

2. ๋นํจ์จ์ ์ธ ํจ์ ์ฌ์ ์
๋ ๋ฒ์งธ ๋ฌธ์ ๋ ํต์ ํจ์๋ฅผ ์๋์ ๊ฐ์ด ์น๊ณผ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ ์์ชฝ์ ์ ์ธํด์ผ ํ๋ค๋ ์ ์ ๋๋ค. ์๋ฅผ ๋ค์ด ์ธ์ฑ ๋ธ๋ผ์ฐ์ ๋ผ๋ ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋์ ๋, ์น์์๋ โ์คํ ์ธ์ฑ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ด์ด์คโ๋ผ๋ ๋ฉ์์ง๋ฅผ ์ ๋ฌํด์ผ ํ๊ณ , ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์๋ ์ด ๊ฒ์ ํธ๋ค๋งํ ์ ์๋ ์ฝ๋๋ฅผ ์์ฑํด์ผ ํฉ๋๋ค. ๋ฐ๋ผ์ ๊ธฐ๋ฅ์ด ํ๋ ์ถ๊ฐ๋ ๋๋ง๋ค ๊ฐ๋ฐ์ ๋นํจ์จ์ด ๋ฐ์ํ๋ค๊ณ ์๊ฐํ์ต๋๋ค.

3. ๋จ๋ฐฉํฅ ๋ฌธ์
์ธ ๋ฒ์งธ ๋ฌธ์ ๋ ๋จ๋ฐฉํฅ์ ๋ํ ๋ฌธ์ ์ ๋๋ค. ์น์์ PostMessage๋ฅผ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ก ๋ณด๋์ ๋, ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์๋ ๊ฒฐ๊ณผ๊ฐ์ ๋๋ ค์ค ์ ์์ต๋๋ค. ์ด๋ฌํ ๊ตฌ์กฐ์ ๊ฐ์ฅ ํฐ ๋ฌธ์ ๋ ์ฑ๊ณต๊ณผ ์คํจ๋ฅผ ์ ์ ์๋ค๋ ์ ์ ๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์น์์๋ ํญ์ ์ฑ๊ณต์ ๋ณด์ฅํ๋ ์ฝ๋๋ฅผ ์์ฑํด์ผ ํ๋ ๋ถ๋ด์ด ์๊น๋๋ค. ์ ๋ ์ด ๋จ๋ฐฉํฅ ๋ฌธ์ ๊ฐ ๊ฐ์ฅ ํฐ ๋ฌธ์ ์ ์ด๋ผ๊ณ ์๊ฐํ์ต๋๋ค.

4. ํ์ ํธํ์ฑ
๋ง์ง๋ง ๋ฌธ์ ์ ์ ํ์ ํธํ์ฑ์ ์์ต๋๋ค. ์น๊ณผ ๋ค๋ฅด๊ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐฐํฌ๋ฅผ ํด๋ ์ฆ์ ์ต์ ์ ์ ์งํ์ง ์์ต๋๋ค. ์ฑ์คํ ์ด์์ ์ฌ์ฌ๋ฅผ ํ๊ณ ์ฌ์ฌ๊ฐ ์น์ธ๋ ํ์ ์ค์ ์ฑ์คํ ์ด์ ์ ๋ฐ์ดํธ๋๋ ๊ณผ์ ๊น์ง ๋๋์ผ ํฉ๋๋ค. ๋ฐ๋ฉด์ ์น์ ๋ฐฐํฌ๋ฅผ ํ๋ฉด ์ฆ์ ์ต์ ์ ์ ์งํ๋ ์ฑ์ง์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
์ ์ ๋ ๊ณผ๊ฑฐ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ์ง๊ณ ์๋ ์ํฉ์ธ๋ฐ, ์น์์ ์๋ก์ด ๋ค์ดํฐ๋ธ ๊ธฐ๋ฅ์ ํธ์ถํ๋ฉด ์ด๋ป๊ฒ ๋ ๊น์? ๊ณผ๊ฑฐ ๋ฒ์ ์ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ํด๋น ์ต์ ๊ธฐ๋ฅ์ ๊ฐ์ง ์ฝ๋๋ฅผ ํธ๋ค๋งํ ์ ์๊ธฐ ๋๋ฌธ์ ์๋ฌด๋ฐ ๋ฐ์์ด ์๊ฑฐ๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ ๊ฒ์ ๋๋ค.

์ค์ ์ฌ๋ก
์์ ์๊ฐํ ๋ฌธ์ ์ ๋ค์ ๋ํ ์ค์ ์ฌ๋ก๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค. ์ ๊ฐ ๋ง๋ค๋ ์๋น์ค๋ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ก ์ ์ง์ ์ธ ์ ํ์ ํ๊ณ ์์๊ณ , ์ ๋ ์ ํ ๋ํ ์ผ ํ๋ฉด ๊ฐ์ ์ ์์ํ์ต๋๋ค. ๋ค๋ง ๊ทธ๋ฌ๋ค ๋ณด๋ ์น๋ทฐ ํ๋ฉด์์ ์ ํ์ ๋๋ ์ ๋, ์๋ก์ด ๋ค์ดํฐ๋ธ ํ๋ฉด์ผ๋ก ์ด๋ํ๋ ๊ฒฝ์ฐ์ ๊ธฐ์กด์ ์๋ ๋ ๊ฑฐ์ ์น ํ๋ฉด์ผ๋ก ์ด๋ํด์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ํจ๊ป ์กด์ฌํ์ต๋๋ค.
์ฆ, ์ฌ์ฉ์๊ฐ ์ฌ์ฉํ๋ ์ฑ์ ๋ฒ์ ์ ํ์ธํ์ฌ ์ํฉ์ ๋ง๊ฒ ์๋ก ๋ค๋ฅธ ํ์ด์ง ์ด๋์ ๊ตฌํํด์ผ ํ๋ ์ํฉ์ด์์ต๋๋ค. ๋ฐ๋ผ์ ์ฑ๊ณต์ ๋ณด์ฅํ๋ ์ฝ๋๋ฅผ ์์ฑํด์ผ ํ๊ณ , ์ ์ ์์ด์ ํธ๋ฅผ ํตํด์ ์ฌ์ฉ์์ ์ฑ ๋ฒ์ ์ ํ์ธํ๊ณ ํ์คํ๊ฒ ์ฑ๊ณตํ ์ ์๋ ์ด๋ฒคํธ๋ฅผ ํธ์ถํ๋๋ก ๊ฐ๋ฐ๋์์ต๋๋ค.

์ง๊ธ๊น์ง ์ค๋ช ํ ๊ธฐ์กด ๋ฐฉ์์ ๋ฌธ์ ์ ๋ํด ๊ฐ๋จํ๊ฒ ์ ๋ฆฌ๋ฅผ ํ๋ฉด ์ด๋ ์ต๋๋ค. ๋จผ์ ๋ชจ๋ ์ด๋ฒคํธ๊ฐ onMessage๋ฅผ ํตํด ํธ๋ค๋ง ๋๊ธฐ ๋๋ฌธ์ ์ ์ง ๋ณด์๊ฐ ์ด๋ ค์ด ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ๋, ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋ ๋๋ง๋ค ์น๊ณผ ์ฑ ์์ชฝ์ ํต์ ํจ์๋ฅผ ์์ฑํด์ผ ํด์ ๋ค์ ๋นํจ์จ์ ์ ๋๋ค. ๋ค์์ผ๋ก ๋จ๋ฐฉํฅ ํต์ ์ ํ๊ณ ๋๋ฌธ์ ๊ธฐ๋ฅ์ ์ฑ๊ณต๊ณผ ์คํจ๋ฅผ ์ ์ ์์ด์ ๋ฐ๋์ ์ฑ๊ณต์ ๋ณด์ฅํ๋ ์ฝ๋๋ฅผ ์์ฑํด์ผ ํฉ๋๋ค. ๋ง์ง๋ง์ผ๋ก ์ฑ์ ๋ฒ์ ์ ๋ฐ๋ผ ํ์ํธํ์ฑ์ ํ๋ณํ๋๋ฐ ์ด๋ ค์์ด ์์ต๋๋ค.

๋ฌธ์ ์ ํด๊ฒฐ์ ์ํด ๊ด์ ์ ๋ฐ๊พธ๊ธฐ
์ด๋ฐ ๋ฌธ์ ์ ์ ์ฒ์๋ถํฐ ๋ค์ ์๊ฐํด ๋ณด๊ธฐ๋ก ํ์ต๋๋ค. ์น ๊ฐ๋ฐ์์๊ฒ ์์ฃผ ์ต์ํ ํด๋ผ์ด์ธํธ ์๋ฒ ๊ตฌ์กฐ๋ฅผ ์ดํด๋ณด๋ฉด, ํด๋ผ์ด์ธํธ๋ ์๋ฒ๋ก ์์ฒญ์ ๋ณด๋ด๊ณ , ์๋ฒ๋ ์ด ์์ฒญ์ ๋ฐ์์ ์ฒ๋ฆฌํ ๋ค ํด๋ผ์ด์ธํธ์ ์๋ต์ ๋ณด๋ ๋๋ค.
์ด ๊ตฌ์กฐ์์ ํด๋ผ์ด์ธํธ๋ ์ ์ ํ ์ฑ๊ณต๊ณผ ์คํจ๋ฅผ ์ ์ ์์ต๋๋ค. ์ด๋ฐ ๊ตฌ์กฐ๋ฅผ ์ฐจ์ฉํ ๊ฐ๋จํ ์ธํฐํ์ด์ค์ ๋ํด ์๊ฐํ๋ ค๊ณ ํฉ๋๋ค.

์๋๋ tRPC์ ์ฝ๋์ ๋๋ค. ๋จผ์ tRPC๋ ์๋ฒ์ ํด๋ผ์ด์ธํธ ๊ฐ์ ํ์ ์์ ์ฑ์ ๋ณด์ฅํ๋ฉฐ, ๋ณ๋์ ์คํค๋ง ์ ์ ์์ด API๋ฅผ ๊ตฌ์ถํ ์ ์๊ฒ ํด์ฃผ๋ ํ๋ ์์ํฌ์ ๋๋ค.
์๋ ๊ทธ๋ฆผ์ ์ผ์ชฝ ์ฝ๋๊ฐ ์๋ฒ๊ณ , ์ค๋ฅธ์ชฝ์ด ํด๋ผ์ด์ธํธ ์ฝ๋์ ๋๋ค. ์๋ฒ์์ ํ๋ก์์ ๋ฅผ ์ ์ธํ๊ณ ์ธํ๊ณผ ๊ฒฐ๊ณผ๊ฐ์ ์ ๋ฌํด ์ฃผ๊ณ ์์ต๋๋ค. ํด๋ผ์ด์ธํธ์์๋ ํด๋น ํ๋ก์์ ๋ฅผ ๋ฐ๋ก ์ฌ์ฉ ๊ฐ๋ฅํ ํํ๋ก ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. tRPC์์๋ ๋ณ๋์ ํต์ ์ฝ๋๊ฐ ์กด์ฌํ์ง ์๋๋ค๋ ๊ฒ์ ์ ์ ์์ต๋๋ค.

์ด tRPC์์ ์๊ฐ์ ๋ฐ์ ์ ์ฌํ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค ์ ์์ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ ํ์ต๋๋ค. ์์ ์๋ฒ-ํด๋ผ์ด์ธํธ ๊ตฌ์กฐ์์ ์ฝ๊ฐ์ ๊ด์ ์ ๋ฐ๊พธ๋ฉด ํฌ๊ฒ ๋ค๋ฅด์ง ์๋ค๋ ๊ฒ์ ์ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ดย ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ฅผ ์๋ฒ๋ผ๊ณ ์๊ฐํ๊ณ ์น๋ทฐ๋ฅผ ํด๋ผ์ด์ธํธ๋ผ๊ณ ์๊ฐํ๋ฉด ์ด๋จ๊น์?

์น๋ทฐ๋ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ก ์์ฒญ์ ๋ณด๋ด๊ณ , ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์๋ ์ ์ ํ ๋ฆฌ์คํฐ์ค๋ฅผ ์ ๋ฌํ๋ค๋ฉด ํ๋ก ํธ์๋-๋ฐฑ์๋ ๊ตฌ์กฐ์ ํฌ๊ฒ ๋ค๋ฅผ ๊ฒ ์์ด tRPC์ ๊ตฌ์กฐ๋ ์ฌ์ฉํ ์ ์์ ๊ฒ์ ๋๋ค.
์ฌ์ฉ๋ฒ ์ค์ฌ ์ค๊ณ: Usage
์ด์ฒ๋ผ ๋ค์ํ ๊ณ ๋ฏผ ๋์ ๊ฒฐ์ ํ ์ฌ์ฉ๋ฒ๋ค์ ์๊ฐํด ๋ณด๊ฒ ์ต๋๋ค. ์๋ ๊ทธ๋ฆผ์ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์๋ ๋ธ๋ฆฟ์ง์ ๋ค์ดํฐ๋ธ ๋ฉ์๋๋ฅผ ์ ์ธํ๊ณ getMessage
์์ ๋ฆฌํด ๊ฐ์ ๋ณด๋ด๊ณ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ฌํ ๊ตฌ์กฐ๋ฅผ ๋ธ๋ฆฟ์ง๋ผ ์นญํ๊ณ createWebView
์ ์ด ๋ธ๋ฆฟ์ง๋ฅผ ์ฃผ์
์์ผ ์ค๋๋ค.
์น์์๋ linkBridge
๋ผ๋ ํจ์๋ฅผ ์คํํ๋ฉด ์ด ๋ธ๋ฆฟ์ง ์์ ๋ด๊ธด openInAppBrowser
๋ฅผ ๋ฐ๋ก ์ฌ์ฉํ ์ ์์ด์ผ ํ๊ณ , ๋จ๋ฐฉํฅ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ํ๋ก๋ฏธ์ค ๊ตฌ์กฐ๋ก ๋ฐํ๋๋ฉด์ then๊ณผ catch๋ฅผ ํตํด ์ฑ๊ณต๊ณผ ์คํจ๋ฅผ ์ ์ถํ ์ ์์ต๋๋ค. ๋ํ, ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์ ๋ณด๋ธ ๋ฆฌํด ๊ฐ์ ๋ฐ์์ ์ถ๋ ฅํ ์ ์์ด์ผ ํ๊ณ , ๋ธ๋ฆฟ์ง์ ์ ์ธํ์ง ์์ asd์ ๊ฐ์ ์ด์ํ ํจ์๋ฅผ ์คํ์ํค๋ฉด ์๋ฌ๊ฐ ๋ฐ์๋๋ฉด ์ข๊ฒ ๋ค ์๊ฐํ์ต๋๋ค.

์ฌ์ฉ๋ฒ ์ค์ฌ ์ค๊ณ: Initialization
์ฌ์ฉ๋ฒ์ ์ค๊ณํ์ผ๋ ์ค์ ๊ธฐ๋ฅ์ ๊ฐ๋ฐํ ์ฐจ๋ก์ ๋๋ค. ๊ธฐ๋ฅ์ ๊ฐ๋ฐํ๋ฉด์ ์ ๋ฆฝ๋ ๊ฐ๋ ์ด ๋ช ๊ฐ์ง ์์ต๋๋ค.
์ฒซ ๋ฒ์งธ ๊ฐ๋ ์ Initialization์ ๋๋ค. ์ฒ์์ ๋ค์ดํฐ๋ธ ๋ฉ์๋๋ค์ด ์ ์ธ๋์์๋ ํด๋น ๋ค์ดํฐ๋ธ ๋ฉ์๋๋ค์ ์ด๋ฆ๋ค์ด ์น์ผ๋ก ์ฃผ์ ๋๊ฒ ๋ฉ๋๋ค. ๋ฐ๋ผ์ ์น์ ๋ค์ดํฐ๋ธ ๋ฉ์๋๋ค์ ์ด๋ฆ์ ๊ฐ์ง๊ณ ์๋ ์ํ์ ๋๋ค.

์ฌ์ฉ๋ฒ ์ค์ฌ ์ค๊ณ: Hydration
๋ ๋ฒ์งธ ๊ฐ๋ ์ Hydration์ ๋๋ค. Next.js๋ Remix๋ฅผ ์ฌ์ฉํด ๋ณด์ จ๋ค๋ฉด Hydration ๊ฐ๋ ์ ์๊ณ ์์ ํ ๋ฐ, ์ฌ๊ธฐ์ ์๊ฐ์ ๋ฐ์์ ์ ๋ฆฝํ ๊ฐ๋ ์ ๋๋ค. ์น์ ๋ค์ดํฐ๋ธ ๋ฉ์๋๋ค์ ์ด๋ฆ์ ๊ฐ์ง๊ณ ์์ผ๋ ์ด ์ด๋ฆ์ ์ด์ฉํด์ ์๋์ผ๋ก ํต์ ์ฝ๋๋ฅผ ์์ฑํ ์ ์๊ฒ ํ์ต๋๋ค.
์ฆ, openInAppBrowser
๋ผ๋ ๊ฒ์ด ์ฃผ์
๋์์ ๋, ์๋์ postMessage
์ฒ๋ผ ๋ฐํ์์์ ์๋์ผ๋ก ํต์ ์ฝ๋๋ฅผ ๋ง๋ค์ด ์ฃผ๋ ๊ธฐ๋ฅ์ ๊ตฌํํ์ต๋๋ค.

์ฌ์ฉ๋ฒ ์ค์ฌ ์ค๊ณ: Event to Promise
์ธ ๋ฒ์งธ ๊ฐ๋
์ ์ด๋ฒคํธ ๊ตฌ์กฐ๋ฅผ Promise
๊ตฌ์กฐ๋ก ๋ณ๊ฒฝํ๋ ๊ฒ์
๋๋ค. ์น์์ ์๋์ผ๋ก ๋ง๋ค์ด์ง openInAppBrowser
๋ฅผ ์คํํ์ ๋, ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ก ์ด๋ฒคํธ๋ฅผ ์ ์กํฉ๋๋ค. openInAppBrowser
๋ ์ด์ ๋์์ EventEmitter
๊ฐ ์ค์น๋๋ฉด์ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์๋ ๋ฆฌ์คํฐ์ค ์ด๋ฒคํธ๋ฅผ ์ ์กํฉ๋๋ค. openInAppBrowser
์์๋ ํด๋น ๋ฆฌ์คํฐ์ค ์ด๋ฒคํธ๋ฅผ ๋ฐ์ผ๋ฉด ๊ทธ๋ Promise
๋ฅผ ๋ฆฌ์กธ๋ธ ํ๋ฉด์ ๊ฒฐ๊ณผ ๊ฐ์ ์น์ผ๋ก ๋ณด๋ด์ค๋๋ค. ์ด ๊ตฌ์กฐ๋ฅผ ์ ์ฉํ๋ฉด ๋จ๋ฐฉํฅ ๋ฌธ์ ๋ฅผ ์ด๋ ์ ๋ ํด๊ฒฐํ ์ ์์ต๋๋ค.

์ฌ์ฉ๋ฒ ์ค์ฌ ์ค๊ณ: ์กด์ฌํ์ง ์๋ ๋ฉ์๋ ์์ธ ์ฒ๋ฆฌ
์์ ๋งํ ๊ฒ์ฒ๋ผ ํต์ ์ฝ๋๋ฅผ ์๋์ผ๋ก ๋ง๋ค๊ธฐ ๋๋ฌธ์ ์กด์ฌํ์ง ์๋ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ ์ค์๊ฐ ์๊ธธ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ์๋์ ๊ฐ์ด ๋ธ๋ฆฟ์ง๊ฐ ์ ์ธ๋์ด ๋ฐ๋ก ์ฌ์ฉํ ์ ์๋ ์ํ์ธ๋ฐ, ์ด ๋ธ๋ฆฟ์ง์ ์กด์ฌํ์ง ์๋ ๋ฉ์๋๋ฅผ ์คํํ๋ค๋ฉด ์๋์ ๊ฐ์ด ๋ฐํ์์์ ์๋ฌ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.

์ด๋ ๊ฒ ๋ฐ์ํ ์๋ฌ๋ ํ๋ก์๋ฅผ ํตํด ๊ฐ๋จํ๊ฒ ํด๊ฒฐํ ์ ์์ต๋๋ค. ์๋์ ๊ฐ์ด ์๋ณธ ๊ฐ์ฒด๋ฅผ ํํน ํด์ ๊ธฐ์กด์ ์กด์ฌํ๋ ํค๋ผ๋ฉด ๊ทธ๋๋ก ๋ฐํํด ์ฃผ๋ ๋ฐ๋ฉด์ ์กด์ฌํ์ง ์๋ ํค๋ผ๋ฉด ์ต๋ช ์ ํจ์๋ฅผ ๋ฐํํ๋๋ก ์ค๊ณํ์ต๋๋ค. ๋ฐ๋ผ์ ๋ธ๋ฆฟ์ง์ ์กด์ฌํ์ง ์๋ ๋ฉ์๋๋ฅผ ์คํํ๋ฉด, ์คํ์ ๋์ง๋ง ์๋ฌ ํธ๋ค๋ง์ด ๊ฐ๋ฅํ ์ํ๊ฐ ๋ฉ๋๋ค.

์์ ์ค๊ณ ๋ฐ ๊ธฐ๋ฅ ๊ฐ๋ฐ์ ๋ฐํ์ผ๋ก ์ ๋ฆฌํ๋ฉด, ์๋์ ๊ฐ์ด ๊ตฌํ์ด ๊ฐ๋ฅํ๋ค๋ ๊ฒ์ ์ ์ ์์ต๋๋ค.
๋ธ๋ฆฟ์ง์์ ๋ค์ดํฐ๋ธ ๋ฉ์๋๋ฅผ ์ ์ธํ๊ณ , ๋ค์ดํฐ๋ธ ๋ฉ์๋๋ค์ createWebView๋ฅผ ํตํด ์ฃผ์ ๋ฉ๋๋ค. ์ด ๊ณผ์ ์์ initialization ๊ณผ์ ์ ํตํด ๋ฉ์๋๋ค์ ์ด๋ฆ์ด ์น์ผ๋ก ์ฃผ์ ๋ฉ๋๋ค.
์น์์ linkBridge๋ฅผ ์คํํ๋ฉด Hydration ๊ณผ์ ์ ๊ฑฐ์ณ ์๋์ผ๋ก ํต์ ์ฝ๋๊ฐ ์์ฑ๋๊ณ , bridge์ openInAppBrowser์ ๊ฐ์ด ๋ฐ๋ก ์ฌ์ฉํ ์ ์๋ ํํ์ ํจ์๊ฐ ์์ฑ๋ฉ๋๋ค. Promise ๊ตฌ์กฐ๋ก ๋ณ๊ฒฝ๋์๊ธฐ ๋๋ฌธ์ then๊ณผ catch๋ฅผ ํตํด ์ฑ๊ณต๊ณผ ์คํจ๋ฅผ ์ ์ ์๊ณ , asd์ ๊ฐ์ ์ด์ํ ํจ์๋ฅผ ์คํํ๋๋ผ๋ ํ๋ก์๋ฅผ ํตํด ์๋ฌ ํธ๋ค๋ง์ ํ ์ ์์ต๋๋ค.

ํ์ํธํ์ฑ: ์ฌ์ฉ ๊ฐ๋ฅํ ๋ฉ์๋ ์ฒดํฌ
๋ค์์ผ๋ก ํ์ ํธํ์ฑ ๊ด๋ จ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ๋ฐฉ์์ ๋ํด ์๊ฐํ๊ฒ ์ต๋๋ค. ์น์ ํญ์ ์ต์ ์ ๋ณด์ฅํ๊ธฐ ๋๋ฌธ์ ์น์์ ์ฌ์ฉ ๊ฐ๋ฅํ ๋ฉ์๋๋ฅผ ์ฒดํฌํ๋ค๋ฉด ํ์ ํธํ์ฑ ๋ฌธ์ ๋ฅผ ์ด๋ ์ ๋ ํด๊ฒฐํ ์ ์๋ค๊ณ ์๊ฐํ์ต๋๋ค.
Initialization ๊ณผ์ ์ ํตํด openInAppBrowser์ getMessage๊ฐ ์ฃผ์ ๋์ ๋ ์๋์ ๊ฐ์ ์ ํธ ํจ์๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ๋ฐ๋ผ์ ํ์ฌ ์ฌ์ฉํ ์ ์๋ ๋ฉ์๋์ธ์ง ํ๋ณํ๊ณ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค๋ฉด ์คํํ๊ณ , ์๋๋ผ๋ฉด ๋์ฒด ์ฝ๋๋ฅผ ์คํํ ์ ์์ต๋๋ค.

ํ์ํธํ์ฑ: throwOnError
๋ ๋ฒ์งธ๋ก throwOnError
๋ผ๋ ์ต์
๋ ๋์
ํ์ต๋๋ค. throwOnError
์ openInAppBrowser
๋ฅผ ๋ฃ๊ฒ ๋๋ค๋ฉด, ์ด openInAppBrowser
๋ฉ์๋๊ฐ ์กด์ฌํ์ง ์๊ฑฐ๋ ์คํจ๋ฅผ ํ๊ฒ ๋๋ค๋ฉด ์น์์ ํจ๊ป ์คํจํ๋๋ก ์ ๋ํ๋ ์ฅ์น์
๋๋ค. ์น์์๋ ์ค๋ฅ๊ฐ ํจ๊ป ๋๊ธฐ ๋๋ฌธ์ catch
๋ฅผ ํตํด ์๋ฌ ํธ๋ค๋ง์ ์ฝ๊ฒ ํ ์ ์์ต๋๋ค.

ํ์ํธํ์ฑ: onFallback
๋ง์ง๋ง์ onFallback์ด๋ผ๋ ์ต์ ์ ๋๋ค. ์ด ์ต์ ์ ๋ธ๋ฆฟ์ง์ ๋ํ ์๋ฌ๋ฅผ ์ผ๊ด ์ฒ๋ฆฌ ๊ฐ๋ฅํ๋๋ก ํ๋ ๋๊ตฌ์ ๋๋ค. sentry์ ๊ฐ์ ์๋ฌ ์ถ์ ๋๊ตฌ๋ฅผ ํจ๊ป ํ์ฉํ๋ฉด ๋์ฑ ์ ์ฉํ๊ฒ ์ฌ์ฉํ ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค.

์ง๊ธ๊น์ง, ์น๊ณผ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๊ฐ ํต์ ํ๋ฉฐ ์๊ธด ๋ฌธ์ ์ ๊ณผ ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ดค์ต๋๋ค. ๋ค์ ๊ธ์์๋ ์ด๋ฌํ ๊ฐ๋ ์ ํ์ฉํด ์ค์ ์ํฉ์์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ๊ณผ์ ๋ค์ ๋ํด ์๊ฐํ๊ฒ ์ต๋๋ค.
์ด์ ๊ธ์์ ์น๊ณผ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๊ฐ ํต์ ํ๋ฉฐ ์๊ธด ๋ฌธ์ ์ ๊ณผ ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ดค์ต๋๋ค. ์ด๋ฒ ๊ธ์์๋ ์์ ๊ธ์ ๋ด์ฉ์ ํ์ฉํด ์ค์ ์ฌ๋ก๋ฅผ ํด๊ฒฐํ๋ ๊ณผ์ ๊ณผ ์ด ๊ณผ์ ์์ ๊ฒช์ Type-Safe, ์น๊ณผ ์ฑ์ ๋๊ธฐํ์ ๋ํด ์๊ฐํฉ๋๋ค.
์ค์ ์ฌ๋ก ํด๊ฒฐ
์ค์ ์ฌ๋ก์์ ๋ฐ์ํ ๋ฌธ์ ์ ์ ์ด์ ๋ ์ด๋ ์ ๋ ํด๊ฒฐํ ์ ์์ต๋๋ค. โ์น๋ทฐ์ ์ ํ์ ๋๋ฅด๋ฉด ๋ค์ดํฐ๋ธ ํ๋ฉด์ด ๋ณด์ด๊ฑฐ๋, ๊ธฐ์กด์ ์๋ ์น ํ๋ฉด์ด ๋ณด์ฌ์ผ ํ๋คโ๋ ์๊ตฌ ์ฌํญ์ ๋ฐ์์ ๋, ๊ธฐ์กด์๋ ์ฑ๊ณต์ ๋ณด์ฅํ๋ ์ฝ๋๋ฅผ ์์ฑํด์ผ ํ์ง๋ง ์ด์ ๋ ์ฌ๋ฌ ๋๊ตฌ๋ค์ ๋ง๋ จํด ๋์ต๋๋ค. ๋ฐ๋ผ์ ์ผ๋ถ๋ฌ ์คํจํ๊ฒ ํด์ failover
๋ฅผ ํ๋ฉด ๋๊ฒ ๋ค๊ณ ์๊ฐํ์ต๋๋ค.

์๋ ๊ทธ๋ฆผ์ ์์ ์ค์ ์ฌ๋ก์ ๋ํ ์ฝ๋์
๋๋ค. ์ด ๋ธ๋ฆฟ์ง์๋ ์น์์ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์ ํ๋ฉด์ ํธ์ถํ๋ navigate
๋ฅผ throwOnError
์ ๋ฃ์ด ๋์ต๋๋ค. navigate
์์ ์ค๋ฅ๊ฐ ๋๋ฉด ์น์์๋ ํจ๊ป ์ค๋ฅ๊ฐ ๋๋๋ก ๋์ด ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด ๋ธ๋ฆฟ์ง navigate
๋ฅผ ํตํด ProductDetail
ํ๋ฉด์ผ๋ก ์ด๋ํ ๋, ์กด์ฌํ๋ ํ๋ฉด์ด๋ผ๋ฉด ์ ์ด๋ํ ๊ฒ์ด๊ณ , ๊ทธ๋ ์ง ์๋ค๋ฉด catch
๋ฅผ ํตํด ๊ตฌ ๋ฒ์ ์ธ ๋ ๊ฑฐ์ ํ์ด์ง๋ก ์ด๋ํ ์ ์์ต๋๋ค.

๊ธฐ์กด ๋ฐฉ์์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํฉ๋๋ค.
onMessage
์ ๋ณต์กํ ๋ก์ง์ด ๋ชฐ๋ ค์๋ ํ์์ ๋ฉ์๋ ๋ณ ๊ด๋ฆฌ๋ฅผ ํตํด ํด๊ฒฐํ ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ธฐ์กด์๋ ๊ธฐ๋ฅ ์ถ๊ฐ ์ ์์ชฝ์ ๋ฐ๋ณต์ ์ธ ํต์ ํจ์๋ฅผ ์์ฑํด์ผ ํ์ง๋ง, ํต์ ํจ์๋ฅผ ์๋์ผ๋ก ์์ฑํ๋๋ก ํด์ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์๋ง ์ ์งํ๋ฉด ๋ฉ๋๋ค. ๋, ์ค์ํ ๋ฌธ์ ์ธ ๋จ๋ฐฉํฅ ํต์ ์ ํ๋ก๋ฏธ์ค ๊ตฌ์กฐ๋ก ๋ฐ๊พธ๋ฉด์ ํด๊ฒฐ๋์๊ณ , ๋ง์ง๋ง์ผ๋ก ํ์ ํธํ์ฑ์ ๋ํ ๋ฌธ์ ์ ๋ํด์๋ ๋ชจ๋ ๊ฒ์ ํด๊ฒฐํ์ง๋ ๋ชปํ์ง๋ง, failover
๋ฅผ ๋์์ฃผ๋ ์ ํธ์ ํตํด ์ด๋ ์ ๋ ํด์ํ ์ ์์์ต๋๋ค.

ํ์ ์ธ์ดํ
์ด์ ๋ถํฐ ์๊ฐํ ๋ด์ฉ์ ์ด๋ฌํ ๊ณผ์ ์ ๊ฑฐ์ณ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋ค๋ฉฐ ์ค์ํ๊ฒ ์๊ฐํ โํ์ ์ธ์ดํโ์ ๋ํ ๊ฒ์ ๋๋ค. ํ์ ์คํฌ๋ฆฝํธ ์ง์์์ ์์ฃผ ์ธ๊ธ๋๋ ํ์ ์ธ์ดํ๊ฐ ์ ํ์ํ์ง ๊ฐ๋จํ๊ฒ ์์๋ณด๊ฒ ์ต๋๋ค.
ํ์ ์ธ์ดํ๊ฐ ํ์ํ ์ด์ : ํ์ ๋ถ์ผ์น
ํ์ ์ธ์ดํ๊ฐ ํ์ํ ์ด์ ์ค ํ๋๋ ํ์ ๋ถ์ผ์น์ ๋๋ค. ํ๋ก ํธ์๋์ ๋ฐฑ์๋ ํ๋ก์ ํธ๊ฐ ๋ ๋ฆฝ์ ์ผ๋ก ์กด์ฌํ ๋ ์ผ๋ฐ์ ์ผ๋ก ์๋ก์ ๋ํด ์ ์ ์์ต๋๋ค. ํ๋ก ํธ์๋๊ฐ ๋ฐฑ์๋๋ก API๋ฅผ ํธ์ถํ๋ฉด, ์ด API์ ์๋ต์ ๋ํ ํ์ ์ ์ ์ ์๊ธฐ ๋๋ฌธ์ ํ์ ์ ๋ฐ๋ก ์ ์ํด์ผ ํฉ๋๋ค.
ํ์ง๋ง ํ์ ์ ๋ฐ๋ก ์ ์ํ๋ค ๋ณด๋ฉด ์ค์๊ฐ ๋ฐ์ํ๊ฒ ๋๊ณ ๋น์ฐํ ํ์ ๋ถ์ผ์น๊ฐ ๋ฐ์ํ๊ฒ ๋ฉ๋๋ค. ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ฅผ ๋ฐฑ์๋๋ผ๊ณ ์๊ฐํ๊ณ ์น๋ทฐ๋ฅผ ํ๋ก ํธ์๋๋ผ๊ณ ์๊ฐํ๋ค๋ฉด, ๋ง์ฐฌ๊ฐ์ง๋ก ํ์ ๋ถ์ผ์น๊ฐ ์ผ์ด๋ ์๋ฐ์ ์์ต๋๋ค.

์ด๋ฌํ ํ์
๋ถ์ผ์น๋ฅผ ์ฝ๋๋ก ์ดํด๋ณด๊ฒ ์ต๋๋ค. ์๋์ ๊ฐ์ด edges๋ node์ ํด๋น node์ id
๋ก ๊ตฌ์ฑ๋ ๊ฐ์ฒด๋ฅผ ๋ฐฐ์ด๋ก ๊ฐ์ง๊ณ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด ๋ฆฌ์คํฐ์ค๋ฅผ ํตํด ์ค๋ฅธ์ชฝ์ ์ํ ์ฝ๋์ ๊ฐ์ด ๋ฆฌ์คํฐ์ค์ ๋ํ ํ์
์ ์ ์ํ๊ฒ ๋ฉ๋๋ค. ํ์
์ด ์ ์์ ์ผ๋ก ์์ผ๋ ๋ฌธ์ ์์ด ๋ ๋๋ง๋ ๊ฒ์ผ๋ก ์์๋ฉ๋๋ค.

ํ์ง๋ง ๋ง์ฝ id
๊ฐ์ null
์ด ์ค๊ฒ ๋๋ฉด ์ด๋ป๊ฒ ๋ ๊น์? ์๋ง ๋ ๋๋ง์ด ์ ๋๋ก ๋์ง ์๊ณ ์๋ ์ผ์ชฝ ์ฝ๋์ฒ๋ผ ๋ฐํ์ ์๋ฌ๊ฐ ๋ฐ์ํ ๊ฒ์
๋๋ค. ์ด๋ฐ ํ์
์๋ฌ๊ฐ ๋ฐ์ํ๋ฉด ๋จผ์ ์ต์
๋ ์ฒด์ด๋์ ํตํด null์ ๋ํ ์์ธ ์ฒ๋ฆฌ๋ฅผ ํ๊ณ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํด์ผ ํฉ๋๋ค.

ํ์ ๋ถ์ผ์น๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ๋ ธ๋ ฅ
์ด๋ฐ ๊ณผ์ ์ ๊ฒช๋ค ๋ณด๋ ์ฌ๋์ ์์ผ๋ก ์์ฑ๋ ํ์ ์ด๋ผ๋ฉด 100% ์ ๋ขฐํ ์ ์๋ค๊ณ ์๊ฐํ์ต๋๋ค. ์ด๋ฐ ํ์ ๋ถ์ผ์น ์ํฉ์ด ๋ฐ๋ณต์ ์ผ๋ก ๋ฐ์ํ๋ค๋ฉด ํ์ ์คํฌ๋ฆฝํธ์ ๋ชฉ์ ์ฑ์ ์์ ์ ์์ต๋๋ค. ํ์ ์คํฌ๋ฆฝํธ์ ๊ฐ์ฅ ํฐ ๋ชฉ์ ์ ์ปดํ์ผ ๋จ๊ณ์์ ๋ฒ๊ทธ๋ฅผ ๋ฏธ๋ฆฌ ๋ฐ๊ฒฌํ๋ ๊ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ํ์ ๋ถ์ผ์น๋ฅผ ์์ฃผ ๋ง๋๋ฉด ํ์ ์ ๋ฌด์ํ๊ณ ๊ฐ๋ฐํ๋ ์ํฉ์ด ์์ฃผ ์๊ธฐ๊ฒ ๋๊ณ , ์ด๋ ํ์ ์คํฌ๋ฆฝํธ์ ๋ชฉ์ ์ฑ์ ์๊ฒ ํฉ๋๋ค.
ํ์ง๋ง ๊ทธ๋งํผ ํ์
์คํฌ๋ฆฝํธ ์ํ๊ณ๋ ์์ฃผ ํฌ๊ธฐ ๋๋ฌธ์ ์ด๋ฌํ ํ์
๋ถ์ผ์น๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ๋
ธ๋ ฅ๋ค์ด ๋ง์ด ์กด์ฌํฉ๋๋ค. REST API์์๋ openapi-generator
๋ฅผ ํตํด์ ์ค์จ๊ฑฐ๋ฅผ ํ์
์คํฌ๋ฆฝํธ๋ก ๋ณํํด ์ค ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ GraphQL์์๋ graphql-codegen
์ ํตํด์ ์คํค๋ง๋ฅผ ํ์
์คํฌ๋ฆฝํธ๋ก ๋ณํํ ์ ์์ต๋๋ค.

์ด๋ฐ ๋๊ตฌ๋ค ์ญ์ ์ถฉ๋ถํ ํ๋ฅญํ ๋๊ตฌ์ด์ง๋ง, ๊ทธ๋ผ์๋ ์ค์จ๊ฑฐ ์ญ์ ์ฌ๋์ ์๊ธธ์ ํ๊ฒ ๋๊ณ ์ด๋ ๊ฒฐ๊ตญ ํ์ ๋ถ์ผ์น์ ๊ฐ์ ์ค์๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. ์ค์จ๊ฑฐ์ ์๋ชป ์์ฑํ ํ์ ์ด ํ์ ์คํฌ๋ฆฝํธ๋ก ๋ง๋ค์ด์ง๋ฉด ์ด ์ญ์๋ ํ์ ๋ถ์ผ์น๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
ํ์ ์ง์ ์ ์ํ์ง ์๊ธฐ: ํ์ ์ถ๋ก
์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์ ๋ ํ์ ์ ์ง์ ์ ์ํ์ง ์๊ธฐ๋ก ํ์ต๋๋ค. ์ ํํ ๋งํ๋ฉด ํ์ ์ถ๋ก ์ ์ ๊ทน์ ์ผ๋ก ํ์ฉํ๊ธฐ๋ก ํ์ต๋๋ค. ์ ๊ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋ค๋ฉด์ ํ์ ์ธ์ดํ๋ฅผ ์ํด ์ ์ฉํ ํ์ ์ถ๋ก ์ปจ์ ์ ๊ฐ๋จํ ์์ ๋ฅผ ํตํด ์์๋ณด๊ฒ ์ต๋๋ค.
typeof
๋ธ๋ฆฟ์ง์์ ๋ค์ดํฐ๋ธ ๋ฉ์๋๋ค์ ์ ์ธํ ๋ ์ธํฐํ์ด์ค๋ฅผ ์์ฑํ์ง ์์์ง๋ง, ํด๋น ๋ธ๋ฆฟ์ง๋ typeof๋ฅผ ํตํด ํ์ ์ ์ ์ถํ ์ ์์ต๋๋ค. ์ด์ ๊ฐ์ด ์ปดํ์ผ๋ฌ์ ๋์์ ๋ฐ์์ ๋ชจ๋ ํ์ ์ ์ ์ถํ ์ ์๊ณ , ์ด๋ฅผ ์น์ผ๋ก ์ ๋ณด๋ด์ค๋ค๋ฉด ์น์์ ๋ฐ์ ํ์ ์ ๋ค์ดํฐ๋ธ์์ ์๋ํ ์ ์์ ์ธ ์ฝ๋๋ก ๋ฐ์๋ ์ ์์ต๋๋ค.

keyof
๋ค์์ผ๋ก keyof์ ๊ฐ์ด ๊ฐ๋จํ ํค์๋๋ฅผ ํ์ฉํด๋ ๊ฐ๋ฐ์ ๊ฒฝํ์ ์ฌ๋ฆด ์ ์์ต๋๋ค. ์๋ ๊ทธ๋ฆผ์ hasMethod์ ๊ฐ์ด keyof๋ฅผ ํตํด ํ์ ์ ์ถ๋ก ํ ์ ์์ต๋๋ค. keyof์ ๋์์ ๋ฐ์ ์ฌ์ฉ ๊ฐ๋ฅํ ํ์ ์ธ์ง ํ๋ณํ์ฌ ์ฌ์ฉํ ์ ์์ต๋๋ค.

generic
์ ๊ฐ ํ์ ์ถ๋ก ์์ ๊ฐ์ฅ ์ค์ํ๋ค๊ณ ์๊ฐํ๋ ๊ฒ์ generic์ ๋๋ค. ์๋์ ๋ธ๋ฆฟ์ง ํจ์๋ subscribe์ getState๋ผ๋ ํจ์๋ฅผ ๋ฐํํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ธ๋ฆฟ์ง์ ํ์ ์ผ๋ก generic ๊ฐ์ฒด๋ฅผ ์ ์ธํ์ต๋๋ค. ๋ฐ๋ผ์ ์ด ๋ธ๋ฆฟ์ง์ 1234๋ผ๋ ๊ฐ์ด ๋ค์ด๊ฐ๋ฉด ๊ฐ์ฒด๊ฐ ์๋๊ธฐ ๋๋ฌธ์ ํ์ ์๋ฌ๊ฐ ๋ฉ๋๋ค. ๋ฐ๋ฉด ์ด๊ณณ์ ๊ฐ์ฒด๊ฐ ๋ค์ด๊ฐ๋ฉด ๋ชจ๋ ํ์ ์ ์์ฑํ ์ ์์ต๋๋ค.

์์ ๋ด์ฉ์์ ๊ฐ์ฅ ์ค์ํ ๋ถ๋ถ์ ์ธํ์ ํตํด ํ์ ์ ์์ฑํ๋ค๋ ๊ฒ์ ๋๋ค. ์๋์ ๊ฐ์ด Tanstack Query์ useQuery๋ฅผ ์ฌ์ฉํ ๋, ์ฟผ๋ฆฌ ํ์ ์์ ๋ฆฌํด์ ๋ฐ๊ฒ ๋๋ค๋ฉด ๋ฆฌํด ๊ฐ์ ํ ๋๋ก ๋ฐ์ดํฐ๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. ๊ฐ๋จํ ์ฝ๋์ฒ๋ผ ๋ณด์ด์ง๋ง, ์ค์ ๋ด๋ถ์ ์ผ๋ก๋ ํ์ ์ถ๋ก ๊ณผ์ ์ ๊ฑฐ์ณ ์ธํ์ ํตํด ๋ชจ๋ ํ์ ์ด ์์ฑ๋ ์ํฉ์ ๋๋ค.

์๋ ์ด๋ฏธ์ง์ ๋ฌธ์ฅ์ Tanstack Query์ ๋ฉ์ธํ ์ด๋๊ฐ ํ ๋ง์ ๋๋ค. ์ด๋ฅผ ๋ณด๋ฉด, ํ์ ์ถ๋ก ์ ์ ํ์ฉํ๋ฉด ์ฝ๋๋ง ๋ดค์ ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ ๊ฐ์ง๋ง, ์ค์ ๋ก๋ ๋ชจ๋ ํ์ ์ด ์์ ํ ์ํ๋ก ์ฌ์ฉํ ์ ์๋ค๊ณ ํฉ๋๋ค. useQuery์ ์ธํฐํ์ด์ค๊ฐ ๋ฐ๋ก ์กด์ฌํ์ง ์์ง๋ง ์ธํ์ ํ ๋๋ก ๋ชจ๋ ํ์ ์ด ์์ฑ๋๊ธฐ ๋๋ฌธ์ ๋๋ค.

ํ์ ์ถ๋ก ์ ๋ํด ๊น๊ฒ ๋ค์ด๊ฐ ๋ณด๋ฉด, ํ์ ์ ์๋ ์์ฒญ ๋ณต์กํ๊ณ ์ ์ง ๋ณด์๋ ์ด๋ ต๊ฒ ๋ณด์ ๋๋ค. ํ์ง๋ง ์ด๋ฐ ๊ฒ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ฑ ์์ด๋ฉฐ, ์ฌ์ฉ์์ ์ฑ ์์ด ์๋๋ผ๋ ๊ทธ์ ๋ง์ ๋ณด๊ณ ํฌ๊ฒ ๊ณต๊ฐํ์ต๋๋ค.
์ต์ข ํ์ ์ถ๋ก ์ ๋ํ ๊ฒฐ๊ณผ๋ฌผ์ ์๋์ ๊ฐ์ต๋๋ค. ๋ธ๋ฆฟ์ง์ ๋ค์ดํฐ๋ธ ๋ฉ์๋๋ค์ด ์ ์ธ๋์ด ์๊ณ , ์ด์ ํด๋นํ๋ ํ์ ์ typeof๋ฅผ ๊ฑฐ์ณ ๋ด๋ณด๋ด๊ณ ์์ต๋๋ค. ๊ทธ๋ค์ ๋งํฌ๋ธ๋ฆฟ์ง์์ generic์ผ๋ก ์ดํ์ ์ ๋ฃ์ด์ฃผ๋ฉด ๋ธ๋ฆฟ์ง์์๋ ์ด๊ฒ์ ๊ธฐ์ ์ผ๋ก ๋ชจ๋ ํ์ ์ด ์์ฑ๋ฉ๋๋ค.

๋ฐ๋ผ์ ์ด ๋ธ๋ฆฟ์ง๋ openInAppBrowser์ ๊ฐ์ด ์ฌ์ฉ ๊ฐ๋ฅํ ๋ฉ์๋๋ฅผ ์ถ๋ก ํ ์ ์๊ณ , ์ฌ์ฉ ๊ฐ๋ฅํ ๋ฉ์๋๋ค์ด ์ถ์ฒ๋๋ ๋ชจ์ต์ ํ์ธํ ์ ์์ต๋๋ค.
์ด๊ฒ์ ์กฐ๊ธ ์์ฉํ๋ฉด ๋ฆฌ์กํธ ๋ค๋น๊ฒ์ด์ ๊ณผ์ ํตํฉ๋ ๊ฐ๋ฅํฉ๋๋ค. ์๋ ๊ทธ๋ฆผ์ฒ๋ผ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์ StackRootParams์๋ ์ด๋ ๊ฐ๋ฅํ ๋ชจ๋ ํ๋ฉด์ด ์ ์๋์ด ์์ต๋๋ค. ์น์์ ๋ธ๋ฆฟ์ง์ navigate๋ฅผ ์ฌ์ฉํ๋ฉด ์์ ์ ์ํ ๋ค์๊ณผ ํ๋ผ๋ฏธํฐ๋ฅผ ๋ชจ๋ ์ถ๋ก ํ ์ ์์ต๋๋ค.
์ฆ, ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์ ์ ์ํ ํ๋ฉด ๋ชฉ๋ก์ ์น์์์ ์ถ๊ฐ์ ์ธ ํ์ ์ ์ ์์ด ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๊ฒฝํ์ ๊ฐ๋ฐ์ ๊ฒฝํ์ ํฌ๊ฒ ํฅ์์ํค๊ณ , ๊ฐ๋ฐ์๋ค์ด ์คํ๋ฅผ ์ ๋ ์ํฉ๋ ์์จ ์ ์์ต๋๋ค. ์ด๋ ์น์์ ์ด๋ํ ํ๋ฉด์ ๋ํ ์ค์๋ฅผ ์ค์ด๋ ํจ๊ณผ๋ก ์ด์ด์ง๋๋ค.

๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์ ์น์ ๋๊ธฐํ
์น๋ทฐ์์ ๋ค์ดํฐ๋ธ ์ฑ์ ์ธ์ฆ ์ ๋ณด ๊ฐ์ ธ์ค๊ธฐ
์ด์ฒ๋ผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ์ ์ถ๋ก ์ ์ ๊ตฌํํ์ฌ ์ฒซ ๋ฒ์ ์ ๋ฐฐํฌํ์ต๋๋ค. ๋ชจ๋ ๊ฒ์ด ์๋ฒฝํ ๊ฑฐ๋ผ๊ณ ์๊ฐํ์ง๋ง, ๋ ํ๋์ ๋ฌธ์ ์ ์ ๋ง๋ฌ์ต๋๋ค. ๋ฐ๋ก ์ธ์ฆ ์ ๋ณด์ ๋ํ ์ด์์์ต๋๋ค.
์น๊ณผ ์ฑ์ ํต์ ์ด ํ์ํ ์ด์ ์ค ํ๋๊ฐ ๋ฐ๋ก ์ธ์ฆ ์ ๋ณด๋ฅผ ์ ์กํ๊ณ ์ฌ์ฉํ๋ ๊ฒ์ ๋๋ค. ํ์ฌ ๊ตฌ์กฐ์์๋ ๋จผ์ ๋ธ๋ฆฟ์ง์ getToken์ ์ ์ธํ์ฌ ํ ํฐ์ ๋ฐํํ๊ณ , ์น์์๋ ์ด getToken์ผ๋ก ๊ฐ์ ๊บผ๋ด ์ฌ์ฉํ ์ ์์ต๋๋ค.
๊ทธ๋ฌ๋ ๋ง์ฝ ๋ค์ดํฐ๋ธ ์ฑ์์ ์ด ํ ํฐ์ด ๋ง๋ฃ๋๊ณ , ํ ํฐ์ด ๋ณ๊ฒฝ๋๋ค๋ฉด ์ด๋ป๊ฒ ๋ ๊น์? ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ ์ต์ ํ ํฐ์ ๊ฐ์ง๊ณ ์์ง๋ง ์น์์๋ ๋ง๋ฃ๋ ํ ํฐ์ ๊ฐ์ง๊ณ ์์ด์ ์ข์ง ์์ ์ํฉ์ด ๋ฐ์ํ ๊ฒ ๊ฐ์ต๋๋ค.

ํตํฉ์ ์ํ ์น ์ฝ์ด ๋ก์ง ๋ถ๋ฆฌ: Shared State
์ด ์ํฉ์ ํด๊ฒฐํ๊ธฐ ์ํด ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์ ์น์ ์ํ ๋๊ธฐํ๊ฐ ํ์ํ๋ค๊ณ ์๊ฐํ์ต๋๋ค. ์ด๋ฐ ์๊ฐ์ ๋ฐํ์ผ๋ก ๋ง๋ ๊ฐ๋ ์ด ๋ฐ๋ก Shared State์ ๋๋ค.
์ด ๊ฐ๋ ์ ์ํ์ ๋ํ ๊ฐ๋ ์ด๊ธฐ ๋๋ฌธ์ ๋ค๋ฅธ ๋ชจ๋ ํ๋ ์์ํฌ์๋ ์ฝ๊ฒ ํตํฉ์ด ๊ฐ๋ฅํด์ผ ํ์ต๋๋ค. ๋ฐ๋ผ์ ์ ๋ ์น ์ฝ์ด๋ถํฐ ๋ถ๋ฆฌํ๊ณ , ์น ์ฝ์ด ๋ก์ง๋ถํฐ ์์ํด์ ์ํ์ ๊ดํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋ค๊ฒ ๋์์ต๋๋ค.

Shared State ์ญ์ ์ฌ์ฉ๋ฒ ์ค์ฌ์ผ๋ก ์ค๊ณ๋ฅผ ์์ํ์ต๋๋ค. ์ด ๋ธ๋ฆฟ์ง๋ ์๋ ๋ค์ดํฐ๋ธ ๋ฉ์๋๋ค๋ง ์ ์ธํ ์ ์๋ ์ํ์์ต๋๋ค. ๋ฐ๋ผ์ ํ๋ก๋ฏธ์ค ํจ์๋ง ๋ฐ์ ์ ์๋๋ฐ, ํ ํฐ ๊ฐ ๊ฐ์ ์ ์ฅํ๊ธฐ ์ํด null์ด๋ ๋ฌธ์์ด ๊ฐ์ Primitive ํ์ ๋ ์ ๋ ฅ์ด ๊ฐ๋ฅํ๊ฒ ํ์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ์ ๊ทธ๋ฆผ์ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ ์ ์ธ๋ถ๋ฅผ ๋ณด๋ฉด get๊ณผ set์ ๋ ธ์ถ์์ผ ํ์ฌ์ ๋ํ ์ํ์ ๊ฐ๋ ์ค์ ํ ์ ์๋๋ฐ, ์ด๋ Zustand์ ๋ง์ด ๋ฎ์ ์์ต๋๋ค. ์ํ๋ฅผ ๊ด๋ฆฌํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ ๋งํผ Zustand์์ ๋ง์ ์๊ฐ์ ๋ฐ์ ๊ฐ๋ฐํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
์น์์๋ ๊ธฐ์กด์ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ ๋ฉ์๋๋ฅผ ๋ ธ์ถํ๋ ๊ฒ๊ณผ ๋๋ถ์ด ์คํ ์ด ๋ํ ๋ธ๋ฆฟ์ง์์ ๋ ธ์ถํฉ๋๋ค. ์ด ์คํ ์ด์๋ ๊ตฌ๋ ๊ธฐ๋ฅ์ด ์๊ณ , ์ด ๊ตฌ๋ ๊ธฐ๋ฅ์ ํตํด ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์ ์ํ ๋ณํ๋ฅผ ๊ฐ์งํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ์น์์ ๋๊ธฐํ๊ฐ ๊ฐ๋ฅํ๋๋ก ๊ตฌํํ์ต๋๋ค.
๋ฆฌ์กํธ์์ ํตํฉ
์์ ์์๋ ๋ฐ๋๋ผ ์๋ฐ ์คํฌ๋ฆฝํธ๋ก ๋์ด ์์ต๋๋ค. ๊ทธ ๋๋ถ์ ๋ฆฌ์กํธ์ ์ฝ๊ฒ ํตํฉ์ด ๊ฐ๋ฅํฉ๋๋ค. ํนํ ๋ฆฌ์กํธ 18์์๋ useSyncExternalStore๋ผ๋ ํ
์ ์ ๊ณตํ๋๋ฐ, ๋ฐ๋๋ผ ์คํ ์ด๋ฅผ ๋ฆฌ์กํธ๋ก ๋ ๋๋ง ํ๊ฒ ๋์์ฃผ๋ ํ
์
๋๋ค. ์ ๋ ์ด ํ
์ ๋ํํ์ฌ webview-bridge/react
๋ผ๋ ๋ฆฌ์กํธ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ํ์ฅํ ์ ์์์ต๋๋ค.
useBridge์ ์คํ ์ด๋ฅผ ๋ฃ์ด์ฃผ๋ฉด state์์ ํ ํฐ์ ๊ฐ์ ธ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด ํ ํฐ์ ์น์ ์กด์ฌํ์ง๋ง ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์ ๋๊ธฐํ๋์ด ํจ๊ป ๋ฐ์ํ๋ ์ํ๊ฐ ๋ฉ๋๋ค.

์ต์ข ์ฌ์ฉ๋ฒ: Shared State
์ด์ ์ต์ข
์ฌ์ฉ๋ฒ์ ๋ํด ์์๋ณด๊ฒ ์ต๋๋ค. ์๋ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์ count
๋ฅผ 0
์ผ๋ก ์ ์ธํ๊ณ increase
๋ฅผ ํตํด ์ด count
๋ฅผ 1
์ฉ ๋๋ ค์ค๋๋ค. ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ ๋ฆฌ์กํธ์ด๊ธฐ ๋๋ฌธ์ useBridge
์ appBridge
๋ฅผ ๋ฃ์ด์ฃผ๋ฉด count
๋ผ๋ ์ํ์ increase
๋ผ๋ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์น์์๋ linkBridge
์ AppBridge
๋ฅผ ํตํด ๋ธ๋ฆฟ์ง๋ฅผ ์ ์ธํ๊ณ , ์ด ๋ธ๋ฆฟ์ง์ ์คํ ์ด์ useBridge
๋ฅผ ํตํด ๋ค์ดํฐ๋ธ ์ฝ์ด ๋ก์ง์ count
์ increase
๋ฅผ ๊บผ๋ด ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์ ์ํ์ ๋๊ธฐํ๋์ด ํจ๊ป ๋ฐ์ํ๋ ์ํ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค.

์ต์ข ์ฌ์ฉ๋ฒ: Native Method
๋ํ, ์๋ ๊ทธ๋ฆผ์ฒ๋ผ ๋ธ๋ฆฟ์ง์์๋ greeting
์ ์ธํ์ ๋ฃ๊ณ msg
๋ผ๋ ๋ฆฌํด ๊ฐ์ ๋ฐํํด ์ค๋๋ค. ์ด๋ฅผ ์ธ๋ถ๋ก ๋ณด๋ด๋ฉด ์ด ๋ธ๋ฆฟ์ง๋ generic์ ํตํด์ ๋ชจ๋ ํ์
์ด ์์ฑ๋๊ธฐ ๋๋ฌธ์ ๋ธ๋ฆฟ์ง์ ์กด์ฌํ์ง ์๋ ํจ์๋ ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค. ๋ํ ์ธํ์ด ์๋ชป๋์์ ๋๋ ํ์
์๋ฌ๊ฐ ๋ฐ์ํ๊ณ , ์ ์์ ์ผ๋ก ์
๋ ฅ๋ฐ์ผ๋ฉด ๋ฆฌ์คํฐ์ค ๊ฐ์ ๋ํ ํ์
์ด ์ฌ๋ฐ๋ฅด๊ฒ ๋ณด์ฌ์ง๋ ๊ฒ์ ์ ์ ์์ต๋๋ค.

๋ง์น๋ฉฐ: ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋ค๋ฉฐ ์ป์ ๊ตํ
๊ฒฐ๊ตญ ํ์ ์ธ์ดํํ ์น๋ทฐ ํต์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ฐ๋ฐ์ ์ฑ๊ณต์ ์ผ๋ก ์๋ฃํ๊ณ , ํ์ ์ ์๋์ผ๋ก ์ ์ํ๋ ๊ฒ์ ์ค์ด๋ฉฐ ์ต๋ํ ์ถ๋ก ์ ํ์ฉํ์ฌ ์ธํ์ ๊ธฐ๋ฐ์ผ๋ก ๋ชจ๋ ํ์ ์ด ์์ฑ๋๋๋ก ํ์ต๋๋ค. ์ด๋ ๊ฒ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋ค๋ฉฐ ๋ค์ํ ๊ตํ์ ์ป์์ต๋๋ค.
์ต๊ณ ์ ๊ฐ๋ฐ์ ๊ฒฝํ์ ์ฌ์ฉ๋ฒ์์ ๋์จ๋ค๊ณ ์๊ฐํ๊ธฐ ๋๋ฌธ์, ๊ฐ๋ฐ ๊ณผ์ ์์๋ ๋ฐ๋ก ๊ธฐ๋ฅ์ ๊ฐ๋ฐํ ๊ฒ์ด ์๋๋ผ ์ฌ์ฉ๋ฒ๋ถํฐ ๊ฐ๋ฐํ์ต๋๋ค. ๊ทธ ๊ฒฐ๊ณผ ๋ง์กฑ์ค๋ฌ์ด ์ถ์ํ ๋ฐ ๊ฒฐ๊ณผ๋ฌผ์ ์ป์ ์ ์์์ต๋๋ค. ๋, ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ tRPC์ Zustand์ ๋ง์ด ๋ฎ์ ์์ต๋๋ค. ๊ฐ๋ฐ์ ํ๋ฉฐ ์ฌ๋ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด ๋ณผ ์ ์๊ณ , ๊ทธ ์์ฒด๋ก ๋ง์ ํ์ต์ ํ ์ ์์์ต๋๋ค. ๋์๊ฐ ํ์ตํ ๊ฐ๋ ์ ์ง์ ๊ฐ๋ฐ์ ์ ์ฉํ๋ ๊ฐ์ง ๊ฒฝํ์ ํ ์ ์์์ต๋๋ค.
๋ง์ง๋ง์ผ๋ก ์ฒ์๋ถํฐ ์น ์ฝ์ด ๋ก์ง์ ์์์ผ๋ก ๊ฐ๋ฐํ๊ธฐ ๋๋ฌธ์ ๋ค๋ฅธ ๋ชจ๋ ๋ฆฌ์กํธ ํ๋ ์์ํฌ์๋ ํตํฉ์ด ์ฝ๊ฒ ๊ฐ๋ฅํ๋๋ฐ, ๋ง์ฝ Vue.js๋ก ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋ค์๋ค๋ฉด ๋ค๋ฅธ ํ๋ ์์ํฌ์์ ํตํฉ์ ์ฝ์ง ์์์ ๊ฒ์ด๋ผ ์๊ฐํฉ๋๋ค. ์ด๋ฅผ ํตํด ํ์ฅ์ฑ ๋์ ๊ตฌ์กฐ๊ฐ ์ด๋ค ๊ฒ์ธ์ง ์ญ์ ๋ฐฐ์ธ ์ ์์์ต๋๋ค.

์ค๋ ์ค๋ช
ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ webview-bridge
๋ผ๋ ์ด๋ฆ์ผ๋ก ๊ณต๊ฐ๋์ด ์์ต๋๋ค. ์ค๋ช
ํ ๋ด์ฉ ์ธ์๋ ๋ ๋ง์ ๊ธฐ๋ฅ์ด ๊ตฌํ๋์ด ์์ผ๋ ํฅ๋ฏธ๊ฐ ์๊ธด๋ค๋ฉด ์๋ ์ฃผ์๋ฅผ ๋ฐฉ๋ฌธํด ๋ ์์ธํ๊ฒ ์์๋ณด๊ณ , ๊ด๋ จ๋ ๋ฌธ์๋ ํ์ธํ์๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค. ๋ง์์ ๋์ ๋ค๋ฉด Star๋ ๋๋ฌ์ฃผ์ธ์. ๊ฐ์ฌํฉ๋๋ค.
