Vue.js란 무엇일까

vue.js에 대해 "vue.js 철저입문" 책을 정리하고 저의 생각을 정리한 내용입니다

Vue 의 시작

프론트앤드 개발자로서 시작을 하게 되었지만 , 공부하던 react가 아니라 vue를 접하게 되었다.
react와 vue는 같은 결을 가진다고 하지만 여러모로 어쨌든 공부를 해야한다는 생각에 다시금 기록을 시작하였다 ! vue를 공부하는것이란 ...!?!

웹프론트앤드의 시작

웹프론트 엔드의 개발의 시작은 엄청나게 고도화 되고 , 다양해졌다
기존에 백엔드에서 맡았던 부분들은 많은 부분 프론트엔드에서 처리하게 됐다.
웹은 1991년 처음 시작이 되었다. 초기의 웹은 단순한 작업만을 진행했었고 고도화된 일은 하지 못했었다.
1990년 후반부터 CSS와 자바스크립트가 나오기 시작했고 이로인해 웹페이지를 다양하게 구현하게 되었다.
이당시의 웹프론트개발자라 하면 단순하게 시각적인 효과만을 담당했던것 같다.
그러다 ajax를 통해 서버와 비동기로 통신이 가능하게 되었고, 구글 지도맵에서 그러한 것을 구현했다.
이것은 큰 충격이었다고 하는데 단순히 화면만 구현하다가 서버와 비동기적으로 통신을 하는것은 충격으로 다가왔을것 같다.
그 이후 HTML5, NODE.js 의 등장! 특히 node.js의 등장으로 이해 큰 변화를 가져왔다고 한다. 이때 자바스크립트의 가장 큰 비약적인 발전이 있었다고 한다.
그리고 ES5 js 문법으로 인해 자바스크립트의 문법적인 확대 뿐만아니라 프론트개발자로서 알아야하는 것들이 더 많아졌다.

이러한 발전으로 인해 점점 프론트앤드의 관련된 기술이 고도화 되었고, 그에 따라 복잡한 요구사항이 생겼다. 그로인해 발전한것이 프레임워크 즉 우리가 현재 프론트개발에서 많이 사용되고 있는 REACT와 VUE 이다.

vue의 특징

1. 낮은 학습비용

   vue는 확실히 러닝커브가 쉽다고 한다.

2. 컴포넌트를 지향, 재사용이 가능하다

   이건 react와 vue가 동시에 지니는 특성인것 같다.

3. 데이터 바인딩

   vue에 가장큰 장점아닌 장점은 데이터 바인딩이 양방향 바인딩이라는 사실이다. 그에 비해 react는 데이터는 단방향 바인딩이다. 리액트와 뷰의 가장큰 차이점이 아닐까 싶다. 양방향으로 데이터를 바인딩 하는것은 자바스크립트의 데이터 값이 수정이 되면 돔 요소의 표시 내용이 수정되고, 사용자 입력이 감지될때마다 자바스크립트 데이터가 수정된다

vue.js의 기반 기술

1. 컴포넌트 시스템

뷰 또한 리액트처럼 컴포넌트 단위의 라이브러리다. 규모가 큰 시스템은 컴포넌트 단위 개발을 통해 좀더 수월하게 진행할 수 있다.
뷰는 단일 파일 컴포넌트라고 한다
단일 파일 컴포넌트가 무엇인가????라고 한다면 간단하게 생각해보면 html과 비슷한 구조를 지니는 컴포넌트 단위라고 할수 있다. 뷰의 컴포넌트는 html, css, js와 매우 비슷하다.
하나의 컴포넌트 안에 모든걸 다 담을 수 있다고 한다. html, css, js를 말이다.

2. 리액티브 시스템

리액티브 시스템이란 말이 참 어렵다
간단하게 설명하면 상태의 변화를 감지해 돔요소를 변화시키는 구조를 리액티브 시스템이라고 한다.
리액티브 시스템에서는 리액티브 프로퍼티와 와처가 한쌍을 이뤄서 구성한다고 한다.
아직은 잘 이해가 가지 않으므로 살짝 넘어가 보도록 한다.

3. 렌더링 시스템

뷰는 돔을 고속으로 렌더링 한다. 가상돔을 이용하기 때문이다. 이부분은 리액트의 핵심요소과 동일한 부분이라고 할 수 있다. 가상돔이 리액트와 뷰의 가장 핵심 요소이다. 가상의 돔을 만들어 돔의 변화를 감지해 변화가 있을때 재렌더링을 하는 방식이라고 할 수 있다. 뷰만의 특징이라고 하면 html과 가장 유사해 개발이 쉬운점이라고 할 수 있다.

vue.js 생태계

vue는 프레임워크냐 라이브러리냐 했을때 프레임 워크보다는 라이브러리에 가깝다
그렇다면 프레임워크와 라이브러리의 차이점은 무엇일까

프레임워크는 일정한 틀, 부품을 가지고 다양한 형태를 만드는것
라이브러리는 프로그램을 만들기 위해 사용하는 도구와 같은것
자유도에 있어서 라이브러리가 좀더 자유도가 높다

vue는 뷰계층에 초점을 맞추고 있어 라이브러리라고 한다.
그렇기 때문에 뷰를 제외한 다른 기능등을 추가적으로 이용하기 위해서는 뷰라우터와 같은 다른 라이브러리를 이용해서 구성해야한다.
또한 빌드 , 테스트, 개발환경 또한 구축을 해야한다.

vue에서 공식적으로 제공하는 것들이 있는데
vue Router : 뷰 라우터, 라우팅기능을 제공한다
vuex: 전역관리 상태 플러그인이다
vue Loader: 컴포넌트 고급기능을 이용하기 위한 웹팩용 로더 라이브러리
vue CLI : 템플릿 프로젝트 생성 및 프로토타입을 추가설정없이 가능하다
vue DevTools: 뷰 어플리케이션을 개발자도구로 디버깅할수있는 도구이다

그 이외에 제공하는 도구로는
nuxt.js, weex, onsen UI 등등이 있다.