[Network] 정적웹과 동적웹의 정확한 정의를 고민해보자 (Feat. AWS & GitHub Pages)

* 필자의 지극히 개인적인 생각입니다.

 

GitHub 의 Pages 와 AWS 의 S3 에서 정적웹호스팅이라는 단어를 쓴다.

 

하지만 정적웹과 동적웹에 대해 구글링을 하면, 뭔가 Git과 AWS의 용어선택이 이상하다는 생각이 든다.

 

왜냐하면, React 또한 [정적웹호스팅]이라는 단어로 Git과 AWS에서 호스팅하기 때문이다.

 

이 글은 Git 과 AWS에서 일하시는 분들은 똑똑할꺼니까 그분들이 맞다고 가정하고

기존의 정적웹과 동적웹의 정의를 다시 정의 한 포스팅이다.

 

# 세간에 알려진 정의

(from. 위키백과 + 다른 블로그 포스팅들) 

 

## 정적웹 

1. 웹서버에 이미 저장된 html 문서를 클라이언트에게 전송하는 웹 페이지

2. 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게 됨

3. 모든 사용자는 같은 결과의 웹 페이지를 서버에 요청하고 응답받음

4. HTML/CSS/JS 가 포함됨

 

## 동적웹

1. 요청 정보를 처리한 후에 제작된 html 문서를 클라이언트에게 전송하는 웹 페이지

2. 사용자는 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게 됨

3. 같은 페이지라도 사용자마자 다른 결과의 웹 페이지를 서버에 요청하고 받을 수 있음

 

 

React 가 [정적 웹 호스팅] 으로 호스팅이 되는데 뭔가 이상해(?)보이는 정의들이 많다.

React 는 그리고 동적으로 DOM 의 구성요소들을 만들어 처리 하는 SPA가 아닌가?

근데 왜 [정적 웹 호스팅] 이라는 단어를 Git 과 AWS에서는 차용하고 있는 것인가?

 

필자의 생각엔, 널리퍼진 정의들이 기술의 시작점에 정의 된 정의라 아직 시대를 못 따라가고 있는 것 같다.

그리고 정의는 분명하나 였는데, 이해를 돕기 위해 부가적인 설명을 하다보니 여러 정의가 생긴 것 같다.

 

심지어 위키백과에 [동적 웹페이지]로 검색을 하면,

[서버사이드 동적 웹페이지] 와 [클라이언트사이드 동적 웹페이지]로 정의가 또 분기 되어있다.  

 

 

아래는 필자의 지극히 개인적인 정의이다.

 

## 정적웹

서버에 요청마다 웹서버에 저장된 동일한 리소스(JS/HTML/CSS)가 그대로 클라이언트에 전달되는 웹 페이지

 

Git/AWS는 리소스를 기준으로 정의를 내리고 있는 것 같다.

* 이 때의 리소스는 JS/HTML/CSS 를 말한다.

 

React 로 작성된 JS 와 HTML/CSS 파일은 S3버킷이나 Git에 저장되어 작성된 코드가 변경되지 않는 상태이다.

물론 React 에서 서버와 통신을 하지만, 작성된 JavaScript가 실행만 될뿐 React 리소스 자체가 변경되는 것이 아니다.

SinglePage 로 구성된 React 는 처음 웹페이지를 로드할 때 웹서버에 저장된 리소스를 모두 로드하고,

서버에 요청(통신)할 때 Response로 리소스(JS/HTML/CSS)를 받아 렌더링하지 않는다.

JSON 과 같은 형식을 Response로 받아 작성된 JS에 따라 html이 동적으로 작성될 뿐.

 

 

 

## 동적웹

서버에 요청마다 다른 리소스(JS/HTML/CSS)가 클라이언트에 전달 되는 웹 페이지  

 

서버에 요청할 때 Response Body에 JSON 같은 형식이 아닌, 리소스(JS/HTML/CSS)가 내려온다.