🖥️ 웹 브라우저란?
- HTML 문서와 이미지 파일 등 WWW에 기반하여 인터넷 컨텐츠를 검색하고 열람하기 위한 응용 프로그램을 통칭하는 것
- 예: Chorme, MS Edge, FireFox, Safari, Naver Whale
🖼️ 렌더링이란?
- 서버로부터 요청해서 받은 데이터를 브라우저 화면에 표시해주는 것
- 브라우저가 서버로부터 요청해서 받은 HTML, CSS, JS 파일을 브라우저에 표시하는 작업
- 표시해주는 화면을 어디서, 어떻게 그리냐에 따라 SSR과 CSR로 구분된다.
- 예를 들어 위의 이미지처럼 크롬에서 네이버 메인 페이지에 접속했을 때, 브라우저는
www.naver.com에 대한 정보를 받아와 네이버 페이지를 렌더링한다.
- 개발자도구의 네트워크 탭에서 브라우저가 렌더링을 위해 받아오는 파일들을 확인할 수 있다.
🧐 웹 브라우저의 렌더링 과정은 어떻게 발전해왔을까?
✏️ 정적인 웹사이트(Static Sites)
단일 HTML 구조
- 1세대 웹 서버는 단순히 HTML(정적 파일)을 전달하는 역할을 했다.
- 웹 서버는 도메인에 따라 해당 HTML 파일을 저장하고 있다가 HTTP를 통해 파일을 전송하였다.
- 이렇게 전송된 파일들은 HTML로 구성된, 단순 정보 전달 수단이었다.
- 이때의 HTTP는 오직 문서를 가져오는 용도로만 쓰였으므로 GET 메서드만 존재했다.
- 하이퍼링크를 통해 다른 문서에 접근하는 기능까지만 지원했다.
- 이미지를 보여주지 않았다!
- 사용자와 서버가 상호작용하는 방식이 존재하지 않아 GET만 사용하였다.
이미지 렌더링의 시작
- 인터넷의 보급과 여러 브라우저들의 등장 속에서, Mosaic(1993) 등의 브라우저가 등장하였다.
- Mosaic: WWW 브라우저가 텍스트 위주였던 것과 달리, 이미지를 표시할 수 있었던 최초의 그래픽 웹 브라우저
- 이를 통해 텍스트만을 지원하던 기존 페이지들의 한계를 넘어 이미지의 전달이 가능해졌다.
🖍️ 동적 웹의 시작
- 인터넷의 사용자가 증가함에 따라, 상황, 시간, 요청 등에 따라 달라지는 웹 페이지에 대한 필요성이 커졌다.
- 이에 대한 해결책으로 동적 웹 페이지가 등장하였다.
- 서버는 사용자의 요청에 따라 데이터를 가공한 후 생성된 웹 페이지를 보내므로 사용자가 받아보는 웹 페이지가 동적으로 변할 수 있게 되었다.
최초의 렌더링, SSR
- 이때는 서버에 여러 개의 HTML 문서를 저장해두고 사용자가 웹 페이지에 접속할 때마다 서버로부터 문서를 불러왔다.
- 정적인 웹 사이트를 구성할 경우 한 페이지당 하나의 HTML문서를 서버로부터 불러오므로 페이지 내에서 다른 링크 클릭 시 다시 서버 문서를 받아와야 했고, 속도가 느렸다.
Server-Side-Template-Engine
- 템플릿 엔진
- 지정된 템플릿 양식과 데이터를 합쳐 HTML 문서를 출력하는 소프트웨어
- View(HTML) 코드와 Data Logic(DB) 코드를 분리해주는 기능을 한다.
- 동적인 페이지 렌더링에 대한 요청이 증가함에 따라 PHP, JSP와 같은 서버 사이트 템플릿 엔진이 등장하여 HTML 파일이 더 동적으로 렌더링될 수 있게 하였다.
- 동작 과정
- 클라이언트의 요청을 받아 필요한 데이터를 DB나 API로부터 가져온다.
- 미리 정의된 Template에 해당 데이터를 배치한다.
- 서버에서 데이터가 반영된 HTML을 그린다.
- 해당 HTML을 클라이언트에게 전달한다.
- 동적으로 화면을 그리긴 하지만, 여전히 페이지 이동을 하거나 데이터를 새로 받을 때마다 전체 화면을 새로 그려야한다는 문제점이 있었다.
- 중복되는 HTML 코드를 다시 전송 받게 되어 많은 대역폭을 낭비하게 되고, 사용자와 서비스 간 상호작용을 어렵게 만들었다.
iframe
- 전체 페이지 HTML 문서가 아닌 부분적인 문서만 받아올 수 있게 하는 HTML 태그
- 현재 렌더링 된 페이지에서 다른 도메인의 페이지를 현재 페이지의 일부처럼 사용할 수 있게 했다.
- HTML에서 기본적으로 지원하고 있는 기능이다.
- 하지만 XSS 공격에 취약하여 보안 위험을 유발했고, 사용성이나 웹 크롤링에서도 문제를 일으켰다.
🖌️ Ajax의 탄생과 CSR
- XMLHttpRequest(fetch API)가 등장하여 원하는 부분 데이터를 JSON 형식으로 받아올 수 있게 되었다.
- 그리고 Ajax(2005)의 등장으로, API를 통해 받아온 JSON 데이터를 JS에 적용하여 페이지를 업데이트 시키는 것이 가능해졌다.
- Ajax는 필요한 데이터만을 웹서버에 요청해 받은 뒤, 클라이언트에서 데이터에 대한 처리를 할 수 있게 해준다.
- 웹 서버에서 전적으로 담당하던 데이터 처리의 일부를 클라이언트에서 맡게 되어 웹 서버의 데이터 처치량이 줄어들기 때문에 애플리케이션의 응답성이 좋아졌다.
- 이를 통해 URL이 변경되더라도 HTML 파일을 새로 받아오는 것이 아니라, 서버로부터 동적으로 구성된 페이지를 한 번만 받아오고, 이후에는 필요한 부분만 받아서 계속 업데이트 시킬 수 있게 되었다.
- 비동기적으로 데이터를 가져오고, 전송할 수 있다.
- 따라서 페이지가 로드되었을 때 렌더링을 전부 끝내는 것이 아니라 사용자의 행동에 따라 부분적으로 웹이 다시 렌더링되는 동적인 상호작용이 가능해진다.
- 사용자들은 다른 링크를 타고 가지 않아도 계속 다른 화면을 볼 수 있게 된 것이다.
- 따라서 불필요한 데이터 전송 낭비를 줄이고, 페이지 전체를 리로딩하지 않게 되어 시간적 낭비도 줄어들었다.
- gmail, google maps 등이 이를 기반으로 만들어졌다.
🔎 References
참고 자료 모음
An investment in knowledge pays the best interest🙃