[vue.js] Vue.js 란

Vue?

  웹개발을 목표로 하시는 분이라면 뷰제이에스에 대해 한번쯤은 들어보셨을 겁니다. 유명한 자바스크립트의 프레임워크는 대표적으로 리액트와 앵귤러가 있는데요. 저도 잠깐 리액트와 앵귤러2는 공부했었는데 두 프레임워크를 시작하기 위해 필요한 사전 개발 지식들이 많아서 공부하다 중지했었습니다. 자바스크립트를 잘 모르거나 개발을 시작한지 얼마 안됐다면 두 프레임워크는 배우기엔 진입장벽이 다소 높습니다. 더군다나 앵귤러2는 타입스크립트 기반이기 때문에 자바스크립트보다 더 높은 이해수준을 요구합니다. 이러한 요인이 vue.js 를 더 유명해지게 만들었는데요. vue.js 는 다른 자바스크립트 프레임워크에 비해  비전공자들도 배우기 쉽게  개발할 수 있도록  만들어졌다고 합니다. 뷰는 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔(DOM) 기반 렌더링 특징을 모두 가지고 있습니다. 또한 성능이 우수하고 빠릅니다. 이러한 장점 덕분에 뷰는 가장 가파른 상승세를 보이고 있습니다.

MVVM 패턴?

  vue 는 mvvm 패턴을 이용합니다. mvvm 패턴은 화면을 모델(Model) - 뷰(View) - 뷰모델(ViewModel) 로 구조화해서 개발하는 방식을 말합니다. 다시 말하면 프론트 로직과 백엔드 로직을 분리하겠다!  라는 뜻인데요. html, css 같이 사용자에게 보여지는 모습은 뷰가, 데이터베이스에서 데이터를 가져와 조작하는 것은 모델이, 그리고 그 둘 사이에서 데이터를 바인딩해주고 뷰에 달아놓은 리스너 역할은 뷰모델이 담당합니다. 이렇게하면 화면의 요소들을 다루는 코드와 데이터를 다루는 코드를 분리시켜 코드를 직관적으로 볼 수 있고 유지 보수가 용이합니다.

양방향 데이터 바인딩 & 단방향 데이터 흐름

  자바스크립트의 대표적인 프레임워크에는 앵귤러와 리액트가 있습니다. 앵귤러의 장점은  양방향 데이터 바인딩 방식 을 사용하는 것입니다. 양방향 데이터 바인딩은 화면에 표시되는 데이터와 모델의 데이터 중 하나가 변경되면 자동으로 다른쪽의 데이터도 변경되는 것입니다. 리액트의 장점은 단방향 데이터 흐름과 가상 돔 렌더링 방식입니다. 리액트는 데이터는 항상 상위 컴포넌트에서 하위 컴포넌트로 한 방향으로만 전달되며 가상 돔을 사용해 특정 돔 요소가 추가되면 화면 전체를 다시 그리는 것이 아니라 일부만 갱신하는 것입니다. 뷰는 앵귤러와 리액트의 장점을 모두 가지고 있습니다. 

지금까지 뷰에 대해 알아보았습니다. 앞으로의 포스팅에서 뷰를 이용해 개발하는 방법에 대해 포스팅할 예정입니다.