웹 개발 3회차 with.생활코딩

WEB2 HTTP

웹의 기본 구성 요소

• HTML
• URL
• Web Browser & Server
• HTTP

4가지 구성 요소 중 HTTP는 Hyper Text Transfer Protocol의 약자로 서버와 클라이언트가 통신을 하기 위해 사용된다. Request(요청)과 그에 따른 Response(응답)으로 구성되어 있다.

 

HTTP를 가장 쉽게 확인할 수 있는 방법은 웹 브라우저의 개발자 도구(Dev tools)를 이용하는 것이다. 개발자 도구에서 네트워크(Network) 탭을 들어가게 되면 볼 수 있다. 그중 헤더(Header) 탭을 살펴보겠다.

 

🍯tip! 요청이든 응답이든 원본 소스를 보기 위해서는 권한이 필요해 보입니다. 그렇기 때문에 localhost 서버에서 실행시킨 html파일을 통해 확인하는 게 좋습니다.

 

요청 헤더(Request Headers)

▲위 사진처럼 원본이라는 체크박스가 떠야 생활코딩님의 수업과 비슷하게 볼 수 있습니다.

 

첫번째 줄에서 GET이라고 Method를 나타내는 부분으로 요청하는 방법 중 한 가지입니다. 다양한 요청에 대해 궁금하다면 MDN을 참고해주세요. /는 본인이 어떤 html 파일을 요청했는지에 대한 부분입니다. 저는 index.html 파일을 요청했기 때문에 /(루트)로 나타난 듯 보입니다. 마지막 HTTP/1.1은 사용한 HTTP의 버전을 나타내 줍니다. 현재는 3까지 나와있습니다. 자세한 내용은 MDN을 참고해주세요.

그 외에는 Host는 서버의 도메인 명(127.0.0.1)과 포트(5500)가 적혀 있다. User-Agent를 통해 사용자의 접속 기기에 대한 정보를 알 수 있고, Accept-Encoding의 경우 가능한 Encoding 종류들이 나와있다. If-Modified-Since는 사용자가 언제 마지막으로 해당 파일을 다운받았는지를 볼 수 있다. 이를 통해 변경이 없는 경우에는 기존 파일을 사용하고, 변경이 있는 경우에는 새로운 파일을 보내주는 방법에 활용할 수 있다. 기타 다른 부분에도 여러 정보들이 담겨 있다.

 

응답 헤더(Response Headers)

첫 번째 줄을 보면 요청헤더에서 봤던 HTTP의 버전이 나와있고, 그 뒤로 304라는 HTTP 상태 코드(HTTP Status Code)와 Not Modified라는 구문(phrase)이 나와 있다. HTTP 상태 코드는 말 그대로 여러 상태를 알려주는 정보이며 구문은 상태를 사람이 보기 편하게 간단한 해석이라고 볼 수 있다. HTTP 상태 코드는 여러 상황에 맞게 사용할 수 있도록 다양한 코드가 존재한다. 이에 대한 자세한 정보는 MDN에서 확인해 보도록 하자.

🍯tip! http status와 강아지 사진을 합쳐놓은 사이트도 있다. 심심하면 구경해 보세요.

 

더 공부하기 좋은 주제들

• HTTP vs HTTPS
• Cache - cache control, pragma
• cookie, web storage
• proxy
• network monitoring - devtools, wireshark

 

참고&출처

MDN-HTTP request methods, 2024.04.04

MDN-HTTP의 진화, 2024.04.04

MDN-HTTP response statuse codes, 2024.04.04

WEB2-HTTP, 생활코딩, 2024.04.04