[ WEB ] - HTTP란 무엇인가?

HTTP ( HyperText Transfer Protocol )

html과 같은 하이퍼미디어 문서 전송을 위해 이용되는 응용프로그램계층 프로토콜의 하나로, 인터넷상에서 클라이언트와 서버가 데이터를 주고받는 일종의 규약을 의미합니다. http는 기본적으로 클라이언트가 요청을 생성하기 위해 연결을 연 후 응답을 받을 때까지 대기하는 클라이언트-서버 모델을 따릅니다.

• http는 기본적으로 stateless 즉 상태를 저장하지 않는다. 하지만 쿠키를 이용하여 상태를 별도로 저장할 수 있다.

Request ( 요청 )

클라이언트가 서버에 자원을 요청하는 행위이다. 보통 사용자가 보는 화면 즉 브라우저가 클라이언트 측이다.

GET /user HTTP/1.1
Host: developer.mozilla.org
Accept-Language: fr
Cookie: _gid=test
User-Agent: Mozilla/5.0

• GET => method (GET, POST, PUT, DELETE ....)
• /user => path
• HTTP/1.1 => 프로토콜의 버전, HTTP/1.1이 현재 가장 표준화된 프로토콜이다.
• Host, Accept-Lanaguage... => headers ( 서버에 제공하는 추가적인 정보 )

Response ( 응답 )

클라이언트의 요청(Request)에 따른 서버의 응답이다. 

HTTP/1.1 200 / OK
Date: Wed, 01 Jun 2022 23:45:23 GMT,
Server: Apache,
Last-Modified: Tue, 01 Dec 2022 20:18:22 GMT,
ETag: "WY63nS6c/0pdK1V6Sw02/vT6oVU=",
Access-Control-Allow-Origin: *,
Content-Type: text/html

• HTTP/1.1 => 프로토콜의 버전
• 200 => 상태코드
• OK => 상태 메세지
• Last-Modified : 서버에서 보낸 응답으로 가장 마지막 수정된 날짜와 시각을 담고 있다.
• E-tag : 서버에서 보낸 응답으로 특정 버전의 리소스를 구분하여 준다.

HTTP/1.1

이전 버전의 HTTP 프로토콜에서 매 요청시마다 새롭게 연결을 열고 닫고 해야했던 단점을 극복하였다. Connection: keep-alive를 통해 하나의 연결로 여러 번의 요청과 응답이 가능하다.

---

통신 흐름

1. 클라이언트 측에서 TCP 연결을 열기위해, TCP 요청을 보낸다. (기존에 연결된 TCP 연결이 있는 경우 기존 연결을 재사용할 수 있다.)
2. HTTP 메시지 전송 ( ex) A사이트의 웹 페이지 요청 )
3. 클라이언트 요청에 대해 서버가 응답 ( ex) A사이트의 웹 페이지 응답)
4. 클라이언트는 응답을 받은 후 연결을 닫거나 추가적인 통신을 할 수 있다.

---

URI(Uniform Resource Identifier)

URL(Uniform Resources Locator)

http:// www.example.com:80/path

프로토콜 ( Protocol )

http:// www.example.com:80/path

Domain Name

요청중인 웹서버를 의미하며, 본래는 IP (ex) 127.0.0.1)주소 형태로 되어있는데, DNS를 통해 ip와 도메인을 매핑하여 도메인을 통해 서버에 접근할 수 있다.

www → hostname

example.com -> domain

http://www.example.com:80/path

PORT

특정 리소스에 접근할 수 있도록 하는 주소의 일부로, 일반적으로 http는 80 https는 443으로 되어있다.

http://www.example.com:80/path

Path

요청한 웹서버 내에서의 자원의 경로이다.

http://www.example.com:80/path

Querystring

웹서버에 추가적으로 정보를 제공하기 위한 것으로, 키-값의 쌍으로 이루어진다.

http://www.example.com:80/path?id=algml

---

ex)

import express from 'express';

const app = express();

app.use( (req:express.Request,res:express.Response,next:express.NextFunction) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader('Content-Type','text/html');
    res.setHeader('Set-Cookie', ['user=mihee', 'city=seoul']);
    res.writeHead(200,{'Content-Type':'text/plain'});
    res.end('ok');
})

app.listen(3000,() => {
    console.log('server start 3000')
})

 

Access-Control-All-Origin

 

 

서버는 다른 도메인에 대한 요청에 대해 header에 Access-Control-Allow-Origin: * 을 담아 응답함으로써, 서버와 출처가 다른 도메인이 접근하는 것을 허용해줍니다.

https://foo.example에 대해서만 접근을 허용하기 위해서는 아래와 같이 설정하여야 합니다.

Access-Control-Allow-Origin: https://foo.example

 

Content-Type 

클라이언트에서 전송되는 문서의 형식을 알려주기 위해 사용되는 것으로, MIME 타입이라고 한다.

- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
- text/html
- image/png
- image/jpeg

Set-Cookie

특정 값을 저장해두기 위해 사용한다. 위의 경우 user에 mihee, city에 seoul이라는 값을 담아 쿠키값으로 담아 보낸 것이다.

 

 

 

출처

https://medium.com/@rlatla626/http-%EC%A0%95%EB%A6%AC-3958d2a82312

https://developer.mozilla.org/ko/docs/Web/HTTP/Overview