๐Ÿ“5์ฃผ์ฐจ ์œ„ํด๋ฆฌ ํŽ˜์ดํผ ๋ฏธ์…˜

pjw__98ยท2023๋…„ 11์›” 19์ผ
1
post-thumbnail
๐Ÿ“Œ 5์ฃผ์ฐจ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์›น ๊ฐœ๋ฐœ ๊ธฐ๋ณธ๊ธฐ์— ๋Œ€ํ•ด ์ง‘์ค‘์ ์œผ๋กœ ํ•™์Šตํ•˜์˜€๋‹ค.
   ๋ฒŒ์จ 5์ฃผ์ฐจ๋ผ๋‹ˆ.. 1์ฃผ์ฐจ๊ฐ€ ์—Š๊ทธ์ œ๊ฐ™์€๋ฐ ์‹œ๊ฐ„์ด ์ •๋ง ๋น ๋ฅด๋‹ค.
   5์ฃผ์ฐจ๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ 2๊ฐ€์ง€ ์ฃผ์ œ๋ฅผ ๋ฐ›์•˜๋‹ค.

๐Ÿค” HTTP ๋ฉ”์†Œ๋“œ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด ์ฃผ์„ธ์š”.

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๊ฐ€ ์ถœ๋ ฅ๋˜๋Š” ๋ชจ์Šต์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.


๐Ÿ‘๐ŸปReference

HTTP

Code-it

profile
โ˜„๏ธ

0๊ฐœ์˜ ๋Œ“๊ธ€