All Articles

Vuejs란? Vuejs 간단 시작해보기

나는 아래와 같은 경험을 모두 가지고 있다.

  • VanilaJs, Jquery를 사용한 퍼블리싱 작업
  • React를 사용한 동적 SPA 홈페이지 작업 경험
  • Backend 프레임워크인 ejs, hbs 같은 라이브러리들을 사용해서 화면을 동적으로 보여주는 작업

순수JS를 사용해서 만드는 프로젝트들은 규모가 굉장히 작았다. 하루만에 만든 프로젝트들도 있었고 단발성 높은 프로젝트로 유지보수할 필요가 없었다. 즉 이런 프로젝트들은 굳이 프레임워크들을 도입할 필요가 전혀 없다.

하지만 규모가 커지고 이 서비스들이 단발성이 아닌 계속 사용되는 서비스들이라면 이야기가 매우 달라진다.

규모가 커질수록 관리하기 쉽지 않은 Vanila.js, Jquery

Vanila.js나 Jquery를 사용해서 규모가 있는 프로젝트를 만들게 될 경우 굉장한 난관에 부딪히게 된다.

프로젝트 규모가 커지면 커질수록 html파일, js 파일들을 모듈화하기가 쉽지 않고 구조가 점점 복잡해지는데 나중에 가면 스파게티코드가 나오는 것을 피하기가 매우 어렵다. 내가 느낀 단점은 이렇다.

  • 재사용성의 어려움: DRY(Do not repeat yourself) 아무리 설계 단계에서 공통되는 로직들을 분리해내고 만든다고 하더라도 결국 중복이 되는 코드가 생기기 마련이고 분리해내기도 어렵다. 또한 모듈화도 쉽지 않다.
  • 유지보수의 어려움 : 정형화된 형식이 없다보니 다른사람의 코드를 읽는 것부터가 난관이고, 문서화도 어렵다. 이는 곧 유지보수가 어렵다는 것으로 이어진다.
  • 퍼포먼스가 좋지 않음(느리다) : 모든 것이 다 느리다. 한 Html안에 들어가는 태그만 관리하는 것도 쉽지 않고, 렌더링을 다시 해야 하는 경우가 생겨 렌더링 문제, 사용자의 데이터 관리 문제 등 그다지 좋지못한 퍼포먼스를 보여주게 된다.
  • 보안 문제 : 또 간과하지 말아야 할것이 xss 같은 공격들을 방어하려면 신경써야 할 것이 많다. 하지만 이 모든 것을 일일이 신경쓰며 만들기는 쉽지 않다.

이러한 이유로 React와 같은 최신 Frontend 라이브러리나 프레임워크를 사용하게 되었다. 만약 자신이 엄청나게 똑똑하고 뛰어난 사람이라고 할지라도 자신이 만든 코드를 일일이 남에게 설명해줘야 한다는 것은 상당한 비효율을 초래한다.

Vuejs란 무엇이고 왜 사용하는가?

Vue의 공식사이트에 들어가보면 Vue의 탄생이유와 목적, 문서들을 잘 설명해 놓았다.

Vue.js is a JavaScript framework that makes building interactive and reactive web frontends easier. VueJs는 대화형 웹 프론트엔드를 쉽게 구축할 수 있게 하는 Javascript 프레임워크입니다.

기존 웹은 모바일 앱이나 데스크탑 앱들처럼 반응이 즉각적으로 이루어지지 않았다. 링크를 클릭하면 새로운 페이지를 불러오기 위해 기다려야 했고 버튼을 클릭하면 액션이 완료될때까지 기다려야 했다. 지금은 최신 만들어진 웹페이지들이 네이티브 앱이랑 거의 차이가 없는 것을 볼 수 있을 것이다.

Vuej는 날이 갈수록 진화하고 있는 웹콘텐츠들 및 웹사이트들(Youtube, Facebook, instagram 등)을 소비하는 사용자들을 위한 프론트엔드 부분을 더 쉽게 만들기 위해 만들어졌다.

간단 시작해보기

Vue는 점진적으로 도입되는 것을 목표로 만들어놨기 때문에 사용하기가 굉장히 쉽다. 그래서 그런지 특정 화면 영역에서만 사용하는 것도 가능하고, React처럼 아예 시작부터 Vue엔진으로 SPA를 만들어버리는 것도 가능하다.

React의 경우도 jsx로 필요한 부분에 라이브러리 형식으로 사용할 수 있지만, Vue는 아예 시작하는 것부터가 너무 쉽다. 아래와 같이 script 태그를 붙여 놓으면 전역변수로 Vue 객체를 사용할 수 있게 된다.

<html>
  <body>
    ...
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="script.js"></script>
  </body>
</html>
const app = Vue.createApp({});
app.mount("#app");

이렇게 간단하고 직관적이기 때문에 jquery나 vanilajs를 사용해서 만들던 사람들에게도 진입장벽이 낮다. 이게 바로 Vuejs 공식홈페이지에서 말한 점진적 도입이 가능하다는 의미이다.

얼마나 간편해졌는지 비교

<div id="container">
  <p>Current Num : <span id="num">0</span></p>
  <button id="btn-add">Add 1</button>
</div>

Current Num : 0

예를 들어보면 위와 같은 코드가 있다.

  • button을 클릭하면 Current Num에 있는 숫자가 증가한다.

기존의 순수 JS로 짠다면 아래와 같은 양의 코드가 나온다.

const btn_add = document.querySelector("#btn-add");
const num = document.querySelector("#num");

btn_add.addEventListener("click", addOne);

function addOne() {
  let currentNum = Number(num.innerText);
  num.innerText = currentNum + 1;
}

코드의 양은 그렇다치고 더욱이 문제는 이런 비슷한 일을 하는 요소가 나오면 나올수록 그에 맞는 함수를 짜야하고 중복된 함수라면 이걸 리팩토링 하는 것도 힘들다.

Vuejs로 짜기

<div id="container">
  <p>Current Num : <span>{{num}}</span></p>
  <button v-on:click="addOne">Add 1</button>
</div>
Vue.createApp({
  data() {
    return {
      num: 0,
    };
  },
  method: {
    addOne() {
      this.num = this.num + 1;
    },
  },
}).mount("#container");

얼마나 간단해졌는지 한눈에 보인다. 요소 선택에서부터 이벤트 바인딩, 그리고 그에 따른 결과를 보여주는 것도 신경써야될 부분이 확 줄어든다. 코드가 많아지고, 제어해야할 UI의 요소가 많아질 수록 VueJS는 빛을 발할 것이다.

결론

VueJs는 매력적이다. 간단하고 배우기 쉽고 현재 진행중인 JS프로젝트에도 부담없이 사용할 수 있을만한 보편성을 가졌다. 무엇보다도 배우기 쉽다는 것이 장점인만큼 도입해서 사용해보는 것도 괜찮을 듯 싶다.

Published 16 Jan 2021

Web Developer 웹개발자 김요한입니다.Yohan Kim