개탕 IT FACTORY

Vue.js란 무엇일까? 본문

Front-end/Vue.js

Vue.js란 무엇일까?

rendar02 2019. 1. 19. 01:52
반응형


Vue.js란


Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구  지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.

숙련된 프론트엔드 개발자이고 Vue를 다른 라이브러리/프레임워크와 비교하고 싶다면 다른 프레임워크와의 비교를 확인하십시오.

-Vuejs 공식문서(https://kr.vuejs.org/v2/guide/index.html)에 나와있는 내용입니다.

특히나 Vue.js 같은경우 가장 핫한 자바스크립트 프레임워크입니다. 

(위가 Vue.js 깃허브 아래가 React 깃허브)

위 사진의 Start수가 Vue가 압도적으로 많습니다 (사실 얼마전까지는 React가 많았지만...)

그만큼 관심이 많고 핫한 프레임워크입니다. 

https://2018.stateofjs.com/front-end-frameworks/overview/ 

2018년 자바스크립트 집계사이트에서 Vue는 프론트엔드 프레임워크에서 상당히 많은사람들이 배우고 싶다는 이야기를 했습니다. 

그렇지만 관심이 많은것뿐이지 많은 커뮤니티와 질문 혹은 생태계는 React를 따라잡을수 없습니다 

사실 React는 검색몇번만하면 많은 질문과 예제가 있지만 Vue같은경우 많지가 않습니다 ㅠ



그럼 왜 다들 Vue를 배우고싶어할까요? 다른 좋은 프레임워크도 많은데 

1. 배우기가 쉽다.

-프로그래밍의 기초만 아는 입문자도 충분히 쉽게 배우고 

실무 개발자 또한 몇시간이면 배울수있습니다.

2.리액트(React)와 앵귤러(Angular)에 비해 성능이 우수하고 빠릅니다 

3.리액트의 장점과 앵귤러의 장점을 갖고 만들어졌습니다

-앵귤러의 데이터바인딩 특성과 리액트의 가상돔(Virtual DOM) 기반의 렌더링 특성을 가지고있습니다.


무엇보다 첫번째 배우기가 쉽기때문에 전공자,실무자,비전공자들도 흥미를 가지면서 배울수있는것이죠 


Vue.js는 MVVM 패턴의 뷰모델에 해당하는 화면단 라이브러리입니다.

mvvm에 대한 이미지 검색결과


View - View Model - Model 

View : 사용자에게 보이는 화면 (HTML)

View Model : 뷰와 모델의 중간영역 (돔리스너,데이터바인딩제공)

Model : 데이터를 담는 용기 (보통 데이터베이스 등)


이런방식으로 개발하는이유는 화면 요소를 제어하는 코드와 데이터 제어 로직을 분리하여 더 직관적으로 보이그 위함입니다. (예로는 안드로이드가 있네요 XML과 자바코드를 분리한것같은)


Vue는 컴포넌트기반의 프레임워크입니다 

리액트도 마찬가지지만 컴포넌트 기반입니다 


컴포넌트는 레고와 같습니다 레고를 잘 조합해서 조립하면 원하는 모형을 만들듯 컴포넌트를 조합하여 화면단을 만드는것입니다.

각각의 컴포넌트는 컴포넌트로 연결되어 있습니다 

예를들자면 Content 안에 event 컴포넌트와 list컴포넌트가 있는것 처럼 event와 list는 Content 컴포넌트에 연결되어 있는것입니다 -> 이것에 대해선 다시 추후에 설명하겠습니다 


참조 : Vue.js 공식문서(https://kr.vuejs.org/)

         Vue.js 입문 책



반응형

'Front-end > Vue.js' 카테고리의 다른 글

뷰 컴포넌트  (0) 2019.01.27