렌더링(Rendering)과 Ajax(Asynchronous Javascript And XML)

렌더링(Rendering)

렌더링이란 HTML, CSS, 자바스크립트로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것을 말한다.

때로는 서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정(SSR; Server Side Rendering)을 가리키기도 한다.

 

브라우저가 HTML, CSS, 자바스크립트를 로드하고 파싱해서 렌더링하는 과정이라고 생각하면 된다.

 

Ajax (Asynchronous Javascript And XML)

자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능.

 

- Ajax기술 이전의 웹페이지 동작 방식

html 태그로 시작해서 html 태그로 끝나는 완전한 HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작

=>문제점:

1. 화면이 전환되면 서버로부터 새로운 html을전송받아 웹페이지 전체를 처음부터 다시 렌더링한다. (화면이 전환되면 순간적으로 화면 깜빡거림, 서버로부터 다시 전송받기 때문에 불필요한 데이터 통신이 발생함.)

 

- Ajax기술 적용의 웹페이지 동작 방식

=> 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이 가능해짐.

 

ex) 구글맵스 

 

 

 

 

---

 

 

 

jQuery:

2006년, jQuery의 등장으로 논란이 있었던 DOM(document object Model)을 쉽게 제어할 수 있게 되었고 크로스 브라우징 이슈도 어느 정도 해결되었음.

배우기 어려운 자바스크립트보다 배우기 쉽고 직관적인 jQuery를 더 선호하는 개발자가 많아졌음.

 

V8 자바스크립트 엔진:

구글 맵스를 통해 웹 애플리케이션 프로그래밍 언어로서의 가능성이 확인되어 자바스크립트로 웹 애플리케이션을 구축하려는 시도가 늘면서 더욱 빠르게 동작하는 자바스크립트 엔진의 필요성이 높아졌다.

2008년 등장한 구글의 V8 자바스크립트엔진은 이러한 요구에 부합하는 빠른 성능을 보여주었음.

(ux을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하는 계기)

 

Node.js:

2009년 라이언 달이 발표한 Node.js는 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경임

==Node.js는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경.

 

 

SPA 프레임워크:

모던 웹 애플리케이션은 데스크톱 애플리케이션과 비교해도 손색없는 성능과 ux를 제공하는 것이 필수가 되있고, 개발 규모와 복잡도도 상승함.

이전의 개발 방식으로는 복잡해진 개발 과정을 수행하기 어려워졌고 많은 패턴과 라이브러리가 나왔지만 변경에 유연하면서 확장하기 쉬운 애플리케이션 아키텍처의 구축을 어렵게 했고, 필연적으로 프레임워크가 등장함.

SPA(single page aplication) : CBD(component based development)방법론을 기반으로 하는 spa가 대중화되면서 angular, React, Vue.js, Svelte 등 다양한 SPA 프레임워크/라이브러리 또한 많은 사용층을 확보하고 있다.