초창기 미약한 자바스크립트
초창기의 자바스크립트는 웹페이지의 보조적인 기능을 수행하는 한정적인 용도의 언어였다. 이 때는 실제 로직들은 대부분이 웹 서버에서 실행되었기 때문에, 브라우저는 서버로부터 전달받은 HTML과 CSS를 렌더링하는 정도에 불과했다.
즉, 완전한 HTML 코드를 서버로부터 전송받아서 웹페이지를 전부 렌더링하는 것이 브라우저의 동작방식이었고, 이 때문에 화면이 전환되거나 표출되어야하는 데이터가 바뀔 때마다 서버에 요청하여 전체 페이지를 다시 렌더링해야했다.
이 방식에서의 가장 큰 문제는 변경이 필요없는 부분까지 모두 서버로부터 HTML 코드 전체를 전송받아야 하기 때문에, 불필요한 데이터 통신이 발생한다는 점이다. 그래서 변경할 필요도 없는 부분을 렌더링하면서 성능이 악화되는 문제가 존재했다. 결국 화면이 전환될때마다 순간적으로 깜빡이는 현상이 발생하게 되며, 이것은 웹 페이지의 한계로 여겨졌다.
Ajax
하지만 1999년 Ajax의 등장으로 기존의 많은 문제들이 해결되었다. 위에서 언급한 문제를 비동기(Asyncronous)방식으로 해결했다. 비동기 방식으로 서버와 브라우저가 데이터를 교환할 수 있는 기능으로 Ajax(Asynchronous Javascript and XML)가 XMLHttpRequest(XHR)라는 이름으로 등장한 것이다.
Ajax는 서버와 통신하기 위해 XMLHttpRequest 객체를 사용한다. 이를 통해 JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다.
Ajax의 주요 특징은 1) 페이지 새로고침 없이 서버에 요청을 보낼 수 있음 2) 서버로부터 데이터를 받고 작업을 수행 한다는 것이다.
이제 더이상 웹페이지의 변경이 필요없는 부분들은 다시 렌더링 하지 않고, 서버로부터 필요한 데이터만 전송받아서 변경사항만 반영하여 부분적 렌더링 방식을 구현할 수 있게 되었다. 이로써 웹 브라우저의 성능이 개선되었고, 부드러운 화면 전환이 가능해졌다.
물론 Ajax는 클라이언트가 서버에 데이터를 요청하는 client pooling 방식을 사용하기 때문에, server push 방식의 실시간 서비스를 만들 수 없다는 단점이 있다. 또 페이지 전환 없이 통신하기 때문에, 서버의 보안에 더욱 유념해야한다. 또 다른 도메인과의 통신이 불가능하기 때문에 Cross-Domain 문제가 발생한다.
Cross-Domain에 대해서는 이하 포스트에서 다루었다.
[Javascript Deep Dive] Cross Domain Problem (ft. SOP, JSONP, CORS)
jQuery
2006년, jQuery의 등장을 통해 이제 웹사이트에 자바스크립트를 더욱 쉽게 활용할 수 있게 되었다. 정확히는 DOM(Document Object Model)을 더 쉽게 제어할 수 있게 되었고, 크로스 브라우징 이슈도 일부 해소 되었다.
DOM (Document Object Model)
DOM은 웹 페이지에 대한 인터페이스이다. 페이지의 contents 와 구조, 그리고 스타일 등을 읽고 조작할 수 있도록 API를 제공한다. DOM은 노드 트리로 표현되며, 이후 CSSOM(Cascading Style Sheets Object Model)과 함께 Render tree를 생성한다.
jQuery는 웹 페이지 상에서 Element를 쉽게 찾고 조작할 수 있도록 설계되었고, 거의 모든 웹 브라우저에서 호환될 수 있도록 만들어져 호환성 측면에서도 강점을 가지고 있다.
이 때문에, 대형 라이브러리에도 jQuery가 포함되면서 웹 프론트엔드 분야에서의 점유율이 매우 높아졌다.
하지만 React와 같은 Virtual DOM을 사용하는 라이브러리들이 등장하기 시작하면서, 직접 DOM을 조작하는 일이 빠르게 줄어들었다. 이후 jQuery의 필요성이 줄어들면서 입지가 축소되었다.
일편에서는 jQuery가 현재 다른 프론트엔드 프레임워크보다 경량화되어 있다보니, 정적이고 가벼운 웹사이트를 신속하게 제작하는 용도로는 유용하다고 말한다.
Reference
[javascript Deep Dive] 도서
https://www.samsungsds.com/kr/insights/jquery.html
