SPA 프레임워크 ( React, Vue, Angular )

앞으로, 개발에 대해 깊이있게 공부하기 위해 하나둘씩 정리해나갈 예정입니다.
이제는 어떻게서든 해결하는 개발자가 아니라, 문제를 근본부터 파헤쳐 해결하는 개발자가 되고자 합니다.

 유저의 행동흐름에 따라서 동적으로 화면을 보여주기 위해 사용되는 프론트엔드 라이브러리/프레임워크들이 있습니다. 바로 React / Vue / Angular! 그 중 React를 가장 첫번째로 선택해서 공부했던 이유는 당시 채용시장에서 React를 요구하는 회사가 많았었고, 3개 중 가장 인기있는 도구였기 때문였습니다. 하지만, 앞으로 좋은 프론트엔드가 되기위해서는 도구를 가려서는 안되는 법! 이 3가지를 잘 정리해두어서, 상황에 맞추어 도구를 사용하는 개발자가 될 것 입니다! 

 

유저와의 상호작용이 활발하지 않은 홈페이지를 만든다면? 위의 3가지의 도구들이 필요가 없겠죠! 정적인 페이지를 만들기에는 HTML, CSS, JS만으로 충분합니다! 상황에 맞추어 도구를 사용하면 되겠죠! 도구는 도구니까요 :-) 

참고사이트

https://velopert.com/3612

https://tech.kakaoenterprise.com/109

http://www.incodom.kr/Angular_%ED%83%84%EC%83%9D_%EB%B0%B0%EA%B2%BD_%EB%B0%8F_%EC%97%AD%EC%82%AC

https://www.samsungsds.com/kr/insights/frameworks.html

 

 

---

1. Angular

최초 AngularJS (최초버전)이 나오면서 많은 호응을 얻었습니다. 당시 많이 사용되던 제이쿼리가 실제로 자바스크립트를 편안하게 작성하게는 도와주었지만, 같은 코드 안에서 뷰와 데이터가 혼재하여 코드관리에 대한 어려움을 쉽게 겪을 수 있었습니다. 하지만, 앵귤러의 경우 MVC 디자인 패턴으로 뷰와 데이터가 나뉘면서 코드관리에 대한 문제를 해결해주었고, 양방향 바인딩으로 Model이 바뀌면 View 또한 자동적으로 바뀌는 패턴으로 서로를 동기화시키는 코드를 작성하지 않아도 되었습니다. 이외 여러 이유로 2013년부터 AngularJS는 가장 많이 사용되는 프레임워크로 올라설 수 있었습니다.

 

잠깐! AngularJS와 Angular는 다릅니다!

2014년부터 후속버전인 Angular가 나오게됩니다. 현재 AngularJS는 앵귤러팀에서 사용 권장하지 않습니다.

이 둘의 가장 큰 차이는 최초버전인 AngularJS(Angular 1)는 자바스크립트 기반으로 출시되었지만, Angular( Angular 2+)부터는 타입스크립트 기반이라는 점입니다. 또한, 컴포넌트 기반 개발로 개발 생산성을 높이고 대규모 애플리케이션에 적합한 구조 설정을 가능하게 합니다. 선택적 데이터 바인딩 지원으로 단방향과 양방향을 선택할 수 있습니다. 디렉티브, 서비스, 의존성 주입이 간소화되었습니다. Angular CLI를 제공하면서 개발 환경 구축 자동화로 편안함과 개발 도구 통일을 이룰 수 있었습니다.

 

정리

• Typescript 사용
• 필요한 기능을 모두 갖춘 Complete Framework
• Angular CLI를 통한 개발환경 구축
• HTML 마크업 기반의 템플릿 문법을 사용
• 증가형 DOM
• 선택적 데이터 바인딩 (단방향, 양방향)
• 높은 러닝커브

 

---

2. React

초기 React가 출시하고 뜨거웠던 인기의 이유는 SEO(Search Engine Optimization)가 가능한 SPA라는 점이였습니다. 당시 AngularJS(Angular 1)은 SSR(Server Side Rendering)를 지원하지 않았기 때문입니다(Angular (Angular 2+)는 지원합니다). 앵귤러가 MVC패턴의 제한적인 프레임워크라면 React는 뷰만 신경쓰는 유연한 라이브러리입니다. 앵귤러처럼 라우터나 통신 같은 기능들이 포함되어있지는 않지만, 다양한 라이브러리들을 선택 가능하고 가볍습니다. 또한 리액트는 Virtual DOM(가상 DOM)을 사용합니다. 컴포넌트가 렌더링 될 때마다 기존 가상DOM트리를 비교해서 변경된 부분만 바꾸는 작업을 통하여 성능을 개선시켜 그 당시 프론트엔드 프레임워크들을 속도로 압도했었습니다. 지금은 Angular, React, Vue의 성능, 속도 차이는 미미합니다.

 

정리

• 뷰에 집중한 라이브러리
• Create React App를 통한 개발환경 구축
• JSX 사용
• 가상DOM
• 단방향 데이터 바인딩
• React Native로 앱 개발 가능

---

3. Vue

가장 나중에 출시되었으며, 앵귤러 양방형 바인딩과 리액트의 가상DOM 장점을 모두 가지고 있는 프레임워크입니다. 리액트에서는 JSX를 배워야하지만, Vue는 HTML구조를 거의 그대로 사용할 수 있도록 만들어져있습니다. 따라서, 학습에 대한 내용이 상대적으로 쉬워서 진입장벽이 낮습니다. 또한 단일 파일 컴포넌트를 만들기 위해 .vue라는 확장자 파일을 생성하는데 html,css,js 구분이 잘 되어있어서, 기존 마크업개발자가 쉽게 구조를 파악할 수 있어 협업에 용이합니다.

 

정리

• 가이드 문서를 통해 특정모듈을 권장
  
• VUE-CLI 를 통한 개발환경 구축
• HTML 마크업 기반의 템플릿 문법을 사용
• 가상DOM
• 선택적 데이터 바인딩 (단방향, 양방향)
• 낮은 러닝커브
• Single File Component

 

---

4. 느낀점

현 시장에서는 앵귤러 자체의 무거움과 높은 러닝커브로 인해 리액트와 뷰 중에서 택일을 하게 되는 것으로 보여집니다. 물론 뷰의 낮은 러닝커브와 협업용이성으로 인해 이점이 있으나, 선천적으로 리액트는 라이브러리, 뷰는 프레임워크이기 때문에, 확장성을 생각한다면 앞으로도 리액트가 자주 택하여질 것으로 생각됩니다. 최근 뷰를 채택하는 곳이 많긴 하지만 아직도 뷰의 생태계가 그리 크지 않다는 것도 한 몫을 하겠습니다.

 

 

각 도구들을 조사하면서 편견을 깨게 된 일이 있었습니다. 일단 현재 자주 사용되는 기술은 무조건 성능이 좋을 것이다라는 점입니다. 이 때까지는 React와 Redux를 이용하여 프로젝트를 진행해왔었습니다만, React+MobX가 성능이 12% 높다는 것을 알고 크게 놀랐습니다. 다음번에는 MobX와 Redux와의 비교를 해볼까합니다. 또한 여러 자료들을 통해 많은 개발자들이 Svelte에 주목하고 있다는 사실을 발견했고, 조사를 통해 기존 프론트엔드 프레임워크와 어떠한 차이가 있고, 어떤 이점이 있는지 조사해볼 예정입니다.

Performance (points 0-100)- higher is better (출처:medium.com)