웹과 HTTP의 동작 방식

01. 웹 브라우저의 통신 방식

• 1) 웹 브라우저란? 📌 **웹 브라우저(Web Browser)**는 인터넷 브라우저(Internet Browser)라고도 불리며, 웹 서버로부터 정보를 요청하고 받아 사용자에게 보여주는 소프트웨어입니다.

웹 브라우저(Web Browser)는 인터넷 상의 다양한 정보를 조회하고 접근할 수 있습니다. 우리가 일반적으로 사이트에 접속하였을때, HTML, CSS, JavaScript 파일을 전달받아 이를 해석하고 우리의 눈으로 볼 수 있게 되는 것입니다.

이 과정에서 웹 브라우저는 정적인(Static)파일과 동적인(Dynamic)정보를 처리하게됩니다. 여기서, 정적 웹 페이지는 서버에서 브라우저로 전송되는 그대로 표시되지만, 동적 웹 페이지는 서버로부터 데이터를 받아 브라우저가 실시간으로 내용을 생성 또는 변경되는 것이죠. 🙂

우리는 여러 가지의 웹 브라우저를 사용한 적이 있을 것입니다. Windows XP 시절 컴퓨터를 사용하셨다면, 가장 친숙한 Internet Explorer부터, 최근 가장 많이 사용되는 Google Chrome, Firefox, Safari와 같은 것들을 웹 브라우저라 부르게됩니다.

• 2) 브라우저의 통신 방식 📒 브라우저의 통신 방식은 대표적으로 아래와 같습니다. 1️⃣ **사용자가 웹 브라우저의 주소창에 URL을 입력합니다. 2️⃣ 웹 브라우저는 입력받은 URL을 DNS 서버로 전달하여 해당 IP 주소를 찾게됩니다. 3️⃣ DNS 서버는 도메인 이름을 IP 주소로 변환합니다. 4️⃣ 웹 브라우저는 해당 IP 주소로 HTTP 요청을 전달합니다. 5️⃣ IP 주소에 연결된 웹 서버는 요청(Request)을 받아 처리합니다. 6️⃣ 웹 서버는 처리 결과를 HTTP Response로 브라우저에게 전달합니다. 7️⃣ 웹 브라우저는 받은 HTTP Response을 바탕으로 사용자에게 표시하게됩니다.**
• 3) 웹 브라우저의 주소창에 URL 입력하기

  ![**URL(Uniform Resource Locator)**](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d5bbaedb-75de-4441-886f-7e1d0d1ba4ae/URL.png)
  
  **URL(Uniform Resource Locator)**
  
  <aside>
  📌 **URL(Uniform Resource Locator)**은 **인터넷(Internet)**상의 리소스 위치를 나타내기 위해 사용합니다. 인터넷 상의 **주소**라고 생각하시면 편해요!
  
  </aside>
  
  웹 브라우저는 주소창에서 원하는 인터넷 리소스를 조회하기 위해 **URL(Uniform Resource Locator)**을 입력합니다. 여기서, URL은 ‘`<프로토콜>://<도메인 명>:<포트>/<경로>`’의 구조를 가지며, 이는 웹서버의 특정한 리소스의 위치를 가리키게 됩니다.
  
  예를 들어, ‘`http://cafe.naver.com/joonggonara`’ 라는 URL을 보면, ‘`http`’는 프로토콜을, ‘`cafe.naver.com`’은 ‘`naver.com`’ 이라는 **메인 도메인 명**과 ‘`cafe`’라는 **서브 도메인 명**으로 이루어져있습니다. 그리고 ‘`joonggonara`’는 서버에서 **리소스 경로**를 가리키게 됩니다. 즉, **중고나라** 라는 카페를 가리키게 되는것이죠.
  
  이렇게 URL을 통해 웹 브라우저는 웹 서버의 특정 리소스에 대한 위치를 파악하고 요청을 전달하게 됩니다.
  
  따라서, 우리가 웹 브라우저에 ‘`cafe.naver.com`’이라고 입력하면, 브라우저는 ‘`cafe.naver.com`’ 서버의 메인 페이지를 요청하게 되고, 해당 서버가 보내는 데이터를 받아 웹 브라우저에 보여줌으로써 우리가 웹 페이지를 조회할 수 있게 되는 것입니다.

  4) DNS로 조회하기
  만약 우리가 Naver 플랫폼의 블로그 정보를 조회하고 싶은 상황이 발생했다고 가정해보겠습니다. 그렇다면, ‘blog.naver.com’ 주소를 입력하여 해당하는 정보를 조회하게 됩니다. 여기서, ‘blog.naver.com’ 주소와 같이 영어, 숫자, 특수문자로 이루어진 URL을 입력하게되는데, 해당하는 URL을 IP로 변환해주는 역할을 하는 서비스를 DNS(Domain Name Service)라고 부르게됩니다.

사실, 인터넷 상의 각각의 리소스들은 고유의 IP 주소를 가지고 있습니다. 이 IP 주소는 숫자와 점(.)으로 이루어져 있어, 사람이 외우기 어렵고, 무슨 정보를 나타내는지 이해하기 어려울 것입니다.
→ 매번 “8.8.8.8 IP는 Google이다.” 와 같이 모든 사용자가 별도로 메모를 해야 인지할 수 있을 것입니다. 🥲

이 때 DNS를 이용하게된다면, 사용자가 IP를 사용하지 않고도 더욱 편리하게 해당하는 인터넷의 리소스에 접근할 수 있게 되는 것이죠.😉
→ 이제는 구글 리소스를 사용하고 싶다면 8.8.8.8이 아닌, google.com만 입력하면 됩니다! 🔥

결론적으로는 DNS는 인터넷의 ‘주소록’ 또는 ‘연락처’와 같은 역할을 하게됩니다. DNS는 사용자가 ‘blog.naver.com’과 같은 도메인 이름을 입력하면 DNS가 이를 해당하는 IP 주소로 변환해주는 역할을 수행합니다. 그로인해, 우리는 복잡한 숫자로 이루어진 IP 주소를 사용하지 않고도, 원하는 웹 페이지에 접속하여 사용할 수 있게 되는 것입니다.
5) IP를 이용하여 웹 서버와 통신하기

📌 **IP(Internet Protocol)**는 각각의 네트워크에 연결된 장치들이 고유한 IP 주소를 가져 인터넷 상에 존재하는 해당하는 장치의 위치를 식별할 수 있게 해줍니다.

IP는 일반적으로 IPv4, IPv6와 같이 2가지의 방법을 사용하는데 현재 까지는 IPv4가 많이 사용되고 있습니다

• ❓ IPv4와 IPv6는 어떤 차이점이 있나요? 출처: https://한국인터넷정보센터.한국 인터넷이 처음 세상에 나왔을 때, 네트워크 상의 고유한 정보를 조회하기 위해 32비트(8비트 4그룹, 약 43억 개)의 주소를 사용하는 IPv4체계가 도입되었습니다. 하지만, 시간이 지나며 인터넷에 연결되는 기기가 늘어나면서 IPv4 주소가 부족해지게 되었습니다. 원래는 주로 데스크탑만이 인터넷에 연결되었지만, 스마트폰, IoT 기기 등 다양한 모바일 기기들이 등장하면서 IP 주소를 필요로 하는 기기가 크게 늘게 된 것입니다. Ipv4에서 할당할 수 있는 주소가 초과할 조짐이 보이자, 이런 문제를 해결하기 위해 128비트(16비트 8그룹)를 가진, 약 3.4x10^38개의 주소를 할당할 수 있는 주소체계인 IPv6가 도입되었습니다. Ipv6는 단순히 주소의 확장만을 위한 것이 아니라, 더 나은 확장성과 보안성을 제공하는 여러 장점을 가지고 있답니다. 🙂
  

DNS를 이용하여 우리는 IP(Internet Protocol)를 얻게 되었습니다. 이제 얻은 IP를 바탕으로 인터넷 상의 리소스를 사용하거나, 조회하기 위한 통신 작업을 진행할 것입니다.

💪 다음 섹션 부터 IP주소를 사용하여 특정 웹 서버와 통신을 시작하게 됩니다. 이 통신 과정에서 가장 흔히 사용되는 프로토콜인 HTTP(Hypertext Transfer Procol)를 알아보도록 하겠습니다!

2. HTTP의 이해

• 1) HTTP란?
  - 데이터를 주고 받는 양식을 정의한 "통신 규약"중 하나가 HTTP입니다!
  (통신 규약: Protocol)
  - 매우 범용적인 양식을 가지고 있어 전 세계에서 제일 널리 쓰이는 통신 규약입니다.
  - 여기서 말하는 통신 규약이란, 컴퓨터끼리 데이터를 주고 받을때 정해둔 약속을 의미합니다.
  - 비유를 해볼까요?
  - 제가 여러분에게 한국어로 말을 걸면 여러분이 제 말을 한국어로 이해하듯이, 갑자기 제가 독일어나 불어로 말한다면 알아듣지 못하겠죠?
  - 혹은 제가 같은 한국말로 말하더라도 여러분이 잘 알고 있던 표준어가 아닌, 우리가 모르는 아주 아주 작은 어느 지방에서만 사용하는 이해하기 난해한 사투리를 사용한다면요?
  - 이렇듯이 여러분은 앞으로 수업을 진행하면서 HTTP라는 통신 규약을 이용하여
  서버나 클라이언트(브라우저)끼리 의사 소통을 할 수 있게 됩니다!
  - 현대에 존재하는 대부분의 웹 서버가 HTTP를 기반으로 데이터를 주고 받습니다.
  또한 모든 브라우저는 HTTP 프로토콜을 기본으로 지원하기 때문에 여러분은 매일 HTTP를 이용하는 셈이 됩니다
  2) 어떻게 HTTP로 데이터를 주고 받을까?
• HTTP에서는 언제나 요청(Request)과 응답(Response)이라는 개념이 존재합니다.
• 서버와 브라우저의 관계로 가볍게 말해보면 아래와 같이 동작합니다.
  1. 브라우저는 서버에게 자신이 원하는 페이지(URL 등의 정보)를 요구(Request)합니다.
  2. 서버는 브라우저가 원하는 페이지가 있는지 확인하고, 있다면 해당 페이지에 대한 데이터를 반환(Response)해줍니다. 없다면 없는 페이지에 대한 데이터를 반환합니다.
     (일반적인 웹 서버 기준)
  3. 브라우저는 서버에게 전달 받은 데이터를 기반으로 브라우저에 그려줍니다.
• 그리고 위와 같은 사례에서 "데이터"는 어떠한 데이터든 주고 받는게 가능합니다.

3. 웹 서버의 이해
   1) 웹 서버란?

• 웹서버는 HTTP를 이용하여 인터넷 상에서 클라이언트의 요청을 처리하고 응답해주는 컴퓨터 또는 프로그램이라고 생각하시면 됩니다.
• 웹서버는 클라이언트의 HTTP 요청을 받아 정적인 콘텐츠(ex: HTML, CSS, 이미지 파일 등)를 제공합니다.
• 필요한 경우, 클라이언트의 요청을 웹 어플리케이션 서버(WAS, Web Application Server)로 전달하여 처리할 수 있습니다.
• 웹서버의 주요 업무는 복잡한 비즈니스 로직의 수행보다는 요청된 콘텐츠나 데이터를 빠르게 반환하는 것 입니다. 이로 인해 빠르게 사용자에게 데이터를 제공해줄 수 있게 됩니다.
• 대표적인 웹 서버로는 Apache, Nginx 등이 존재합니다.
  2) 웹 어플리케이션 서버란?
• 웹 어플리케이션 서버(WAS, Web Application Server)는 웹 서버와 협력하여 동적인 컨텐츠를 제공합니다.
  • 주로 데이터베이스를 조회하거나, 복잡한 계산과 같은 비즈니스 로직을 처리한답니다. 🙂
• 클라이언트의 요청을 웹 서버로부터 전달받아 처리하고, 결과를 다시 웹 서버에 반환하여, 최종적으로 클라이언트가 응답을 받을 수 있도록 구성됩니다.
• 복잡한 데이터를 가공하거나 다양한 비즈니스 로직을 수행하기 때문에 정적인 데이터만 전달하는 웹 서버에 비해 처리 시간이 길어질 수 있습니다.
• 웹 어플리케이션 서버는 콘텐츠 생성이나 데이터베이스와의 상호 작용이 필요할 때 주로 사용한답니다.
  3) 웹 서버와 브라우저 간의 통신 방식 정리하기
• 사용자는 브라우저를 통해 HTTP request로 웹사이트를 웹 서버에 요청합니다. 웹 서버는 이 요청을 처리한 후 HTTP response를 통해 해당 웹사이트 데이터를 브라우저에 전송합니다. 마지막으로 브라우저는 서버에서 받아온 데이터를 이용해 웹사이트를 브라우저에 그려내는 일을 합니다.
• 기본적으로 브라우저가 웹 서버에 요청(Request)을 할 때는 주로 **GET Method로 요청하게 됩니다. 그러나 `POST, PUT, DELETE` 와 같은 다른 HTTP 요청 메서드들도 존재하며, 이들은 서버에 다른 타입의 요청을 보낼 때 사용됩니다.
  → HTTP Method**에 대한 내용은 다음 챕터에서 상세하게 확인해보도록 할게요!