[FE] 웹 렌더링의 과거와 현재, 그리고 미래 ⏱ / 1️⃣ - 과거 <정적웹 에서 동적 웹으로>

들어가며

출처 - https://moyaria.tistory.com/2741

 

'역사를 잊은 민족에게 미래는 없다' 라는 말이 있죠. 과거를 아는 것은 현재를 살 때의 엄청난 메리트입니다! 웹이 어떻게 발전되어 왔는지, 그 맥락을 알고 있는 사람은 새로운 정보를 받아들일 때의 흡입력이 다르다고 생각합니다. 1장에서는 웹 렌더링의 방식을 구체적으로 살펴보기 전에, 웹 서버의 발전을 렌더링 방식에 중점을 두고 정리해볼 생각입니다. 그 내용들을 바탕으로 2장에서 본격적으로 렌더링 방식을 살펴보자구요. 

 

그럼 시작합니다! 😎

 

1세대 웹 - 단일 HTML 구조

 

출처 https://ko.wikipedia.org/wiki/%EC%A0%95%EC%A0%81_%EC%9B%B9_%ED%8E%98%EC%9D%B4%EC%A7%80

 

1세대 웹 서버는 단순히 정적 파일 (html)을 전달하는 역할에 불과했습니다. 웹 서버는 도메인에 맞는 html 파일을 저장하고 있다가 http로 단순히 해당 파일만을 전달해줍니다. 전달되는 페이지들은 html 로만 구성되어 있었기에 웹이라는 것은 단순히 정보 전달을 위한 수단이었고 하나의 정보 백과사전, 정보들을 전시하는 전시관 같은 느낌? 으로 쓰였다고 합니다. 이런 웹 사이트를 static sites 혹은 static web page, flat page 등등으로 부르죠. (요즘 쓰이는 static 보다 더 strict한 static의 의미를 담고 있습니다)

 

이때 HTTP는 오로지 문서를 가져오는 용도로만 쓰였기 때문에 GET 메서드만 있었다.

 

이 때의 웹은 하이퍼링크를 통해 다른 문서에 접근하는 기능 까지만 지원을 했고, 이미지를 보여주는 경우는 없었다고 하네요. 또한 사용자가 서버와 인터렉팅하는 방식은 존재하지 않았기 때문에 HTTP는 GET 방식만 사용했다고 합니다. 🧐

 

 

 

이미지 렌더링 가능해짐

 

초창기의 웹 페이지들은 오로지 텍스트만을 담고 있었습니다.

 

출처 - https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML

 

인터넷이 보급되면서 여러 브라우저들이 새롭게 등장하는 시기쯤에, 기존에 텍스트만을 제공하던 페이지의 한계를 넘어 이미지를 전달할 수 있는 Mosaic 등의 브라우저가 등장했다고 하네요. (사실 저는 이때 태어나지도 않았슴다,, 아버지 몸속에 있을 시절)

 

이번 포스팅은 렌더링 방식이 중점이니까 브라우저 관련 내용은 여기까지만 알아보고 넘어갑시다 (귀찮아서 그런거 전혀 아님, 암튼 아님.)

 

 

자바스크립트의 등장 - 동적 웹의 시작

 

현재 전세계 컴퓨터 언어 사용률 1위를 자랑하는 자바스크립트가 이 시기에 등장하게 됩니다. 이 형님도 저보다 나이가 많네요... 아직까지도 현역으로 활동하시는 대단하신 분입니다.

 

출처 - https://velog.io/@gud_wns/%EC%9B%B9-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9D%98-%EC%97%AD%EC%82%AC%EC%99%80-%EB%B0%9C%EC%A0%84

 

 

JS 등장과 동시에 이제 동적 웹의 시대가 시작됩니다. 웹 브라우저가 JS 엔진을 탑재하면서 이제 웹 페이지도 팝업창을 띄운다던지, 상태바에 메세지를 넣는 등의 동적인 효과를 줄 수 있게됩니다! 하지만 그 당시에는 js가 지금처럼 발전하지도 않았었고, 컴퓨터의 사양 문제라던가 여러 한계점들이 있었죠. 따라서 하나의 웹 사이트 내에서도 다른 페이지로 이동하려면 반드시 페이지 깜빡임을 경험해야 했습니다.  예를 들어 댓글을 달고 댓글 추가 버튼을 누른다고 해도, 단순히 댓글 부분만 달리는게 아니라 전체 게시글까지 다시 refresh가 되어야 하는 상황이라는 뜻이죠. 그냥 지금으로 치면 단순히 AWS S3 에 정적 html 파일 올려놓고 그 파일 랜딩하는 url 방식과 같은 형태다. 요렇게 생각하면 될 것 같아요.

 

저도 이 당시에는 컴퓨터라고는 그저 플래시게임을 하기 위한 기계 였던 꼬맹이에 불과했어서 구체적인 경험은 없는데요, 인터넷 돌아다닌다고 하면 클릭 한번하고 페이지 로드될 때 까지 멍때리던 기억이 있네요, 사양 낮은 컴퓨터들은 눌러놓고 화장실을 다녀와도 로드가 안되었던... 그 당시에는 어떻게 그 답답함을 버텼는지 모르겠어요 ......ㅎ

 

iframe

출처 : MDN

그리고 이 시기에 iframe이라는 태그가 등장하게 되는데요, 이 태그를 이용해서 현재 렌더링된 페이지에서 다른 도메인의 페이지를 현재 페이지의 일부처럼 렌더링하고 사용할 수 있습니다. 현재는 HTML5 표준에서 이런 기능을 기본적으로 지원하고 있고, XSS에 취약하는 등 보안적인 문제 때문에 많이 사용되고 있지는 않은 추세입니다.

 

자세한 내용은 아래 참고!

 

https://yeoulcoding.me/143

[HTML] iframe 태그란?

 

 

AJAX의 등장 - 비동기를 곁들인

 

정적 웹들 다 AJAX내버리는 AJAX 의 등장입니다. (죄송합니다)

 

AJAX를 모르신다면? 아래 링크에서 AJAX에 대한 자세한 내용을 이해허고 오셔요.

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started 

Ajax 시작하기 - 웹 개발자 안내서 | MDN

 

출처 - https://web.archive.org/web/20061107032631/http://www.adaptivepath.com/publications/essays/archives/000385.php

 

개발자들은 AJAX 를 이용해서 비동기적으로 데이터를 가져오고, 보내는 기능을 집어넣게 됩니다. 이제는 페이지가 로드 됐을 때 렌더링이 전부 끝나버리는 것이 아니라, 사용자의 인터랙션에 따라 부분적으로 웹이 다시 렌더링되는 등의 동적인 상호작용이 시작한 것이죠!

 

또한 이러한 전송방식 덕분에 불필요한 데이터 전송 낭비를 줄일 수 있게 되었고, 페이지 전체를 리로딩하면서 생기는 시간적 낭비까지 줄이게 되었습니다. 동시에 서버는 클라이언트의 요청에 따라 더 다양한 형태의 데이터를 제공해주어야 하게 되었고, 데이터를 제공해주는 웹 서버의 역할이 더더욱 중요해지게 되었습니다. 

 

 

마치며

1장에서는 웹 서버의 발전과 역사에 대해서 간단하게 알아봤습니다.

2장에서는 이런 사실을 바탕으로 구체적인 렌더링 방식은 어떻게 발전해왔는지에 대해서 얘기해 보겠습니다!

 

모두 메리 크리스마스 ~~~~~ 🎅🎄🎁

 

 

 

 

출처 

 

- https://www.howdy-mj.me/general/history-of-web

- https://velog.io/@gud_wns/%EC%9B%B9-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9D%98-%EC%97%AD%EC%82%AC%EC%99%80-%EB%B0%9C%EC%A0%84

- https://web.archive.org/web/20061107032631/http://www.adaptivepath.com/publications/essays/archives/000385.php