Vue.js 시작하기 - 기존 웹 개발 방식(HTML, Javascript)에서의 데이터 변경과 라이브러리화

HTML과 Javascript

HTML은 화면에 나타나는 DOM의 정보를 담고 있고,
Javascript는 해당 tag나 DOM의 내용을 조작할 수 있다.

Element.innerHTML api를 이용하여 div의 데이터를 변경하기

Element.innerHTML란?
div.innerHTML는 Element 속성(property)이며
요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정한다.
출처: MDN Element.innerHTML

const content = element.innerHTML;
element.innerHTML = htmlString;

문자열(데이터)을 변수에 담아 변수의 값을 변경하지만
div의 내용을 변경하려면 innerHTML을 한번 더 실행 해야 한다.
이를 통해 vue의 reactivity 기능의 필요성을 느낀다.

<div id="app"></div>

<script>
  var div = document.querySelector('#app');

  //문자열을 바로 연결할 경우
  //div.innerHTML = 'hello world';

  //문자열을 변수에 담아 변수끼리 연결하는 것이 좋다.
  var str = 'hello world';
  div.innerHTML = str;

  //변수의 값을 변경해도 div의 내용이 변경되지 않는다.
  str = 'hello world!!!';

  //div의 내용을 변경하려면 innerHTML을 한번 더 실행 해야 한다.
  div.innerHTML = str;
</script>

vue의 reactivity 기능

vue의 reactivity란 데이터의 변화를 library에서 자동으로 감지하여 화면에 그려주는 것을 말한다.

HTML과 Javascript으로 reactivity 기능 구현하기

HTML과 Javascript으로 reactivity 기능 구현하기 위해 Object.defineProperty()라는 api를 이용한다.

Object.defineProperty()란?
정적 메서드 Object.defineProperty()는 개체에 직접 새 속성을 정의하거나 개체의 기존 속성을 수정하고 개체를 반환한다.
출처: MDN Object.defineProperty()

Object.defineProperty(대상 객체, 객체의 속성, {
   //정의할 내용
});

Object.defineProperty()를 사용하여 데이터에 접근하고 변경하기

객체를 선언하여 객체의 속성과 속성에 접근했을 때의 동작과 값을 할당했을 때의 동작을 정의한다.

<div id="app"></div>
  <script>
    var div = document.querySelector("#app");
    // viewModel이라는 객체 선언
    var viewModel = {};
    
    Object.defineProperty(viewModel, 'str', {
      //속성에 접근했을 때의 동작을 정의
      get : function() {
        console.log('접근');
      },
      //속성에 값을 할당했을 때의 동작을 정의
      set : function(newValue) {
       console.log('할당', newValue);
       div.innerHTML = newValue;
      }
    })
  </script>

즉시 실행 함수를 사용하여 라이브러리화하기

1. init 함수를 만들어 안에 Object.defineProperty() 내용을 담는다.
2. render 함수를 만들어 set function에서 div의 데이터를 변경해주던 내용을 담고, set function 안에서 value를 받아 실행한다.
3. 즉시 실행 함수 선언하여 만들었던 init, render 함수 담는다.

즉시 실행 함수란?
즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다.
출처: MDN IIFE

즉시 실행 함수에 담는 이유
전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.
(init, render가 기본적으로 애플리케이션 로직에 노출되지 않게 된다.)
오픈소스 라이브러리에서 변수의 유효범위를 관리하는 방법 중 하나이다.

//4. 즉시 실행 함수 선언하여 만들었던 init, render 함수 담기
(function (){
  //1.init() 함수를 만들어서 라이브러리화 하기
  function init(){
    Object.defineProperty(viewModel, 'str', {
      //속성에 접근했을 때의 동작을 정의
      get : function() {
        console.log('접근');
      },
      //속성에 값을 할당했을 때의 동작을 정의
      set : function(newValue) {
        console.log('할당', newValue);
        render(newValue);
      }
    })
  }

  //2.value값을 받아 div안에 넣어주는 별도의 함수 생성
  function render(value){
    div.innerHTML = value;
  }

  //3. init() 함수 실행
  init();
 })();  

실행 내용
viewModel이라는 객체 속성(str)에 '내용을 담아요'라는 데이터를 할당하기

결과

마무리

html, javascript를 이용하여 dom을 구성하고 조작할 수 있으며,
조작을 위해서는 javascript의 api나 내장 객체 함수등을 이용해야 한다.
변수를 통해 데이터를 변경을 하는 것이 재사용에 좋으며
역할, 목적에 따라 함수를 만들어 실행하는 것이 좋다.
즉시 실행 함수 안에 함수들을 담고 실행하는 것은 불필요한 변수들이 내부 함수를 오염시키는 것을 방지하고 애플리케이션 로직이 노출되지 않게 해준다.
html, javascript를 통해 만들어본 데이터 변경과 라이브러리화는
vue 라이브러리에서 제공하는 reactivity 기능과 같은 기능을 구현해 본 것이다.