Javascript SDK Integration
๋ถ์ ์์คํ ์ ํต์ฌ ๊ตฌ์ฑ์์์ธ SDK๋ ์น์ฌ์ดํธ ์ ๋๋ฆฌํฑ์ค์ ํ์ํ ๋ฐ์ดํฐ ํฌ์ธํธ๋ฅผ ํ๋ณดํ๋ ์ญํ ์ ์ํํฉ๋๋ค. ๋ฐ์ดํฐ ์ธก์ ์ ์ํด ๋ณธ ๋ฌธ์์ ์๋ด์ ๋ฐ๋ผ Javascript SDK๋ฅผ ์น์ฌ์ดํธ์ ์ฐ๋ํ์ฌ ์ฃผ์๊ธฐ ๋ฐ๋๋๋ค.
1. ํ์ ์ค์
ํ์ ์ค์ ์ด๋ SDK๊ฐ ๋์ํ๊ธฐ ์ํด์ ๋ฐ๋์ ์น์ฌ์ดํธ์ ์ถ๊ฐ๋์ด์ผ ํ๋ ์ค์ ์ ๋งํฉ๋๋ค. ํ์ ์ค์ ์ ์ ์ฉํ๊ฒ ๋๋ฉด ๋ฐฉ๋ฌธ, ํ์ด์ง๋ทฐ, ์ฌ์ฉ์์ ํ๊ฒฝ ์ ๋ณด ๋ฑ์ ์ธก์ ํ ์ ์๊ฒ ๋ฉ๋๋ค.
SDK ์ถ๊ฐ
์น์ฌ์ดํธ SDK๋ ์ผ๋ฐ์ ์ธ ์น์ฌ์ดํธ์ ์ ์ฉํ๋ "Javascript ํ์ "๊ณผ "JSX ๋ชจ๋ ํ์ " 2๊ฐ์ง๋ก ์ ๊ณต๋๊ณ ์์ต๋๋ค. ๋ถ์ํ๊ณ ์ ํ๋ ์น์ฌ์ดํธ์ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ ํฉํ SDK ํ์ ์ ๋ค์๊ณผ ๊ฐ์ด ํ์ ์ ๋ง๊ฒ ์ถ๊ฐํ ์ ์์ต๋๋ค.
Javascript, jQuery ๋ฑ์ผ๋ก ๊ฐ๋ฐ๋ ์น์ฌ์ดํธ์ธ ๊ฒฝ์ฐ
์๋์ ํ์ผ์ ๋ค์ด๋ก๋ํ ํ, ์์ถ์ ํด์ ํ์ฌ ๊ฐ๋ฐ์ฝ๋๊ฐ ์ ์ฅ๋ ๊ฒฝ๋ก์ ์์น์ํค๋ฉด ๋ฉ๋๋ค.
React.js ๋ฑ JSX๋ก ๊ฐ๋ฐ๋ ์น์ฌ์ดํธ์ธ ๊ฒฝ์ฐ
์๋์ ๊ฐ์ด npm ์์กด์ฑ ์ค์น๋ฅผ ํตํด SDK ๋ชจ๋์ ๊ฐ๋ฐ์ฝ๋์ import ํ๋ฉด ๋ฉ๋๋ค.
SDK ์ด๊ธฐํ
SDK ์ด๊ธฐํ(Initialization)๋ SDK๋ฅผ ์ฌ์ฉํ๊ธฐ ์ ๋ฐ๋์ ๋จผ์ ์คํ๋์ด์ผ ํ๋ ๊ณผ์ ์ ๋๋ค. ์ด๋ SDK๋ฅผ ์น์ฌ์ดํธ๋ก ๋ถ๋ฌ์ค๋ ์ฝ๋ ๋์์ ์นํ์ด์ง์ ํค๋์ ์์น ์ํด์ผ๋ก์จ, ์น์ฌ์ดํธ๊ฐ SDK์์ ์ ๊ณตํ๋ API๋ฅผ ๋ฏธ๋ฆฌ ์ธ์งํ ์ ์๋๋ก ๋ง๋ค์ด์ค๋๋ค.
SDK ์ด๊ธฐํ ์คํฌ๋ฆฝํธ ํ์ธ
SDK ์ด๊ธฐํ ์ฝ๋๋ ์์ด์ฆํธ๋์ปค ์์คํ ์ ๋ก๊ทธ์ธ ํ์ ํ, ์๋์ ๋ฉ๋ด์์ ํ์ธํ ์ ์์ต๋๋ค.
SDK ์ด๊ธฐํ ์คํฌ๋ฆฝํธ ์ ์ฉ
Javascript, jQuery ๋ฑ์ผ๋ก ๊ฐ๋ฐ๋ ์น์ฌ์ดํธ์ผ ๊ฒฝ์ฐ
index.html์
<head>
ํ๊ทธ ์์ SDK ์ด๊ธฐํ ์คํฌ๋ฆฝํธ๋ฅผ ์ ์ฉํฉ๋๋ค.์ด๋ฅผ ์ํด, ๋จผ์ ์์์ ๋ค์ด๋ก๋ ๋ฐ์๋ SDK ํ์ผ(dop-website-sdk.js)์ ๋ํ ๊ฒฝ๋ก๋ฅผ
<script>
ํ๊ทธ์src
์์ฑ์ ์์ฑํฉ๋๋ค.์์ด์ฆํธ๋์ปค ์์คํ ์ [์ดํ๋ฆฌ์ผ์ด์ ์ค์ ] ๋ฉ๋ด์์ ๋ณต์ฌํ SDK ์ด๊ธฐํ ์คํฌ๋ฆฝํธ๋ฅผ ๋ค๋ฅธ
<script>
ํ๊ทธ์ ์ถ๊ฐ ์์ฑํฉ๋๋ค.
React.js ๋ฑ JSX๋ก ๊ฐ๋ฐ๋ ์น์ฌ์ดํธ์ผ ๊ฒฝ์ฐ
App.js ์ปดํฌ๋ํธ์ SDK ์ด๊ธฐํ ์คํฌ๋ฆฝํธ๋ฅผ ์ ์ฉํฉ๋๋ค. ์ด๋ฅผ ์ํด, ๋จผ์ ์์์
npm -i
๋ช ๋ น์ ํตํด ์ค์นํ๋ SDK์WDOTInitialization
์์ฑ์ ์ปดํฌ๋ํธ๋ก import ํฉ๋๋ค.์์ด์ฆํธ๋์ปค์ค์ [์ดํ๋ฆฌ์ผ์ด์ ์ค์ ] ๋ฉ๋ด์์ ๋ณต์ฌํ SDK ์ด๊ธฐํ ์คํฌ๋ฆฝํธ๋ฅผ
useEffect
์์ ์์ฑํ๋, ๋๋ฒ์งธ ์ธ์๋ ๋น๋ฐฐ์ด([]
)๋ก ๋์ด ์์ ์ปดํฌ๋ํธ๋ค์ ๋ ๋๋ง์ ๊ณตํต์ ์ผ๋ก ์ ์ฉ๋ ์ ์๋๋ก ํฉ๋๋ค.๋ง์ฝ ํด๋์คํ React.js๋ก ๊ฐ๋ฐ๋ ์น์ฌ์ดํธ๋ผ๋ฉด, LifeCycle ํจ์์ธ
componentDidMount
์์ SDK ์ด๊ธฐํ ์คํฌ๋ฆฝํธ๋ฅผ ์์ฑํ๋ฉด ๋ฉ๋๋ค.
Last updated