[Vue] Vue란

Vue.js란

먼저 짚고 넘어갈 자바스크립트 객체 표현부터 살펴봅니다.

const id = 'ssafy',
      name = '싸피',
      age = 3;
    const user = {
      id,
      name,
      age,
    };

• 객체 프로퍼티를 id, name, age처럼 한 번씩만 적은 것은, 키와 값(변수명)이 같을 때 줄여 쓰는 단축 표기다.
• 메서드 역시 기존 방식보다 축약된 형태로 표시할 수 있다.

백엔드(Spring)의 구조 설계 복습

스프링으로 백엔드를 만들 때는 전체를 MVC로 나눠서 설계했다.

• 클라이언트가 요청하면 컨트롤러가 먼저 받는다.
• 컨트롤러가 모델에게 작업을 시킨다.
• 모델은 서비스 같은 계층을 포함하며, 데이터 관련 처리를 담당한다.

Vue에서는 기존 MVC의 V(View)를 좀 더 세분화한 MVVM 구조로 진행하게 된다.

새로 등장하는 부분이 VM(View Model) 이라 불리는 Vue 영역이다.

• Vue 객체(Vue 인스턴스)가 ViewModel 역할을 하며, View와 Model을 모두 품고 있다.
• 자바스크립트가 동작해서 화면에 뿌려질 결과를 보여주게 된다.

반응성(Reactivity)

ViewModel을 설명할 때 “상호 연결”, “반응성” 같은 표현이 새롭게 등장한다.

• 반응성: 서로 연결된 대상이 상대방의 변화에 서로서로 반응하는 것.

ViewModel 역할을 하는 객체가 양쪽(View ↔ Model)을 연결하고, 한쪽이 바뀌면 연결된 상대도 함께 바뀌게 하기 때문에 이런 용어가 나온다.

Vue.js의 특징

• 접근성
• 유연성
• 고성능

MVVM 패턴

MVVM은 Model + View + View Model 의 합성어다.

구성 요소	역할
Model	순수 자바스크립트 객체
View	웹페이지의 DOM
View Model	Vue의 역할 (View와 Model 연결)

• 기존에는 자바스크립트로 View(DOM)에 접근하거나 수정하기 위해 jQuery 같은 라이브러리를 이용했다.
• Vue는 View와 Model을 연결하고 자동으로 바인딩하므로, 양방향 통신을 가능하게 한다.

MVC vs MVVM

Vue 인스턴스 생성

---

Vue 인스턴스의 유효범위

• SPA = Single Page Application

---

Vue 인스턴스 라이프사이클(Life Cycle)

라이프사이클은 크게 다음 4단계로 나뉜다.

1. 생성(Create): 인스턴스의 생성
2. 부착(Mount): 생성된 인스턴스를 화면에 부착
3. 갱신(Update): 화면에 부착된 인스턴스의 내용이 갱신
4. 소멸(Destroy): 인스턴스가 제거되는 소멸

---

템플릿(Template)

보간법(Interpolation)

문자열

• 데이터 바인딩의 가장 기본 형태는 “Mustache” 구문({{ }})을 사용한 텍스트 보간이다.
• v-once 디렉티브를 사용하면 데이터가 변경되어도 업데이트되지 않는 일회성 보간을 수행한다.

원시 HTML

• 이중 중괄호(mustaches)는 데이터를 HTML이 아닌 일반 텍스트로 해석한다.
• 실제 HTML을 출력하려면 v-html 디렉티브를 사용한다.

---

디렉티브(Directives)

• 디렉티브는 v- 접두사가 붙은 특수 속성이다.
• 디렉티브 속성값은 단일 자바스크립트 표현식이다. (단, v-for는 예외)
• 디렉티브의 역할은 표현식의 값이 변경될 때, 그 사이드 이펙트를 반응적으로 DOM에 적용하는 것이다.

• v-model: 양방향 바인딩 처리를 위해 사용한다. (form의 input, textarea 등)