최근 웹 프론트엔드는 CSR(Client-side Rendering)이 일반화 되었습니다. 이는 SPA(Single Page Application) 기법을 사용하여 페이지를 렌더링 하는데, 이러한 것을 지원해주는 대표적인 툴에는 리액트(React), 뷰(Vue), 앵귤러(Angular), 스벨트(Svlete)가 있습니다.
SPA(Single Page Application)
SPA는 브라우저에 로드되고 난 뒤에 페이지 전체를 서버에 요청하는 것이 아니라 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 애플리케이션을 의미합니다.
CSR(Client-side Rendering) 전통적인 웹 방식(서버 사이드 렌더링)은 페이지를 로딩할 때 마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링 하는 방식이기 때문에 성능 문제가 있었습니다. CSR(클라이언트 사이드 렌더링)은 서버에서는 JSON 파일만 보내주는 역할을 하고, HTML을 그리는 역할은 클라이언트 측에서 자바스크립트가 수행하는 방식입니다. 이를 통해 SPA는 트래픽을 감소시키고 사용자에게 더 나은 경험을 제공합니다.
어떤 프레임워크든 모두 JavaScript와 웹을 기반으로 하기 때문에 프레임워크 위주로 접근하기보다는 기본적인 기술을 깊게 이해하고, 프레임워크 간의 차이와 각각의 장단점을 이해하는 접근이 필요합니다.
따라서 대표적 프레임워크(라이브러리)인 React, Angular, Vue 그리고 Svelte의 차이점에 대해 알아보겠습니다.
리액트는 재사용 가능한 컴포넌트를 통해 사용자 인터페이스를 구축하기 위한 프론트엔드 개발 전용 오픈 소스 자바스크립트 라이브러리입니다. 페이스북이 2011년 자체적으로 사용하기 위해 만든 언어로 현재까지도 페이스북이 관리하고 있습니다. 배우기 쉽고, 개발 속도가 매우 빠르며 대규모 개발자 커뮤니티로 인해 문제를 찾아 해결하기 쉽다는 장점이 있습니다.
- 페이스북이 개발한 라이브러리
- 가상(Virtual) DOM 사용
- 단방향 바인딩
- 개발시 바뀐 컴포넌트만 리렌더링함
- 컴포넌트 기반이기 때문에 UI 수정과 재사용이 수월
- React Native를 이용해 App 제작 가능
- 커뮤니티가 크고 활발함
Vue는 유연하고 가벼운 JavaScript 기반 프레임워크입니다. 앵귤러나 리액트와 비교해서 뷰는 프리코딩(pre-coding) 구조를 가지고 있어서, 그 성능을 양보하지 않고도 애플리케이션을 빠르게 개발할 수 있게 해줍니다. 그리고 명령이 쉽기 때문에, 개발과정에서 원하는 것을 정확하게 이용할 수 있습니다. 뷰를 사용하면 앱개발이 쉽고 빠르다는 장점이 있습니다.
- 구글이 개발한 프레임워크
- 가상(Virtual) DOM 사용
- 양방향 바인딩
- 러닝 커브가 낮아 사용하기 쉬움
- 가볍고 빠른 개발이 가능함
- 풍부하고 체계적인 문서
- 커뮤니티가 작지만 빠르게 성장하고 있음
‘앵귤러’는 프로젝트 생성에서부터 코드 최적화 작업에 이르기까지 모든 작업에서 사용할 수 있는 폭넓은 프레임워크이기 때문에, 전체적인 개발 과정에 있어서는 가장 다루기 힘든 프레임워크라고 할 수 있습니다. 하지만 앵귤러는 선택할 수 있는 많은 기능들이 있기에, 개발자들은 어떠한 호스트(host)앱이라 하더라도 간단한 명령을 통해 완전히 최적화된 번들(bundle)앱을 만들 수 있습니다.
- 에반 유가 개발한 프레임워크
- TypeScript 기반 (Angular.js는 JavaScript 기반)
- 가상(Virtual) DOM 사용
- 양방향 바인딩
- 러닝 커브가 높아 비교적 배우기 어려움 (Module, RxJS, Pipe, JavaScript, TypeScript 등)
- Module + Component 기반으로 동작
- NativeScript와 Ionic Framework을 이용해 App 제작 가능
- 초기 구동 속도가 느림
스벨트는 최근 업계에 등장한 언어 중 하나로, 리액트와 뷰 등 기존 언어를 보완하고자 2016년에 출시되었습니다. Rich Harris가 개발했고, 현재 스벨트의 핵심 멤버들이 관리하고 있습니다. 스벨트는 가볍고 빠른 앱을 개발하기 위해 가능한 한 적은 양의 보통(plain) 자바스크립트 코드를 생성합니다. 또한 적절한 최적화를 제공합니다.
- 프레임워크도 아니고 라이브러리도 아닌, 컴파일러
- 뛰어난 성능
- 가상 DOM을 사용하지 않음
가상DOM을 사용하는 리액트나 뷰는 실제 DOM에 변경을 커밋하기 전에 보이지 않는 트리에서 컴포넌트를 그리기 위한 시간을 소비합니다. 스벨트는 이런 중간 단계를 뛰어넘고 변경하게 됩니다. 스벨트는 어떤 요소에 변화가 일어났는지 정확하게 알고 있기 때문에 빠르게 처리할 수 있습니다.
- 쉽고 적은 코드 작성
- Context API, Store 등 많은 API를 npm, yarn의 패키지 없이 자체적으로 지원
- Runtime Library 불필요 (Svelte 컴파일러가 직접 JavaScript로 변환함)
React > Vue > Angular > Svelte 로, React가 가장 많이 사용되고 있습니다.
Svelte > Vue > Angular > React으로, Svelte가 압도적인 성능을 가지고 있습니다.
스타트업 생태계 특성상 시장 진입 단계에서 빠른 개발과 반복적인 검증이 필요합니다. 소규모로 시작하는 스타트업에서는 적은 리소스로 빠르게 개발을 완료해야 합니다.
러닝 커브가 높고 대규모 프로젝트에 적합한 Angular나 아직 비주류인 Svelte를 사용하는 것보다, 가장 큰 커뮤니티과 많은 개발자가 있는 React 또는 러닝 커브가 낮고 빠른 개발이 가능한 Vue를 사용하는 것이 적합하다고 생각합니다.
조직의 변화가 빠른 스타트업 팀의 특징을 고려했을 때, 가장 많은 개발자가 있고 솔루션을 얻기 좋은 방대한 커뮤니티를 가진 React를 사용하는 것도 좋습니다. 그리고 Vue는 러닝 커브가 낮고 가독성이 좋기 때문에 개발자들의 온보딩 시간을 단축할 수 있으며, 특히 쉽고 빠르게 개발할 수 있다는 점이 스타트업에서 가장 매력적인 장점이 될 수 있을 것 같습니다.
무엇보다도 팀원들에게 가장 익숙하고, 스타트업에서 개발할 프로젝트의 특성과 규모에 따라 가장 적합한 프레임워크를 선택하는 것이 좋다고 생각합니다. 각 프레임워크/라이브러리의 장단점을 고려하여, 함께할 팀원들과 충분한 논의를 통해 어떤 것을 사용할 지 결정하는 것이 중요할 것 같습니다.
웹 프론트엔드 생태계는 매우 빠르게 변화하고 있습니다. 그렇기 때문에 무조건 가장 쉽고 인기 있는 프레임워크를 찾는 것보다, 개발자로서 장기적으로 유용한 기술을 배우는 것이 더 유용할 것입니다.
처음에 언급했듯이, 어떤 프레임워크든 모두 JavaScript와 웹을 기반으로 하기 때문에 기본적으로 자바스크립트에 대한 이해가 중요합니다. React는 객체에 대한 이해, this 키워드, 함수형 프로그래밍 등 많은 중급, 고급 JS 개념을 사용합니다. 그렇기 때문에 React 자체를 아는 것뿐만 아니라, JS 개념 학습 측면에서도 React를 배우는 것이 좋다고 생각합니다.
또한 Vue와 같이 쉽게 초기 세팅을 할 수 있는 프레임워크도 존재하지만, React로 앱을 빌드할 때는 Routing, Http 요청, 상태 관리까지 모두 외부 라이브러리를 사용해야 합니다. 처음 배울 때는 어려울 수 있지만, 이를 공부하면서 다른 라이브러리를 함께 사용하고 연결하는 방법을 배울 수 있습니다.
그리고 함수형 프로그래밍과 단방향 바인딩, 명령형 DOM 조작 등 React가 웹 개발에서 대중화한 패턴과 개념을 이해하기 위해 React를 학습하는 것이 필요하다고 생각합니다.
React는 현재 시장에서 가장 많이 사용되고 있는 웹 프론트엔드 라이브러리입니다. React에 대한 전문 지식은 수요가 매우 많으며, 큰 커뮤니티를 통해 개발을 하며 맞닥뜨린 문제를 해결하는 데 많은 도움을 받을 수 있습니다.
추후에 새로운 기술들이 나오고 React가 뒤처지게 되더라도, React를 학습하며 배운 다양한 지식들은 웹 개발에 대한 더 깊이 있는 이해에 큰 도움이 될 것이라고 생각합니다.
앵귤러 vs 리액트 vs 뷰, 어떤 게 최고의 선택일까? - wishket
React vs Vue: What do I choose for my new startup? - Incentius