OSI 7 Layers
โ ์์ฉ ๊ณ์ธต
ํ๋กํ ์ฝ ์ด๋ฆ | ์ค๋ช |
---|---|
HTTP | ์น์์ HTML, JSON ๋ฑ์ ์ ๋ณด๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ํ๋กํ ์ฝ |
HTTPS | HTTP์์ ๋ณด์์ด ๊ฐํ๋ ํ๋กํ ์ฝ |
FTP | ํ์ผ ์ ์ก ํ๋กํ ์ฝ |
SMTP | ๋ฉ์ผ์ ์ ์กํ๊ธฐ ์ํ ํ๋กํ ์ฝ |
SSH | CLI ํ๊ฒฝ์ ์๊ฒฉ ์ปดํจํฐ์ ์ ์ํ๊ธฐ ์ํ ํ๋กํ ์ฝ |
RDP | Window ๊ณ์ด์ ์๊ฒฉ ์ปดํจํฐ์ ์ ์ํ๊ธฐ ์ํ ํ๋กํ ์ฝ |
WebSocket | ์ค์๊ฐ ํต์ , Push ๋ฑ์ ์ง์ํ๋ ํ๋กํ ์ฝ |
โ ํํ ๊ณ์ธต
โ ์ธ์
๊ณ์ธต
โ ์ ์ก ๊ณ์ธต
ํ๋กํ ์ฝ ์ด๋ฆ | ์ค๋ช |
---|---|
TCP | ์๋ฐฉํฅ์ผ๋ก ์๋ํ๋ฉฐ HTTP, FTP ํต์ ๋ฑ์ ๊ทผ๊ฐ์ด ๋๋ ์ธํฐ๋ท ํ๋กํ ์ฝ |
UDP | ๋จ๋ฐฉํฅ์ผ๋ก ์๋ํ์ฌ ๋จ์ํ๊ณ ๋น ๋ฅด์ง๋ง, ์ ๋ขฐ์ฑ์ด ๋ฎ์ ์ธํฐ๋ท ํ๋กํ ์ฝ |
โ ๋คํธ์ํฌ ๊ณ์ธต
โ ๋ฐ์ดํฐ ๋งํฌ ๊ณ์ธต
โ ๋ฌผ๋ฆฌ ๊ณ์ธต
ํ๋กํ ์ฝ ์ด๋ฆ | ์ค๋ช |
---|---|
์กฐํ (Read) | GET |
์ถ๊ฐ (Create) | POST |
๊ฐฑ์ (Update) | PUT ๋๋ PATCH |
์ญ์ (Delete) | Delete |
(URL : scheme, hosts, url-path๋ก ๊ตฌ๋ถ
URI : scheme, hosts, url-path, query, fragment๋ก ๊ตฌ๋ถ)
http://www.google.com:80/search?q=JavaScript
๋ถ๋ถ | ๋ช ์นญ | ์ค๋ช |
---|---|---|
http:// | scheme | ํต์ ํ๋กํ ์ฝ |
www.google.com | hosts | ์น ํ์ด์ง, ์ด๋ฏธ์ง, ๋์์ ๋ฑ์ ํ์ผ์ด ์์นํ ์น ์๋ฒ, ๋๋ฉ์ธ ๋๋ IP |
:80 | port | ์น ์๋ฒ์ ์ ์ํ๊ธฐ ์ํ ํต๋ก |
/search | url-path | ์น ์๋ฒ์ ๋ฃจํธ ๋๋ ํ ๋ฆฌ๋ถํฐ ์น ํ์ด์ง, ์ด๋ฏธ์ง, ๋์์ ๋ฑ์ ํ์ผ์ด ์์น๊น์ง์ ๊ฒฝ๋ก |
?q=JavaScript | query | ์น ์๋ฒ์ ์ ๋ฌํ๋ ์ถ๊ฐ ์ง๋ฌธ |
โport ๋ฒํธ? 0~ 65535๊น์ง ์ฌ์ฉ ๊ฐ๋ฅ.
(0 ~ 1024๊น์ง๋ ์ด๋ฏธ ์ด๋ฆ์ด ์ ํด์ ธ์์)
22
: SSH
80
: HTTP
443
: HTTPS
โDomain name
์น ๋ธ๋ผ์ฐ์ ๋ฅผ ํตํด ํน์ ์ฌ์ดํธ์ ์ง์
์ ํ ๋, IP ์ฃผ์๋ฅผ ๋์ ํ์ฌ ์ฌ์ฉํ๋ ์ฃผ์.
ํฐ๋ฏธ๋์์ ๋๋ฉ์ธ ์ด๋ฆ์ ํตํด IP ์ฃผ์๋ฅผ ํ์ธํ๋ ๋ช
๋ น์ด์ธ
nslookup
์ผ๋ก naver.com์ IP์ฃผ์๋ฅผ ํ์ธํ ์ ์๋ค.๐
โDNS : Domain Name System
ํด๋น ๋๋ฉ์ธ ์ด๋ฆ๊ณผ ๋งค์นญ๋ IP ์ฃผ์๋ฅผ ํ์ธํ๋ ์์
์ด ๋ฐ๋์ ํ์ํ๋ค.
๋คํธ์ํฌ์๋ ์ด๊ฒ์ ์ํ ์๋ฒ๊ฐ ๋ณ๋๋ก ์๋๋ฐ ์ด๋ฅผ DNS๋ผ๊ณ ํ๋ค.
"Aw, Snap!"("์, ์ด๋ฐ!")
Chrome ๋ธ๋ผ์ฐ์ ์์ ํ์ด์ง๋ฅผ ๋ก๋ํ๋๋ฐ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค.
Error | Discription |
---|---|
200 | ์ฑ๊ณต! |
400 | ํด๋ผ์ด์ธํธ ์คํจ (์ ์ ์๋ชป, ๋ด ์๋ชป๐) |
500 | ์๋ฒ ์คํจ (์๋ฒ ์๋ชป, ๋ ์๋ชป๐ก) |
์์ฒญ(Requests)๊ณผ ์๋ต(Responses) ๋ ๊ฐ์ง ์ ํ์ด ์๋ค.
โ start line : ์์ฒญ์ด๋ ์๋ต์ ์ํ๋ฅผ ๋ํ๋ด๋ฉฐ ํญ์ ์ฒซ ๋ฒ์งธ ์ค์ ์์นํ๋ค. (์๋ต์์๋ status line์ด๋ผ๊ณ ๋ถ๋ฆ)
โ HTTP headers : ์์ฒญ์ ์ง์ ํ๊ฑฐ๋, ๋ฉ์์ง์ ํฌํจ๋ ๋ณธ๋ฌธ์ ์ค๋ช
ํ๋ ํค๋์ ์งํฉ์ด๋ค.
โ empty line : ํค๋์ ๋ณธ๋ฌธ์ ๊ตฌ๋ถํ๋ ๋น ์ค์ด ์๋ค.
โ body : ์์ฒญ๊ณผ ๊ด๋ จ๋ ๋ฐ์ดํฐ๋ ์๋ต๊ณผ ๊ด๋ จ๋ ๋ฐ์ดํฐ ๋๋ ๋ฌธ์๋ฅผ ํฌํจํ๋ค. (์์ฒญ๊ณผ ์๋ต์ ์ ํ์ ๋ฐ๋ผ ์ ํ์ ์ผ๋ก ์ฌ์ฉ)
โ๏ธ์ฐธ๊ณ ) ์ด ์ค start line๊ณผ HTTP headers๋ฅผ ๋ฌถ์ด ์์ฒญ์ด๋ ์๋ต์ ํค๋(head)๋ผ๊ณ ํ๊ณ , payload๋ body๋ผ๊ณ ์ด์ผ๊ธฐํ๋ค.
HTTP Messages์ ๊ตฌ์กฐ๐
โ๏ธ์ฐธ๊ณ ) ๊ฐ๋ฐ์๋ ์ด๋ฐ ๋ฉ์์ง๋ฅผ ์ง์ ์์ฑํ ํ์๊ฐ ๊ฑฐ์ ์๋ค. ๊ตฌ์ฑ ํ์ผ, API, ๊ธฐํ ์ธํฐํ์ด์ค์์ HTTP Messages๋ฅผ ์๋์ผ๋ก ์์ฑํ๋ค.
์์ฒญ
Start line๊ณผ Headers, Body๋ก ์ด๋ฃจ์ด์ ธ ์๋ค. (Body๋ ํ์๊ฐ ์๋)
์๋ต
Start line๊ณผ Headers, Body๋ก ์ด๋ฃจ์ด์ ธ ์๋ค. (Body๋ ํ์๊ฐ ์๋)
Asynchronous JavaScript And XMLHttpRequest
JavaScript, DOM, Fetch, XMLHttpRequest, HTML ๋ฑ์ ๋ค์ํ ๊ธฐ์ ์ ์ฌ์ฉํ๋ ์น ๊ฐ๋ฐ ๊ธฐ๋ฒ์ ๋งํ๋ค.
๋น๋๊ธฐ์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์๋ฒ์์ ๋ฐ์์ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง์ ํ๋ ๊ธฐ๋ฒ์ AJAX๋ผ๊ณ ํ๋ค.
(ex. ๊ฒ์์ฐฝ, ๋ฌดํ์คํฌ๋กค, ํ์ด์ค๋ถ ๋ฉ์์ง, ๋ค์ด๋ฒ ํฌํธ์ฌ์ดํธ์ ๋ด์ค ํญ)
ํ์คํ๋ ๋ฐฉ๋ฒ
XHR์ด ํ์คํ๋๋ฉด์๋ถํฐ ๋ธ๋ผ์ฐ์ ์ ์๊ด์์ด AJAX๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ๋์๋ค.
์ ์ ์ค์ฌ ์ ํ๋ฆฌ์ผ์ด์
๊ฐ๋ฐ
ํ์ํ ๋ฐ์ดํฐ๋ฅผ ๋น๋๊ธฐ์ ์ผ๋ก ๊ฐ์ ธ์ ๋ธ๋ผ์ฐ์ ์์ ํ๋ฉด์ ์ผ๋ถ๋ง ์
๋ฐ์ดํธํ์ฌ ๋ ๋๋ง ํ ์ ์๋ค. ๋๋ฌธ์ ๋น ๋ฅด๊ณ ๋ ๋ง์ ์ํธ์์ฉ์ด ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋ค ์ ์๋ค.
๋ ์์ ๋์ญํญ
์๋ฒ๋ก๋ถํฐ ์์ฑ๋ HTML ํ์ผ์ ๋ฐ์์ค์ง ์๊ณ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ํ
์คํธ ํํ(JSON, XML ๋ฑ)๋ก ๋ณด๋ด๋ฉด ๋๊ธฐ ๋๋ฌธ์ ๋น๊ต์ ๋ฐ์ดํฐ์ ํฌ๊ธฐ๊ฐ ์๋ค.
๊ฒ์ ์์ง ์ต์ ํ(SEO)์ ๋ถ๋ฆฌ
AJAX ๋ฐฉ์์ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ํ ๋ฒ ๋ฐ์ HTML์ ๋ ๋๋ง ํ ํ, ์๋ฒ์์ ๋น๋๊ธฐ์ ์ผ๋ก ํ์ํ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ ๊ทธ๋ ค๋ธ๋ค. HTML ํ์ผ์ ๋ผ๋๋ง ์๊ณ ๋ฐ์ดํฐ๋ ์๊ธฐ ๋๋ฌธ์ ์ฌ์ดํธ์ ์ ๋ณด๋ฅผ ๊ธ์ด๊ฐ๊ธฐ ์ด๋ ต๋ค.
๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ ๋ฌธ์
AJAX์์๋ ์ด์ ์ํ๋ฅผ ๊ธฐ์ตํ์ง ์๊ธฐ ๋๋ฌธ์ ๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ์ ๋๋ฌ๋ ์ฌ์ฉ์๊ฐ ์๋ํ ๋๋ก ๋์ํ์ง ์๋๋ค. ๋ฐ๋ผ์ ๋ค๋ก๊ฐ๊ธฐ ๋ฑ์ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ ์ํด์๋ ๋ณ๋๋ก History API๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
Server Side Rendering
์๋ฒ์์ ์น ํ์ด์ง๋ฅผ ๋ธ๋ผ์ฐ์ ๋ก ๋ณด๋ด๊ธฐ ์ ์ ์๋ฒ์์ ์์ ํ ๋ ๋๋งํ๋ค.
(ex. ๋ค์ด๋ฒ ๋ธ๋ก๊ทธ, The NewYork Times)
โ ์น ํ์ด์ง์ ๋ด์ฉ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋ฐ์ดํฐ๊ฐ ํ์ํ ๊ฒฝ์ฐ?
์๋ฒ๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์จ ๋ค์, ์น ํ์ด์ง๋ฅผ ์์ ํ ๋ ๋๋ง ๋ ํ์ด์ง๋ก ๋ณํํ ํ์ ๋ธ๋ผ์ฐ์ ์ ์๋ต์ผ๋ก ๋ณด๋ธ๋ค.
โ ์น ํ์ด์ง๋ฅผ ์ดํด๋ณด๋ ์ฌ์ฉ์๊ฐ, ๋ธ๋ผ์ฐ์ ์ ๋ค๋ฅธ ๊ฒฝ๋ก๋ก ์ด๋ํ๋ฉด?
๋ธ๋ผ์ฐ์ ๊ฐ ๋ค๋ฅธ ๊ฒฝ๋ก๋ก ์ด๋ํ ๋๋ง๋ค ์๋ฒ๋ ๊ฐ์ ์์
์ ๋ค์ ์ํํ๋ค.
Client Side Rendering
ํด๋ผ์ด์ธํธ์์ ํ์ด์ง๋ฅผ ๋ ๋๋งํ๋ค.
(ex. ์๊ณ ๋ค)
โ ์น ํ์ด์ง์ ๋ด์ฉ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋ฐ์ดํฐ๊ฐ ํ์ํ ๊ฒฝ์ฐ?
๋ธ๋ผ์ฐ์ ๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ ์น ํ์ด์ง์ ๋ ๋๋ง์ ํด์ผ ํ๋ค. ์ด๋ฅผ ์ํด Fetch์ ๊ฐ์ API๊ฐ ์ฌ์ฉ๋๋ค.
โ ์น ํ์ด์ง๋ฅผ ์ดํด๋ณด๋ ์ฌ์ฉ์๊ฐ, ๋ธ๋ผ์ฐ์ ์ ๋ค๋ฅธ ๊ฒฝ๋ก๋ก ์ด๋ํ๋ฉด?
๋ธ๋ผ์ฐ์ ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์์ฒญํ ๊ฒฝ๋ก์ ๋ฐ๋ผ ํ์ด์ง๋ฅผ ๋ค์ ๋ ๋๋งํ๋ค. ์ด๋ ๋ณด์ด๋ ์น ํ์ด์ง์ ํ์ผ์ ๋งจ ์ฒ์ ์๋ฒ๋ก๋ถํฐ ์ ๋ฌ๋ฐ์ ์น ํ์ด์ง ํ์ผ๊ณผ ๋์ผํ ํ์ผ์ด๋ค.(์๋ฒ๊ฐ ์น ํ์ด์ง๋ฅผ ๋ค์ ๋ณด๋ด์ง ์๋๋ค.)
static site generation
์น ํ์ด์ง๋ฅผ ์ฌ์ ์ ๋น๋ํ์ฌ ์ ์ ์ธ HTML ํ์ผ๋ก ์์ฑํ๋ ๋ฐฉ์์ด๋ค.
(SSG๋ ๋์ ์ธ ๋ฐ์ดํฐ๋ฅผ ๋ฏธ๋ฆฌ ๊ฐ์ ธ์ ํ์ด์ง๋ฅผ ์์ฑํ๊ณ ,
์ดํ์๋ ํด๋ผ์ด์ธํธ ์์ฒญ์ ๋ฐ๋ผ ์ฌ์ ์ ๋น๋๋ ์ ์ ํ์ผ์ ์ ๊ณตํจ)
์๋ฒ ๋ถํ๊ฐ ์์ผ๋ฉฐ, SEO์๋ ์ข๋ค.
โทSSR
SEO๊ฐ ์ฐ์ ์์์ผ ๋ ์ฌ์ฉํ๋ค.
์ฒซ ํ๋ฉด ๋ ๋๋ง์ด ๋น ๋ฅด๊ฒ ํ์ํ ๊ฒฝ์ฐ์
์นํ์ด์ง๊ฐ ์ฌ์ฉ์์ ์ํธ์์ฉ์ด ์ ์ ๊ฒฝ์ฐ ํ์ฉํ๋ฉด ์ข๋ค.
โทCSR
SEO๊ฐ ์ฐ์ ์์๊ฐ ์๋ ๋ ์ฌ์ฉํ๋ค.
์ฌ์ดํธ์ ํ๋ถํ ์ํธ ์์ฉ์ด ์๋ ๊ฒฝ์ฐ์ ํ์ฉํ๋ฉด ์ข๊ธฐ์
์น ์ ํ๋ฆฌ์ผ์ด์
์ ์ ์ํ ๋ ์ฌ์ฉํ๋ฉด ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ(๋น ๋ฅธ ๋์ ๋ ๋๋ง ๋ฑ)์ ์ ๊ณตํ ์ ์๋ค.
(ํ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๋ง ๋ฐ์์จ๋ค๋ ๋ป)