Vue.js 란 무엇인가?

프론트엔드 개발자가 익혀야 하는 범주에 들어가는 SPA(Single-page application) 프레임워크 중 하나이다. SPA 는 프레임워크만의 기술로 렌더링하여 한번에 웹페이지 전체를 로드하는 방식으로, 이미 웹프론트 개발에 자리 잡은지 오래다. 이런 멋진 SPA 사이트를 만들기 위해서는 VueJS 나 ReactJS, AngularJS 중 하나를 학습하면 된다.

Vue.js 를 사용하는 이유?

Vue 는 Angular 나 React 에 비해 코드가 간결하고 자바스크립트를 덜 몰라도 개발하는데 문제가 없다고는 하는데... 그리고 HTML 렌더링하는 시간이 아주 쬐끔 더 빠르다고 한다. 개인적으로는 프론트 개발자는 아니지만 잠시 해야할 필요가 있다면 Vue, 프론트 개발자이면서 전문성을 높여야 한다면 React 를 배우는 것이 낫지않나 싶다.

Vue 사용법

스크립트로 vue.js 를 불러오고, js 에서 Vue 인스턴스를 이용하여 DOM 의 데이터를 렌더링하는 가벼운 예제이다.

<script src="https://unpkg.com/vue@next"></script>

<div id="counter">
  Counter: {{ counter }}
</div>

<script>
const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')
</script>

Vue 개발 환경

아마도 프레임워크를 저런식(?)으로 호출해서 사용할 일은 없을 것이고, VS code 나 WebStorm 정도의 IDE 를 사용해서 효율적으로 Vue 를 시작하게 될 것이다. 또한 npm 이나 yarn 같은 자바스크립트 패키지 관리 툴도 필요하다.