[JavaScript] Vue.js

Vue.js를 왜 쓰는지?

기존 MVC의 문제점인 서버와 통신해서 사이트 화면에 뭔가 변화를 주려면 페이지를 통째로 로드했어야함(페이지를 로드하기위해 서버가 데이터베이스를 다시 불러오고 이 데이터들을 HTML,CSS,Javascript로 작성해서 사용자의 브라우저로 보내주는 과정을 반복하여 비효율적이고 데이터 낭비도 커짐)

ajax란 기술이 나온 이후로는 http 통신으로 데이터를 전송하고 결과를 받아와서 사이트의 일부만 변경하라고 자바스크립트로 명령을 줄 수 있게 됨. 대신 일일이 프로그래밍해야하는 불편이 있음.

 

예전에는 PC용 웹사이트 하나만 만들면 되었지만
현재는 모바일 사이트, 아이폰과 안드로이드용 앱과 서버까지 개발해야함.
먼저 pc용 사이트 접속이 들어오면 데이터베이스에서 정보를 찾아서
그걸로 HTML, CSS, Javascript로 렌더링하고 이걸 PC의 브라우저로 보내줌.
기존 방식을 이용하면 모바일용 사이트도 이 과정을 다 프로그래밍 해야함.
안드로이드나 iOS의 네이티브 앱은 앱에서 서버에 정보를 요청하면 데이터베이스에서 정보들을 찾아서 앱으로 정송하고 앱에서는 이 정보들을 받아서 안드로이드나 iOS의 방식으로 화면에 띄워줌.

여기서 겹치는 부분을 최소화하고 업무를 깔끔하게 분화하기 위해서
안드로이드와 iOS에는 자체적인 SW와 시스템이 있어서 서버로부터 데이터만 전송받으면 화면이 보여질 수 있다.
만약 웹에서도 그게 가능하다면, 즉 서버에서 데이터만 보내줘도 이걸 브라우저에서 HTML,CSS,JS로 랜더링해낼 수 있다면 이제 서버는 어디서 정보를 요청하든 동일한 작업을 수행해서 데이터를 전송하면 된다.

 

따라서 브라우저에서도 동작하는 이 자바스크립트란 언어로 만든 SPA 프레임워크가 Vue

 

---

서버는 정적 웹처럼 HTML,CSS,자바스크립트로 된 코드들을 브라우저에 전송한다.
여기 포함된 자바스트립트 코드는 주어진 데이터에 따라 HTML 웹페이지를 랜더링해내는 것이다.
기존의 동적 웹에서 서버가 하던 일을 이제는 브라우저가 하는 것.
(Vue코든느 서버가 아니라 브라우저에서 돌아감)
SPA는 서버에서 데이터를 받아와야할 때마다 요청을 보내서 반환된 데이터로 사이트 내용을 갱신한다.
이렇데 돠면 사이트에서 뭘 할 때마다 새로 접속하지 않고 한번 로드된 화면에서 많은 기능을 사용할 수 있다.
그래서 Single Page Application이라 부르는 것.



Vue.js 의 아키텍쳐
웹페이지는 Dom과 자바스크립트의 연합으로 만들어지게 되는데 Dom이 View 역할을 하고, 자바스크립트가 Model 역할을 한다.
뷰모델이 없는 아키텍처에서는 getElementById 같은 Dom API를 직접 이용해서 모델과 뷰를 연결 (단점 : 코드양이 증가)
하지만 모델과 뷰를 연결하는 뷰모델 역할을 대신 수행해주는 것이 MVVM 모델이고 Vue.js 가 하는 역할임
MVVM 모델의 VM을 Vue.js가 담당

Vue 인스턴스
- Vue 인스턴스 : Vue 생성자 함수로 뷰모델(View Model, VM) 을 만드는데 이것이 Vue 인스턴스다.
- 이것은 자바스크립트 객체인데 내부적으로 연결될 템플릿이 필요하다. 그것을 el 키에 셀렉터 값(id 면 #, class 면 .)으로 넣어주면 된다.

Vue 컴포넌트
- 컴포넌트 : 재사용 가능한 컴포넌트 제작 기술의 집합을 말하는 것
- Vue 컴포넌트 제작 방법 : Vue.component
- Vue 인스턴스는 모든 컴포넌트의 상위 컴포넌트로서 자식 컴포넌트를 여러개 가질 수 있는데 이 component 함수로 만들어 자식으로 사용한다
- Vue 인스턴스를 만들 때와 다른점은 data 부분이다. 컴포넌트는 재사용이 가능하기 때문에 고유한 데이터를 가지고 있어야 한다. 그래서 매번 함수를 실행한 결과 새로운 객체를 반환하도록 했다. (Vue 인스턴스에서는 객체를 할당했다)

출처: https://88240.tistory.com/480 [shaking blog]

[Vue.js] Vue.js 아케텍처와 Vue 인스턴스, 컴포넌트는?

Vue.js 생명주기

출처 : hyeooona825.tistory.com/40

[vue.js] vue 인스턴스 생명주기 (life cycle)

 

React와 Vue의 공통점과 차이점

React와 Vue는 컴포넌트 기반, Virtual DOM 방식이라는 점에 공통점이 있고, 가볍고 빠르다는 평을 받습니다. 두 프레임워크의 공통된 속성은 아래와 같습니다.

1. 컴포넌트 기반
   React와 Vue 모두, 웹 UI를 작은 컴포넌트 단위로 구성합니다. 컴포넌트는 다른 프로젝트에서도 재사용할 수 있고, 컴포넌트 캡슐화와 확장이 가능해 개발이 유연해지는 장점이 있습니다.
   　
2. Virtual DOM
   Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다.
   
   먼저 DOM에 대해 잠시 언급하자면, 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거칩니다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정역시 20회 다시 이루어 집니다. 작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하됩니다.
   
   Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다. 따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 됩니다.
   
   React와 Vue는 모두 Virtual DOM 방식을 통해 성능을 향상 시킵니다.

참고) 가상 DOM 방식
웹 애플리케이션을 개발하고 사용하는 방식은 웹 2.0(개방,참여,공유의 정신을 바탕으로 사용자가 직접 정보를 생산하여 쌍방향으로 소통하는 웹 기술을 말한다.) 이전과 다릅니다. 웹 애플리케이션은 브라우저가 웹 서버에 요청한 페이지나 이미지 정보를 받거나, 폼 입력 데이터를 검증하거나, 간단한 애니메이션 등을 표현하는 정도였지만, 웹 2.0 이후 자바스크립트는 웹 페이지를 새로고침하지 않아도 웹 서버로부터 새로운 데이터를 받아 표현할 수 있게 되었고 자바스크립트로 DOM 을 동적으로 수정할 수 있게 되었습니다.


출처: https://webclub.tistory.com/602 [Web Club]

Vue.js 를 시작하기에 앞서 ...

위와 같이 두 프레임워크는 공통된 기반을 공유하고 있어 유사한 측면이 많지만, 각각 구별되는 특징 또한 존재합니다.
Vue

• 단일 파일 컴포넌트(Single File Component)
  Vue는 단일 파일 컴포넌트 기반의 프레임워크입니다. 웹의 뷰(view)를 구성하는 요소인 HTML, CSS, JavaScript 코드를 .vue 확장자를 가진 하나의 파일에 모두 정의하는 방식입니다. 이러한 관리 방식은 적당한 규모의 프로젝트에서 관리의 생산성을 높이고, 협업을 수월하게 한다는 장점이 있습니다.

• HTML 기반 템플릿 구문
  Vue는 개발한 프론트엔드 파일을 사용자가 볼 수 있도록 브라우저 화면에 렌더링하는 과정에 템플릿이란 문법을 사용합니다. 이 템플릿을 구성하는 문법이 HTML 기반으로 이뤄져 있어 배우기 쉽다는 특징이 있습니다.

React

• 거대한 커뮤니티
  페이스북의 지원을 받는 만큼 지속적인 버전 관리가 이루어지고, React 사용자가 많아 다양한 레퍼런스, 확장 라이브러리가 많습니다. 또한 이미 React를 사용하고 있는 개발 프로젝트가 많기 때문에 개발자 채용 시, React를 다룰 줄 안다는 것이 장점으로 작용할 수 있습니다.
• JSX 기반 컴포넌트 구문
  템플릿 방식으로 관리하는 Vue와는 달리, React는 JSX 코드로 컴포넌트를 작성하고 컴포넌트의 상태(State)를 변화시키지 않고 관리합니다. 변화가 일어나면 실제 브라우저의 DOM에 새로운 것을 적용하는 것이 아니라, 자바스크립트로 이루어진 Virtual DOM에 렌더링을 하고 기존의 DOM과 비교하여 변화가 일어난 곳만 업데이트 합니다.
  
  템플릿은 재구조화가 어렵고, 에러에 취약하지만, React는 상태를 고유 속성대로 유지하기 때문에 대규모 프로젝트에서도 관리가 수월하고 테스트에도 적합합니다.

출처: library.gabia.com/contents/infrahosting/8284/

가비아 라이브러리