In the name of Vue

Vue란 웹 브라우저에서 보여지는 페이지를 만드는 자바스크립트 프레임워크입니다. 실제 정의를 가져와 보자면,

Vue.js is a javascript framework that makes building interactive and reactive web frontends.

라고 정의하고 있습니다. 문장의 단어를 하나씩 뜯어서 본다면,

1. Javascript

   모든 브라우저에서 실행되는 스크립트 입니다. 주로 페이지를 풍성하게 만들고 여러 기능을 추가하는데 쓰입니다.

2. framework

   어떤것을 만들기 쉽게 구조화해 놓은 세트를 말합니다. 여기서는 웹페이지를 손쉽게 만들수 있게 구조화 한 세트라고 볼 수 있습니다.

3. reactive
   말그대로 유저의 행동에 반응하는 웹페이지입니다. 이런 것들을 만들기 위해선 복잡한 기능들이 들어가게 됩니다.

4. web frontends
   웹페이지라고 생각하면 됩니다. 뼈대를 이루는 html, 외형인 css, 움직임의 Js가 하나가 되어서 움직입니다.

Vue는 이 모든 것들을 손쉽게 이해하고 만들 수 있게하는 하나의 도구가 되겠습니다.

Overview of Vue

사용자의 인풋을 리스트로 바꾸는 기능을 뷰와 바닐라 JS로 만들어보고, 어떻게 vue가 획기적으로 코드를 줄이는지 보겠습니다.

일단 JS 코드입니다.

const buttonEl = document.querySelector("button");
const inputEl = document.querySelector("input");
const listEl = document.querySelector("ul");

buttonEl.addEventListener("click", addGoal);

function addGoal() {
  const enteredValue = inputEl.value;
  console.log(enteredValue);
  const listItemEl = document.createElement("li");
  listItemEl.textContent = enteredValue;
  listEl.appendChild(listItemEl);
  inputEl.value = "";
}

통상적으로 우리는 JS를 이용해 DOM Manipulation을 하고, 그 때마다 필요한 요소를 집어서 바꾸어 주었습니다.
하지만 vue에서는 사용할 메서드를 따로, 필요한 상태만을 따로, 또 어디에 vue를 적용할것인지 따로 만들어서 코드를 간결하고 이해하기 쉽게 만듭니다.

Vue.createApp({
  data: function () {
    return {
      goals: [],
      enteredValue: "",
    };
  },
  methods: {
    addGoal() {
      this.goals.push(this.enteredValue);
    },
  },
}).mount("#app");

앞으로 이 모든것이 어떻게 작동하는 것인지 차근차근 알아보겠습니다.