Vue.js 입문을 해보자!

김인태·2022년 7월 17일

리액트도 제대로 못하는 내가,, vue라니 하지만 회사에서 요구한다면 배워야하는 것이 프로그래머의 숙명아닐까..하지만 자바스크립트가 기반으로 된 프레임워크이기 때문에 조금 할만하지 않을까 기대해보면서,,,!

🍩Vue가 뭔가요..?

Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다. (출처 : https://kr.vuejs.org/v2/guide/index.html )

점진적으로 채택한다..? 이것은 만약 기존 프로젝트를 vue.js로 전환했을 때 새로다시 만들 필요없이 부분만 업데이트 하면 된다는 뜻입니다.
점진적으로 하고싶다면 vue.js 스크립트를 기존 프로젝트에 추가할 수 있습니다!
혹은 vue CLI를 통하여 만들 수도 있습니다

왜 사용하나요 .. ?

코드를 작성하는 방법이 정해져있습니다!

예를 들어서 React에서 반복문을 사용할 때, map, forEach, for, for in, for of등 다양한 문법을 사용합니다.
또한 컴포넌트 render() 바깥에서 이 반복문을 쓸지 그 안에서 쓸지 방법이 다양합니다.하지만 Vue.js에서는 v-for라는 문법 하나로 통일됩니다.
그 외에도 조건부 렌더링에서 React는 여러 방법이 있지만 Vue.js는 v-if, v-else만 사용하면 됩니다.
이러한 부분은 협업을 했을 때 남이 짠 코드를 이해하기 편하겠죠??!

HTML 렌더링이 빠릅니다!

다른 React와 Angular보다 렌더링 속도가 더 빠르다고는 하지만은, 크게 체감할 정도는 아니라고 합니다..

꾸준히 업데이트가 되고있습니다!

장기적인 지원에 걱정 없이 사용할 수 있습니다
현재 React가 점유율에서 막강하지만은 Vue가 입문에 관한 통계에서 가파른 상승 곡선을 그리고 있다고합니다!

간단한 실습!

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    // vue.js 에서 가져온 cdn 
    </script>
  </head>
  <body>
    <div id="app">{{name}}</div>
    <script>
      new Vue({
        el: "#app", //id가 app인 엘리먼트에 
        data: {  
          name: "carlos", //data를 넣을 것이다. name이라는 key의 value는 carlos!
        },
      });
    </script>
  </body>