brunch

You can make anything
by writing

C.S.Lewis

by 윤형도 Aug 12. 2018

VUE.JS 란

vue.js 간단한 설명

-- 주관적인 내용만 들어가 있으므로 가볍게 읽어주세요--



최근 웹 즉 프론트 엔드를 개발한다고하면 

angular,react 그리고 vue라는 

javascript 언어 기반 프레임워크를 사용하여 개발한다고 합니다.


이전 까지만 해도 html,css,javascript, jquery 를 이용하여
프론트엔드 부분을 개발하는데 큰 지장이 없었고

생태계도 활성화 되어 있었습니다.

(2018-08-12일 기준 github에 jquery로 검색해본 결과

165,132개의 플러그인이 존재하고 있습니다.)


제일 큰 문제점으로는 데이터바인딩, 돔 관리 등을 들 수 있습니다.


1.데이버 바인딩

jquery를 통해 data를 UI에 출력할때 다음과 같이 append를 주로 사용하게 됩니다.

이 방법이 불편하여 UI를 미리 짜두어 UI와 데이터를 연결해주는

jquery-tmpl이라는 데이터를 바인딩 할 수있는

플러그인이 존재하고 있으나 크게 활성화가 되지 않았습니다.



보통 다음과 같이 append를 통해서 추가를해줬습니다.



결과


angular,react,vue 모두 이 부분을 간소화해줍니다.

VUE를 예를들면


다음 처럼 {{item.text}} 와 같은 방법으로 데이터를 바인딩해 줄 수있습니다.


2.DOM(Document Object Model) 관리

javascript에서는 트리구조를 통해 DOM을 관리합니다.

하지만 돔에 있는 데이터 혹은 UI가 변경되거나 접근할 때 비효율적이라고합니다.


그래서 React와 Vue.js에서는 Virtual DOM(가상 돔)이라는 방식을 사용합니다.

가상의 DOM을 하나더 두어 변경사항을 Virtual DOM에서 처리합니다.

그래서 가상DOM과 실제 DOM을 비교하여 DOM의 렌더링 갱신을 효율적으로 하는 방식으로

성능 향상을 시켰습니다.



https://kr.vuejs.org/v2/guide/index.html


작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari