프론트엔드 프레임워크(Front-End Framework) 란?

참고 : 프레임워크(FrameWork) 란?

지난 글에서 프레임워크에 대한 글을 다뤄보았다. 이번 글에서는 그 중에서도 MVC Model2의 View에 해당하는 개발에 사용되는 Front-End 프레임워크에 대해 공부해보려한다. 모든 Front-End 프레임워크는 다음 3가지 특징을 갖고 있다.

 

1. 컴포넌트(Component)

컴포넌트란 '소프트웨어의 부품'이라고 할 수 있다. 표준으로 정의된 규약 하에서 우리는 이 모듈을 애플리케이션의 부품처럼 재사용할 수 있다. JavaScript 프레임워크에서는 JSX(JavaScript XML)이나 HTML 템플릿을 주로 사용한다.

 

2. 라우팅(Routing)

프레임워크는 Client-Side 라우팅을 생성하고 관리할 수 있는 API를 제공한다.*

 

3. 상태관리(Managing State)

프레임워크는 컴포넌트 상태를 관리해줄 수 있다. 이를 통해 컴포넌트끼리의 데이터 공유가 가능해진다. React.js의 Context API와 Angular JS의 Service등이 이에 해당한다. 규모가 커질 경우 외부 라이브러리(Redux)를 사용하여 상태를 관리할 수도 있다.

 

 

이 3가지가 Front-End 프레임워크의 핵심이지만 직접 활용 해보기 전까지는 정확하게 이해하기 어렵다. 어떤 프레임워크를 사용하여 이를 공부할 수 있을지 프레임워크의 종류에 대해서도 한번 공부해보자.

 

종류

1. React.js

React.js는 동적 사용자 인터페이스 개발을 위해 Facebook에서 만든 JavaScript 라이브러리다. 데이터 변경이 잦은 큰 웹 애플리케이션 구축에 적합하다. 배우기 쉽고 유연성이 높아 선호도가 높다. 100% 오픈소스 라이브러리이기에 활용도도 높지만 접근성이 좋은만큼 공식문서가 부족하여 개발자로 하여금 체계적인 접근을 힘들게 만든다.

Company : Facebook, Instagram, Netflix, Dropbox, Airbnb, Microsoft 등

 

2. Vue.js

Vue.js는 2013년 출시된 프레임워크로 적응력이 뛰어난 사용자 인터페이스 및 정교한 단일 페이지 응용 프로그램을 만드는데 적합하다. 이전의 프레임워크들과 유사한 특성이 많고, 공식사이트에서 매우 정확한 문서를 제공해준다. 하지만 아직 시장점유율이 낮아 지식 네트워크 형성이 힘들다.

Company : Xiaomi, Alibaba, Grammarly, Adobe 등

 

3. Angular JS

Angular JS는 구글에서 만든 JavaScript 기반의 오픈 소스 프레임워크로 양방향 웹 애플리케이션을 만드는데 최적의 성능을 보여준다. JavaScript만을 확장하는 것이 아닌 HTML 자체에 대한 확장이 가능하다. 양방향 데이터 바인딩이 가능하여 앱에 대한 단일 동작이 가능하게 만들고 시장 점유율이 높다. 하지만 초반 학습의 러닝커브가 높고 양방향 데이터 바인딩에서 성능 저하의 문제가 발생할 수도 있다.

Company : Youtube, Paypal, Google, Nike, Telegram 등

 

참조 : artjjong.tistory.com/6

프론트엔드의 프레임워크