on
Vue.js 란 무엇인가?
Vue.js 란 무엇인가?
Vue.js 란?
프로그레시브 프레임워크 Vue: 명시적 렌더링 - 컴포넌트 기반 - 클라이언트 사이드 라우팅 - 상태 관리
웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크 (화면단 라이브러리+프레임워크)
단일형 프레임워크와 달리, 점진적으로 채택할 수 있도록 설계된 프로그레시브 프레임워크
화면단 라이브러리를 중점적으로 지원하며, 프레임워크의 기능(라우터, 상태관리, 테스팅 등)을 쉽게 결합할 수 있는 형태로 제공
Vue.js의 장점: React vs Angular vs Vue
최근 프런트엔드 프레임워크 시장은 Angular, React, Vue 가 트렌드이다. 특히나 뷰의 인기가 무섭다. 2014년 릴리즈되어 빠르게 시장 점유율을 높여가던 뷰는, 깃허브 레파지토리의 스타 수 기준으로, 2020년 현재 가장 인기있는 프레임워크로 발돋움했다. 앵귤러와 리액트가 상대적으로 오래된 프레임워크인 만큼, 아직 잡 마켓에서는 Angular > React > Vue 순의 점유율을 보이고 있으나, 이 역시 vue 의 점유율이 점차 높아질 것으로 전망된다.
그렇다면 우리는 어떤 프레임워크를 써야할까?
뷰의 최대 장점은 쉽고 빠르다는 것이다. typescript, MVC 등 관련 개념을 알아야하는 앵귤러나, JSX가 필수적인 리액트와 달리 뷰는 특별히 요구하는 것이 없다. 앵귤러를 더 가볍게 쓰고 싶어서 만든 프레임워크인 만큼, '쉽고 빠르고 가볍게' 사용할 수 있다. 단, 단점 역시 존재하기 때문에 각 프레임워크의 장단점을 비교하여 프로젝트의 목적에 가장 부합하는 프레임워크를 선택해야 할 것이다.
Angular React Vue 용량/속도 500+KB 100KB 80KB 데이터 바인딩 데이터 바인딩 =>DOM 에 직접 접근하지 않고도 데이터 표현 가능 가상의 DOM 활용 반응적이고 조합 가능한 컴포넌트를 제공 데이터 바인딩 =>DOM 에 직접 접근하지 않고도 데이터 표현 가능 러닝커브 어려움(Typescript, MVC 등 관련 개념 학습 필요) 중간 (가이드라인이 자세히 제공되고 있음) 쉬움(가이드라인이 자세히 제공되고 있음, angular, react 에 비해 간단함) 특징 대규모 프로젝트에 적합 코드의 유연성 높음, 대규모 프로젝트에 적합 단순성 높음, 소규모 프로젝트에 적합
React Vue template 형식으로 앱 제작 별도의 변환작업 없이 브라우저에서 바로 동작 => 이해하기 쉽고 가독성 높음 / 런타임 에러가 나오기 쉽고, 재구조화와 테스트가 어려움 JSX를 사용하여 자바스크립트에서 DOM 생성 => 재사용성 높으며 테스트 용이 빠른 렌더링과 더 작은 용량 => 빠르고 경량의 앱 제작 가능 Vue보다 정밀한 렌더링 시스템 => 유지보수, 테스트 수월, 대규모 앱에 적합
Vue.js의 특징
UI 화면단 라이브러리
- MVVM 패턴(Model - View - ViewModel로 구조화)의 뷰 모델에 해당하는 화면단 라이브러리.
- MVVM 패턴이란? 마크업 언어나 Gui코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴. 즉, 화면 앞단과 뒷단의 로직을 분리하여 더욱 깔끔하게 코드를 구성하는 것
컴포넌트 기반 프레임워크
- 컴포넌트: 조합하여 화면을 구성할 수 있는 블록 ex) header, content(aside, list), footer
- 코드에서 화면의 구조를 직관적으로 파악할 수 있어, 정해진 방식대로 컴포넌트를 활용하여 빠르게 구현할 수 있다.
리액트와 앵귤러의 장점을 가진 프레임워크
- 앵귤러: 양방향 데이터 바인딩 / 리액트: 단방향 데이터 흐름 의 장점을 모두 결합.
- 양방향 데이터 바인딩: 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어, 한쪽이 변경되면 다른 한 쪽도 자동으로 변경되는 것
- 단방향 데이터 흐름: 컴포넌트의 단방향 통신 (항상 상위 컴포넌트 -> 하위 컴포넌트 방향으로 전달된다.)
References:
https://kr.vuejs.org/v2/guide/index.html/
https://www.codeinwp.com/blog/angular-vs-vue-vs-react/
https://joshua1988.github.io/web_dev/vue-or-react/
from http://moonong.tistory.com/2 by ccl(A) rewrite - 2021-10-28 00:26:40