Vue.js

[Vue.js]Vue 개념 및 특징

Stater 2018. 11. 21. 21:27

Vue.js란 무엇인가?


-웹 페이지 화면을 개발하기 위한 프런트 엔드 프레임 워크.


-프레임 워크: 개발자들의 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의 해놓은 도구


-라이브러리: 자주 사용 되는 기능들을 모아 재활용 할 수 있도록 정리한 기술 모음집



*Vue 장점

-배우기가 쉽다.

-리액트와 앵귤러 비해 성능이 우수하고 빠르다.

-리액트의 장점과 앵귤러의 장점의 결합체이다.

▶ 이유: 뷰는 앵귤러의 양방향 데이터 바인딩과 리액트의 단방향 데이터 흐름의 장점을 모두 결합한 프레임 워크


*양방향 데이터 바인딩: 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것


*단방향 데이터 바인딩: 컴포넌트의 단방향 통신을 의미한다. 데이터의 전달이 있을 때는 항상 상위컴포넌트에서 하위 컴포넌트로 전달 되도록 구조화 되어있다.


*Vue.js의 특징

-MVVM 패턴의 뷰 몯레에 해당하는 화면단 라이브러리.

-컴포넌트 기반의 프레임워크

-컴포넌트 기반의 개발의 장점: 재사용성을 높일 수 있다.

        HTML 코드에서 화면의 구조를 직관적으로 볼 수 있다.

*용어 및 설명

뷰:사용자에게 보이는 화면

돔: HTML요소의 정볼르 담고있는 데이터 트리

돔리스너: 돔의 변경내역에 즉각적으로 반응하여 특정 로직을 수행하는 장치.


모델: 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장

데이터 바인딩: 뷰에 표시되는 내용과 모델의 데이터를 동기화

뷰 모델: 뷰와 모델의 중간 영역, 돔리스너와 데이터 바인딩을 제공하는 영역


*개발환경 설정

-크롬브라우저 설치

-VScode or Atom

-Node.JS

-Vues.js Devtools

  크롬 확장플러그인 설치



*Node.js Version 확인하기

명령어:  node -v





반응형