Vue 3 컨퍼런스 키노트 내용요약 (Vueconf.US)

KEYNOTE: Vue 3.0 Update (Evan You)

• 한국 시간 2021년 4월 16일 22시에 온라인 컨퍼런스에서 발표한 내용 간단 요약
• Vueconf.US 사이트 : https://us.vuejs.org/

Vue 최근 동향

• 매주 1.58M devtools extension 사용자
• 매달 9.4M npm 다운로드
• 작년에 비해서 Devtools는 1.1M에서 1.58M으로 43.6% 증가, npm은 6.2M에서 9.4M로 51.6% 증가

Vue 3이 정식 릴리즈 된 후로 어떤 일들이 있었는가?

• 2020년 9월 18일 Vue 3.0 One Piece 정식 릴리즈
• Vue 3 stabilization와 DX explorations

Vue 3 안정화

1. Vue Router 4 버전이 이제 안정적이다. stable 버전 릴리즈
   • 2021년 4월 15일 기준으로 v4.0.6버전이 최신 릴리즈되었음.
   • Vue Router 4 Github : https://github.com/vuejs/vue-router-next
   • Vue Router 4 공식문서 : https://next.router.vuejs.org/introduction.html
2. Vuex 4 버전도 이제 안정적이다.
   • 2021년 4월 15일 기준으로 v4.0.0버전이 최신 릴리즈되었음.
   • Vuex 4 Github : https://github.com/vuejs/vuex
   • Vuex 4 공식문서 : https://vuex.vuejs.org/
3. Vue 3버전의 Ecosystem이 하나둘씩 나오고 있음.
   • Nuxt 3 (https://ko.nuxtjs.org/)
   • Vuetify (https://vuetifyjs.com/en/)
   • Quasar (https://quasar.dev/)
   • Element Plus (https://element-plus.org/#/en-US)
   • Ant Design Vue (https://antdv.com/docs/vue/introduce-cn/)

DX(Developer eXperience) 탐구

• 향후 개발은 빌드 도구, 코드 작성 경험(authoring experience), IDE 지원으로 이렇게 3가지 방향으로 나아갈 것이다.

New Build Tools (새로운 빌드 도구들)

1. Vite

   • Vite라는 새로운 빌드 도구는 Vue 개발자들에게 프레임워크에 구애받지 않고 빠른 빌드 도구를 제공해준다. (비:트 라고 읽음)
   • Vite 공식 문서 : https://vitejs.dev/

     - SPA 구축을 위한 독립 실행형 Vue-CLI로 사용할 수 있다.
     - 네이티브 ESM을 통한 HMR(Hot Module Replacement) 지원한다.
     - esbuild 기반의 dependency pre-bundling 지원
     - rollup-compatible 플러그인 인터페이스
     - 내장 SSR 지원

   • 단기적으로 Vite와 vue-cli는 따로 공존하지만, 장기적으로는 빠른 속도의 Vite와 포괄적인 지원을 하는 vue-cli를 합치는 방향으로 갈 것이다.

2. VitePress

   • Vue3 + Vite를 이용한 정적 사이트 생성기
   • 마크다운의 동적 컴포넌트의 자유로운 혼합
   • 정적 컨텐츠에 대한 자동적인 double-payload 제거
   • VitePress에 대한 Evan You의 의견 : https://github.com/vitejs/vite/issues/248#issuecomment-633627213

More Ergonomic Syntax (더 인체공학적인 구문)

• Vue 코드를 작성하는 환경을 개선하기 위해 인체공학적인 구문에 대한 실험을 하고 있다.

1. <script setup>
   • RFC : https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
   • SFC에서 더 인체공학적인 Composition API 사용법이다.
   • 런타임 성능 향상
   • Vue SFC Playground 링크 : https://sfc.vuejs.org/

<template>
  <h1>{{ msg }}</h1>
</template>

<script setup>
  const msg = 'Hello World!'
</script>

2. <style> var injections
   • RFC : https://github.com/vuejs/rfcs/blob/style-vars-2/active-rfcs/0000-sfc-style-variables.md
   • v-bind()를 사용하여 SFC의 <style> 내부에 JS-state-driven 변수를 삽입하는 방식이다.
   • 오버헤드 없이 CSS-in-JS 효과를 가져온다.

<template>
  <div class="text">hello</div>
</template>

<script>
  export default {
    data() {
      return {
        color: 'red',
        font: {
          size: '2em',
        },
      }
    },
  }
</script>

<style>
  .text {
    color: v-bind(color);

    /* expressions (wrap in quotes) */
    font-size: v-bind('font.size');
  }
</style>

IDE / TS suppert (IDE / 타입스크립트 지원)

• IDE/TS에 대한 많은 프로젝트를 진행 중이다.
• Vetur, VueDX, Volar
• TypeScript와 함께 SFC 템플릿에 대한 타입 체킹, 리펙토링같은 검증하기 위한 도구 제공

향후 계획

• Vue 3에서는 IE11을 지원하지 않는다.
• IE11 지원이 절대적으로 필요한 사용자들을 위해 Vue 2.7버전은 중요한 Vue 3 기능을 backport 하고, TS 지원을 개선한다. (2021년 3분기 추정)
• 아직까지 Vue 3이 정식 릴리즈하고 난 후 Vue 개발자 중에서 약 8%만 Vue 3을 사용한다고 한다. Vue 2과 호환이 되는 Vue 3 전용 마이그레이션 빌드 출시할 예정 (2021년 4월 말 예상)

참고

• 발표자료 링크 : http://evanyou.me/vueconfus
• 좋은 피드백 감사합니다. 오타 수정 및 링크 추가하였습니다.