최근 수정 시각 : 2024-03-28 19:32:12

Vue.js

웹 프레임워크 및 기술
{{{#!wiki style="margin:0 -10px"
{{{#!folding [ 펼치기 / 접기 ]
{{{#!wiki style="margin:-5px 0px -10px; word-break:keep-all" 		$ 유료 포함 • 취소선 단종 및 중단
<colbgcolor=#f6f6f9,#2f3241> 프론트엔드 <colbgcolor=#fcfcfd,#272935> CSS Bootstrap • Tailwind CSS • Bulma • Foundation • Skeleton • Pico
JSX React • Next.js • SolidJS • Astro • Preact • Gatsby • Remix • Inferno • Qwik
JS Angular • Svelte • Backbone.js • jQuery • Astro • htmx • Ember.js • Lit • 11ty • Marko • VanJS • Alpine.js
Vue Nuxt.js • VuePress • Gridsome • Quasar • Astro
Python Reflex
백엔드 Java Spring • Struts • GWT • Grails • Jooby • Play! Framework Scala
Kotlin Ktor
JS Express • NestJS • koa • Hono • fastify
.NET ASP.NET$
PHP Laravel • Codeigniter • Reasonable • phalcon • Symfony • zend • CakePHP • FuelPHP • Yii • Slim • PHPixe
Python Django • Flask • FastAPI
Ruby Ruby on Rails • Sinatra
풀스택 JSX Next.js • Astro • SolidStart • Remix • Qwik City
JS SvelteKit • Fresh • Astro • Marko
Vue Nuxt.js • Quasar • Astro
Java Vaadin$
Python Streamlit • Reflex
하이브리드 .NET Blazor
Dart Flutter
Kotlin Kotlin Multiplatform
}}}}}}}}} ||


<colbgcolor=#ffffff,#1f2023><colcolor=#41b883> 뷰
Vue.js
파일:Vue.js 로고.svg
종류 웹 프레임워크
라이선스 MIT 라이선스
개발 Evan You
언어 JavaScript
버전 3.3.4
링크 파일:홈페이지 아이콘.svg 파일:GitHub 아이콘.svg 파일:GitHub 아이콘 화이트.svg 파일:미디엄 아이콘.svg
1. 개요2. 예시3. 시작하기
3.1. 개발 환경 만들기
4. 가상 DOM5. Composition API
5.1. Script Setup
6. Vue.js 생태계
6.1. Vue Router6.2. 상태 관리
6.2.1. Pinia6.2.2. Vuex
6.3. CLI 툴
6.3.1. Vite6.3.2. Vue CLI
6.4. Visual Studio Code 플러그인6.5. 스캐폴드, 보일러플레이트6.6. 기타
7. Vue.js를 사용하는 웹 사이트/앱 목록8. 논란9. 기타

[clearfix]

1. 개요

자바스크립트로 개발된 컴포넌트 구조 기반 프론트엔드 프레임워크. 보통 뷰라고 부른다.[1]

2. 예시

이러한 HTML 파일이 있다고 가정했을 때,
#!syntax xml
<div id="app">
  안녕, {{ name }}!
</div>

해당 코드를 실행시키면,
#!syntax javascript
Vue.createApp({
  data() {
    return {
      name: '나무위키'
    }
  }
}).mount('#app')

"안녕, 나무위키!" 가 출력된다.

3. 시작하기

3.1. 개발 환경 만들기

  • 설치
Node.js와 npm을 설치한 후, 프로젝트를 만들 폴더에서 선호하는 종류의 터미널을 열고 다음을 입력한다.
#!syntax powershell
npm init vue@latest

커맨드 실행 후 몇 가지 질문이 나오는데, 원하는 프로젝트명을 입력하라는 뜻의 첫 질문을 제외하면 나머지는 전부 엔터를 쳐서 기본값인 No로 넘겨도 무방하다.

이후 생성된 프로젝트 폴더를 열고, 의존성 패키지들을 설치한다.
#!syntax powershell
cd (프로젝트 이름)
npm install

  • 실행
다음 명령어를 입력하면 개발 서버를 띄워 실행이 가능하다.
#!syntax powershell
npm run dev


이 가이드는 공식 제공되는 create-vue 패키지를 활용한 방법이며, 이외에 create-vite나 Vue CLI 등을 활용하여 생성하는 방법도 존재한다.

4. 가상 DOM

Vue.js 2.0 부터 추가된 기능. 잘 알려진 React처럼, Vue.js도 가상 DOM (Virtual DOM)을 활용한다. 브라우저의 DOM을 직접 컨트롤하는 것은 상당히 무거운 작업인데, 이것을 가상 DOM을 먼저 업데이트한 후에 브라우저의 DOM을 한번에 업데이트시키는 식으로 최적화하기 위해서 가상 DOM이 사용된다. 특히 Vue나 React같이 자바스크립트를 사용해 웹페이지를 자주 변형하는 경우에는 가상 DOM이 가져다주는 성능 이득이 극대화된다.

5. Composition API

Vue.js 3.0부터 추가된 기능. React의 Hooks로부터 영감을 받아 추가된 컴포넌트 제작 방법으로, 여러 기능들을 data(), methods, computed 등에 나누어 놓던 기존의 Options API와는 달리 setup() 함수 안에 reactive()나 computed() 등의 함수들을 이용하여 모든 기능들을 배치한다. 용도별 코드 정리가 가능하기 때문에 기존 방식에 비해 대규모 컴포넌트의 코드 가독성을 높일 수 있다. 또한 this에 의존하지 않는 API 구조 특성상 모듈화가 매우 원활하며, 뛰어난 타입스크립트 지원을 보여 준다. 장점들을 종합해 보자면 결국 Vue가 기존까지 지적받던 대형 프로젝트에서의 문제점들을 해결하기 위한 API라고 볼 수 있다. @vue/composition-api 패키지를 이용하면 Vue 2에서도 사용할 수 있다.

5.1. Script Setup

위 Composition API 를 더욱 더 간편하게 사용할 수 있는 Vue 3.2 의 신규 기능. 이 기능은 3.0 출시 전 Composition API와 함께 RFC로 논의된 적이 있었으나, 3.0 출시 후에는 실험적 기능으로 활성화 시에만 사용 가능하다가, 3.2 에 정식 출시되었다.
기존 Composition API와의 차이점은, <script setup> 태그 안에 작성할 스크립트 내용이 setup() 함수 내용만 작성하게 된다. 이로 인해 발생하는 특징은 아래와 같다.
  • 기존에 외부 컴포넌트 추가 시 component 속성에 정의해야 했지만, <script setup> 안에서는 import 문법으로 추가하는 것만으로 컴포넌트 정의가 완료되어 추가가 가능하다.
  • props 등의 Composition API에 남아있는 Options 까지 완전히 사라지기 때문에 이를 정의하기 위한 defineProps 등의 함수형 매크로가 추가된다.
  • 기존 setup() 함수 내용을 작성하지만 return 문을 작성할 수 없기에 컴포넌트의 공개 속성을 내보내는 defineExpose 함수형 매크로가 대신한다.
  • 컴포넌트 이름 속성이 없어지기 때문에 컴포넌트 파일명 작성 시 제약이 생긴다.[2] lint 등의 검증 도구를 통핸 공식 vue 구문 검증 시, 컴포넌트 파일명에 2가지 단어 합성이 강제된다. 예를 들면, SomeComponent.vue 파일명 작성은 허용하며 Component.vue 같은 단일 단어형 컴포넌트 파일명은 허용하지 않는다. 문제는 이 규칙이 nuxt.js의 페이지 컴포넌트에서도 적용되기 때문에 index.vue 같은 파일 기반 라우팅 파일명에도 제약이 생긴다. 이런 상황을 위해 lint 옵션에서 예외 단어를 추가하여 해결할 수 있다.

위 Composition API로 작성했던 것을,
#!syntax html
<script>
import SomeComponent from 'path/to/component.vue'

export default {
  name: 'MyComponent',
  props: [type, props, here],
  components: [SomeComponent],
  setup(props) {
    //props 처리
    publicFunc() {
      return 'namu.wiki'
    }
  }
}
</script>


이렇게 <script setup> 태그로 간소화할 수 있다.

#!syntax html
<script setup> 
import SomeComponent from 'path/to/component.vue'

const props = defineProps([type, props, here])

//props 처리

defineExpose({
  publicFunc() {
    return 'namu.wiki'
  }
});
</script>


단점으로는, 문서화가 불가능하다. 문서화된 컴포넌트(공통 컴포넌트 등) 작성을 원할 경우, 기존 <script> 태그를 추가하여 이 안에 setup() 함수 없는 Composition API 의 속성을 정의하고 여기에 문서를 작성하여 대응 가능하다.

6. Vue.js 생태계

Vue.js 팀에서는 Vue로 애플리케이션을 개발할 때 도움을 주기 위해서 추가적으로 다양한 프레임워크와 툴들을 제공한다.

6.1. Vue Router

Vue 기반 애플리케이션은 흔히 SPA(Single Page Application, 한 화면으로 구성된 애플리케이션을 말한다)로 구성되는데, 이때 한 페이지 내에서도 다른 페이지로 이동할 필요 없이 마치 여러 개의 페이지가 있는 듯한 방식으로 작동하게 해 주는 것이 바로 Vue Router이다. 이는 보통 사이트의 큰 틀 안에 <router-view> 태그를 삽입하고, 라우터가 보여 줄 컴포넌트를 이 태그 안에 렌더링한다. 라우터가 보여 줄 컴포넌트는 <router-link>의 클릭이나 JS 함수 호출 등으로 변경할 수 있다. 간단한 예를 들어보자면 블로그를 만들 때 MainPage 컴포넌트와 Profile 컴포넌트, Posts 컴포넌트를 만든 후, 각각 컴포넌트로의 링크를 담은 <router-link>를 내비게이션 바에 넣어 놓고, 그 아래에 <router-view>를 놓으면 내비게이션 바에서 링크를 누르는 대로 보여지는 컴포넌트가 바뀌면서 마치 일반적인 여러 페이지로 구성된 블로그와 같이 작동하게 된다. 하지만 실제로는 페이지를 이동하지 않기 때문에 로딩 시간도 훨씬 적고,[3] 화면이 사라졌다 다시 나타나는 지저분한 효과 없이 즉시 화면이 전환된다. 원한다면 애니메이션을 넣는 것도 가능하다!

6.2. 상태 관리

Vue 컴포넌트들 간의 데이터 공유를 도와주는 라이브러리들이다. Vue기능만으로 컴포넌트 간에 데이터를 공유하려면 상위 컴포넌트에서 하위 컴포넌트로 Property[4]를 넘기거나, 하위에서 상위 컴포넌트로 이벤트를 송신하는 방법이 있는데, 이 방식을 사용하면 해당 컴포넌트에서 멀리 떨어진 컴포넌트까지 데이터를 공유하려고 할 때 상당히 골치가 아파진다. 그래서 아래와 같은 라이브러리가 개발되어 데이터 공유및 상태 저장을 간결하고 쉽게 만들 수 있게 되었다.

6.2.1. Pinia

기존 사용되던 라이브러리인 Vuex를 대체하는 신규 라이브러리. 상대적으로 간결한 문법과 뛰어난 TypeScript 지원을 내세운 Pinia가 등장하여 공식적으로 권장되는 상태 관리 라이브러리로 지정되었고, 예전의Vuex는 유지보수 단계에 진입한 상태이다. 따라서 신규 프로젝트 개발 시에는 Pinia의 사용이 권장된다.

6.2.2. Vuex

예전에 사용되던 라이브러리. Vuex는 중앙화된 Store 안에 state를 통해 애플리케이션의 상태를 관리힌다. 중앙화된 store 속 데이터는 컴포넌트 어디서나 자유롭게 읽을 수 있으며, Store 안에 등록할 수 있는 동기적 함수[5]인 Mutation을 통해 데이터를 변경할 수 있다. Vuex를 사용함으로써 얻을 수 있는 편의성이 매우 크기에, 좀 규모가 되는 Vue 애플리케이션을 작성할 때 없어서는 안 되는 물건이었으나 Pinia로 대체되고 있다.

6.3. CLI 툴

6.3.1. Vite[6]

Vue 3와 함께 개발된 툴로서, 기존 Vue CLI의 위치를 대체한다. 내부적으로 Rollup 번들링과 ESBuild[7]의 빌드 시스템을 조합하여 미친 듯이 빠른 HMR(Hot Module Replacement, 새로고침 없이도 코드 변경사항을 반영시켜 주는 기술) 속도를 보여준다. 브라우저와 코드 에디터 화면을 동시에 띄워 놓은 다음 코드 저장 키를 누르는 순간 즉시 화면이 바뀌는 모습은 아름다운 수준이다. 내부적으로 SSR 시스템도 갖추고 있다.[8] Vue 지원을 베이스로 시작했지만, 규모가 커지고 발전하다보니 다른 프레임워크들에서도 눈독들일 만한 강력한 툴이 되어서 현재는 다양한 프레임워크들과의 연동 시스템이 존재한다. Rollup 을 채택했기 때문에 당연히 기존 Rollup 플러그인과 호환된다.

6.3.2. Vue CLI

Vue 기반 프로젝트의 생성부터 각종 플러그인 추가 및 세팅까지 도와주는 툴이다. 이름에서도 알 수 있다시피 CLI 기반의 툴이며, vue ui 명령어를 사용하면 웹 기반 UI를 불러올 수 있다. 여러모로 다양한 기능을 제공하기에, 본격적인 Vue.js 프로젝트를 만들고자 한다면 필수적으로 사용하던 툴이었으나 새로운 툴인 Vite에 의해 서서히 대체되어 가고 있다.

6.4. Visual Studio Code 플러그인

  • Volar : Volar는 Vue를 위한 VS Code 용 플러그인이며, .vue 파일 지원이나 커스텀 템플릿 문법 지원 등 다양한 기능을 내장하고 있다. Vue 3 지원이 좋다
  • Vetur : 과거에 널리 쓰이던 플러그인. Vue 3나 TypeScript 지원 등이 상대적으로 뒤쳐져서, 현재는 사용이 권장되지 않는다. 다만 아직도 이 플러그인을 필요로 하는 라이브러리들이 있다. (Nuxtjs 등)

6.5. 스캐폴드, 보일러플레이트

프로젝트를 시작할 때 소스파일들의 틀을 생성해 줘서 구성을 도와주는 툴
  • Vue Enterprise Boilerplate: 인기 많은 툴. 대규모 개발자가 붙는 enterprise app에 적당
  • NW.js + Vue-CLI : 데스크탑용에 적합
  • Vue-Express : Node rendered 앱용에 적합
  • Real World Vue.js Boilerplate : 예제 성격

6.6. 기타

  • Vuetify
    vue.js용 UI 라이브러리. UI 구현을 손쉽게 할 수 있게 해주고 미려한 아이콘을 제공한다. 홈페이지
  • vue-loader
    Vue의 SFC(Single File Component, 한 파일 내에 템플릿과 스크립트, 스타일시트가 모두 들어가는 형태의 컴포넌트이다) 지원을 추가하는 webpack 플러그인이며, Vue CLI로 생성한 모든 프로젝트들에 적용된다. 확장자는 .vue를 사용한다.
  • Vue Devtools
    브라우저 상에서 컴포넌트와 이벤트, Vuex Store를 실시간으로 확인할 수 있게 해주는 브라우저 확장 프로그램이다. 크롬과 파이어폭스를 지원하며, Electron 앱 버전도 있다.
  • Nuxtjs : 서버사이드 렌더링 등을 편하게 구현할 수 있게해주는 프레임웍.

이외에도 다양한 프로젝트들을 Vue.js 팀 GitHub 페이지에서 확인할 수 있다.

다양한 프로젝트및 튜토리얼을 모아 놓은 웹페이지도 가볼만 하다

3.x 버전부터 TypeScript로 재작성되어, 기존보다 훨씬 강력한 타입스크립트 지원을 제공한다.

7. Vue.js를 사용하는 웹 사이트/앱 목록

8. 논란

Vue의 창시자인 에반 유의 트위터에 2019년 홍콩 민주화 운동을 비난하는 듯한 '자유, 얼마나 많은 죄악이 네 이름을 빌렸나'라는 트윗이 올라왔는데, 처음에는 중국어로 올렸다가 삭제하고[10] 이후에 다시 프랑스어 @로 올렸다.

해당 글에 대한 공식 답변을 남겼다. 링크 요지는, 자신은 경찰이나 시위자 어느 편을 들려는 건 아니며 다만 이로 인해 폭력적인 사태가 발생하고 있다는 것에 대해 말한 것이라는 의도로 볼 수 있다. 다만 사건의 본질을 생각했을 때 폭력의 발생에만 집중하는 것은 사실상 시위에 반대하는 입장에 가깝다고 밖에 볼 수 없다. 일단 본인은 정치적 입장이 프로젝트에 영향을 받게 하고 싶지 않다고 밝혔다.

9. 기타

대한민국 IT 시장 기준으로 프론트엔드 개발환경에서 React와 Vue.js 중 하나를 고르라고 하면, 주로 솔루션이나 패키지 중심의 기업은 React를, 행정기관이나 공공기관에 납품을 해야 하는 SI회사는 Vue로 쓴다.[11] React에 비해 문법이 간단하여 신규 프로젝트뿐만 아니라 특히 기존 웹 애플리케이션의 마이그레이션에서 유리한 고지를 선점할 수 있고, 퍼블리셔가 Vue 기술을 요구하지 않아도 Vue에 적용 가능하며, 전문적인 프론트엔드 개발자가 아니더라도 접근성이 용이하여 기존 웹 개발자 인력을 끌어들일 수 있는 이점이 있어 타 프론트엔드 대비 비용 절감 효과가 있는 것으로 알려져 있다. 이뿐만 아니라 네이버 하위 서비스의 성공적인 구축 사례와 개발자 중심의 홍보, 정부가 지원하는 일부 사이트[12]에서 Vue 프로젝트의 성공적인 구축 사례가 큰 촉매가 되여 대기업을 중심으로 프로젝트에서 많이 선호되고 있는 편이다. 물론 백엔드는 당연하겠지만 밑도 끝도 없이 최소 스프링 내지 전자정부표준프레임워크.

[1] 버전 3이 나온지 얼마 되지 않아 아직 Vue 2도 같이 지원되고 있고, 2.7 LTS 버전을 마지막으로 3로 완전히 전환할 계획이다. 아직도 나온지 2년 정도로 오래된 수준은 아니지만, 사용률이 너무 저조하여 Vue 개발 진영에서 3을 정착시키기 위해 상당히 노력하고 있다. [2] 단, 별도 script 태그를 통해 작성이 가능하나, IDE에서 인식 못할 수 있다. [3] 이러면 초기 로딩이 오래 걸리는 것 아니냐고 할 수도 있는데, Vue Router는 Lazy Load를 지원해서 최초 로딩 시에 로딩하지 않고 컴포넌트가 필요하게 된 시점에 해당 컴포넌트를 로딩해오는 것이 가능하다. [4] HTML 작성할 때 태그 이름 뒤에 적어 넣는 것들. 컴포넌트에서 어떤 프로퍼티를 받아들일지를 정의할 수 있다. [5] Promise나 콜백 등의 비동기 작업이 없는 함수. [6] 프랑스어에서 따왔으며, 정확한 발음은 빋/vit/이다. [7] Go로 만들었기 때문에 Webpack 등의 기존 도구들보다 빠른 속도를 자랑한다. 그리고 Webpack 팀이 이 속도에 대응하기 위해 Rust 기반인 Turbopack 을 개발하고 있다. [8] 4.0부터 SSR 부문에 많은 개선이 이루어져, 이를 사용하는 SvelteKit 및 Astro 가 많은 발전을 이루었으나, 정작 본진의 풀 스택 프레임워크인 Nuxt.js가 다른 경쟁 프레임워크보다 다소 늦게 출시 후 안정화 되었다. [9] GitHub와 비슷한 무료 git 저장소이다. [10] 링크는 캡처본. [11] 행정기관 및 공공기관에서 상용SW 직접구매 대상 제품은 사용이 가능하다. 상용SW 직접구매 대상 제품 중 Development Platform UI Dev 2.x는 Vue.js로 변환되어 출력할 수 있어 Vue.js의 UI editer로 사용이 가능하다. React의 UI editer라고 할 수 있는 Framer는 보안적합성 검증제도에서 보안적합성검증 대상기관이 가급 또는 나급인 곳에서는 아직 사용할 수 없다. [12] 공개된 대표적 사례로 중소벤처기업부 산하 중소기업유통센터 주관 쇼핑몰 사이트인 가치삽시다가 NHN 주도로 Nuxt.js 사용.

분류