이 글은 frontendmastery의
“The new wave of Javascript web frameworks”라는
글을 참고했습니다.
최근 자바스크립트의 흐름은 따라잡지도 못할 만큼 빠르게 발전하고 있는데, 그 발전의 중심에 있는 것이 바로 웹 프레임워크입니다. Node.js의 출현과 함께 React, Svelte, Vue, Solid, Astro, Marko, Fresh, Next, Remix, Qwik 등의 프레임워크 뿐만 아니라, 오늘날의 환경에 맞는 “메타 프레임워크”도 빠르게 확산되고 있는 만큼 전반적인 업계의 트렌드를 따라잡기 힘든 것도 사실입니다.
특히 자바스크립트 생태계에 새로 진입하는 사람이라면 새로운 라이브러리와 프레임워크, 프레임워크의 개념, 그리고 이에 대한 다양한 의견 등을 이해하는 것이 어려울 수도 있습니다. 또 규모가 점점 커지면서 다양한 이슈와 관련 문제도 계속해서 생겨나고 있는 만큼 자바스크립트의 진화와 혁신의 역사에 대해 조금은 자세히 이해해볼 필요가 있습니다.
웹페이지의 역사
웹은 함께 연결된 정적 문서로 시작되었는데, 누군가가 문서를 준비하면, 그것을 컴퓨터에 올려놓고 다른 사람에게 공유할 수 있었습니다. 이렇게 컴퓨터에 올려놓은 문서에 다른 사람이 물리적인 이동을 하지 않고도 접근할 수 있었기 때문에 당시에는 매우 혁신적인 기술이었습니다.
처음에 웹은 아주 단순한 형태의 간단한 문서에 불과했지만, 어느 순간 이 간단한 문서를 조금 더 동적으로 만들려는 노력들이 있었고, 이 노력들로 인해 웹페이지에 다른 콘텐츠를 제공할 수 있는 CGI와 같은 기술이 적용되기 시작했습니다.
CGI 이후에는 Perl과 같은 표현형 언어를 사용하여 스크립트를 작성하게 되었고, 이런 시도들이 웹을 위해 만들어진 첫 번째 언어인 PHP에 큰 영향을 미치게 됐습니다. PHP는 웹페이지를 혁신적으로 변화시켰는데, 가장 혁신적이었던 것은 HTML을 백엔드 코드에 직접 연결하는 방법으로, 웹의 가장 중요한 혁신 중 하나인 “동적인 값을 포함하는 문서”를 프로그래밍 방식으로 쉽게 만들 수 있게 되었습니다.
<html>
<body>
이 문서는 미리 준비되어 있습니다.
</body>
</html>
<html>
<body>
Y2K?
<?php echo time(); ?>
</body>
</html>
동적 페이지와 혁신의 가속
동적인 페이지가 웹 생태계에 빠르게 적용되면서 세션을 가능하게 하는 쿠키 뿐만 아니라 사용자에게 보낸 내용을 쉽게 커스터마이즈 할 수 있게 되었고, 서버 기반의 템플릿 프레임워크는 데이터베이스와 통신하는 언어 생태계의 전반에 걸쳐 등장했는데, 이런 프레임워크는 정적 페이지로 시작해 동적 페이지로 쉽게 확장할 수 있는 방법을 제공해 주었습니다.
웹은 빠르게 진화했고, 사람들은 더 많은 상호작용의 경험을 위해 Flash와 같은 브라우저 플러그인을 활용했는데, 이와 함께 백엔드에서 제공되는 HTML을 직접 조작 할 수 있는 자바스크립트도 활용되기 시작했습니다.
이 후 Flash가 사라지고, 자바스크립트로 대체되면서 jQuery나 Prototype과 같은 도구들이 웹 API를 더 매끄럽게 연결하고, 경쟁 브라우저들의 단점을 보완하기 시작했고, 급격한 발전에 따라 기술 회사들은 점점 더 커지고, 프로젝트와 팀이 성장함에 따라 더 많은 비즈니스 로직들이 웹 템플릿에 포함되는 것이 일반적인 상황으로 발전하기 시작했습니다.
반면, 백엔드에서 돌아가는 서버 코드는 데이터를 서버 템플릿 언어로 사용할 수 있도록 작성되고 있었는데, 이런 템플릿은 종종 글로벌 변수에 접근하는 비즈니스 로직이 뒤죽박죽되는 형태로 진화했고, SQL 주입과 같은 공격이 일상화되면서 이에 따르는 보안 문제도 나타났습니다.
이를 해결하기 위해 “Ajax 웹 애플리케이션에 대한 새로운 접근법”을 적용하면서 동기식 새로고침 대신 비동기식 페이지 업데이트를 할 수 있게 되었는데, Ajax를 이용하는 패턴은 Google maps나 Google docs와 같은 최초의 거대 클라이언트 사이드 애플리케이션에 의해 대중화되었는데, 이와 함께 클라우드 형태의 소프트웨어가 발전하기 시작했고, 이는 CD 형태의 소프트웨어를 구입하는 것과 비교했을 때 엄청난 진전으로 받아들여졌습니다.
Nodejs와 거대 자바스크립트
Nodejs가 등장하면서 프론트엔드와 동일한 언어로 백엔드를 작성할 수 있게 되었습니다. Nodejs의 생태계는 작업을 수행하기 위해 가져올 수 있는 작은 단일 목적의 패키지를 재사용하는 것을 강조했는데, Ajax를 이용한 비동기 모델 개발자들은 이미 이런 형태의 개발에 익숙했기 때문에 Nodejs를 매력적인 도구로 받아들였습니다.
Angular와 양방향 바인딩의 등장
이전의 자바스크립트 생태계에는 jQuery UI, Dojo, Mootools, ExtJs, YUI 같은 재사용이 가능한 “위젯” 라이브러리와 유틸리티 모음이 있었습니다. 하지만 개발자들은 이런 라이브러리를 너무 많이 사용하고 있었는데, 특히 프론트엔드에서는 더 멋진 상호작용을 구현하기 위해 더 많은 코드 조각을 사용하는 경향이 있었고, 이로 인해 종종 프론트엔드와 백엔드 사이에서는 템플릿이 중복되는 경우가 발생했습니다.
이를 해결하기 위해 Backbone, Knockout과 같은 다른 많은 프레임워크들이 등장했는데, 이들은 MVC, MVVM 등의 아키텍처를 통해 프론트엔드의 관심사를 분리했고, jQuery 플러그인이나 다른 모든 위젯 들과도 호환이 됐습니다.
구조를 추가하는 것은 프론트엔드 코드의 확장에 도움이 되었고, 백엔드에 프론트엔드로의 템플릿 이동을 가속화했습니다. 하지만 여전히 페이지를 업데이트하고 컴포넌트를 동기화하기 위해서는 미세 조정된 DOM을 조작해야 했기 때문에 데이터 동기화에 관련된 버그가 자주 발생했고, 이런 버그들과 관련된 문제는 사소한 문제가 아니었기 때문에 많은 개발자들의 고민거리였습니다.
이때 구글의 지원을 받은 Angular가 등장했는데, Angular는 HTML을 동적으로 작동시켜 생산성 향상을 도모하는 프레임워크였습니다. Angular는 스프레드시트에서 영감을 받은 반응형 시스템과 함께 양방향 데이터 바인딩을 제공했고, 선언적인 양방향 바인딩은 업데이트할 때마다 발생하는 보일러 플레이트의 상당 부분을 제거할 수 있었습니다.
양방향 바인딩은 개발자들을 더 생산적으로 만들었지만, 규모가 커짐에 따라 무엇이 변화하고 있는지 추적하는 것이 어려워졌고, 종종 업데이트 사이클이 발생하는 곳에서 메인 스레드를 차지하면서 성능 저하로도 이어졌습니다. 참고로 Svelte는 이런 단점을 완화하면서 양방향 바인딩을 유지시켜주는 프레임워크입니다.
모바일의 부상 외에도 이렇게 생산성을 끌어올리는 프레임워크는 프론트엔드와 백엔드의 분리를 가속화했고, 이를 통해 프론트엔드와 백엔드의 분리를 강조하는 다양한 아키텍처를 탐색할 수 있는 길을 열었는데, 이것은 HTML을 미리 만들어 CDN에서 서비스하는 것을 강조하는 Jamstack 철학의 핵심이었습니다.
물론 그 당시의 Jamstack은 정적 문서를 제공하는 것과 비슷했지만, 현재는 Git 기반의 워크플로우와 멀리 떨어진 중앙 집중식 서버에 의존하지 않는 강력한 CDN 인프라와, 분리된 프론트엔드와 통신하는 독립된 API들을 갖추게 됐고, CDN의 정적 자산을 캐싱하는 것은 서버를 운영하는 것보다 운영 비용이 훨씬 저렴해졌는데, 현재는 Gatsby, Next 등의 많은 툴들이 이런 아이디어를 활용하고 있습니다.
frontendmastery, “The new wave of Javascript web frameworks”