๐Ÿ‘‰ Browser

๋Œ€ํ‘œ์ ์ธ ํ„ฐ๋ฏธ๋„ ex) ํฌ๋กฌ, ์›จ์ผ

๐Ÿ‘‰ Client

ํ„ฐ๋ฏธ๋„์˜ ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์ปดํ“จํ„ฐ, ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ์ฃผ๋กœ ์ˆ˜ํ–‰, ์„œ๋ฒ„์— ๋Œ€ํ•œ ์‘๋‹ต์„ ํ™”๋ฉด์— ํ‘œ์‹œ
Messaging patterns
Request-Response : ๋Œ€ํ‘œ์ ์œผ๋กœ HTTP๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ๋ฉ”์‹œ์ง• ํŒจํ„ด, ๋ณดํ†ต ๋™๊ธฐ์ ์œผ๋กœ ์ž‘๋™ํ•˜๋ฉฐ, ์—ฐ๊ฒฐ์ด ์—ด๋ฆฌ๋ฉด ์‘๋‹ต์ด ์ „๋‹ฌ๋ ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ๊ฑฐ๋‚˜, timeout ์ „๋‹ฌ
Publish-Subscribe : ์ˆ˜์‹ ์ž๊ฐ€ ์ง€์ •๋˜์ง€ ์•Š๋Š” ๋Œ€์‹ , ๋ฉ”์‹œ์ง€๊ฐ€ ๋ฐœํ–‰๋˜๋ฉด ๊ตฌ๋…์„ ์‹ ์ฒญํ•œ ์ˆ˜์‹ ์ž์—๊ฒŒ ์ผ๊ด„์ ์œผ๋กœ ์ „๋‹ฌ, ๋น„๋™๊ธฐ ๋ฉ”์‹œ์ง•์ด๋ฉฐ, ๋ฉ”์‹œ์ง€ ๋ธŒ๋กœ์ปค ๋˜๋Š” Event bus๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ๊ฒƒ์ด ์ค‘๊ฐ„์— ๊ตฌํ˜„๋˜์–ด์•ผ ํ•จ
Push technology(server push)
: Publish-subscribe ๋ชจ๋ธ์˜ ์ผ์ข…, ์ „์†ก ์š”์ฒญ์ด ํด๋ผ์ด์–ธํŠธ๋กœ๋ถ€ํ„ฐ ์‹œ์ž‘๋˜์ง€ ์•Š์Œ, WebSocket ํ”„๋กœํ† ์ฝœ์„ ์ด์šฉํ•ด ๊ตฌํ˜„ ๊ฐ€๋Šฅ

๐Ÿ‘‰ Server

์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜๋Š” ์ปดํ“จํ„ฐ๋กœ, ๋‹ค์ˆ˜์˜ ํด๋ผ์ด์–ธํŠธ ์ปดํ“จํ„ฐ์˜ ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ์กด์žฌ
Web Server, File Server ๋“ฑ, ์›นํŽ˜์ด์ง€ ์ง€์›์ด๋‚˜, ๊ณต์œ  ๋ฐ์ดํ„ฐ์˜ ์ฒ˜๋ฆฌ ๋ฐ ์ €์žฅ ๋“ฑ์˜ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ์ฃผ๋กœ ์ˆ˜ํ–‰

๐Ÿ‘‰ API

HTTP ์š”์ฒญ์œผ๋กœ ์›๊ฒฉ ์„œ๋ฒ„์— ์š”์ฒญ ํ•  ์ˆ˜ ์žˆ๋„๋ก ์™ธ๋ถ€๋กœ ๋…ธ์ถœ๋œ ์ถ”์ƒํ™”๋œ ์ธํ„ฐํŽ˜์ด์Šค
์„œ๋ฒ„์ž์›์„ ์ž˜ ๊ฐ€์ ธ๋‹ค ์“ธ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ค์–ด ๋†“์€ โ†’ interface
GET/message : ๋ฉ”์„ธ์ง€ ์ „๋‹ฌ
POST/message : ๋ฉ”์„ธ์ง€ ์ €์žฅ(์„œ๋ฒ„๊ฐ€ ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ JSON์˜ ํ˜•ํƒœ๋กœ ์ „๋‹ฌ)

REST

: API ๋””์ž์ธ์— ์žˆ์–ด์„œ HTTP ํ”„๋กœํ† ์ฝœ์„ ์˜๋„์— ๋งž๊ฒŒ ์‚ฌ์šฉํ•˜๋„๋ก ์ •์˜๋œ ์•„ํ‚คํ…์ณ ์Šคํƒ€์ผ
โ†’ URI๋Š” ์ •๋ณด์˜ ์ž์›์„ ํ‘œํ˜„, ์ž์›์— ๋Œ€ํ•œ ํ–‰์œ„๋Š” HTTP Method๋กœ ํ‘œํ˜„

๐Ÿ‘‰ HTTP

์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ฃผ๋กœHTML ๋“ฑ์˜ ๋ฌธ์„œ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ๋ฐ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœํ† ์ฝœ
๊ทœ์•ฝ๊ณผ ๊ทœ์น™์„ ๊ฐ€์ง€๊ณ  ํ†ต์‹ 
TCP/IP
ํ•ญ์ƒ ์š”์ฒญ๊ณผ ์‘๋‹ต์œผ๋กœ ์ด๋ฃจ์–ด์ง„๋‹ค.(client โ†’ server) ์›ํ•˜๋Š” ์š”์ฒญ์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ์—†์–ด๋„ ์‘๋‹ต์„ ํ•ด์•ผํ•œ๋‹ค.
Http ์š”์ฒญ

<header> : ์–ด๋””์„œ ๋ณด๋‚ด๋Š” ์š”์ฒญ์ธ๊ฐ€, ์–ด๋–ค ํด๋ผ์ด์–ธํŠธ๋ฅผ ์ด์šฉํ•ด ๋ณด๋ƒˆ๋Š”๊ฐ€
<body> : method๊ฐ€ body๋ฅผ ๊ฐ€์ง€๋Š” ์ง€ ํ™•์ธ
์‘๋‹ต๋„ header์™€body๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง„๋‹ค.
๋งค http์š”์ฒญ์€ ๋ชจ๋‘ ๋…๋ฆฝ์  โ†’ state๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์ง€์•Š๋‹ค.
connectionless : ํ•œ๋ฒˆ์˜ ์š”์ฒญ์—๋Š” ํ•œ๋ฒˆ์˜ ์‘๋‹ต์„ ํ•œ๋‹ค.

๐Ÿ‘‰ AJAX

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์„œ๋ฒ„์™€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ  ๋ฐ›๋Š” ๋ฐฉ์‹์„ ์˜๋ฏธ
์ „์ฒด ํŽ˜์ด์ง€๊ฐ€ ์•„๋‹Œ ์ผ๋ถ€๋ถ„๋งŒ ๊ฐฑ์‹  ๊ฐ€๋Šฅ.(JSON์ด๋‚˜ xmlํ˜•ํƒœ๋กœ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ๋ฐ›์•„ ๊ฐฑ์‹ ๊ฐ€๋Šฅ) โ†’ ์†๋„ ์ฐจ์ด ๋•Œ๋ฌธ์— ์ด์šฉ
XMLHttpRequest : ์„œ๋ฒ„์™€ ์ž์œ ๋กญ๊ฒŒ ํ†ต์‹ ๊ฐ€๋Šฅ

๋‹จ์ 

ํžˆ์Šคํ† ๋ฆฌ ๊ด€๋ฆฌ๊ฐ€ ์•ˆ๋œ๋‹ค. ์—ฐ์†์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๋ฉด ์„œ๋ฒ„ ๋ถ€ํ•˜๊ฐ€ ์ฆ๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค. XMLHttpRequest๋ฅผ ํ†ตํ•ด ํ†ต์‹ ์„ ํ•˜๋Š” ๊ฒฝ์šฐ ์‚ฌ์šฉ์ž์—๊ฒŒ ์•„๋ฌด๋Ÿฐ ์ง„ํ–‰ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š”๋‹ค.
์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€๋ฅผ ๋– ๋‚˜๊ฑฐ๋‚˜ ์˜ค์ž‘๋™ํ•  ์šฐ๋ ค๊ฐ€ ์žˆ๋‹ค.

๐Ÿ—ฟ Browser์™€ Server ๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ์ƒ๊ฐํ•˜๊ณ , ์–ด๋–ป๊ฒŒ ํ†ต์‹ ์„ ํ•˜๋Š”์ง€, HTTP์™€ API์— ๋Œ€ํ•ด์„œ ๋‚˜๋งŒ์˜ ํ‘œํ˜„์‹์œผ๋กœ ์ดํ•ดํ•˜๋„๋ก ํ•ด์•ผ๊ฒ ๋‹ค.