[Web] 웹 브라우저의 역할, 정적 문서와 동적 문서, JSON

 

2024.01.28 - [Web] - [Web] 웹 서버와 웹 브라우저의 통신 : HTTP, DNS, 라우터

[Web] 웹 서버와 웹 브라우저의 통신 : HTTP, DNS, 라우터

 

앞서 구글 웹 서버에 접속하는 과정을 살펴 보았고,

이번 글에는 서버와 클라이언트의 통신과정에서 웹 브라우저의 역할과

요청, 응답이라는 용어에 대해 조금 더 상세히 살펴보고자 한다.

 

웹 브라우저는 웹 서버 애플리케이션으로부터 전달받은 

HTML 문서뿐만 아니라 이미지, 동영상 파일 등 다양한 요소를 종합하여

사용자들에게 보여 준다. 

사용자는 모든 리소스가 포함되어 있는 완성된 웹 페이지를 보게 되는 것이다.

 

이렇게 서버로부터 응답받은 HTML 문서를 사용자가 볼 수 있는 형태로

만드는 과정을 렌더링(Rendering)이라고 한다.

 

결과적으로 웹 브라우저가 하는 핵심적인 일은 크게 세 가지로 들 수 있다.

 

1. 사용자가 도메인 네임을 입력하면 DNS를 통해 IP주소로 변환한다.

2. 사용자의 액션에 따라 웹 애플리케이션 서버로 요청을 보낸다.

3. 사용자가 보낸 요청에 대한 응답을 받아 웹 페이지 화면에 렌더링한다.(JSP -> HTML)

 

웹 브라우저는 사실 이외에도 여러 기능을 제공하지만 위 세 가지가 가장 중요하다.

 

'요청'과 '응답'이라는 용어를 자주 쓰고 있는데

웹 통신에서 정확히 각 단어가 의미하는 게 무엇일까? 

 

요청(request)이란, 

구체적으로 웹 브라우저가 웹 서버에게 HTML문서를 달라고 요청하는 것이고

 

응답(response)이란,

HTTP의 요청을 받은 웹 서버가 요청에 해당하는 HTML 문서를 주는 것을 말한다.

 

 

 

주의할 점은, 주고받는 대상이 반드시 HTML 문서만은 아니라는 점이다.

 

유튜브 페이지를 생각해보면 사용자가 접속해서 어떤 검색어로 

영상을 검색했을 때 여러 영상에 대한 썸네일과 정보들, 광고들이 

화면에 함께 등장할 것이다.

 

이런 부분은 정적 문서*인 HTML문서만으로 그릴 수 없고

동영상 파일, 문자열 등 여러 데이터를 주고 받아야 화면에 보여줄 수 있을 것이다. 

정적 문서 (Static Document)

정적 문서는 서버에 미리 저장되어 있고,
사용자가 요청할 때마다 내용이 변경되지 않는 문서를 말한다.
웹 페이지의 내용이나 디자인이 변경되지 않는 한,
정적 문서는 항상 동일한 내용을 제공한다.
(사용자 맞춤x)

예시: HTML 문서, CSS 스타일 시트, 이미지 파일 등

특징:

1. 고정된 컨텐츠: 사용자가 요청할 때마다 내용이 변경되지 않는다.
2. 정적 파일: 서버에 저장된 파일을 직접 제공한다.
3. 빠른 로딩 시간: 변경되지 않으므로 웹 서버는 캐싱을 통해 빠르게 로드할 수 있다.

동적 문서 (Dynamic Document)

동적 문서는 사용자 요청에 따라 내용이 동적으로 생성되는 문서를 말한다.
서버 측에서 코드 실행을 통해 동적으로 생성되므로 사용자마다 다른 내용을 보게 된다.

예시: 동적으로 생성되는 HTML 페이지, 웹 애플리케이션, 동영상 스트리밍 등

특징:

1. 사용자 맞춤형: 사용자의 요청이나 상황에 따라 내용이 변한다.
2. 서버/클라이언트 스크립팅: 서버 측 또는 클라이언트 측에서 스크립트를 실행하여 동적으로 생성된다.
3. 데이터베이스와 연동: 동적 데이터를 처리하고 저장하기 위해 데이터베이스와 상호 작용할 수 있다.

 

이 외에도 JSON* 포맷으로 데이터만 주고받기도 한다.

또한 요청을 처리하는 데 실패했을 경우

에러에 해당하는 응답을 돌려주기도 한다. 

JSON ? 

JSON은 데이터를 표현하기 위한 포맷으로,
주로 데이터 교환을 위해 사용된다.
JSON은 "키-값" 쌍의 집합으로 이루어져 있고,
중괄호 {}로 둘러싸인 형식이다.
각 키는 문자열이고, 이를 따옴표(' ')로 묶어 표현한다.
값은 숫자, 문자열, 불리언 값, 배열, 객체 등이 될 수 있다.

JSON은 데이터를 표현하고 전송하는데 사용되고
이 데이터를 가지고 동적으로 웹 페이지를 생성하거나
업데이트하는 데 사용될 수 있다. 

예를 들어, 서버 측에서 데이터베이스에서 가져온 정보를
JSON 형식으로 클라이언트에게 전송하고,
클라이언트는 이 JSON 데이터를 받아와서
JavaScript를 사용하여 동적으로 웹 페이지의 내용을 업데이트할 수 있다.

따라서 JSON은 동적 데이터를 다루기 위한 도구이지만,
자체적으로 동적 문서로 볼 수는 없다.
동적 문서를 생성하는 데 사용되는 도구나 형식 중 하나로 이해할 수 있다.

 

//JSON 형식의 예

{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "languages": ["English", "Spanish"],
  "address": {
    "city": "New York",
    "zipCode": "10001"
  }
}

 

 

또 다른 중요한 점은,

클라이언트와 서버가 동일한 프로토콜을 사용하여 통신해야 한다는 것이다.

클라이언트가 HTTP로 요청하면 서버 역시 HTTP로 응답한다는 점이다.

주고 받는 과정에서 사용하는 방식이 같아야 통신이 원활할 수 있기 때문이다.