Vue.js

Vue.js는 React, Svelte, Angular 등과 함께 자주 사용되는 웹 프론트엔드 프레임워크 중 하나입니다. Vue는 사용 난이도도 낮은 편이며, 성숙도 또한 훌륭하기 때문에 입문자에게 권장하는 프레임워크입니다.

물론, React가 웹 프론트엔드 개발에서 제일 많이 사용되므로 취업 목적으로는 React가 추천됩니다. 그렇지만 React가 학습적인 면에서 어려운 것이 사실이므로 Vue를 먼저 배운 뒤 React는 이후에 다루도록 하겠습니다. 두 가지를 모두 사용할 수 있는 것 또한 굉장한 메리트가 될 수 있겠죠?

1. 공식 문서

Vue.js는 2021년 최신의 3버전이 출시되었으므로 최신 버전을 배워보도록 하겠습니다. 공식 문서는 여기를 참고 부탁드립니다.

2. 설치하기

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

간단히 연습 프로젝트 혹은 문법 확인용이라면 CDN 방식으로도 Vue를 사용할 수 있습니다.

$ npm install vue@next

대규모 애플리케이션을 구축한다면, NPM을 이용하여 설치를 진행해주셔야 합니다.

3. CDN 활용

3.1 codepen.io

간단히 CDN 방식을 실제로 활용해보도록 하겠습니다. codepen.io에서 코딩을 진행해볼까요?

3.2 Vue.createApp

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <h1>{{ message }}</h1>
</div>

Vue.createApp({
  data() {
    return {
      message: "Hello Vue!"
    };
  }
}).mount("#app");

위와 같이 코딩을 진행하여 html 문서 {{ message }} 부분에 화면상으로 Hello Vue!가 출력된 것을 확인할 수 있습니다. 이 곳에서 직접 확인하실 수 있습니다.