[개발상식] #JS 프레임워크 특집/ React, Angular(vs backbone, ember), Meteor 그리고 MEAN

JavaScript 전부는 아니지만 각종 커뮤니티에 주로 회자되는 프레임워크들의 특징들을 얕게 비교해보았다.

React

페이스북이 만들고 있는 뷰 부분을 컴포넌트로 만들기 위한 라이브러리이다.

페이스북이 왜 React 를 만들었는가

'지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해서' 라고 한다.

관심사를 분리시키고 선언적인 API이다.

React의 특징

1.JUST the UI

UI 컴포넌트를 만들기 위한 라이브러리이다. 단지 UI만.

(컴포넌트란 재사용 가능한 UI 구성단위를 말한다. 또한 컴포넌트끼리의 결합, 포함 관계를 말한다.)

2.Virtual DOM

DOM Tree와 같은 구조체를 Virtual Dom으로 갖고 있다.

가상의 HTML Element들을 가지고 있다가

렌더링을 하면 필요한 부분(DOM조작)만 업데이트 하는 방식이다.

이 방식의 장점은

첫째, 일관성이 있다. 즉, 브라우저에 의존적이지 않다.

둘째, 테스트하기 쉽다. 순수 JavaScript로만 구현되어 있다.

셋째, 빠르다. 메모리 상에 DOM을 구성하고 구성한 DOM 비교를 통해 업데이트 된 부분만 갱신한다.

3.DATA Flow

단방향 데이터 흐름을 지향한다.

Angular.js의 양방향 데이터 바인딩을 사용할 때 처럼 코드의 양이 줄진 않는다.

하지만 모델 컴포넌트가 그 데이터를 UI 컴포넌트로 전달하는 흐름을 이해하고 관리하기 쉬운 애플리케이션을 만들 수 있다.

즉 이해하기 쉽다는 강력한 장점이 있다.

하위 컴포넌트의 변화를 이벤트를 통해 감지한다.

Angular, Ember 등 자바스크립트 프레임워크는 단순히 서버를 보조하던 역할에서 벗어나

해시나 HTML5 History API를 통해 상태별 고유 조수도 구현하고 있다.

즉, 클라이언트 라이브러리가 페이지 렌더링에 대한 책임을 가지고 있던 것이다.

결국, 검색 엔진 최적화의 문제가 생겼다.

검색엔진에서 찾질 못한다는 것이다.

그리고 성능 문제도 발생했다.

서버에서 HTML코드를 전부 만들어서 보내주는 것이 아니기 때문에

사용자가 해당 페이지에 최초 접속 시

클라이언트 라이브러리가 필요한 데이터를 서버에 요청하고 가져와서 렌더링하는 시간이 필요하다.

사용자에게는 서버에서 HTML 코드를 전부 만들어서 보낼 때 보다 더 느리게 느껴질 것이다.

그래서 페이스북은 React를 개발했다.

cf) React도 Angular처럼 커스텀 태그를 지원하고 있다.(React.createClass 같은 문법을 활용)

단점을 꼽자면

꼭 다른 프레임워크와의 조합이 필요하다.

즉, router, model, 등 frontend full framework를 제공하지 않는다는 점이다.

하지만 React가 추구하는 방향은 View단의 컴포넌트 라이브러리기 때문에 이 단점은 React의 운명이다.

React Native ?

React 는 그렇다 치고 Native는 무엇인가

자바스크립트를 사용해 모바일 앱을 개발하겠다라고 한다.

즉, 모바일 앱을 만들기 위한 JavaScript 프레임워크인 것이다.

React Native는 Webview를 사용하지 않는다.

백그라운드 스레드에서 자바스크립트를 실행하며 네이티브 컴포넌트의 레이아웃을 다룬다.

느린 자바스크립트가 UI 성능의 병목이 되는 것을 방지하기 위해 UI를 다루는 메인스레드와 비동기로 통신한다.

하지만 iOS Android 둘을 동시에 빌드업한다는 건 엉터리이다.

80%정도만 커버할 수 있으며 나머지 20%는 각기 다른 빌드업을 해야한다.

장점이라고 하자면 웹에서 사용하던 React 를 그대로 모바일로 가져와 사용한다.

다른 점이 있다면 HTML Element 이름 대신 네이티브 컴포넌트 이름을 사용한다는 점이다.

Angular JS

구글이 지원하고 있는 오픈소스 웹 애플리케이션 프레임워크이다.

React와 경쟁을 본다면 페이스북과 구글의 대결인 것이다.

MV *Framework, Sing Page Application형태의 웹 애플리케이션 개발 프레임워크이다.

큰 커뮤니티를 갖고 있다는 장점이 있지만 React에 비해 자유도가 낮다.

그리고 데이터의 변화와 그에 따른 출력에 초점이 맞춰져있다.

1.데이터 중심적 : 

2.테스트 주도적

3.선언적 HTML

특징들을 살펴보자.

Two Way Data-Binding

Model 과 View에서 사용되고 있는 데이터를 연결해줘서

어느 한쪽에서 이 데이터 값이 변화하면 다른 쪽에도 바로 업데이트가 되도록 하는 것을 말한다.

이 기능 구현을 위한 코드가 전체의 80%이다. Angular의 정체성이라고 보여진다.

어떤 프레임워크나 거의 마찬가지겠지만 코드의 반복을 피할 수 있다.

Denpendency Injection

컴포넌트들 간의 서비스 사용 및 의존성 관리가 용이하다.

코드상에서 밀접하게 연관되어 있지 않은 컴포넌트들 (Decoupling 된 컴포넌트들)을 테스트 하기가 쉽다.

Directives

개발자가 자신의 용도에 맞게 HTML Tag를 제작하여 사용할 수 있게 하였다. 즉, 커스텀 태그를 지원한다.

Dom atrributes도 수정 가능하게 하였다.

jQuery JS 를 사용할 때 무언가 엘리먼트에 데이터를 표시하는 등 어떤 상황에 직면했을 때

Dom을 사용해 해당 엘리먼트의 html을 수정해야 하는데 이는 스파게티 코드라는 결과랄 낳는다.

즉 가시성, 직관성, 보안성, 연장성을 저하시킨다.

단점으로는

DOM 조작을 세세하게 할 수 없다.

구글 이외의 검색엔진에서 크롤링이 되지 않는다.

그래서 별도의 페이지를 미리 설계해두거나 애초에 인터렉티브 웹앱을 생각하면 안된다.

최신 브라우저에만 호환을 제공해서 크로스브라우징 제약이 존재한다.

버전 파편화라는 점이 있지만 이것은 어느 프레임워크에서나 일어나는 일이다.

Angular만의 용어와 기능이 존재하여 러닝 커브가 있는 편이다.

cf)

React 에게 React Native 가 있다면

Angular 에게는 Ionic(모바일 애플리케이션 프레임워크)이 있다. 

Angular와 비교되는 세 프레임 워크이다.

Backbone JS

Angular도 가볍지만 backbone은 매우 가볍다.(Ember 69K > Angular 36K > Backbone 6.4K)

자바스크립트 라이브러리에 의존하기 때문이다.

반응이 빨라야 하는 경량 애플리케이션에 적합하다.

일부분에 사용할 때 빛을 발한다.

그리고 진입장벽이 낮다. 

Ember JS

방대한 라이브러리의 양, 서포트 네트워크

장기적인 프로젝트에 적합하다.

Meteor JS

Full - stack Application 을 도와주는 프레임워크

React or Angular 등과 함께 이용이 가능하고 Blaze 라는 자체 템플릿이 있다.

생산성 측면으로 독주. 러닝 커브도 비교적 낮다

모든 빌드가 Meteor JS 패키지에서 자동으로 관리된다.

템플릿엔진으로 Handlebar만 지원했지만 프론트 엔드 프레임워크 Blaze 로 Spacebar 라는 엔진 사용할 수도 있다.

모든 페이지는 소스 수정 시 자동으로 업데이트가 된다.

즉, Reactive Programming 지향한다.

Server구조는 Node.js기반이다.

좀 더 정확히는 미들웨어인 fiber엔진기반으로 한다는 점이다.

Node의 비동기 콜백방식이 아닌 일반적인 싱글 스레드 방식을 취한다.

mongodb를 기본적으로 내장하고 있고

신생 프레임 워크라 버전이 낮으므로 안전성 확보에 대한 부분이 미흡하다

보안을 중요시하는 사이트에서는 조금 부적절할 수 있다. 

MEAN Stack

요즘 뜨거운 감자로 각종 커뮤니티에 오르내리고 책도 출간되는 상황이다.

MEAN의 뜻인 다음과 같다.

M : Mongo DB

E : Express

A : Angular js

N : Node.js

Linux - Node.js - MongoDB - JavaScript - Exrpess - Angular JS

복잡한 애플리케이션을 개발하기 위한 레이아웃을 제공한다.

모던 웹 애플리케이션(클라이언트 기반 Single Page Application)을 위한 스택이라고 할 수 있다.

모든 스택에서 (DB - Server - Client)에서 자바스크립트로 개발

비동기 기반의 개발 스택이며

OS와 상관없이 구동 가능하며

모든 것이 open source라는 특징이자 장점을 갖고 있다.