-
Notifications
You must be signed in to change notification settings - Fork 7
๐ชต 2. WebRTC์์ Websocket์ผ๋ก
WebRTC๋ P2P(peer-to-peer) ์ฐ๊ฒฐ์ ๊ธฐ๋ฐ์ผ๋ก ํด๋ผ์ด์ธํธ ๊ฐ ์ง์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ค. ๊ทธ๋ฌ๋ ๋ฐฉํ๋ฒฝ์ด๋ NAT(Network Address Translation) ์ฅ๋น๋ก ์ธํด ํด๋ผ์ด์ธํธ ๊ฐ ์ง์ ์ฐ๊ฒฐ์ด ์ฐจ๋จ๋๋ ๊ฒฝ์ฐ๊ฐ ์ข ์ข ๋ฐ์ํ๋ค.
์ด๋ฌํ ์ํฉ์์ WebRTC๋ TURN ์๋ฒ(Traversal Using Relays around NAT)
๋ฅผ ๊ฒฝ์ ํด ๋ฐ์ดํฐ๋ฅผ ์ค๊ณํ๋ค. TURN ์๋ฒ๋ ํด๋ผ์ด์ธํธ ๊ฐ์ ์ฐ๊ฒฐ์ด ๋ถ๊ฐ๋ฅํ ๋ ๋ฐ์ดํฐ๋ฅผ ๋์ ์ ์กํด์ฃผ๋ ์ค๊ณ ์๋ฒ ์ญํ ์ ํ๋ค.
ํ์ง๋ง TURN ์๋ฒ๋ฅผ ๊ฒฝ์ ํ๋ฉด ๋ค์๊ณผ ๊ฐ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค.
- ์ฑ๋ฅ ์ ํ: ๋ฐ์ดํฐ๊ฐ ์ค๊ฐ ์๋ฒ๋ฅผ ๊ฑฐ์น๋ฏ๋ก ์ง์ฐ(latency)์ด ์ฆ๊ฐํ๋ค.
- ๋์ญํญ ์ ํ: ์ค๊ณ ์๋ฒ ์ฌ์ฉ์ผ๋ก ์ธํด ๋์ญํญ(bandwidth)์ด ์ ํ๋ ์ ์๋ค.
- ๋ถํ ์ฆ๊ฐ: ๋ค์๊ฐ ํต์ ์์๋ ๊ฐ ํด๋ผ์ด์ธํธ๊ฐ ์ฌ๋ฌ TURN ์ฐ๊ฒฐ์ ์ ์งํด์ผ ํ๋ค.
๊ฒฐ๊ณผ์ ์ผ๋ก, WebRTC๋ ํด๋ผ์ด์ธํธ ๊ฐ ์ง์ ์ฐ๊ฒฐ์ด ์ค์ํ ํ๊ฒฝ์์๋ ํจ๊ณผ์ ์ด์ง๋ง, ๋ฐฉํ๋ฒฝ ๋ฑ์ผ๋ก ์ธํด TURN ์๋ฒ๋ฅผ ๊ฒฝ์ ํด์ผ ํ๋ ๊ฒฝ์ฐ ์ฑ๋ฅ์ด ํฌ๊ฒ ์ ํ๋ ์ ์๋ค.
WebRTC์ P2P ์ฐ๊ฒฐ์ ์์์ ํด๋ผ์ด์ธํธ ๊ฐ ํต์ ์๋ ์ ํฉํ์ง๋ง, ์ธ์์ด ๋ง์์ง๋ฉด ๊ฐ ์ฌ์ฉ์๊ฐ ๋ค๋ฅธ ์ฌ์ฉ์์ ์ง์ ์ฐ๊ฒฐ์ ์ ์งํด์ผ ํ๋ค.
- ์ฐ๊ฒฐ ์ ์ฆ๊ฐ: ๋ชจ๋ ์ฌ์ฉ์๊ฐ ์๋ก ์ฐ๊ฒฐ์ ํ์ฑํด์ผ ํ๋ฏ๋ก ๋คํธ์ํฌ์ ๊ธฐ๊ธฐ์ ๋ถํ๊ฐ ๊ธ์ฆํ๋ค.
- TURN ์๋ฒ ๋ถํ: ์ค๊ฐ ์๋ฒ๋ฅผ ๊ฒฝ์ ํ๋ ์ฐ๊ฒฐ์ด ๋ง์์ง์๋ก ์๋ฒ ๋ถํ๊ฐ ์ฌํ๋๊ณ ์๋๊ฐ ๋๋ ค์ง๋ค.
๊ฒฐ๊ณผ์ ์ผ๋ก, WebRTC๋ ๋๊ท๋ชจ ๋ค์๊ฐ ํต์ ์์๋ ํจ์จ์ ์ด์ง ์๋ค.
WebRTC๋ ์์ฑ ๋ฐ ๋น๋์ค์ ๊ฐ์ ๋ฏธ๋์ด ๋ฐ์ดํฐ ์ ์ก์ ์ต์ ํ๋์ด ์๋ค. ํ์ง๋ง ํ ์คํธ, ๊ทธ๋ฆผ๊ณผ ๊ฐ์ ๋น๋ฏธ๋์ด ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ ๊ฒฝ์ฐ์๋
- ๋ณต์กํ ์ฐ๊ฒฐ ์ค์ (STUN/TURN/ICE)์ ํ์๋ก ํ๊ณ ,
- ๋ฏธ๋์ด ์ ์ก์ ๋ง์ถฐ ์ค๊ณ๋ ๊ตฌ์กฐ๋ก ์ธํด ๋ถํ์ํ ๋ฆฌ์์ค๊ฐ ์๋ชจ๋๋ค.
WebRTC๋ P2P ์ฐ๊ฒฐ์ ์ํด ๋ณต์กํ ์ค์ ๊ณผ TURN ์๋ฒ๊ฐ ํ์ํ๋ค. ๋ฐ๋ฉด, WebSocket์ ์๋ฒ-ํด๋ผ์ด์ธํธ ๋ชจ๋ธ์ ๊ธฐ๋ฐ์ผ๋ก ํ๊ธฐ ๋๋ฌธ์ ๊ตฌ์กฐ๊ฐ ๊ฐ๋จํ๊ณ ์ ์ง ๊ด๋ฆฌ๊ฐ ์ฉ์ดํ๋ค.
- ํด๋ผ์ด์ธํธ ๊ฐ ์ง์ ์ฐ๊ฒฐ์ด ํ์ํ์ง ์์ผ๋ฏ๋ก, ์๋ฒ์์ ๋ชจ๋ ์ฐ๊ฒฐ์ ๊ด๋ฆฌํ ์ ์๋ค.
- ์ฐ๊ฒฐ ์ค์ ์ด ๊ฐ๋จํด ๊ฐ๋ฐ ๋ฐ ์ ์ง๋ณด์ ๋น์ฉ์ด ์ ๊ฐ๋๋ค.
WebSocket์ ํ ์คํธ, ๊ทธ๋ฆผ ๋ฑ ๋น๋ฏธ๋์ด ๋ฐ์ดํฐ ์ ์ก์ ์ ํฉํ๋ฉฐ, ๋ค์๊ณผ ๊ฐ์ ์ฅ์ ์ ์ ๊ณตํ๋ค.
- ๋ฎ์ ์ง์ฐ: ์๋ฒ์ ํด๋ผ์ด์ธํธ ๊ฐ ์ค์๊ฐ ์๋ฐฉํฅ ํต์ ์ ์ง์ํ๋ค.
- ํจ์จ์ฑ: ๊ฐ๋จํ ๋ฐ์ดํฐ ์ ์ก์ ์ต์ ํ๋์ด ๋ถํ์ํ ๋ฆฌ์์ค๋ฅผ ์๋ชจํ์ง ์๋๋ค.
๋ฐ๋ฉด, WebRTC๋ ๋ฏธ๋์ด ๋ฐ์ดํฐ ์ ์ก์ ์ฒ๋ฆฌํ๋ ๋ฐ ์ด์ ์ด ๋ง์ถฐ์ ธ ์์ด ๋น๋ฏธ๋์ด ๋ฐ์ดํฐ ์ ์ก ์ ๋นํจ์จ์ ์ผ ์ ์๋ค.
WebSocket์ ์๋ฒ์์ ํด๋ผ์ด์ธํธ ์ฐ๊ฒฐ์ ์ค์์์ ๊ด๋ฆฌํ๋ฏ๋ก, ๋ค์์ ์ฌ์ฉ์๊ฐ ๋์์ ์ ์ํ๋๋ผ๋ ์ฑ๋ฅ ์ ํ๊ฐ ์ ๋ค.
- ํ์ฅ ์ฉ์ด์ฑ: ์๋ฒ ํ์ฅ์ ํตํด ๋ถํ๋ฅผ ๋ถ์ฐํ ์ ์๋ค.
- ๋ค์ ์ฌ์ฉ์ ์ฒ๋ฆฌ: ์๋ฒ-ํด๋ผ์ด์ธํธ ๋ชจ๋ธ๋ก ๋คํธ์ํฌ ๋ฐ ์ฐ๊ฒฐ ์ ์ ํ ์์ด ๋์ํ ์ ์๋ค.
๋ฐ๋ฉด, WebRTC๋ ์ฌ์ฉ์๊ฐ ๋ง์์ง์๋ก ์ฐ๊ฒฐ ์๊ฐ ๊ธฐํ๊ธ์์ ์ผ๋ก ์ฆ๊ฐํด ์ฑ๋ฅ ์ ํ๊ฐ ๋ฐ์ํ ์ ์๋ค.
WebRTC๋ ์์ฑ, ๋น๋์ค ๋ฑ์ ์ค์๊ฐ ๋ฏธ๋์ด ๋ฐ์ดํฐ ์ ์ก์ ๊ฐ๋ ฅํ ์ฑ๋ฅ์ ๋ฐํํ๋ค. ํ์ง๋ง ๋ฐฉํ๋ฒฝ ๋ฌธ์ , ๋ค์๊ฐ ํต์ ์์์ ์ฑ๋ฅ ์ ํ, ๋น๋ฏธ๋์ด ๋ฐ์ดํฐ ์ฒ๋ฆฌ์ ๋นํจ์จ์ฑ ๋๋ฌธ์ ๋ชจ๋ ์ํฉ์์ ์ ํฉํ์ง๋ ์๋ค.
๋ฐ๋ฉด, WebSocket์ ํ ์คํธ, ๊ทธ๋ฆผ, ๊ฒ์ ์ํ์ ๊ฐ์ ๋น๋ฏธ๋์ด ๋ฐ์ดํฐ ์ ์ก์์ ๊ฐ๋จํ๊ณ ํจ์จ์ ์ธ ๊ตฌ์กฐ๋ฅผ ์ ๊ณตํ๋ค.
- ๋ฐฉํ๋ฒฝ ํ๊ฒฝ์์๋ ์ฑ๋ฅ ์ ํ๊ฐ ์ ์ผ๋ฉฐ,
- ๋ค์์ ์ฌ์ฉ์๊ฐ ์ฐธ์ฌํ๋ ํ๊ฒฝ์์๋ ์์ ์ ์ธ ์ฐ๊ฒฐ์ ์ ์งํ ์ ์๋ค.
๋ฐ๋ผ์, ๋ฏธ๋์ด ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃฌ๋ค๋ฉด WebRTC๋ฅผ, ํ ์คํธ ๊ธฐ๋ฐ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃฌ๋ค๋ฉด WebSocket์ ์ ํํ๋ ๊ฒ์ด ์ ํฉํ๋ค.
- 1. ๊ฐ๋ฐ ํ๊ฒฝ ์ธํ ๋ฐ ํ๋ก์ ํธ ๋ฌธ์ํ
- 2. ์ค์๊ฐ ํต์
- 3. ์ธํ๋ผ ๋ฐ CI/CD
- 4. ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด Canvas ๊ตฌํํ๊ธฐ
- 5. ์บ๋ฒ์ค ๋๊ธฐํ๋ฅผ ์ํ ์์ CRDT ๊ตฌํ๊ธฐ
-
6. ์ปดํฌ๋ํธ ํจํด๋ถํฐ ์น์์ผ๊น์ง, ํจ์จ์ ์ธ FE ์ค๊ณ
- ์ข์ ์ปดํฌ๋ํธ๋ ๋ฌด์์ธ๊ฐ? + Headless Pattern
- ํจ์จ์ ์ธ UI ์ปดํฌ๋ํธ ์คํ์ผ๋ง: Tailwind CSS + cn.ts
- Tailwind CSS๋ก ๋์์ธ ์์คํ ๋ฐ UI ์ปดํฌ๋ํธ ์ธํ
- ์น์์ผ ํด๋ผ์ด์ธํธ ๊ตฌํ๊ธฐ: React ํ๊ฒฝ์์ ํจ์จ์ ์ธ ์น์์ผ ์ํคํ ์ฒ
- ์น์์ผ ํด๋ผ์ด์ธํธ ์ฝ๋ ๋ถ์ ๋ฐ ๊ณต์
- 7. ํธ๋ฌ๋ธ ์ํ ๋ฐ ์ฑ๋ฅ/UX ๊ฐ์
- 1์ฃผ์ฐจ ๊ธฐ์ ๊ณต์
- 2์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- 3์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- 4์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- 5์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- WEEK 06 ์ฃผ๊ฐ ๊ณํ
- WEEK 06 ๋ฐ์ผ๋ฆฌ ์คํฌ๋ผ
- WEEK 06 ์ฃผ๊ฐ ํ๊ณ