** ๐ ํต์ ๊ธฐ์ ๋น๊ต ์ด์ ๋ฆฌ (Ajax / WebSocket / SSE / GraphQL)**
์ฃผ์ | Ajax | WebSocket | Server-Sent Events (SSE) | GraphQL |
---|---|---|---|---|
์์ฒญ ๋ฐฉ์ | ๐ค ๋จ๋ฐฉํฅ (ํด๋ผ์ด์ธํธ โ ์๋ฒ) | ๐ ์๋ฐฉํฅ (์๋ฒ โ ํด๋ผ์ด์ธํธ) | ๐ฅ ๋จ๋ฐฉํฅ (์๋ฒ โ ํด๋ผ์ด์ธํธ) | โ ์ฟผ๋ฆฌ ๊ธฐ๋ฐ (ํด๋ผ์ด์ธํธ๊ฐ ์ํ๋ ๋ฐ์ดํฐ ๊ตฌ์กฐ ์ง์ ์ง์ ) |
์ฐ๊ฒฐ ์ ์ง | โ ์ ์ง ์ ๋จ (์์ฒญ๋ง๋ค ์๋ก ์ฐ๊ฒฐ) | โ ์ ์ง๋จ (์ง์ ์ฐ๊ฒฐ) | โ ์ ์ง๋จ (์ง์ ์ฐ๊ฒฐ) | โ ์์ฒญ๋ง๋ค ์คํ |
์ ์ก ๋ชฉ์ | ๋ฒํผ ํด๋ฆญ, ํผ ์ ์ถ, ๋ฐ์ดํฐ ์์ฒญ | ์ฑํ , ๊ฒ์, ์ฃผ์ ๋ฑ ์ค์๊ฐ ๋ฐ์ํ | ์ค์๊ฐ ๋ด์ค, ํธ์ํฐ ์๋ฆผ, ์๋ฒ ์๋ฆผ ๋ฑ | ์ํ๋ ๋ฐ์ดํฐ๋ง ์ ํํ๊ฒ ์์ฒญ (Over-fetch ๋ฐฉ์ง) |
์ฅ์ | ์ฌ์, ๋ฒ์ฉ์ฑ, ๊ฑฐ์ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์ง์ | ๋น ๋ฆ, ์ค์๊ฐ, ์๋ฐฉํฅ ์ํต ๊ฐ๋ฅ | ์๋ฒ์์ ์๋ push ๊ฐ๋ฅ | ์ ์ฐํจ, ์ ํํ ์์ฒญ, ์๋ต ํฌ๊ธฐ ์ค์ด๊ธฐ ๊ฐ๋ฅ |
๋จ์ | ์๋ต ์ง์ฐ, ๋ค๋ ์์ฒญ ์ ์ฑ๋ฅโ | ๊ตฌํ ๋ณต์ก, ํ๋ก์ ๋ฌธ์ ์์ | ํด๋ผ์ด์ธํธ์์๋ง ์ด ์ ์์ (์๋ฒโํด๋ง) | ํ์ต ๊ณก์ ์์, ์บ์ฑ/์๋ฌ ์ฒ๋ฆฌ ๋ณต์ก |
์ฌ์ฉ ์ฌ๋ก | ๋ฆฌ์คํธ ์กฐํ, ๊ฒ์๊ธ ๋ฑ๋ก ๋ฑ ์ผ๋ฐ API | ์ฑํ , ๊ฒ์, ์ค์๊ฐ ๊ฐ๊ฒฉ | ํธ์ํฐ ํ์๋ผ์ธ, ๋ด์ค ์๋ณด | ์ปค์คํฐ๋ง์ด์ง API (๊ฒ์, ํํฐ, ์ฐ๊ฒฐ ๋ฐ์ดํฐ ์์ฒญ ๋ฑ) |
โ ์์ฃผ ์ฌ์ด ๋น์ ๋ก ์ ๋ฆฌํด๋ณด๊ธฐ
๊ธฐ์ | ๋น์ ์์ |
---|---|
Ajax | ๐ฎ โ์ฐ์ฒดํต์ ํธ์ง ๋ฃ๊ณ ๋ต์ฅ ๊ธฐ๋ค๋ฆฌ๋ ๊ฒโ |
WebSocket | ๐ โ์ ํ๋ฅผ ๊ฑธ์ด์ ๊ณ์ ๋ํํ๋ ๊ฒโ |
SSE | ๐ป โ๋ผ๋์ค์ฒ๋ผ ์๋ฒ๊ฐ ๋ฐฉ์กํ๊ณ ๋๋ ๋ฃ๊ธฐ๋ง ํจโ |
GraphQL | ๐งพ โ๋ง์ผ์์ ํ์ํ ํ๋ชฉ๋ง ์ ํํ ๊ณจ๋ผ์ ์ฃผ๋ฌธํจโ |
โ ๊ฐ ๊ธฐ์ ์ ๋ํ ํค์๋ ์์ฝ (์ํ/๋ฉด์ ์์ฝ์ฉ)
๊ธฐ์ | ์์ฝ ํค์๋ |
---|---|
Ajax | ๋จ๋ฐฉํฅ ยท ์์ฒญ-์๋ต ยท ํด๋ง ยท ๋ฒ์ฉ์ ยท REST ๊ธฐ๋ฐ |
WebSocket | ์ค์๊ฐ ยท ์๋ฐฉํฅ ยท ์ฐ๊ฒฐ ์ ์ง ยท ์ฑํ /๊ฒ์์ฉ |
SSE | ์ค์๊ฐ push ยท ๋จ๋ฐฉํฅ ยท ์๋ฒ๊ฐ ๋ฐฉ์กํ๋ ๊ตฌ์กฐ |
GraphQL | ์ฟผ๋ฆฌ API ยท ์ํ๋ ๋ฐ์ดํฐ๋ง ์์ฒญ ยท ์ ๋ฐ ์์ฒญ ยท overfetch ๋ฐฉ์ง |
โ ์ธ์ ์ด๋ค ๊ฑธ ์จ์ผ ํ๋์?
์ํฉ | ์ถ์ฒ ๊ธฐ์ |
---|---|
๊ธฐ๋ณธ์ ์ธ ํผ ์ ์ถ / ๊ฒ์๊ธ ๋ฑ๋ก | Ajax |
์ค์๊ฐ ์ฑํ , ์ฃผ์, ๊ฒ์ ๋ฐ์ดํฐ | WebSocket |
์ค์๊ฐ ๋ด์ค ์๋ณด, ์๋ฆผ ์ ์ฉ ์๋น์ค | SSE |
๋ค์ํ ๊ตฌ์กฐ์ ๋ณต์กํ ๋ฐ์ดํฐ ์กฐํ | GraphQL |
โ ๋ฉด์ ์ง๋ฌธ ์์ + ํด์ค
โ Q. Ajax, WebSocket, SSE, GraphQL์ ๋น๊ตํด๋ณด์ธ์. ์ด๋ค ์ํฉ์์ ์ด๋ค ๊ฑธ ์ ํํ์๊ฒ ์ต๋๊น?
โ A.
- Ajax๋ ๋จ์ํ ์์ฒญ/์๋ต ์ค์ฌ API ํธ์ถ์ ์ ํฉํ๊ณ ,
- WebSocket์ ์ฑํ ์ด๋ ์ค์๊ฐ ๊ฒ์์ฒ๋ผ ์๋ฐฉํฅ ํต์ ์ด ํ์ํ ์๋น์ค์ ์ ํฉํฉ๋๋ค.
- *SSE(Server-Sent Events)๋ ์๋ฒ์์๋ง ํด๋ผ์ด์ธํธ๋ก **์ค์๊ฐ ๋ฐ์ดํฐ Push๊ฐ ํ์ํ ๋ด์ค/์๋ฆผ์ ํจ๊ณผ์ ์ด๋ฉฐ,
- GraphQL์ ๋ฐ์ดํฐ ์์ฒญ์ ์ ์ฐ์ฑ๊ณผ ํจ์จ์ฑ์ด ์ค์ํ ๋ณต์กํ ํ๋ก ํธ ๊ตฌ์กฐ์์ ์ฌ์ฉํฉ๋๋ค.
โ ๋ง๋ฌด๋ฆฌ ํ ์ค ์์ฝ
๐ โAjax์ ์ผ๋ฐ์ ์ธ ์์ฒญ,
WebSocket์ ์๋ฐฉํฅ ์ค์๊ฐ,
SSE๋ ์๋ฒ ์๋ฆผ Push,
GraphQL์ ๋ง์ถคํ ๋ฐ์ดํฐ ์์ฒญ์ ํนํ๋ ํต์ ๋ฐฉ์์ ๋๋ค.โ
##