
์ธ์ด ๐ฐ๐ท ํ๊ตญ์ด
์์ํ๊ธฐ
๋ฌธ์
์ฌ์ฉ๋ฒ
FastComments React Native Library
์ด๊ฒ์ FastComments์ ๊ณต์ React Native ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
React Native์ฉ FastComments ๋๊ธ ์์ ฏ
์ ์ฅ์
์ค์น 
npm install react-native-webview@13.6.4 --save
npm install fastcomments-react-native --save
์ฐธ๊ณ : 2024๋
7์ ํ์ฌ react-native-webview์ ๋ฒ๊ทธ๊ฐ ์๋ ๊ฒ์ผ๋ก ๋ณด์ด๋ฏ๋ก 13.6.4๋ก ๊ณ ์ ํ๋ ๊ฒ์ด ์ข์ต๋๋ค - ์ต์ ํจ์น ๋ฒ์ ์ ๋ฐ๊ธฐ ์ํด ^๋ฅผ ์ฌ์ฉํ์ง ๋ง์ธ์.
๋ค์ดํฐ๋ธ SDK ๊ณ ๋ คํ๊ธฐ 
์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ VanillaJS ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฐ์ธ๋ ์น๋ทฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
FastComments๋ ์ด์ fastcomments-react-native-sdk์ ์ผ๋ถ๋ก ํด๋ผ์ด์ธํธ์ ์์ ํ ๋ค์ดํฐ๋ธ ๊ตฌํ์ ์ง์ํฉ๋๋ค.
์์ ํ ๋ค์ดํฐ๋ธ ๊ตฌํ์ ์ํ๋ค๋ฉด ๊ทธ๊ณณ์ ํ์ธํด ๋ณด์ธ์.
์ฌ์ฉ๋ฒ - ์ค์๊ฐ ๋๊ธ ์์ ฏ 
API๋ fastcomments-react์ ๋นํด ์ฝ๊ฐ ๋ค๋ฆ
๋๋ค. ๋ค์ดํฐ๋ธ์์๋ ์ด ๊ตฌ์กฐ๋ฅผ ๋ฐ๋ฅด๋ config ๊ฐ์ฒด๋ฅผ ์ ๋ฌํฉ๋๋ค.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // ๊ทํ์ tenant id์
๋๋ค. https://fastcomments.com/auth/my-account/api-secret ์์ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค
const myAppPageId = 'native-test'; // ์ฑ ๋ด ๋๊ธ ์ค๋ ๋์ ID ๋๋ URL์
๋๋ค.
const myAppPageUrl = 'https://example.com/external-page'; // ์ธ๋ถ ํ์ด์ง์ url์ ์ ํ์ ์ผ๋ก ์ค์ ํ ์ ์์ต๋๋ค
const myAppPageTitle = 'Example Title'; // ... ๊ทธ๋ฆฌ๊ณ ์๋ง ์ด ์ฝํ
์ธ ์ ๋ํ ์ ๋ชฉ์ ์ํ ๊ฒ์
๋๋ค
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// setConfig()๋ฅผ ํธ์ถํ๋ฉด ํ์ฌ ํ์ด์ง๋ฅผ ๋ณ๊ฒฝํ๊ฑฐ๋ ํ์ฌ ๋ก๊ทธ์ธํ ์ฌ์ฉ์๋ฅผ ๋ณ๊ฒฝํ๋ ๋ฑ์ ์์
์ ํ ์ ์์ต๋๋ค
// ์์ธํ ๋ด์ฉ์ example/src/App.tsx๋ฅผ ์ฐธ์กฐํ์ธ์
return (
<FastCommentsCommentWidget config={config}/>
);
์ฌ์ฉ๋ฒ - ์ค์๊ฐ ์ฑํ
์์ ฏ 
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // ๊ทํ์ ํ
๋ํธ ID์
๋๋ค. https://fastcomments.com/auth/my-account/api-secret์์ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค
const myAppPageId = 'native-test'; // ์ฑ ๋ด ๋๊ธ ์ค๋ ๋์ ID ๋๋ URL์
๋๋ค.
const myAppPageUrl = 'https://example.com/external-page'; // ์ธ๋ถ ํ์ด์ง์ URL์ ์ ํ์ ์ผ๋ก ์ค์ ํ ์ ์์ต๋๋ค.
const myAppPageTitle = 'Example Title'; // ๊ทธ๋ฆฌ๊ณ ์๋ง๋ ์ด ์ฝํ
์ธ ์ ์ ๋ชฉ์ ์ง์ ํ๊ณ ์ถ์ ๊ฒ์
๋๋ค.
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);
์ฌ์ฉ๋ฒ - SSO 
FastComments๋ ๋ณด์ SSO์ HMAC์ ์ฌ์ฉํฉ๋๋ค. ์ฌ์ฉํ๋ ค๋ฉด, ๋ฐฑ์๋์์ SSO ๊ฐ์ฒด(sso ๊ตฌ์ฑ ์์ฑ)๋ฅผ ์์ฑํ๊ณ ์ด๋ฅผ
๋๊ธ ์์ ฏ์ ์ ๋ฌํ์ธ์.
๋ค์ํ ๋ฐฑ์๋ ์์ ๋ ๋ค์์์ ํ์ธํ ์ ์์ต๋๋ค: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
ํผ์ด ์์กด์ฑ 
fastcomments-react-native๋ react-native-webview๋ฅผ ํ์๋ก ํฉ๋๋ค. ๋ฐ๋ผ์ react-native-webview์ ์ค์น ์ ์ฐจ๋ฅผ ๋ฐ๋ผ์ผ ํฉ๋๋ค.
๊ณ์ ์ง์ญ (์ฃผ์: EU ๊ณ ๊ฐ)
๊ณ์ ์ด EU์ ์๋ ๊ฒฝ์ฐ ์์ ฏ ๊ตฌ์ฑ์์ region = 'eu'๋ก ์ค์ ํ์ธ์. ๊ทธ๋ ์ง ์์ผ๋ฉด region์ ์ ์ํ ํ์๊ฐ ์์ต๋๋ค.
๋์์ด ํ์ํ์ ๊ฐ์?
React Native ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๊ฑฐ๋ ์ง๋ฌธ์ด ์๋ ๊ฒฝ์ฐ, ๋ค์์ ์ด์ฉํด ์ฃผ์ธ์:
๊ธฐ์ฌํ๊ธฐ
๊ธฐ์ฌ๋ฅผ ํ์ํฉ๋๋ค! ๊ธฐ์ฌ ๊ฐ์ด๋๋ GitHub ์ ์ฅ์๋ฅผ ๋ฐฉ๋ฌธํด ์ฃผ์ธ์.