728x90

Vue는 무엇인가?

MVVM 패턴 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리

MVVM (Model-View-ViewModel)

View는 브라우저에서 사용자에게 비춰지는 화면(입력단, 버튼 등)
화면에 나타나는 요소들을 html이라고 하고 그것들을 DOM을 이용해서 JS로 조작할 수 있게 구성되어있다.
키보드, 마우스 클릭같은 이벤트를 DOM Listeners에서 확인한다.
JS(Model)에 있는 데이터를 바꿔 주거나 특정 로직에서 실행하게 됨
데이터가 변했을 때 내용들을 Data Bindings를 통해 화면에 적용하게 됩니다.

기존 웹 개발 방식(HTML, Javascript)

프레임워크를 사용하지 않고 기존 웹 개발을 하는 방식은 HTML + Javascript + CSS를 이용하는 것입니다.

Html은 화면에 나타나는 DOM의 정보를 입력하는 것이고 JS는 화면에 나타나는 DOM 정보를 조작하는 것이라고 볼 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <script>
      var div = document.querySelector("#app");
      var str = "hello world";
      div.innerHTML = str;

      str = "hello world!!!";
    </script>
  </body>
</html>

str이라는 변수의 값이 바뀌더라도 화면에 반영되지 않습니다. 다시 해당 태그에 접근해서 바뀐 내용을 적용해줘야만 마지막으로 갱신된 값을 표현해줍니다.

Reactivity 구현

Object.defineProperty('대상 객체', '객체의 속성', { // 정의할 문법})

객체의 동작을 재정의하는 API라고 볼 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <script>
      var div = document.querySelector("#app");
      var viewModel = {};

      Object.defineProperty(viewModel, "str", {
        //속성에 접근했을 때의 동작을 정의
        get: function () {
          console.log("접근 : ");
        },
        //속성에 값을 할당했을 때의 동작을 정의
        set: function (newValue) {
          console.log("할당 : " + newValue);
          div.innerHTML = newValue;
        },
      });
    </script>
  </body>
</html>

str의 값이 변할 때 마다 div의 태그의 값을 변경해주는데 이 같은 개념이 Vue의 핵심 개념인 Reactivity(반응성)과 비슷하다고 볼 수 있다.

Reactivity 라이브러리화

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <script>
      var div = document.querySelector("#app");
      var viewModel = {};

      (function () {
        function init() {
          Object.defineProperty(viewModel, "str", {
            //속성에 접근했을 때의 동작을 정의
            get: function () {
              console.log("접근 : ");
            },
            //속성에 값을 할당했을 때의 동작을 정의
            set: function (newValue) {
              console.log("할당 : " + newValue);
              render(newValue);
            },
          });
        }

        function render(value) {
          div.innerHTML = value;
        }

        init();
      })();
    </script>
  </body>
</html>

즉시실행함수 : init(), render()를 또 다른 scope(유효범위)에 넣어주는 것

뷰 인스턴스

공식 문서는 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드라고 설명하고 있습니다. 인스턴스는 아래와 같이 생성할 수 있습니다.

new Vue();

var vm = new Vue({
        el: "#app",
        data: {
          message: "hi",
        },
      });

body안에 app이라는 이름의 태그를 찾아 인스턴스를 붙이겠다는 의미입니다. 붙이는 이유로는 붙이는 순간 vue의 기능과 속성들이 유효해집니다. el를 지정해주지 않으면 vue를 사용할 수 없습니다.

생성자 함수

function Person(name, job) {
    this.name = name;
    this.job = job;
}

var p = new Person('josh', 'developer')

위와 같이 생성자 함수를 이용해서 객체를 쉽게 찍어낼 수 있습니다. Vue는 왜 생성자 함수를 사용할까?

function Vue() {
    this.logText = function() {
        console.log('hello')
    }
}

위와 같이 생성자 함수안에 함수를 정의해두면 인스턴스를 생성할 때마다 정의해놓은 API함수나 속성들을 사용할 수 있기 때문입니다.

인스턴스 옵션 속성

new Vue({
    el: ,
    template: ,
    data: ,
    methods: ,
    created: ,
    watch: ,
});

el : 인스턴스가 그려지는 화면의 시작점(특정 HTML 태그)
template : 화면에 표시할 요소(HTML, CSS 등)
data : 뷰의 반응성이 반영된 데이터 속성
methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
created : 뷰의 라이프 사이클과 관련된 속성
watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성