vue.js란?

vue.js란? (pronounced /vjuː/, like view)

vue.js란 한마디로 표현하면 "웹 화면 개발을 쉽고 빠르게 해주는 프레임워크"라고 할 수 있습니다.

좀 더 자세히 설명해보겠습니다.
뷰(Vue, 발음 /vjuː/, like view)는 웹 UI를 구축하기 위한 자바스크립트 프레임워크이다.
표준 HTML, CSS, 자바스크립트 위에 구축되며,
UI를 효율적으로 개발할 수 있도록 돕는 선언형 및 컴포넌트 기반 프로그래밍 모델을 제공합니다.

예를 들어, vue의 예시코드로는 다음과 같습니다.

import { createApp, ref } from 'vue'
createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')
template
<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

이에 대한 장점은 다음과 같습니다.

1) Declarative Rendering:
Vue는 자바스크립트 상태를 기반으로 HTML 출력을 선언적으로 기술할 수 있는 템플릿 구문으로 표준 HTML을 확장합니다.

2) Reactivity:
Vue는 JavaScript 상태 변화를 자동으로 추적하고, 변경 시 DOM을 효율적으로 업데이트합니다.

3) Component:
추가적인 장점으로 Component의 활용이 있습니다.
예제코드에서는 표현되지 않았지만, 각 UI구성요소를 Component화 하여 중복 코드를 개선할 수 있습니다.

vue.js의 장점

1. 배우기 쉬움
2. 성능 : Virtual Dom을 사용하기 때문에 효율적으로 화면을 rendering함.
3. Component화되어 쉽게 개발가능.

vue.js의 단점

1. 커뮤니티
   상대적으로 react.js보다 작고,
   가장 큰 커뮤니티가 china 계열이기에 소통이 어려울수 있음.
   (자료를 찾다보면 중국어로 된 vue 프로젝트/문서가 많음)
2. 상대적으로 더 적은 수의 컴포턴트 및 플러그인
   React에 비해 Vue.js 개발자들은 플러그인과 라이브러리의 부족을 다소 느낄 수 있습니다.

vue.js 설치, vue.js 실행, vue.js 예제

1. 사전준비 : 아래 사이트로 이동하여 nodejs를 설치해줍니다.

https://nodejs.org/ko/

2. 아래 명령어로  vue를 설치해줍니다.

C:\>npm install -g vue

3. 아래와 같은 명령어로 vue 프로젝트를 생성해줍니다.
vue create [앱이름]

C:\>vue create sampleapp

4. 그러면 아래와 같은 내용들이 뜨면서 vue 프로젝트가 생성됩니다.

Vue CLI v5.0.8
✨  Creating project in D:\test\sampleapp.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

🚀  Invoking generators...
📦  Installing additional dependencies...

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project sampleapp.
👉  Get started with the following commands:

 $ cd sampleapp
 $ npm run serve

5. 아래 명령어를 입력하여 vue 프로젝트를 실행해줍니다.

C:\>cd sampleapp
C:\>npm run serve

그러면 아래와 같은 내용이 뜨는데요,  

안내한 바와 같이 웹 브라우저에 http://localhost:8081/ 로 접속합니다.

 DONE  Compiled successfully in 17793ms     
  App running at:
  - Local:   http://localhost:8081/
  - Network: http://10.163.152.153:8081/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

 

vue.js 예제, vue.js 수정하기

0. 앞선 step에서 수행한 바와 같이, vue.js 프로젝트를 실행한 상태로 둡니다.
1. vue.js 프로젝트의 화면 시작은 아래와 같습니다.
2. [프로젝트폴더]/src/App.vue

이 파일의 내용은 아래와 같습니다.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2. 아래 부분을 지우고 브라우저를 보면,
   vue.js 를 재시작하지 않아도 화면이 변경된 것을 볼 수 있습니다.

   <img alt="Vue logo" src="./assets/logo.png">

총평

웹개발을 할 때 front end framework 는 꼭 사용해야 하는게 요즘의 웹개발입니다.
어떤 프레임워크를 쓰느냐 할 때, 개인적으로는 react보다 vue를 좀 더 선호합니다.
vue와 react가 나온지 꽤 되었지만, 최근의 front end 생태계를 잘 모르는 개발자도 많습니다.
따라서 러닝커브가 쉬운 vue로 개발하는 것을 선호합니다.
vue 대비 react의 장점으로 큰 커뮤니티와 typescript의 지원이 있었는데,
typescript가 vue3에서 지원이 되므로 커뮤니티가 약간의 단점이라고 생각합니다.
하지만 vue도 꽤 커뮤니티가 크다고 생각하기에 결론적으로는 프로젝트를 진행한다면 vue를 더 선호합니다.

 

#vue,#frontend,#javascript,#뷰,#자바스크립트,#프론트엔드

https://devscb.com/post/195/

What is vue.js?