자바스크립트 웹 프레임워크의 발전사와 최신 트렌드 (3)

자바스크립트 생태계와 React

이 글은 frontendmastery의
"The new wave of Javascript web frameworks"라는
글을 참고했습니다.


흩어지고 분열되는 자바스크립트 생태계

SPA는 여전히 프론트엔드 개발의 기본 스펙이고, React는 논쟁의 여지없이 대표적인 SPA 어플리케이션입니다. React는 오직 하나의 계층만을 제공하고 필요한 다른 계층은 생태계에 맡기면서, 다른 모든 중요한 측면에서의 변화를 야기했습니다.

라우팅, 상태 관리, 데이터 가져오기 등은 각각 고유한 개념과 API들을 가지고 있었고, 불변성과 가변성, 클래스 기반의 OOP와 함수형 스타일 등에 대한 다양한 토론과 함께 라이브러리들이 계속해서 개선되고 새롭게 추가되는 환경 속에서, 너무나 많은 개발자들이 어떤 선택을 해야 하고 어떻게 설계해야 하는지에 대한 불확실성에 빠져 버리고 말았습니다.

React의 대안들

React의 컴포넌트 모델은 여전히 확고한 개발의 축으로 기능하고 있지만, 런타임 비용, 자바스크립트 기반 JSX와 복잡성 등은 여전히 논쟁의 대상이 되고 있는데, 이에 대한 대안으로 Vue, Svelte, Solid 등의 다른 자바스크립트 프레임워크가 새롭게 많은 개발자들의 주목을 받게 됐습니다.

Vue

개발자들이 Angular2 또는 React로 마이그레이션 하는 것을 논의할 때, Vue는 상대적으로 낮은 진입 장벽을 통해 Angular2, React와의 차이를 좁힐 수 있었습니다. Vue는 복잡한 웹팩 구성 때문에 골치 아플 필요가 없었고, CDN의 도입으로 많은 개발자가 직관적으로 사용할 수 있는 템플릿으로 컴포넌트 구축을 시작할 수 있었습니다.

라우팅 및 스타일링과 같은 핵심 컴포넌트들을 템플릿에서 사용할 수 있었기 때문에 의사결정의 피로를 줄일 수 있었고, 템플릿에 정적 분석을 사용하여 더 빠른 런타임을 위한 최적화를 허용함으로써 React의 조정 알고리즘을 개선했는데, 이것을 컴파일러 정보 가상 DOM이라고 합니다.

Svelte

Svelte는 사전 컴파일이라는 접근 방식으로 런타임에서 개발자들이 겪는 복잡성과 오버헤드를 제거했는데, 이 아이디어는 최소한의 자바스크립트를 간소화된 출력으로 자체 컴파일하는 프레임워크를 갖는 것이었습니다.

Svelte는 익숙한 가변 스타일의 자바스크립트를 사용하는 선언적 컴포넌트를 기반으로 현대적인 개발 경험을 유지하려고 했는데, 가상 DOM을 완전히 탈피하여 상태 업데이트와 같은 작업을 수행하기 위한 불변 스타일의 자바스크립트를 작성하는 제약에 얽매이지 않았고, 이를 통해 많은 개발자들에게 웹 애플리케이션을 만드는 훨씬 더 간단하고 건전한 모델을 제공하고 있습니다.

Solid

Solid는 Knockout에서 영감을 받은 간단하고 예측할 수 있는 반응형 모델을 제공하는데, React와 마찬가지로 기능의 합성이 용이하도록 템플릿화를 피했지만, React가 끊임없는 리렌더링이라는 접근 방식을 선택한 것에 비해 Solid는 한 번 렌더링한 후 다음에는 간소화된 반응형 시스템을 사용하여 가상 DOM의 오버헤드 없이 세밀한 업데이트를 수행하는 방식을 선택했습니다.

답글 남기기