javascript

vue.js에 대해

Chris.Ko 2023. 1. 17. 16:48

vue.js는 사용자 인터페이스(UI) 및 단일 페이지 애플리케이션(SPA)을 구축하기 위한 Javascript의 프레임워크이다. MVVM(Model-View-ViewModel) 아키텍처 패턴을 활용합니다. 

 

SPA - Single Page Application

SPA는 단일 페이지 애플리케이션으로 페이지 하나에서 동작하는 애플리케이션이다. SPA는 제일 처음 웹사이트에 접속했을 때, 웹사이트 전체에 필요한 모든 웹 자원을 서버로부터 가져와서 로딩을 하고, 그 다음에 페이지를 이동 및 전환하는 행동이 일어나면 웹 페이지 전체가 바뀌는 것이 아니라, 처음 접속했을 때 로딩 된 페이지 중에서 변경이 필요한 부분만 바뀌게 된다.

그렇기 때문에 페이지 전환 속도가 굉장히 빠르고, 이미 로딩된 자원을 다시 서버로부터 받아 올 필요가 없기 때문에 웹 자원을 굉장히 효율적으로 관리할 수 있게 된다.

단점도 존재한다. 사용자가 웹사이트에 처음 접속하면 사이트 이용에 당장 필요하지 않은 모든 웹 자원까지 로딩하기 때문에 화면 로딩 속도가 느리고 많은 웹 자원을 가져와야 하는 단점이 있다.

 

Vue.js 장점 

  • 직관적이고 낮은 러닝 커브
  • 재사용을 통한 애플리케이션을 개발 기간 단축 및 양질의 코드를 생산할 수 있음(Vue에서는 Component를 통해 재사용성을 극대화)
  • 데이터 바인딩과 가상 돔을 모두 가지고 있음

Angular가 나오고 데이터 바인딩, 정확히는 양방향 데이터 바인딩을 제공해 주었다. (양방향 데이터 바인딩: 어느 한쪽의 변경이 일어나면 연결된 쪽에 자동으로 반영된다.) 단방향 데이터 바인딩 시절에 다른 쪽으로 데이터를 넘기기 위해 작성했던 코드들이 필요가 없어져서 개발 시간 단축과 코드의 간결성을 가져왔다. 하지만 속도(성능)부분에서는 단점이 존재했다.

이런 단점을 개선한 것이 React이다. React는 angular의 DOM문제를 개선하기 위해서 Virtual DOM(가상 돔) 개념을 제공한다. Virtual DOM은 실제 DOM 문서를 추상화하여, 변화가 많은 화면(View)을 DOM에서 직접 처리하는 방식이 아닌, 가상의 DOM을 만들어서 메모리에서 처리한 다음 실제 DOM과 동기화함으로써 기존 DOM이 가지고 있던 단점을 개선하고 웹에서는 고성능 애플리케이션을 구현할 수 있도록 설계 되었다.

Vue는 Angular가 가지고 있는 데이터 바인딩의 장점과 React가 가지는 Virtual DOM의 장점을 모두 수용해서 개발된 프레임워크이다.

 

  • 여러명이 개발시 코드 규격을 맞추기가 쉬움

Vue.js 특징

 

1. MVVM 패턴

MVVM 모델은 프로그래밍 로직과 화면에 해당하는 View(UI)를 분리해서 개발하기 위해 설계된 패턴이다. MVVM 패턴 View와 Model 중간에 ViewModel을 둠으로써 데이터 바인딩 처리, 성능 및 개발의 편의성을 제공하기 위해 만들어졌다.

 

1) Model (비즈니스 규칙, 데이터 접근, 모델 클래스)

2) View (사용자 인터페이스)

3) ViewModel (모델과 뷰 사이의 인터페이스)

 

Vue.js 라이프사이클

beforeCreated, Created, beforeMount, Mounted, destroyed 훅이 있다.

 

created

created는 Vue 인스턴스가 생성되고, 인스턴스에 reactivity가 적용되서 컴포넌트의 data property가 setter와 getter로 정의된 후에 작동하는 훅입니다. created 훅부터 컴포넌트의 data에 접근할 수 있다.

컴포넌트가 생성되는 시점인 created훅에서 서버로 데이터를 요청한다. 컴포넌트의 data property에 서버에서 받은 데이터를 대입하는 로직이 컴포넌트 상태 값을 초기에 대입해 줄 수 있다. 아직 virtual DOM에 반영되지 않은 인스턴스이고, 실제 DOM에도 없는 컴포넌트여서, 컴포넌트 내부의 노드를 접근하는 것은 불가능하다.

 

beforeMount

DOM에 부착되기 직전에 호출되는 beforeMount 훅이다. 이 단계 전에서 템플릿이 있는지 없는지 확인한 후 템플릿을 렌더링 한 상태이므로, 가상 DOM이 생성되어 있으나 실제 DOM에 부착되지는 않은 상태이다.

 

mounted

virtual DOM이 실제 브라우저 DOM에 Mounted되고 난 후에 동작하는 훅입니다. this.$el, data, computed, methods, watch 등 모든 요소에 접근이 가능하다.

 

일반적인 경우에, 부모와 자식 컴포넌트 간의 mounted 훅 순서는 위의 그림과 같다. 부모 컴포넌트의 mounted 훅은 항상 자식 컴포넌트의 mounted 훅 이후에 발생한다는 것을 알수 있다. 하지만 자식 컴포넌트가 서버에서 비동기로 데이터를 받아오는 경우처럼, 부모의 mounted 훅이 모든 자식 컴포넌트가 마운트 된 상태를 보장하지는 않는다. 따라서 이때는 this.$nextTick을 이용하면, 모든 화면이 렌더링 된 이후에 실행되므로 마운트 상태를 보장 할 수 있다.