[ Node.js 입문주차1 (1-3)] 웹과 HTTP의 동작 방식

웹 브라우저의 통신 방식

 

1) 웹브라우저란?

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

 

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

 

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)은 인터넷(Internet)상의 리소스 위치를 나타내기 위해 사용. ( = 인터넷 상의 주소)

URL은 ‘<프로토콜>://<도메인 명>:<포트>/<경로>’의 구조

예를 들어, ‘http://cafe.naver.com/joonggonara’ 라는 URL을 보면, ‘http’는 프로토콜을, ‘cafe.naver.com’은 ‘naver.com’ 이라는 메인 도메인 명과 ‘cafe’라는 서브 도메인 명으로 이루어져있습니다. 그리고 ‘joonggonara’는 서버에서 리소스 경로를 가리키게 된다. 즉, 중고나라 라는 카페를 가리킴.

 

 

4) DNS로 조회하기

DNS(Domain Name Service)는 도메인 이름을 중개하여, IP로 변경해주는 서비스를 제공. 인터넷상의 연락처와 같다.

 

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

 

인터넷 상의 각각의 리소스들은 고유의 IP 주소를 가지고 있다. 이 IP 주소는 숫자와 점(.)으로 이루어져 있어, 사람이 외우기 어렵고, 무슨 정보를 나타내는지 이해하기 어렵다. DNS는 인터넷의 ‘주소록’ 또는 ‘연락처’와 같은 역할. 우리는 복잡한 숫자로 이루어진 IP 주소를 사용하지 않고도, 원하는 웹 페이지에 접속하여 사용할 수 있게 되는 것입니다.

 

 

5) IP를 이용하여 웹 서버와 통신하기

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

 

출처: https://한국인터넷정보센터.한국

 

인터넷이 처음 세상에 나왔을 때, 네트워크 상의 고유한 정보를 조회하기 위해 32비트(8비트 4그룹, 약 43억 개)의 주소를 사용하는 IPv4체계가 도입.

하지만, 시간이 지나며 인터넷에 연결되는 기기가 늘어나면서 IPv4 주소가 부족해지게 되었다. 원래는 주로 데스크탑만이 인터넷에 연결되었지만, 스마트폰, IoT 기기 등 다양한 모바일 기기들이 등장하면서 IP 주소를 필요로 하는 기기가 크게 늘어남.

Ipv4에서 할당할 수 있는 주소가 초과할 조짐이 보이자, 이런 문제를 해결하기 위해 128비트(16비트 8그룹)를 가진, 약 3.4x10^38개의 주소를 할당할 수 있는 주소체계인 IPv6가 도입되었다. Ipv6는 단순히 주소의 확장만을 위한 것이 아니라, 더 나은 확장성과 보안성을 제공하는 여러 장점을 가지고 있다.

 

---

HTTP의 이해

 

1) HTTP란?

데이터를 주고 받는 양식을 정의한 "통신 규약"중 하나 (통신 규약: Protocol)

* 통신규약 : 컴퓨터끼리 데이터를 주고 받을때 정해둔 약속

* HTTPS는?

HTTP를 기반으로 데이터 통신의 안전성을 높이기 위해 암호화 기능이 포함된 통신 프로토콜로 최근 사용하고 있는 대다수의 사이트는 HTTPS를 지원하고 있다.

기존 HTTP와 달리, HTTPS는 정보를 ‘비밀 코드’처럼 만들어 전송하게 된다.

 

2) 어떻게 HTTP로 데이터를 주고 받을까?

HTTP에서는 언제나 요청(Request)과 응답(Response)이라는 개념이 존재.

 

브라우저는 서버에게 자신이 원하는 페이지(URL 등의 정보)를  요구(Request)한다.

서버는 브라우저가 원하는 페이지가 있는지 확인하고, 있다면 해당 페이지에 대한 데이터를 반환(Response)한다.

없다면 없는 페이지에 대한 데이터를 반환한다. (일반적인 웹 서버 기준)

브라우저는 서버에게 전달 받은 데이터를 기반으로 브라우저에 그려줍니다.

 

3) 브라우저에서 HTTP가 동작하는것을 직접 확인해보자.

웹페이지 어디든 접속 -> 브라우저에서 F12 혹은 ⌘ + ⌥ + i를 누르면 DevTool 혹은 개발자 도구가 뜬다.

[네트워크(Network)] 탭 맨 위의 페이지 데이터 클릭

General

브라우저에서 서버로 보낸 Request 데이터라고 보면 된다.

 

 

 

 

 

 

Request Headers

이것도 브라우저에서 서버로 보낸 Request 데이터라고 보면 된다.

 

 

 

 

 

 

Response Headers

서버가 웹 페이지 데이터와 함께 보낸 추가 데이터.

 

 

[Response 탭] 살펴보기 

 

 

 

서버에서 브라우저로 반환해준 웹 페이지를 그려주기 위한 데이터

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4) 추가 데이터? 데이터? 뭐가 다른걸까?

Headers 탭에서는 추가 데이터라고 많이 말했었고, Response 탭에서는 그냥 데이터라고 말했는데, 뭐가 다른걸까? 

 

Method 설명

GET: 이름 그대로 어떤 리소스를 "얻을 때" 사용됩니다. 그리고 브라우저는 기본적으로 여러분이 웹 서핑을 한다고 가정하므로 모든 요청은 "GET" 메서드를 사용해서 서버에 요청을 보냄. 

POST: 웹 서버에 데이터를 "게시"할 때 사용하는게 일반적. (ex. 회원가입, 게시글 작성, 댓글 작성)

 

Header 설명 (추가 데이터. 메타 데이터)

브라우저가 어떤 페이지를 원하는지

요청 받은 페이지를 찾았는지

성공적으로 찾았는지

이러한 사례 외에도 아주 다양한 의사 표현을 위한 데이터를 모두 Header 필드에 넣고 주고 받음

 

Payload 설명 (데이터. 실질적인 데이터)

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

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

그리고 "GET method를 제외하곤 모두 Payload를 보낼 수 있다" 는게 HTTP에서의 약속.

추가적으로 DELETE method에서 Payload를 보낼수있지만, 보통 많은 경우에 Payload를 보내지않고있다.

 

---

웹 서버의 이해

 

1) 웹 서버란?

웹서버는 HTTP를 이용하여 인터넷 상에서 클라이언트의 요청을 처리하고 응답해주는 컴퓨터 또는 프로그램

웹서버는 클라이언트의 HTTP 요청을 받아 정적인 콘텐츠(ex: HTML, CSS, 이미지 파일 등)를 제공

필요한 경우, 클라이언트의 요청을 웹 어플리케이션 서버(WAS, Web Application Server)로 전달하여 처리할 수 있다.

웹서버의 주요 업무는 복잡한 비즈니스 로직의 수행보다는 요청된 콘텐츠나 데이터를 빠르게 반환하는 것. 이로 인해 빠르게 사용자에게 데이터를 제공해줄 수 있다.

대표적인 웹 서버로는 Apache, Nginx 등이 있다. ( 2023년 기준 글로벌에서 대표적으로 사용되는 Web Server는 Apache가 대표적으로 사용 됨. )

 

2) 웹 어플리케이션 서버란?

웹 어플리케이션 서버(WAS, Web Application Server)는 웹 서버와 협력하여 동적인 컨텐츠를 제공.

주로 데이터베이스를 조회하거나, 복잡한 계산과 같은 비즈니스 로직을 처리.

클라이언트의 요청을 웹 서버로부터 전달받아 처리 -> 결과를 다시 웹 서버에 반환 -> 최종적으로 클라이언트가 응답을 받을 수 있도록 구성

복잡한 데이터를 가공하거나 다양한 비즈니스 로직을 수행하기 때문에 정적인 데이터만 전달하는 웹 서버에 비해 처리 시간이 길어질 수 있다.

웹 어플리케이션 서버는 콘텐츠 생성이나 데이터베이스와의 상호 작용이 필요할 때 주로 사용한다.

 

3) 웹 서버와 브라우저 간의 통신 방식 정리하기

사용자는 브라우저를 통해 HTTP request로 웹사이트를 웹 서버에 요청 ->  웹 서버는 이 요청을 처리한 후 HTTP response를 통해 해당 웹사이트 데이터를 브라우저에 전송한다. 마지막으로 브라우저는 서버에서 받아온 데이터를 이용해 웹사이트를 브라우저에 그려내는 일을 한다.

 

기본적으로 브라우저가 웹 서버에 요청(Request)을 할 때는 주로 GET Method로 요청한다. 그러나 POST, PUT, DELETE 와 같은 다른 HTTP 요청 메서드들도 존재한다. 이들은 서버에 다른 타입의 요청을 보낼 때 사용된다.