자바스크립트 프레임워크 #

프레임워크를 풀어서 말하면 설계의 바탕이 되는 기반코드와 개발자가 원하는 방식대로 이를 맞춤변환(커스터마이징)할 수 있는 라이브러리의 통합체라 할 수 있다.

자바스크립트 프레임워크는 날로 그 활용성이 높아가는 자바스크립트의 구현을 좀더 쉽고 빠르게 하면서 개발 차원에서의 효율성과 사용 차원에서의 편의성을 높이고자 하는 목적으로 개발되었다.

대표적인 자바스크립트 프레임워크, Angular와 React #

Angular #

단일 페이지 애플리케이션을 더욱 쉽게 작성하는 것을 목표로 하는 자바스크립트 프레임워크는

구글이 지원하고 있는 오픈소스 웹 어플리케이션 프레임워크로 Single Page Application 형태의 웹 어플리케이션 개발 프레임워크이다. React에 비해 활용의 자유도가 낮은 편이지만 자바스크립트 프레임워크 중 가장 큰 커뮤니티를 구축하고 있으며, 데이터 중심적, 테스트 주도적, 선언적 HTML이라는 특성을 갖추고 있다.

React #

페이스북에서 만들고 있는 자바스크립트 라이브러리로, 데이터가 지속적으로 변화하는 대규모 애플리케이션을 구축하기 위해서 구축되었다.

기존의 Angular와 Ember와 같은 자바스크립트 프레임워크가 서버를 보조하던 역할에서 벗어나 해시나 HTML5 History API 등 을 통해 상태별 고유 주소도 구현하는 등의 특징이 생겨 클라이언트 라이브러리 페이지가 렌더링에도 관여하게 되면서 검색엔진 최적화 및 성능 문제가 발생하게 되었고 이에 대한 극복을 하기 위한 목적으로 React를 개발하게 되었다.

Angular의 특징 #

Two Way Data-Binding #

전체 코드의 대부분을 차지하고 있는 특징으로 Model과 View의 데이터를 연결하여 한 쪽에서 데이터 값이 변화하면 다른 쪽에서도 바로 업데이트가 가능하게 해준다.

Dependency Injection #

컴포넌트들 간의 서비스 사용 및 의존성 관리가 용이하고, 코드 상에서 밀접하게 연관되어 있지 않은 컴포넌트를 테스트 하기가 쉽다.

Directives #

자신의 용도에 맞게 커스텀 HTML tag를 제작하여 사용할 수 있게 해준다.

React의 특징 #

JUST the UI #

오직 UI컴포넌트(UI구성단위)를 만들기 위한 라이브러리

Virtual DOM #

DOM Tree와 같은 구조체를 Virtual DOM으로 가지고 있다. Virtual DOM은 가상의 HTML element들을 가진 상태에서 렌더링을 통해 DOM 조작 등 필요한 부분만을 업데이트한다. 일관성이 있어 브라우저에 의존적이지 않고 테스트가 쉬운 장점이 있으며, 메모리 상에 DOM을 구성하고 구성한 대상을 비교하여 업데이트된 부분만 갱신하기 때문에 속도가 빠른 장점이 있다.

DATA Flow #

데이터의 단반향 흐름을 지향하기 때문에, 양방향 데이터 바인딩을 사용하는 Angular.js처럼 코드의 양이 줄지는 않는다. 하지만 모델 이 단방향 흐름이기 때문에 모델 컴포넌트가 데이터를 UI 컴포넌트로 전달하는 쉬운 관리 애플리케이션을 만들 수 있다는 장점이 있다. 또한 이벤트를 통해 하위 컴포넌트의 변화를 감지하는 특징을 갖추고 있다.

참고문헌 #

http://asfirstalways.tistory.com/65 JS프레임워크 특집 / _JBee

Suggested Pages #

• 0.025 Transpiler
• 0.025 Babel
• 0.025 JS
• 0.025 AngularJS
• 0.025 SPA
• 0.025 AngulaJS
• 0.013 컨트롤러
• 0.013 MVVM
• 0.013 JavaScript
• 0.013 모델
• More suggestions...