[vue 3] 01. Vue Application 생성

이번 포스트에서는 간단한 Vue Application을 생성해보고 MVVM과의 연관성에 대해 살펴보자.

 

Vue Application 생성

 

Vue와 MVVM

앞선 포스트의 내용을 바탕으로 인사말을 출력하는 간단한 Vue Application을 만들어보고 MVVM과의 관계에 대해 살펴보자.

 

Vue는 createApp이라는 함수를 통해서 새로운 Vue 객체(root component)를 생성하는데 이 객체가 ViewModel에 해당하는 녀석이다. Vue 객체는 mount라는 함수를 통해서 화면 요소 즉 DOM과 연결되는데 DOM을 구성하고 있는 HTML을 View라고 한다.

Composition API 형태로 작성할 때 Vue 객체에는 setup 함수를 통해서 component에서 필요한 로직을 작성한다. 이 로직 중에는 greeting 과 같은 데이터가 있는데 이런 데이터를 Model이라고 한다.

 

M-V-VM의 상관 관계

이제 이런 M-V-VM의 상관 관계에 대해 알아보자. 

데이터인 Model은 대부분 View를 통해 출력된다. 그리고 View를 통해서 사용자가 데이터를 수정하거나 추가하고 결과가  Model에 저장되어야 한다.

이 과정을 JavaScript로 처리하기 위해서는 막대한 코드가 필요하지만 우리에게는 VM 이 있어서 중간에 이런 과정을 알아서 처리해준다. '어떻게'에 대한 내용은 계속 해서 배울꺼니까 우선은 잘 연동되는지만 살펴보자.

일단 liveServer를 통해서 방금 작성한 html을 실행해보자. 파일을 오른쪽 클릭한 후 [open with live server]를 이용한다.

live server에 연결된 브라우저가 실행되면 F12를 이용해서 [개발자 모드]에 진입한 후 Vue 탭을 찾아서 클릭한다.

View 즉 화면에 "Hello"가 입력된 input 이 있다. Vue 탭의 Components 아래에는 Root component의 setup 내부에 greeting이라는 Ref 타입의 변수에 "Hello"라는 값이 표현되어있다.

이제 View에서 Hello를 Hi로 변경한 후 greeting에 등록된 값을 살펴보자.(간혹 값이 갱신되지 않으면 Force Refresh 버튼을 클릭해주면 된다.)

또한 devtool에서 greeting의 값을 바꾸면 바로 View의 내용이 변경된다.

동영상이 왜 이리 작게 보일까요? ㅜㅜ 전체화면으로 확인하세요~

정말 아무것도 안했는데 신기하게 View와 Model이 연동되는 것을 볼 수 있다. 물론 이 과정에 열심히 개입한 것은 VM 즉 Vue 객체이다.