아하 프론트 개발기(0)— Angular, React, Vue.js 프레임워크 선택하기
지식커머스플랫폼 아하(Aha)의 웹사이트는 `vue.js` 의 SSR 프레임워크인 `nuxt.js` 로 작성되었습니다. 난생 처음 JavaScript 만으로 서비스를 개발하면서 겪은 일들을 몇 편의 글로 정리해보려고 합니다.
JavaScript 생태계 크기.. 무엇?
2013년 node.js 탄생 이후 브라우저 밖으로 나온 JavaScript는 현재 생태계가 가장 활발하게 돌아가는 프로그래밍 언어 중 하나입니다. 그리고 ECMAScript 2015+ 스펙이 등장하면서 언어적인 측면에서 가지고 있었던 문제점들을 극복해가고 있습니다.
또한 점점 모바일 환경과 고도화되는 요구사항에 맞춰서 여러가지 도구들(트렌스파일러, 모듈 번들러, 테스트 도구들, 각종 라이브러리, 프레임워크 삼대장 등)이 생겨났는데요. 혹시라도 저처럼 2–3년 전의 JavaScript 에 머물러 있으시다면.. 다시 공부하셔야할 겁니다. 기술이 너무나도 빠르게 등장하고 발전하고 도태되고 있기 때문이죠. 장인은 도구를 탓하지 않는 다지만… 격변의 시대에 살아남을 것들을 골라야 했습니다. 그래서 2018년에 서비스를 개발하면서 어떤 도구들을 써야 좋을지 고심했습니다.
Anglular vs. React vs. Vue.js
그 고민의 마지막은 프레임워크(혹은 라이브러리)를 결정하는 것이었습니다. (사실 이 논의는 훨씬 더 전.. 그러니까 몇 년 전으로 거슬러 올라가지만, 아하 개발 전에도 동일한 이유로 vue.js를 선택했습니다.) 후보군을 선정하는 과정에서 몇 가지 기준을 정했는데.. 다음과 같습니다.
- 든든한 커뮤니티와 생태계가 있을 것.
- 문서화가 잘되어있을 것.
- 많은 레퍼런스가 있을 것.
- 낮은 러닝커브(실무에 바로 적용)
- 높은 생산성
- 반응형(reactivity)을 지원할 것.
어느 팀이든 비슷하겠지만, 결국 후보는 삼대장이죠. 3명의 개발자가 각자 하나 씩 공부한 결과를 공유하면서 결정하기로 했습니다.
#1. Angular
- 구글에서 지원
- 큰 커뮤니티
- 양방향 바인딩
- TypeScript: 정적 타입. 코드의 예측가능성 및 유지보수 용이, 공부…
- 자세하고 방대한 분량의 문서, 방대한 공부..
- RxJS: 비동기 통신 방식, 또 공부..
Angular 의 경우 제 담당이었어서.. 방대하고 잘 정리된 문서와 재밌는 튜토리얼이 인상적이었나 그 만큼 러닝커브도 상당해 보였습니다. 개인적으로 TypeScript 에 대한 인상도 매우 좋았습니다. 하지만 빠르게 프로토타이핑하여 비즈니스 모델을 검증하고, 시장의 핏에 맞춰 나가야하는 스타트업 팀 특성상 좀 더 가벼운 것이 필요하다는 생각에 가장 먼저 후보군에서 제외했습니다.
#2. React
- 페이스북의 지원
- 가장 거대한 커뮤니티
- Virtual Dom
- JSX: 탬플릿 코드가 JS 안에 들어간.. 공부..
- React Native: 추후 앱 출시까지 염두에 둔다면..
- SSR: Next.js
Ajax 와 동적인 화면 구성을 제외하고는 웹을 이야기할 수 없는 요즘 Virtual Dom 은 아주 좋은 선택입니다. 브라우저의 돔(DOM) API는 빠릅니다. 하지만 현대적인 웹페이지의 DOM 트리는 지나치게 크고 아름답죠. 게다가 과거에 비해 돔트리를 수정하는 일이 매우 잦아졌습니다. 페이지가 점점 복잡해지는 상황에서 DOM 트리를 직접 다루는 일은 복잡하고 무거운 작업이 되었습니다.
Virtual Dom은 DOM 트리를 추상화해서 JavaScript 객체로 만들어 둡니다. 변경점은 가상돔에서 처리하고 실제 돔 조작은 최소화해서 브라우저의 리플로우나 리페인트 횟수를 현저히 줄이는 방식으로 퍼포먼스를 높인 것입니다.아주 멋지죠?
다른 한편으로 우리는 지난 서비스를 운영하면서 SEO(Search Engine Optimization)이 얼마나 중요한지 몸소 체험했습니다. 애써 만든 웹서비스가 검색엔진에 노출이 되지 않는다면? 그건 재앙이죠! 😱
그래서 SPA(Single Page Application) 방식의 프레임워크들을 고려하면서 서버사이드 렌더링(SSR)을 염두에 둘 수밖에 없었습니다. 다행히 React 에는 Next.js라는 훌륭한 선택지가 있었습니다.
#3. Vue.js
- Evan You 개인이 유지보수
- 상대적으로 작지만 충분한 커뮤니티(feat. Laravel)
- 양방향 바인딩(단방향도 가능)
- Virtual Dom
- Single File Component:
.vue - NativeScript — Vue: 레퍼런스 부족.
- SSR: Nuxt.js
사실 문서나, 레퍼런스의 양은 세 프레임워크 모두 개발하기에 충분합니다. Vue.js 가 다른 두 프레임워크와 다른 점은 거대한 기업의 지원은 없다는 점입니다. 이 점은 많은 분들이 우려할 만한 점이라고 생각하지만 그럼에도 불구하고 Vue 의 커뮤니티와 생태계는 가장 가파르게 성장하고 있습니다. 실제로 2019년 1월 현재 깃허브 스타수 기준으로는 으뜸입니다.
vue.js는 여러모로 하이브리드형 프레임워크입니다. Evan You 가 똑똑하게 두 프레임워크의 좋은 점을 따왔다고 할까요? Angular 의 양방향 바인딩과 React의 Virtual Dom 을 지원합니다. 게다가 Flux 의 저장소 패턴을 구현한 vuex 를 통해 리액트의 단방향 데이터 바인딩도 활용 가능합니다. jQuery 와 같이 cdn을 이용한 사용법까지 지원해서 유연성면에서는 가장 뛰어나며, 레거시 시스템을 점진적으로 개선할 때도 적합합니다. 또한 경량 프레임워크를 지향하는 만큼 리액트에 비해 절반 수준의 소스 용량으로 매우 가볍습니다.
Vue.js 의 문서 역시 매우 훌륭한 데, 어떤 버전의 JavaScript 든 익숙하다면, 빠르게 습득하고 실제로 구현해볼 수 있을 정도로 낮은 러닝커브를 가졌습니다. (이거다!! 🤩 사실 이 점은 양날의 검이기도 한데, JavaScript Standard Style 을 적극적으로 적용하고, Vue.js Style Guide 를 준수하는 등 코드 품질을 높이기 위해 노력하고 있습니다.)
제가 생각하는 vue.js 의 백미는 Single File Component. 즉, .vue파일입니다. 아래와 같은 구조로 마크업과 스크립트, 스타일이 한 파일에 모여있습니다.
<template> <div> <h1>{{ message }}</h1> </div></template><script> export default { data () { return { message: 'Hello World' } } }</script><style> h1 { text-align: center; }</style>
기호에 따라서 template 과 js, css 코드가 섞이는 것을 피하고 싶은 분도 분명히 계실거라고 생각합니다. 저에게는 Single File Component 가 디자이너/퍼블리셔와 협업하는 과정에서 매우매우 장점이었습니다. (퍼블리셔에게 JSX를 부탁할 수는.. 또르르)
그리고 컴포넌트의 마크업과 스크립트, 스타일이 한 곳에 모여있다는 것은 컴포넌트를 조금 더 직관적으로 만들어 줍니다. 이는 가독성 면에서나 유지보수 측면에서나 큰 장점이어서 생산성 향상에 도움이 되었습니다. (.vue파일이 생각보다 커지기 쉬워서 컴포넌트 설계를 잘 해야하는 것은 함정😂)
서론이 길었습니다.
설명의 길이를 보시고 짐작하셨겠지만, 저희 팀의 선택은vus.js 입니다. 그리고 후회없이 즐겁게 코딩했습니다. 어쩌면 프론트엔드 개발의 대세는 당분간 계속해서 React 일지도 모르겠습니다. 가장 많은 회사가 쓰고 있고, 페이스북이라는 큰형님이 뒤에 있기 때문이죠. 그렇다고 해서 vue.js 가 뒤쳐질 거라고 생각하는 분은 없을 것 입니다. Vue.js 를 사용해서도 충분히 견고하고 재사용성 높은 코드를 생산할 수 있습니다. 아하팀의 프론트엔드 개발기에서는 vue.js 로 상용 서비스를 개발하면서 했던 생각들을 나눠볼까 합니다.
이번편은 사실 0편 프롤로그에 해당합니다. 다음 시간부터는 서버사이드 렌더링(SSR)과nuxt.js 로 웹 어플리케이션을 개발을 시작하는 방법에 대해서 이야기해보겠습니다.
