Can I use ... Vue 3?

Vue 3의 등장

• 강화된 Typescript 지원
• 더욱 세분화된 타입 선언

• 코드 재사용을 위한 Composition API (setup)

• Template 내 최상위 Element 가 두 개 이상이 되어도 됨

• teleport

• suspense

• multi v-model

• 등

Composition API

• 원래는 Vue 2의 커뮤니티 라이브러리 (@vue/composition-api)

• 동일한 Composition 코드로 Vue 2와 Vue 3 둘 다 사용이 가능

실무자가 바라본 Vue 3

• 그럼 바로 이를 적용해야 할까? → 그것은 아님
• Vuetify, Vue-datepicker, Vue-lazyload 등
• 아직까지 제대로 Vue 3를 지원하는 커뮤니티 라이브러리 미비

• 그럼 해당 라이브러리 모두 걷어내고 Vue 3로 다시 짜면 어떨까
• 그러나 Vue 3에서는 IE를 지원하지 않는다 → 이 경우에는 Vue 2.7 (개발중) 이용
• Vue 2.7 에서는 위 Vue 3에서 등장한 특징들을 Vue 2에서 사용할 수 있도록 지원
• 즉, IE가 필요한 사이트는 Vue 2로

• 서비스 개발에 있어 2021년에는 아직 Vue 2가 우세 (VueSchool)
• 따라서 입문자는 Vue 2를 먼저 공부하는 것이 적절하다

실무자의 고민

• 그럼 그냥 2021년은 가만히 있어야 하나?
• Vue 2의 Composition API와 TypeScript를 먼저 도입해보자

• @vue/composition-api
• Vue 2에서 Components의 재사용 가능 로직을 작성할 수 있도록 도와줌
• 함수 기반의 API 작성 가능으로 TS 추론 이점 극대화
• Data, Logic 목적(도메인)별로 관심사 분리 가능
• React Hook 방식을 채택 + 단점 보완
• 분기문, 반복문, 중첩 함수 내에서 사용 가능
• 컴포넌트 생성 주기에 따라 최초 한 번만 실행
• React Hook은 State의 변화에 따라 화면이 다시 그려질 때, Hook이 다시 실행되거나 하는 경우가 존재

@vue/composition-api 예시

// Vue 2

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change</button>
  </div>
</template>

<script>
import { ref } from '@vue/composition-api';

export default {
  setup() {
    const message = ref('hi');
    const changeMessage = () => message.value = 'hi Vue 2';

    return { message, changeMessage };
  },
};
</script>

// Vue 3

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change</button>
  </div>
</template>

<script>
import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('hi');
    const changeMessage = () => message.value = 'hi Vue 2';

    return { message, changeMessage };
  },
});
</script>

• 다만 Composition API로 모든 코드를 작성하는 것은 비추천
• setup 의 목적은 그저 '재사용성'
• 따라서 Composition API로 인해 Vue 의 생산성이 떨어진다고 생각되는 경우
• 해당 로직에서는 사용하지 않는 것이 좋다. (= 생각 없이 사용하지 말자)

• ex) Modal을 열고 닫는 것과 같이 중복되는 로직이 존재 → Composition API로 분리 가능

@vue/composition-api 주의 사항

• 기존 Mixin 또는 HOC 코드 재활용 방식은 가급적 지양
• Vue JS 커뮤니티 자체가 Composition API로 방향을 진행중
• 예전 Mixin이나 HOC는 더 이상 유효하지 않음
• 특히 Mixin과 Composition API가 서로 뒤섞인 경우, 디버깅이 어려워질 수 있음
• 기존 코드 → Composition API 형태로 점전적 개선 추천

• TS와 같이 사용했을 때 효과 상승
• Hook(Composition)에서 정의한 파일을 컴포넌트 안에서 재선언 했을 때 실수를 피할 수 있음

• reactive API 보다는 ref API 사용을지향
• reactive 는 객체를 Reactivity 하게 만드는 API
• 이는 디버깅을 어렵게 만들 수 있음

• Vue 3에서 제공되는 API가 모두 지원되지는 않음
• Vue 2의 @vue/composition-api 는 95%정도 지원된다 생각

Vue 2의 TypeScript 지원

• Class 문법보다는 Vue.extend() 를 이용한 객체 문법 지향

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data: () => ({
    message: '',
  }),
  methods: {
    changeMessage() {
      this.message = 10; // Type Error
    },
  },
});
</script>

• Vue 3 마이그레이션이 수월
• 쉽게 TypeScript 적용이 가능

• tsconfig.json 파일에 noImplicitThis: true 옵션 추가
• SFC(Single File Component) 내에서 타입 추론이 정확하게 이루어짐

• Computed 속성의 반환 타입은 반드시 정의
• 정의하지 않으면 컴포넌트 내에서 타입 추론이 제대로 이루어지지 않음

• Store 등 기타 타입 정의는 d.ts 파일에 정의
• 선언 파일을 하나 정의해서 관리하는 것이 프로젝트 관리에 있어 좋음

기존 Vue 프로젝트에 TS를 적용하려면?

1. CLI 명령어로 TS 플러그인을 추가 or 타입스크립트 기반 새 프로젝트 생성
• 발표자는 후자를 추천
• 호환성 확보를 위해 라이브러리 버전들을 맞춰줘야 하는데
• 이 때, 아예 새 프로젝트를 생성하는 것이 좀 더 수월하게 진행됨

2. tsconfig.json 파일에 allowJS 및 noImplicitThis 옵션 추가
• allowJS : 한 번에 모두 바꾸는 것이 아닌, 점진적으로 바꿔주기 위함
• noImplicitThis : TS 생산성을 높이기 위함

3. 기본적인 Type Errors만 수정하고, any 와 같은 약한 타입부터 점진적으로 적용
• TS 변환 후, JS 파일에서 조금씩 타입 에러가 발생될 것
• 이 부분들을 시작으로 점진적으로 타입을 정의해 나감

4. npm run build 가능한 수준의 타입 정의 및 수정
• 처음부터 구체적인 타입보다는 any 와 같은 타입들부터 정의

5. strict 레벨을 올려가며 효용성이 높은 곳에 점진적으로 타입 정의 진행

정리하자면

• Vue 2에서도 Vue 3의 Composition API와 TypeScript 사용이 충분히 가능하다

• Vue 3는 Core와 Community Ecosystem이 충분히 성숙해졌을 때 도입해보자
• 아마 IE 지원이 끝나는 2022년 6월 이후

• 사용자 층과 브라우저를 선택할 수 있는 경우 Vue 3를 선제적으로 도입해볼 수 있음

그 외 사항

VueUse (GitHub)

• Vue 2와 Vue 3 모두 사용 가능한 Composition API 라이브러리

• 148개 Util API 지원

• Web API, Animation, Electron, Firebase, Router, ...

팁

• VSC Vetur 플러그인의 "ts" + tab 단축키를 이용해 .vue 파일 생성하면 편하다

• Props 속성을 먼저 정의하고 컴포넌트 태그에서 자동 완성 지원받기

• 타입스크립트 핸드북 - JS에 TS 적용하기