Node.js 기초 | 웹 브라우저 통신 방식과 원리 | 작동 예시

웹 브라우저의 뜻

웹 브라우저란 : 사이트에 접속했을 때, HTML, CSS, Javascript 파일을 받아서 이를 번역하여 사용자가 볼 수 있도록 해주는 것.

 

정적(Static)인 웹페이지 : 서버에서 브라우저에 전송되는 그대로 표시되는 페이지

동적(Dynamic)인 웹페이지 : 서버로부터 데이터를 받아 화면이 실시간으로 내용을 변경하는 페이지

 

 

웹 브라우저 통신 방식

- 사용자가 웹 브라우저의 주소창에 URL을 입력한다.

- 웹 브라우저는 입력받은 URL을 DNS 서버로 전달하여 해당 IP 주소를 찾게 된다.

- DNS 서버는 도메인 이름을 IP 주소로 변환한다. 

- 웹 브라우저는 해당 IP 주소로 HTTP 요청을 전달한다.

- IP 주소에 연결된 웹 서버는 요청(Request)을 받아 처리한다.

- 웹 서버는 처리 결과물을 HTTP Request를 통해 브라우저에 전달한다.

- 웹 브라우저는 받은 HTTP Response를 바탕으로 사용자에게 표시하게 된다.

 

브라우저의 통신 방식 출처: https://www.geeksforgeeks.org/

HTTP의 뜻

데이터를 주고받는 양식을 정의한 '통신규약' 중 하나가 HTTP

매우 범용적인 양식을 가지고 있어 전 세계에서 가장 많이 쓰이는 통신 규약이다.

여기서 말하는 통신 규약이란? 컴퓨터끼리 데이터를 주고받을 때 정해둔 '약속'

 

HTTPS는 또 뭐야?

HTTP를 기반으로 데이터 통신의 안전성을 높이기 위해 암호화 기능이 포함된 프로토콜

기존 HTTP와 달리 비밀 코드처럼 만들어 전송하게 된다.

이로 인해 클라이언트와 서버 사이의 데이터(패킷)가 외부에서 보이지 않게 된다.

사용하기 위해서는 암호화 기법, 인증서 제공 기관 등 개념을 이해하고 사용해야 한다.

 

어떻게 데이터를 주고받을까? 

HTTP 데이터 주고 받는 모습

HTTP는 언제나 요청과 응답이라는 두 가지 개념이 존재합니다.

 

Request는 어떤 방식으로 할 건지(Method)와 어디서 요청할 건지 (path)를 담아 서버에 보내게 됩니다.

Response에서는 응답이 어떤 상태인지 (status)와 어떤 형태로 응답할 건지(content type)가 오게 됩니다.

 

이렇듯, 서버는 브라우저가 요청한 페이지와 정보가 있는지 확인하고, 있다면 해당 페이지에 대한 데이터를 반환하게 되는 것입니다.

브라우저의 역할은 이렇게 받은 데이터를 브라우저에 사용자에 맞춰 그려주는 것이죠.

 

 

아래 사진을 보시면, 구글크롬 개발자 도구에서 브라우저가 데이터를 어떻게 받아가고 있는지 볼 수 있습니다. 여러 가지 데이터 파일이 오는 걸 볼 수 있고, 선택에 따라 fetch나 js 등을 나눠서 볼 수 있습니다.

브라우저가 데이터를 받는 모습 : 개발자 도구

네이버 메인 페이지 요청 방식

거기서 최 하단에 Naver를 눌러보시면, 어떤 방식으로 우리가 서버에 요청을 보내 네이버 페이지를 띄웠는지 볼 수 있습니다.

 

 

HTTP의 구성 요소

get 요청 : 이름 그대로 어떤 정보를 요청할 때 사용한다. 

POST 요청 : 웹 서버에 데이터를 게시할 때 사용하는 게 일반적. 

Header : 추가 데이터 메타 데이터

-브라우저가 어떤 데이터를 원하는지

- 요청받은 페이지를 찾았는지 (성공적으로 찾았는지)

Payload : 설명 (데이터, 실질적 데이터)

- 서버가 응답을 보낼 때에는 항상 payload를 보낼 수 있다.

- 클라이언트(브라우저)가 요청을 할 때에도 Payload를 보낼 수 있다.