이번에 알아볼 내용은 자바스크립트 기반 웹 프론트엔드 프레임워크이다. 대중적으로 가장 알려진 React, Angular, Vue.js가 무엇이고 어떤 특징을 갖고 있는지 알아보자.
우선, 프레임워크, 라이브러리란?
프레임워크
소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것
일반적으로 우리가 무엇을 해야할지 알려준다. 사용에 관한 best practice를 갖고있으며, 사용자 지원 도구를 제공한다. 이러한 사용자 가이드를 통해 생산성을 높이고, 쉽게 교육이 가능하다.
단점: 많은 코드 사용. 로딩이 김. 성능이 저하되는 우려가 있음.
라이브러리
라이브러리는 다른 프로그래머가 이전에 작성한 코드 세트로, 다른 프로그래머가 자신의 프로그램을 빌드하는 데 합법적으로 사용할 수 있음. 이 코드 재사용성은 코드 구조를 크게 개선하고 전체 프로세스를 더 빠르게 만듬.
프레임워크 vs 라이브러리
프레임워크와 라이브러리의 주요 차이점은 애플리케이션 제어에 관한 것이다. 한마디로
우리는 라이브러리가 무엇을 해야할 지 알려주고, 프레임워크는 우리가 무엇을 해야할지 알려준다.
React
2013년 페이스북이 만든 사용자 UI 구축 라이브러리
- JSX문법을 사용한다.
(JSX: 자바스크립트안에서 HTML 문법을 사용하여 view를 구성하게 하는 자바스크립트 문법) - component 기반 라이브러리
마치 객체지향언어 클래스 재활용처럼 HTML 코드를 분리하여 코드를 재사용 할 수 있게 하고, 유지보수성을 증가시킨다. - virtual DOM을 사용하여 불필요한 연산을 줄여 연산비용을 줄이고, 효율성과 속도를 개선할 수 있다.
- SEO 친화적
- React Native로 이전가능
Angular
2010년 Google에서 만든 프레임워크
-
최소한의 비용으로 고성능 및 기능성
그리고 Google에서 제공하므로 코드 품질과 고급 보안 기능을 보장할 수 있다. Angular JS를 사용한 웹 개발에는 타사 라이브러리를 더 적게 가져와야 하므로 앱 개발 비용이 크게 절감된다. -
유지보수 Typescript를 이용하여 쉬운 유지보수
-
재사용성
-
선언적 UI
-
단순한 아키텍쳐
Vue.js
Google 직원 Evan You가 만든 프레임워크 (Vue 에 Angular의 핵심기능이 포함된 이유)
- 성능향상
- 크기와 단순성
출처: https://gocoder.tistory.com/1867 [고코더 IT Express] , https://radixweb.com/blog/angular-vs-react-vs-vue
