๐ 5์ฃผ์ฐจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์น ๊ฐ๋ฐ ๊ธฐ๋ณธ๊ธฐ์ ๋ํด ์ง์ค์ ์ผ๋ก ํ์ตํ์๋ค.
๋ฒ์จ 5์ฃผ์ฐจ๋ผ๋.. 1์ฃผ์ฐจ๊ฐ ์๊ทธ์ ๊ฐ์๋ฐ ์๊ฐ์ด ์ ๋ง ๋น ๋ฅด๋ค.
5์ฃผ์ฐจ๋ ์๋์ ๊ฐ์ 2๊ฐ์ง ์ฃผ์ ๋ฅผ ๋ฐ์๋ค.
HTTP
๋ Hyper Text Transfer Protocol
๋ผ๊ณ ํ๋ฉฐ, ์๋ฒ
์ํด๋ผ์ด์ธํธ
๊ฐ์ ๋ฉ์ธ์ง ๊ตํ
ํ๋กํ ์ฝ์ด๋ผ๊ณ ํ๋ค.
Protocol
: ์๋ก ๋ค๋ฅธ ํ๋์จ์ด ๊ธฐ๊ธฐ๊ฐ ํต์ ํ๊ธฐ ์ํด ํ์ํ ๊ท์น์ด๋ค.
๊ธฐ๊ธฐ ๊ฐ์ ์ํํ ํต์ ์ ์ํด ์ ํด์ง ๊ท์น์ด ๋ฐ๋ก ํ๋กํ ์ฝ์ด๋ผ๊ณ ํ๋ค.
๐งHTTP ๋ฉ์๋์ ์ข
๋ฅ๋ ์ด 9๊ฐ์ง๊ฐ ์๋ค.
๊ฐ ๋ฉ์๋์ ํน์ง์ ๋ํด ์์๋ณด์.
๐ ์ฃผ์ ๋ฉ์๋ 5๊ฐ์ง
1๏ธโฃ GET : ๊ธฐ์กด๋ฐ์ดํฐ๋ฅผ ์กฐํํ๋ค.๋ฉ์์ง ๋ฐ๋๋ฅผ ์ฌ์ฉํด์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ ์๋ ์์ง๋ง, ์ง์ํ์ง ์๋๊ณณ์ด ๋ง์์ ๊ถ์ฅํ์ง ์๋๋ค.
2๏ธโฃ POST : ๋ฐ์ดํฐ ์์ฒญ์ ์ฒ๋ฆฌํ๊ณ ,๋ฉ์์ง ๋ฐ๋๋ฅผ ํตํด ์๋ฒ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ค. ์ฃผ๋ก ์ ๊ท ๋ฆฌ์์ค๋ฅผ ๋ฑ๋กํ๊ฑฐ๋ ํ๋ก์ธ์ค ์ฒ๋ฆฌ์ ์ฌ์ฉ๋๋ค.
3๏ธโฃ PUT : ๊ธฐ์กด ๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ค. ๊ธฐ์กด ๋ฆฌ์์ค๊ฐ ์กด์ฌํ๋ค๋ฉด ๋์ฒดํ๊ณ ์๋ค๋ฉด ์์ฑํ๋ค.
4๏ธโฃ PATCH : ๊ธฐ์กด ๋ฐ์ดํฐ์ ์ผ๋ถ๋ถ๋ง ๋ณ๊ฒฝํ ์ ์๋ค.
5๏ธโฃ DELETE : ๊ธฐ์กด ๋ฐ์ดํฐ๋ฅผ ์ญ์ ํ๋ค.
๐ ๊ธฐํ ๋ฉ์๋ 4๊ฐ์ง
1๏ธโฃ HEAD: GET๊ณผ ๋์ผํ์ง๋ง ๋ฉ์์ง ๋ถ๋ถ์ ์ ์ธํ๊ณ , ์ํ ์ค๊ณผ ํค๋๋ง ๋ฐํํ๋ค.
2๏ธโฃ OPTIONS: ๋์ ๋ฆฌ์์ค์ ๋ํ ํต์ ๊ฐ๋ฅ ์ต์
์ ์ค๋ช
(์ฃผ๋ก CORS์์ ์ฌ์ฉ)ํ๋ค.
3๏ธโฃ CONNECT: ๋์ ์์์ผ๋ก ์๋ณ๋๋ ์๋ฒ์ ๋ํ ํฐ๋์ ์ค์ ํ๋ค.
4๏ธโฃ TRACE: ๋์ ๋ฆฌ์์ค์ ๋ํ ๊ฒฝ๋ก๋ฅผ ๋ฐ๋ผ ๋ฉ์์ง ๋ฃจํ๋ฐฑ ํ
์คํธ๋ฅผ ์ํํ๋ค.
<script>
// 1๋ฒ
let num = 1;
// 2๋ฒ
setTimeout(() => {
num = 2;
}, 0);
// 3๋ฒ
num = 3;
// 4๋ฒ
console.log(num);
</script>
์ ์ฝ๋๋ฅผ ์คํํ๋ฉด ์๋์ ๊ฐ์ ์ถ๋ ฅ๊ฐ๋ค์ด ๋์จ๋ค.
1๏ธโฃ num
์ด๋ผ๋ ๋ณ์์ 1์ ํ ๋นํ ์ฝ๋๋ค.
2๏ธโฃ setTimeoutํจ์๋ฅผ ํ์ฉํ์ฌ Web API
๊ฐ ์ฒ๋ฆฌํ๋๋ก ๋๊ธด๋ค.
์ด๋ก ์ธํด setTimeout ํจ์์ ์๋ callback
์ ์คํํ ์ง ํ๋จํ์ง ์๋๋ค.
๋ฐ๋ผ์ num์ 2๊ฐ ํ ๋น๋์ง์๊ณ 1์ธ์ํ๋ก ์ ์ง๋๋ค.
ํ์ง๋ง Web API์์ setTimeout์์
์ด ์๋ฃ๋๋ฉด setTimeout callback ํจ์๋ฅผ
Callback Queue
์ ๋ฑ๋ก๋๋ค.
3๏ธโฃ num์ 3์ด ์ฌํ ๋น๋๋ค.
4๏ธโฃ 3์ด ์ถ๋ ฅ๋๋ ๋ชจ์ต์ ๋ณผ ์ ์๋ค.
์ด๋ ๊ฒ ๋ชจ๋ ์คํ์ ๋ง์น๊ณ ๋์ Event Loop
๋ฅผ ๋์ ๋ฑ๋ก ๋ callback Queue์ ์๋
callbackํจ์๋ฅผ CallStack
์ผ๋ก ๊ฐ์ ธ์ ์คํํ๊ณ num์ ๋ชจ๋ ์คํ์ ๋ง์น๊ณ ๋์์ผ
2๊ฐ ์ฌํ ๋น๋๋ค.
๊ทธ๋ฌ๋ฏ๋ก ํ์ num์ ์ถ๋ ฅํ๋ฉด 2๊ฐ ์ถ๋ ฅ๋๋ ๋ชจ์ต์ ๋ณผ ์ ์๋ค.
Code-it