Front End/Web

HTTP

๐ŸŒ

HTTP (HyperText Transfer Protocol)

HTTP๋Š” HTML๊ณผ ๊ฐ™์€ ๋ฌธ์„œ๋ฅผ ์ „์†กํ•˜๊ธฐ ์œ„ํ•œ ํ”„๋กœํ† ์ฝœ์ด๋ฉฐ, ์›น ๋ธŒ๋ผ์šฐ์ €์™€ ์›น ์„œ๋ฒ„์˜ ์†Œํ†ต์„ ์œ„ํ•ด ๋””์ž์ธ๋˜์—ˆ๋‹ค. ์ „ํ†ต์ ์ธ ํด๋ผ์ด์–ธํŠธ-์„œ๋ฒ„ ๋ชจ๋ธ(2-Tier ์•„ํ‚คํ…์ณ)์—์„œ ํด๋ผ์ด์–ธํŠธ๊ฐ€ HTTP Messages ์–‘์‹์— ๋งž์ถฐ ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด ์„œ๋ฒ„๋„ HTTP Messages ์–‘์‹์— ๋งž์ถฐ ์‘๋‹ตํ•œ๋‹ค.

HTTP Messages

HTTP Messages๋Š” ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ์‚ฌ์ด์—์„œ ๋ฐ์ดํ„ฐ๊ฐ€ ๊ตํ™˜๋˜๋Š” ๋ฐฉ์‹์ด๋ฉฐ, ์š”์ฒญ(Requests)๊ณผ ์‘๋‹ต(Responses) ์œ ํ˜•์œผ๋กœ ๋‚˜๋‰œ๋‹ค. HTTP Messages๋Š” ๋ช‡ ์ค„์˜ ํ…์ŠคํŠธ ์ •๋ณด๋กœ ๊ตฌ์„ฑ๋˜์ง€๋งŒ, ๊ฐœ๋ฐœ์ž๋Š” ์ด๋Ÿฐ ๋ฉ”์„ธ์ง€๋ฅผ ์ง์ ‘ ์ž‘์„ฑํ•  ํ•„์š”๊ฐ€ ๊ฑฐ์˜ ์—†๋‹ค. ๊ตฌ์„ฑ ํŒŒ์ผ, API, ๊ธฐํƒ€ ์ธํ„ฐํŽ˜์ด์Šค์—์„œ ์ž๋™์œผ๋กœ ์™„์„ฑํ•œ๋‹ค.

์š”์ฒญ(Requests)๊ณผ ์‘๋‹ต(Responses)์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์œ ์‚ฌํ•œ ๊ตฌ์กฐ๋ฅผ ์ง€๋‹Œ๋‹ค.

  1. start line : ์š”์ฒญ์ด๋‚˜ ์‘๋‹ต์˜ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ด๋ฉฐ ํ•ญ์ƒ ์ฒซ ์งธ์ค„์— ์œ„์น˜ํ•œ๋‹ค. ์‘๋‹ต์—์„œ๋Š” status line์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.
  1. HTTP headers : ์š”์ฒญ์„ ์ง€์ •ํ•˜๊ฑฐ๋‚˜, ๋ฉ”์„ธ์ง€์— ํฌํ•จ๋œ ๋ณธ๋ฌธ์„ ์„ค๋ช…ํ•˜๋Š” ํ—ค๋”์˜ ์ง‘ํ•ฉ์ด๋‹ค.
  1. empty line : ํ—ค๋”์™€ ๋ณธ๋ฌธ์„ ๊ตฌ๋ถ„ํ•˜๋Š” ๋นˆ ์ค„. ์ด๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์œ„์˜ start line๊ณผ HTTP headers๋ฅผ ๋ฌถ์–ด ํ—ค๋“œ(head)๋ผ ํ•˜๊ณ , ์•„๋ž˜์˜ body๋ฅผ payload(์‚ฌ์šฉ์— ์žˆ์–ด ์ „์†ก๋˜๋Š” ๋ฐ์ดํ„ฐ)๋ผ ๋ถ€๋ฅธ๋‹ค.
  1. body : ์š”์ฒญ/์‘๋‹ต๊ณผ ๊ด€๋ จ๋œ ๋ฐ์ดํ„ฐ ๋˜๋Š” ๋ฌธ์„œ๋ฅผ ํฌํ•จํ•œ๋‹ค. ์š”์ฒญ๊ณผ ์‘๋‹ต์˜ ์œ ํ˜•์— ๋”ฐ๋ผ ์„ ํƒ์ ์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.
โ˜๐Ÿผ
HTTP๋Š” Stateless(๋ฌด์ƒํƒœ์„ฑ)

๋ง ๊ทธ๋Œ€๋กœ ์ƒํƒœ๋ฅผ ๊ฐ€์ง€์ง€ ์•Š๋Š”๋‹ค๋Š” ๋œป์ด๋‹ค. HTTP๋กœ ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๊ฐ€ ํ†ต์‹ ์„ ์ฃผ๊ณ ๋ฐ›๋Š” ๊ณผ์ •์—์„œ HTTP๋Š” ํด๋ผ์ด์–ธํŠธ๋‚˜ ์„œ๋ฒ„์˜ ์ƒํƒœ๋ฅผ ํ™•์ธํ•˜์ง€ ์•Š๋Š”๋‹ค. HTTP๋Š” ํ†ต์‹  ๊ทœ์•ฝ์ผ ๋ฟ์ด๊ธฐ ๋•Œ๋ฌธ์— ํด๋ผ์ด์–ธํŠธ์—์„œ ๋ฐœ์ƒํ•œ ๋ชจ๋“  ์ƒํƒœ๋ฅผ HTTP ํ†ต์‹ ์ด ์ถ”์ ํ•˜์ง€ ์•Š์œผ๋ฉฐ ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜์ง€๋„ ์•Š๋Š”๋‹ค. ๋”ฐ๋ผ์„œ ํ•„์š”์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•(์ฟ ํ‚ค-์„ธ์…˜, API ๋“ฑ)์„ ํ†ตํ•ด ์ƒํƒœ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

HTTP Requests

HTTP Requests๋Š” ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋ฒ„์—๊ฒŒ ๋ณด๋‚ด๋Š” ๋ฉ”์„ธ์ง€์ด๋‹ค. ๋ฉ”์„ธ์ง€์—๋Š” ์•„๋ž˜์˜ ๋‚ด์šฉ๋“ค์ด ํฌํ•จ๋œ๋‹ค.

Start line

Start line์—๋Š” ์„ธ ๊ฐ€์ง€ ์š”์†Œ๊ฐ€ ์žˆ๋‹ค.

  1. ์ˆ˜ํ–‰ํ•  ์ž‘์—…(GET, PUT, POST ๋“ฑ)์ด๋‚˜ ๋ฐฉ์‹(HEAD or OPTIONS)์„ ์„ค๋ช…ํ•˜๋Š” HTTP method๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด GET ๋ฉ”์„œ๋“œ๋Š” ๋ฆฌ์†Œ์Šค๋ฅผ ๋ฐ›์•„์•ผ ํ•˜๊ณ , POST ๋ฉ”์„œ๋“œ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ ์ „์†กํ•œ๋‹ค.
  1. ์š”์ฒญ ๋Œ€์ƒ(์ผ๋ฐ˜์ ์œผ๋กœ URL or URI) ๋˜๋Š” ํ”„๋กœํ† ์ฝœ, ํฌํŠธ, ๋„๋ฉ”์ธ์˜ ์ ˆ๋Œ€ ๊ฒฝ๋กœ๋Š” ์š”์ฒญ ์ปจํ…์ŠคํŠธ์— ์ž‘์„ฑ๋œ๋‹ค. ์š”์ฒญ ํ˜•์‹์€ HTTP method๋งˆ๋‹ค ๋‹ค๋ฅด๋‹ค.
    • origin ํ˜•์‹ : ?์™€ ์ฟผ๋ฆฌ ๋ฌธ์ž์—ด์ด ๋ถ™๋Š” ์ ˆ๋Œ€ ๊ฒฝ๋กœ์ด๋‹ค. GET, POST, HEAD, OPTIONS ๋“ฑ์˜ method์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•œ๋‹ค. โ†’ POST / HTTP 1.1 โ†’ GET /background.png HTTP/1.0 โ†’ HEAD /test.html?query=alibaba HTTP/1.1 โ†’ OPTIONS /anypage.html HTTP/1.0
    • absolute ํ˜•์‹ : ์™„์ „ํ•œ URL ํ˜•์‹์œผ๋กœ, ํ”„๋ก์‹œ์— ์—ฐ๊ฒฐํ•˜๋Š” ๊ฒฝ์šฐ ๋Œ€๋ถ€๋ถ„ GET method์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•œ๋‹ค. โ†’ GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
    • authority ํ˜•์‹ : ๋„๋ฉ”์ธ ์ด๋ฆ„๊ณผ ํฌํŠธ ๋ฒˆํ˜ธ๋กœ ์ด๋ฃจ์–ด์ง„ URL์˜ ์ผ๋ถ€๋ถ„์ด๋‹ค. HTTP ํ„ฐ๋„์„ ๊ตฌ์ถ•ํ•˜๋Š” ๊ฒฝ์šฐ CONNECT์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. โ†’ CONNECT developer.mozilla.org:80 HTTP/1.1
    • asterisk ํ˜•์‹ : OPTIONS์™€ ํ•จ๊ป˜ ๋ณ„ํ‘œ(*) ํ•˜๋‚˜๋กœ ์„œ๋ฒ„ ์ „์ฒด๋ฅผ ํ‘œํ˜„ํ•œ๋‹ค. โ†’ OPTIONS * HTTP/1.1
  1. HTTP ๋ฒ„์ „์— ๋”ฐ๋ผ HTTP message์˜ ๊ตฌ์กฐ๊ฐ€ ๋‹ฌ๋ผ์ง„๋‹ค. ๋”ฐ๋ผ์„œ start line์— HTTP ๋ฒ„์ „์„ ํ•จ๊ป˜ ์ž…๋ ฅํ•œ๋‹ค.

Headers

์š”์ฒญ์˜ Headers๋Š” ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ฅผ ๋”ฐ๋ผ ํ—ค๋” ์ด๋ฆ„(๋Œ€์†Œ๋ฌธ์ž ๊ตฌ๋ถ„ ์—†๋Š” ๋ฌธ์ž์—ด), ์ฝœ๋ก (:), ๊ฐ’์„ ์ž…๋ ฅํ•œ๋‹ค. ๊ฐ’์€ ํ—ค๋”์— ๋”ฐ๋ผ ๋‹ค๋ฅด๋‹ค. ์—ฌ๋Ÿฌ ์ข…๋ฅ˜์˜ ํ—ค๋”๊ฐ€ ์žˆ๊ณ , ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ทธ๋ฃน์„ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค.

  • General headers : ๋ฉ”์„ธ์ง€ ์ „์ฒด์— ์ ์šฉ๋˜๋Š” ํ—ค๋”๋กœ, body๋ฅผ ํ†ตํ•ด ์ „์†ก๋˜๋Š” ๋ฐ์ดํ„ฐ์™€๋Š” ๊ด€๋ จ์ด ์—†๋‹ค.
  • Request headers : fetch๋ฅผ ํ†ตํ•ด ๊ฐ€์ ธ์˜ฌ ๋ฆฌ์†Œ์Šค๋‚˜ ํด๋ผ์ด์–ธํŠธ ์ž์ฒด์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์ •๋ณด๋ฅผ ํฌํ•จํ•˜๋Š” ํ—ค๋”๋ฅผ ์˜๋ฏธํ•œ๋‹ค. User-Agent, Accept-Type, Accept-Language์™€ ๊ฐ™์€ ํ—ค๋”๋Š” ์š”์ฒญ์„ ๋ณด๋‹ค ๊ตฌ์ฒดํ™”ํ•œ๋‹ค. Referer์ฒ˜๋Ÿผ ์ปจํ…์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•˜๊ฑฐ๋‚˜ If-None๊ณผ ๊ฐ™์ด ์กฐ๊ฑด์— ๋”ฐ๋ผ ์ œ์•ฝ์„ ์ถ”๊ฐ€ํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
  • Representation headers : ์ด์ „์—๋Š” Entity headers๋กœ ๋ถˆ๋ ธ์œผ๋ฉฐ body์— ๋‹ด๊ธด ๋ฆฌ์†Œ์Šค์˜ ์ •๋ณด(์ฝ˜ํ…์ธ  ๊ธธ์ด, MIME ํƒ€์ž… ๋“ฑ)๋ฅผ ํฌํ•จํ•˜๋Š” ํ—ค๋”์ด๋‹ค.

Body

์š”์ฒญ์˜ ๋ณธ๋ฌธ์€ HTTP message ๊ตฌ์กฐ์˜ ๋งˆ์ง€๋ง‰์— ์œ„์น˜ํ•œ๋‹ค. ๋ชจ๋“  ์š”์ฒญ์— body๊ฐ€ ํ•„์š”ํ•˜์ง„ ์•Š์œผ๋ฉฐ, GET/HEAD/DELETE/OPTIONS์ฒ˜๋Ÿผ ์„œ๋ฒ„์— ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” ๋ณธ๋ฌธ์ด ํ•„์š”ํ•˜์ง€ ์•Š๋‹ค. POST๋‚˜ PUT๊ฐ™์ด ๋ฐ์ดํ„ฐ๋ฅผ ์—…๋ฐ์ดํŠธ ํ•˜๊ธฐ ์œ„ํ•œ ์š”์ฒญ์—์„œ ์‚ฌ์šฉํ•œ๋‹ค. body๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋‘ ์ข…๋ฅ˜๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค.

  • Single-resource bodies(๋‹จ์ผ-๋ฆฌ์†Œ์Šค ๋ณธ๋ฌธ) : ํ—ค๋” ๋‘ ๊ฐœ(Content-Type๊ณผ Content-Length, ์ฆ‰ Representation headers)๋กœ ์ •์˜๋œ ๋‹จ์ผ ํŒŒ์ผ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค.
  • Multiple-resource bodies(๋‹ค์ค‘-๋ฆฌ์†Œ์Šค ๋ณธ๋ฌธ) : ์—ฌ๋Ÿฌ ํŒŒํŠธ๋กœ ๊ตฌ์„ฑ๋œ ๋ณธ๋ฌธ์—์„œ๋Š” ๊ฐ ํŒŒํŠธ๋งˆ๋‹ค ๋‹ค๋ฅธ ์ •๋ณด๋ฅผ ์ง€๋‹™๋‹ˆ๋‹ค. ๋ณดํ†ต HTML form๊ณผ ๊ด€๋ จ์ด ์žˆ๋‹ค.

HTTP Responses

HTTP Responses๋Š” ์„œ๋ฒ„๊ฐ€ ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ๋ณด๋‚ด๋Š” ๋ฉ”์„ธ์ง€์ด๋‹ค. ๋ฉ”์„ธ์ง€์—๋Š” ์•„๋ž˜์˜ ๋‚ด์šฉ๋“ค์ด ํฌํ•จ๋œ๋‹ค.

Status line

HTTP Request์˜ start line์— ๋Œ€์‘ํ•˜๋Š” ๋‚ด์šฉ์œผ๋กœ, ๋‹ค์Œ์˜ ์ •๋ณด๋ฅผ ํฌํ•จํ•œ๋‹ค.

  1. ํ˜„์žฌ ํ”„๋กœํ† ์ฝœ์˜ ๋ฒ„์ „ (HTTP/1.1)
  1. ์ƒํƒœ ์ฝ”๋“œ : ์š”์ฒญ์˜ ๊ฒฐ๊ณผ๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. (ex. 200, 302, 404)
  1. ์ƒํƒœ ํ…์ŠคํŠธ : ์ƒํƒœ ์ฝ”๋“œ์— ๋Œ€ํ•œ ์„ค๋ช…

Status line์˜ ํ•œ ์˜ˆ์‹œ๋กœ HTTP/1.1 404 Not Found๊ฐ€ ์žˆ๋‹ค.

Headers

์‘๋‹ต์— ๋“ค์–ด๊ฐ€๋Š” HTTP Headers๋Š” ์š”์ฒญ ํ—ค๋”์™€ ๋™์ผํ•œ ๊ตฌ์กฐ(๋Œ€์†Œ๋ฌธ์ž ๊ตฌ๋ถ„ ์—†๋Š” ๋ฌธ์ž์—ด : ๊ฐ’)๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๊ณ , ๊ฐ’์€ ํ—ค๋”์— ๋”ฐ๋ผ ๋‹ค๋ฅด๋‹ค. ์š”์ฒญ ํ—ค๋”์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋ช‡ ๊ทธ๋ฃน์œผ๋กœ ๋‚˜๋‰œ๋‹ค.

  • General headers : ๋ฉ”์„ธ์ง€ ์ „์ฒด์— ์ ์šฉ๋˜๋Š” ํ—ค๋”๋กœ, body๋ฅผ ํ†ตํ•ด ์ „์†ก๋˜๋Š” ๋ฐ์ดํ„ฐ์™€๋Š” ๊ด€๋ จ์ด ์—†๋‹ค.
  • Response headers : ์œ„์น˜ ๋˜๋Š” ์„œ๋ฒ„ ์ž์ฒด์— ๋Œ€ํ•œ ์ •๋ณด(์ด๋ฆ„, ๋ฒ„์ „ ๋“ฑ)์™€ ๊ฐ™์ด ์‘๋‹ต์— ๋Œ€ํ•œ ๋ถ€๊ฐ€์  ์ •๋ณด๋ฅผ ๊ฐ–๋Š” ํ—ค๋”๋กœ Vary, Accept-Ranges์™€ ๊ฐ™์ด ์ƒํƒœ ์ค„์— ๋„ฃ๊ธฐ์—๋Š” ๊ณต๊ฐ„์ด ๋ถ€์กฑํ–ˆ๋˜ ์ถ”๊ฐ€์ ์ธ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
  • Representation headers : ์ด์ „์—๋Š” Entity headers๋กœ ๋ถˆ๋ ธ์œผ๋ฉฐ body์— ๋‹ด๊ธด ๋ฆฌ์†Œ์Šค์˜ ์ •๋ณด(์ฝ˜ํ…์ธ  ๊ธธ์ด, MIME ํƒ€์ž… ๋“ฑ)๋ฅผ ํฌํ•จํ•˜๋Š” ํ—ค๋”์ด๋‹ค.

Body

์‘๋‹ต์˜ ๋ณธ๋ฌธ ์—ญ์‹œ HTTP message ๊ตฌ์กฐ์˜ ๋งˆ์ง€๋ง‰์— ์œ„์น˜ํ•œ๋‹ค. ๋ชจ๋“  ์š”์ฒญ์— body๊ฐ€ ํ•„์š”ํ•˜์ง„ ์•Š์œผ๋ฉฐ, ํŠนํžˆ 201, 204์™€ ๊ฐ™์€ ์ƒํƒœ ์ฝ”๋“œ๋ฅผ ๊ฐ€์ง€๋Š” ์‘๋‹ต์—๋Š” ๋ณธ๋ฌธ์ด ํ•„์š”ํ•˜์ง€ ์•Š๋‹ค. ์‘๋‹ต์˜ body๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋‘ ์ข…๋ฅ˜๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค.

  • Single-resource bodies(๋‹จ์ผ-๋ฆฌ์†Œ์Šค ๋ณธ๋ฌธ) : ๊ธธ์ด๊ฐ€ ์•Œ๋ ค์ง„ ๋‹จ์ผ-๋ฆฌ์†Œ์Šค ๋ณธ๋ฌธ์€ ๋‘ ๊ฐœ์˜ ํ—ค๋”(Content-Type, Content-Length)๋กœ ์ •์˜ํ•œ๋‹ค. ๊ธธ์ด๋ฅผ ๋ชจ๋ฅด๋Š” ๋‹จ์ผ ํŒŒ์ผ๋กœ ๊ตฌ์„ฑ๋œ ๋‹จ์ผ-๋ฆฌ์†Œ์Šค ๋ณธ๋ฌธ์€ Transfer-Encoding์ด chunked๋กœ ์„ค์ •๋˜์–ด ์žˆ์œผ๋ฉฐ ํŒŒ์ผ์€ chunk๋กœ ๋‚˜๋‰˜์–ด ์ธ์ฝ”๋”ฉ๋˜์–ด ์žˆ๋‹ค.
  • Multiple-resource bodies(๋‹ค์ค‘-๋ฆฌ์†Œ์Šค ๋ณธ๋ฌธ) : ์„œ๋กœ ๋‹ค๋ฅธ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” body์ด๋‹ค.


Uploaded by N2T