Vue.js

자바스크립트로 개발된 컴포넌트 구조 기반 프론트엔드 프레임워크. 보통 뷰 라고 부른다. (view) 최신 버전은 3.0이다.[1]

이러한 HTML 파일이 있다고 가정했을 때,

<div id="app">
  안녕, {{ name }}!
</div>

해당 코드를 실행시키면,

Vue.createApp({
  data() {
    return {
      name: '나무위키'
    }
  }
}).mount('#app')

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

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

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

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

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

Vue 컴포넌트들 간의 데이터 공유를 도와주는 라이브러리. Vuex를 사용하지 않은 Vue 애플리케이션에서 컴포넌트 간에 데이터를 공유하려면 상위 컴포넌트에서 하위 컴포넌트로 Property[3]를 넘기거나, 하위에서 상위 컴포넌트로 이벤트를 송신하는 방법이 있는데, 이 방식을 사용하면 해당 컴포넌트에서 멀리 떨어진 컴포넌트까지 데이터를 공유하려고 할 때 상당히 골치가 아파진다. Vuex는 이 문제를 중앙화된 Store 안에 state를 통해 애플리케이션의 상태를 관리함으로써 해결하는데, 중앙화된 store 속 데이터는 컴포넌트 어디서나 자유롭게 읽을 수 있으며, Store 안에 등록할 수 있는 동기적 함수[4]인 Mutation을 통해 데이터를 변경할 수 있다. Vuex를 사용함으로써 얻을 수 있는 편의성이 매우 크기에, 좀 규모가 되는 Vue 애플리케이션을 작성할 때 없어서는 안 되는 물건이다.

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

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

vue-loader는 Vue의 SFC(Single File Component, 한 파일 내에 템플릿과 스크립트, 스타일시트가 모두 들어가는 형태의 컴포넌트이다) 지원을 추가하는 Webpack 플러그인이며, Vue CLI로 생성한 모든 프로젝트들에 적용된다. 확장자는 .vue를 사용한다.

Vetur는 Vue를 위한 Visual Studio Code 플러그인이며, .vue 파일 지원이나 커스텀 템플릿 문법 지원 등 다양한 기능을 내장하고 있다.

Vue Devtools는 브러우저 상에서 컴포넌트와 이벤트, Vuex Store를 실시간으로 확인할 수 있게 해주는 브라우저 확장 프로그램이다. 크롬과 파이어폭스를 지원하며, Electron 앱 버전도 있다.

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

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

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

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