우아한 테코톡(14), Web 요청과 응답과정

우아한 테코톡(14), Web 요청과 응답과정

2022. 10. 21. 23:34ㆍ간단한 컴퓨터 이론/우아한테코톡

728x90

본 포스팅은 우아한Tech의 테코톡 삭정님의 Web 요청 & 응답과정 영상을 정리한 내용입니다.

HTTP 웹 Request, Response의 간단한 동작 원리와 예제를 위주로 정리했습니다.

Web 요청과 응답과정

1. Web 요청

1) 웹 요청이란?

인터넷

컴퓨터 네트워크들을 서로 연결 지어주는 범지구적 네트워크

인터넷이라는 네트워크 위에서 다양한 서비스들이 동작하는데 웹 또한 인터넷 위에 동작하는 서비스 중 하나이다.

(1) 인터넷의 종류

LAN

MAN

WAN

2) 웹이란?

팀 버너스리가 컴퓨터들 간에 정보를 주고 받기 위해 빠르게 발전하는 인터넷과 HyperText 같은 컴퓨터 기술을 활용해 만들었다. 즉, 웹의 존재 이유는 정보(자원)의 공유에 초점을 두고 있다. 웹은 수많은 요청과 응답 사이클의 연속으로 이뤄지고 있다.

3) 웹 참여 주체

서버

정보, 자원, 서비스를 제공하는 측

클라이언트

정보, 자원, 서비스를 사용하는 측

2. HTTP

서버와 클라이언트가 정보를 공유할 때 지키는 규약

서버와 클라이언트는 HTTP의 규약을 지켜서 정보 공유를 진행해야한다.

1) HTTP의 대표적인 특성

(1) 비연결성(Connectionless)

클라이언트 요청에 따라 서버가 응답을 마치면 연결을 끊어버리고 새로운 연결을 통해 이뤄진다. 하지만 모든 요청에 대해 연결/해제하는 과정을 거치기에 네트워크 비용측면에서는 비효율적이다. 이를 해결하기 위해 HTTP1.1부터는 Keep-Alive를 통해 지정된 시간동안 유지할 수 있는 기능을 추가했다.

(2) 무상태(Stateless)

클라이언트와 서버가 하나의 요청이 진행되는 동안에는 서로만 인지하는 특성

동일한 클라이언트가 하나의 요청 후에 바로 요청을 보내더라도 서버는 인지를 못한다. 따라서 클라이언트 인증(로그인)이 필요한 서비스에서 불편함을 겪게 된다. 이를 보완하기 위해 쿠키, 세션, 토큰과 같이 상태를 기억할 수 있는 것을 둔다.

2) HTTP Status Code(응답 코드, 상태 코드)

서버는 요청에 대한 처리 상태를 숫자 코드로 반환한다.

3) HTTP Method

클라이언트가 요청을 보낼 때 목적이 무엇인지를 HTTP Method를 사용해 명시한다.

3. 웹 요청 및 응답과정

1) URL 입력

주소창에 url을 입력한다.

url은 네트워크 상에서 자원의 위치를 반환한다.

프로토콜/도메인/리소스 경로의 순서로 입력한다.

2) Requests

이후 홈 페이지에 대한 요청을 서버로 전송한다. get 메서드로 요청을 보내며 헤더를 통해 accept, user-agent, cookie 등의 정보를 함께 보낸다.

3) 서버 동작 및 Response

서버는 클라이언트로부터 요청을 받고 처리한다.

Request Header는 요청에 대한 정보와 클라이언트에 대한 정보를 담고 있고, 요청에 상응하는 정보를 확인한다.

이후 서버가 클라이언트에게 응답한다. 이 또한 헤더를 가지고 있다. 그리고 html을 Response body에 보내준다.

클라이언트는 응답을 받은 후 필요한 리소스들을 추가로 요청하고 응답을 받는다. 이는 브라우저가 알아서 보낸다. 이 과정에서 CSS, 자바스크립트, 정적 파일 등등에 대한 리소스를 요청한다.

4) 브라우저 렌더링

이후 브라우저는 렌더링과정을 통해 리소스 요청을 화면에 띄워준다.

티스토리 블로그 예시

1) 티스토리 블로그 글 임시저장 요청과 응답

임시저장 버튼 클릭

=> post 메소드를 통해 클라이언트가 서버에게 요청을 보낸다. 이때 payload를 함께 포함해 저장할 데이터에 대한 내용을 전송한다. 서버는 요청을 확인하고 Response를 전달한다.

2) 티스토리 임시 저장된 글 삭제 요청과 응답

임시 저장 글 삭제 요청

=> DELETE 메서드를 통해 클라이언트가 서버에서 요청을 보낸다. 서버는 이를 확인하고 작업을 처리한 뒤 response를 반환한다.

출처

https://www.youtube.com/watch?v=0jV7xOUcKog