Vue.js

Vue.js 기초 개념

우주알 2023. 5. 14. 22:34
Vue.js는 화면의 일부분만 업데이트할 수 있는 가상 DOM(Virtual DOM) 기반의 리액티브 데이터 바인딩 시스템을 제공하여 개발자들이 유연하고 효율적으로 애플리케이션을 구축할 수 있도록 도와주는 프레임워크이다.
Vue.js를 이용한 개발 시 알아두어야 할 기초 개념들을 정리하려 한다.
<목차>
1. SPA
2. MVVM 패턴
3. 뷰인스턴스/뷰컴포넌트

SPA(Single Page Application)?

한마디로 하면, 단일 페이지 애플리케이션. 멀티 페이지 애플리케이션(MPA)와 대조되는 개념이다. 웹애플리케이션의 동작 방식 중 하나로, 사용자의 요청에 대해 페이지 별 template을 반환하는 것이 아니라, 서버에서 최초 1장의 HTML만 전달받아 모든 요청에 대응하는 방식. 클라이언트 측에서 페이지의 렌더링을 담당함으로써 페이지를 새로고침하지 않아도 사용자의 요청에 대응할 수 있어 사용자 경험을 높인다.

(※CSR 방식을 말한다)

 

잠깐, CSR이 무엇인지 정리하고 가자면,

Client Side Rendering 으로 Server Side Rendering 즉, SSR방식과 대조되는 개념이다.
- CSR : 서버로부터 최초 한장의 HTML 빈 문서를 받아온다. 그리고, JavaScript를 사용하여 필요한 부분만 다시 렌더링한다.

- SSR: 서버에서 이미 사용자의 요청에 맞는 html을 렌더링 해서 넘겨주는 방식. 따라서 전달 받은 새문서를 보여주려면 당연히 새로고침을 해야한다.

 

SSR은 초기 로딩 속도가 빠르고 SEO에 유리하지만, 서버 부하가 많이 걸리고 SPA와 같은 동적인 UI 구현이 어렵다. CSR은 초기 로딩 속도가 느리고 SEO에 불리하지만, 서버 부하가 적고 동적인 UI 구현이 쉽다.

 

(의문점? SPA이면 CSR이고, SSR이면 MPA인가? 전혀 관계가 없는 이야기인가? -> 찾아보기)

 

MVVM 패턴?

소프트웨어 개발에서 사용되는 소프트웨어 아키텍처 패턴 중 하나로, Vue.js 는 이 MVVM 패턴에 기반하여 만들어진 프레임워크이다. Model-View-ViewModel의 약자로, Model-View-ViewModel의 약자로, Django에서 사용했던 MTV(MVC) 패턴과 유사하지만, View와 Model 간의 상호작용을 ViewModel이 중개한다는 점이 다르다.

MVVM 패턴의 주요 구성 요소

  • Model
    • 애플리케이션의 데이터와 비즈니스 로직을 담당한다. Model은 일반적으로 데이터베이스, 웹 서비스, 파일 시스템 등과 같은 데이터 소스와 상호작용하여 데이터를 가져오거나 변경하는 역할을 한다.
  • View
    • 사용자 인터페이스(UI)를 나타낸다. View는 사용자에게 데이터를 표시하고, 사용자 입력을 받아 처리합니다. 일반적으로 HTML, XML, XAML과 같은 마크업 언어를 사용하여 작성되는 DOM 측을 의미한다.
  • ViewModel
    • View와 Model 사이의 매개체 역할을 한다. ViewModel은 View에 대한 데이터와 동작을 제공하며, View에서 발생한 이벤트와 명령을 처리한다. ViewModel은 Model로부터 데이터를 가져와서 View에 바인딩하고, View에서 발생한 이벤트를 처리하여 필요한 동작을 수행한다.

MVVM 패턴의 핵심 아이디어는 "데이터 바인딩".

ViewModel과 View는 양방향 데이터 바인딩을 통해 서로 상호작용하며,

ViewModel의 상태 변경은 자동으로 View에 반영되고,

View에서의 사용자 입력은 ViewModel의 데이터를 업데이트한다.

 

참고로, MVVM 기반 프레임워크로는 Vue.js 말고도 AngularJS, KnockoutJS 등이 있다.

 

내가 이해한 바>>

쉽게 생각하면 'View'는 HTML 과 CSS로 이루어진 UI영역(다르게 말하면 우리 눈에 보이는 부분이고 dom)이고, 'ViewModel'은 JavaScript로 구현된 로직을 담당하는 부분이고, 'Model'은 데이터의 저장, 수정, 검색, 삭제 등을 처리하는 파트 즉, '실제 데이터' 일반적으로는 json데이터 이다.

ViewModel은 View에서 발생한 이벤트를 감지하고, 필요한 데이터를 가져와 비즈니스 로직을 처리한 후, 처리 결과를 다시 View에 전달한다. 이 때, View 상의 컨트롤이나 속성과 ViewModel의 프로퍼티가 연결되어, 둘 간의 값 변경이 실시간으로 반영되는 것을 데이터 바인딩이라고 한다. 이 데이터 바인딩을 통해 뷰와 뷰모델은 서로의 상태를 공유하면서도, 서로를 완전히 분리된 객체로 유지할 수 있다.

 

뷰인스턴스? 뷰컴포넌트?

뷰인스턴스

뷰인스턴스(View Instance) Vue.js로 생성된 객체이다. (객체는 객체인데, 어떤 객체냐면 데이터, 템플릿, 메소드 등을 포함한 옵션 객체이다. 아래에 자세하게 기술.)

뷰인스턴스는 애플리케이션의 시작점이며, 데이터를 관리하고, 메소드를 실행하며, 템플릿과 상호작용한다.
DOM 요소에 마운트되어 화면에 나타나고, 라이프사이클 훅을 통해 초기화 및 상태 변화에 따른 동작을 수행한다.

new Vue()를 사용하여 뷰인스턴스를 생성할 수 있으며, 속성에는 아래와 같은 것들이 있다.
    - `el` : 인스턴스를 어떤 HTML 태그와 연결할지(mount)를 결정. 인스턴스가 그려지는 시작점.
    - `template` : 화면에 표시할 요소
    - `data` : 뷰의 반응성이 반영된 데이터 속성. 정의된 속성은 interpolation{{}}을 통해 view에 렌더링이 가능하다.
    - `methods` : 화면의 동작과 이벤트 로직을 제어하는 메서드
    - `created` : 뷰의 라이프 사이클과 관련된 속성
    - `watch` : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

 

뷰컴포넌트(중요개념 ★)

뷰컴포넌트(View Component)는 재사용 가능한 UI 모듈이다.
뷰컴포넌트는 뷰인스턴스와 유사한 구조를 가지며, 데이터, 템플릿, 메소드 등을 포함한 옵션 객체로 구성된다.


Vue.component()를 사용하여 뷰컴포넌트를 전역적으로 등록하거나, components 옵션을 사용하여 뷰인스턴스 내에서 지역적으로 등록할 수 있다. (나는 vue cli를 사용하여 컴포넌트를 사용해서, .vue 파일에 컴포넌트를 작성했다.
일반적으로 Vue CLI를 사용하여 프로젝트를 생성하면 .vue 파일을 단일 컴포넌트 파일로 사용하는 방식을 지향한다.
이 경우 각 .vue 파일은 단일 컴포넌트로 취급되며, 해당 파일 내에서 컴포넌트를 정의하고 사용할 수 있다.)


뷰컴포넌트는 재사용이 가능하고 독립적인 기능을 가지며, 다른 컴포넌트와 조합하여 애플리케이션을 구성할 수 있다.