[Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript)

 

2020.08.26 - [개발일기/TypeScript] - [TypeScript] 타입스크립트 시작하기

[TypeScript] 타입스크립트 시작하기

이번 포스팅 주제는 Vue3와 TypeScript 사용하기이다.

이 포스팅 전체는 아래 강의를 바탕으로 의역하면서 정리한 내용이다.

Why Vue & TypeScript - Vue 3 + Typescript | Vue Mastery

소개(Introduction)

Vue3에서 가장 흥미로운 주제 중 하나가 TypeScript에 대한 내용이다.

TypeScript를 도입하고 싶지만 과연 Vue3와 TypeScript 가 잘 어울리는지, 미지의 TypeScript를 현재 코드의 도입하기가 쉽지 않다.

이번 포스팅을 통해 Vue3와 TypeScript 문제점과 다양한 관점을 통해 위와 같은 걱정거리를 정리하는데 도움이 되길 바란다.

 

TypeScript란?(Defining TypeScript)

우선, TypeScript가 뭔지 살펴보자.

TypeSrcipt 공식 웹사이트를 가보면 이러한 문구가 있다.

“TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions.”

간단히 내 마음대로 해석하자면,

JavaScript로 만들어졌고 거기에 정적 타입 정의(static type definitions)을 추가한 게 바로 TypeScript이다.

www.typescriptlang.org/

Typed JavaScript at Any Scale.

TypeScript 정의

JavaScript를 사용하여 정적 타입에 대해 살펴보자.

var mysteryBox = ? ? ?

위와 같이 변수를 정의하고 그 안에 어떤 타입이든 자유롭게 할당이 가능하다.

이게 바로 자바스크립트에서 기본인 동적 타입(dynamically typed) 이다.

예를 들면, mysterBox에는 string, number, boolean, array, object 등 모든 타입들을 포함할 수 있다.

mysteryBox 변수

동적 타입은 많은 장점이 있지만, 단점도 당연히 존재한다.

단점 중에 하나는 코드를 보고 어떻게 작동되는지 예측이 힘들다는 점이다.

아래 코드를 보게 되면 myAge라는 변수는 항상 number 타입이어야 하는데 도구를 사용하지 않는 한 확인이 어렵다.

따라서 조건문을 추가해 이 myAge가 number 타입인지 체크해야 된다.

var myAge = 23

function increaseAge() {
    if (typeof(myAge) === "number") {
    	myAge += 1 
    } else {
    	console.error("myAge is not a number")
    }
}

이런 상황이 바로 정적 타입의 필요성을 느낄 수 있다.

정적 타입은 값이 변하지 않고 고정되어 있고, 미리 타입을 정의하여 myAge가 항상 number 타입이라는 걸 알 수 있다.

 

이제 Vue 프로젝트에서 TypeScript 사용 시 장, 단점을 살펴보자.

 

TypeScript의 비용 문제(The cost of TypeScript)

코드에 새로운 dependency(라이브러리 같은 것들)를 추가하는 것과 마찬가지로, 가장 큰 비용은 새로운 개발자가 새로운 도구로 개발을 해야 될 때 배우는 러닝 커브(학습 곡선)이다.

많은 개발자들이 JavaScript를 기초로 프로그래밍의 세계로 입문하게 되는데 이것은 새로운 패러다임과 배울 점이 많다는 것을 의미한다.

하지만, 일정이 촉박한 개발팀에서는 이러한 패러다임과 배울 것들은 썩 유쾌하지 않다.(새로운 패러다임과 배울 것보단 우선 일정 마감이 우선이라는 뜻)

 

솔직히 말하면, TypeScsript를 추가하는 것은 단순히 한 부분을 처리하기 위해 라이브러리를 추가하는 것보다 훨씬 더 큰일이다.

TypeScript는 애플리케이션 전체에서 사용되어지고, 레거시 코드에 대한 리팩터링 할 시간도 없는데 TypeScript를 사용을 위해 전체 코드를 다시 작성하는 건 상상이 되지 않는다.(말도 안 된다!!)

 

그리고 TypeScript를 추가하자마자 전체 코드가 갑자기 좋아지거나 버그가 없어지는 건 아니다.

 

다른 도구와 기술들과 마찬가지로 팀 개발 환경이 더 행복하게 되려면 타협과 절충이 필요하다.

TypeScript를 사용하고 싶은가요?

 

TypeScript는 무섭지 않다(TypeScript are not as scary as you think)

기존의 JavaScript 동적 타입을 사용하던 사람들은 TypeScript를 보면 낯설고, 이상하고 느낀다.

하지만 Vue를 사용해봤다면, 높은 확률로 타입을 활용했을 가능성이 있다.

아래 코드를 보면서 살펴보자.

// BasicButton.vue
<script>
export default {
  props: ['color', 'text']
}
</script>

<template>
  <button :class="color">{{ text }}</button>
</template>

이 코드는 버튼 컴포넌트이고 배열 형태인 props로 color, text를 받아 배경 색과, 버튼 명을 지정한다.

하지만, 대부분의 Vue로 작성된 코드를 보면 props을 배열 형태가 아닌 객체 형태로 작성한다.

객체 형태로 작성하게 되면 더 많은 작업을 할 수 있다.

타입 정의, 기본 값 정의 등 활용이 가능하다.

// BasicButton.vue
<script>
export default {
  props: {
    color: {
      type: String,
      default: 'blue'
    },
    text: {
      type: String,
      requied: true
    }
  }
}
</script>

<template>
  <button :class="color">{{ text }}</button>
</template>

위와 같이 객체로 정의해 type을 정의해 더 정확한 데이터를 받을 수 있다.

추가로 validator를 사용해 type 뿐 아니라 조건을 추가할 수 있다.

// BasicButton.vue
<script>
export default {
  props: {
    color: {
      type: String,
      default: 'blue',
      validator: (value) => {
        const validColor = ['red', 'green', 'blue']
        return validColor.includes(value)
      }
    },
    text: {
      type: String,
      requied: true,
    }
  }
}
</script>

<template>
  <button :class="color">{{ text }}</button>
</template>

정리하면, 인지하고 있을진 모르겠지만 우린 Vue를 사용하면서 정적 타입을 다루고 있었다.

 

TypeScript 사용할 가치가 있는가?(Is TypeScript worth it?)

지금까지 정적 타입에 대한 필요성을 이야기했지만, 과연 TypeScript를 프로젝트에 추가해야 되는지에 대한 의문이 남아있다.

TypeScript는 타입 체크를 함으로써 장점이 많지만, 위에서 언급했듯이 새로운 도구를 도입하려면 그거에 맞는 비용이 발생한다.

새로운 도구를 도입해서 얻을 수 있는 장점을 살펴보자.

 

TypeScript에 대한 경험이 없는 팀에서 도입할 예정이라면, 확장성(scalability)이 최대의 장점이라고 할 수 있다.

확장성은 2가지로 나눠서 설명해보자.

1. 프로젝트 규모가 얼마나 큰지?

2. 얼마나 많은 사람들이 프로젝트에 기여하는지?

 

프로젝트 규모(Large Codebases)

앵귤러는 대기업을 두고 설계된 프레임워크인데, 여기서 TypeScript를 의무적으로 사용한 것을 보면 TypeScript 가치를 알 수 있다.

프로젝트 규모가 커질수록 코드량이 많아지고 코드량이 많아지면 자연스럽게 복잡도가 높아진다.

이러한 이유로 개발자들이 신뢰할 수 있는 데이터 구조를 제공하는 TypeScript의 기능이 팀의 생산성을 위해 매우 중요하다,

 

별도의 문서가 없거나, 코드를 개발한 개발자가 떠날 때 주석을 써놓지 않을 경우, TypeScript가 문서 역할을 대신해줄 수 있다.

 

다수의 코드 기여자(Large Number of Contributors)

프로젝트 규모가 작을 경우, 과연 TypeScript가 도움이 될까?

만약 규모가 작은데 프로젝트 기여자가 많을 경우 TypeScript는 분명 도움이 됩니다.

예를 들면, 오픈 소스 프로젝트에 수많은 기여자가 일관된 데이터 구조로 기여할 수 있다.

결국, 유지 보수하는 시간을 아낄 수 있고, 수많은 기여자들의 질문들을 정의된 타입으로 줄일 수도 있다.

 

Vue에서 TypeScript 지원은 어떨까?(What about TypeScript support in Vue?)

Vue2에서 TypeScript를 사용할 때 가장 큰 문제점은 기능을 구현하기까지 너무 많은 시간과 노동이, 즉 비용이 크고 어떤 것들은 또 구현이 안 되는 점이었다. 

예를 들면, Vuex에서 Type을 쉽게 감지할 수가 없고 이 문제를 해결하기 위해 타협을 해야 했다.(원하는 깔끔한 코드가 아닌 이것저것 코드를 억지로 만든다는 의미인 듯)

 

여기까지 읽어보면 사람들이 Vue 프로젝트에서 TypeScript 사용을 기피하는 이유를 알 수 있다.

하지만 Vue3에서 TypeScript가 완전히 다시 작성되었다.

TypeScript 지원이 더 간편해졌고, Vetur, Route, Vuex 등에서도 TypeScript 사용이 Vue2보다 훨씬 더 편해졌다.

 

TypeScript는 점진적으로 추가 가능(TypeScript can be progressively added)

TypeScript를 사용하게 되면 전체 코드를 다 수정해야 된다는 오해를 가지고 있다.

다른 라이브러리와 마찬가지로 특정 기능에만 TypeScript 사용이 가능하다. 점진적으로 TypeScript사용이 가능하다.

따라서 TypeScript를 전체 사용에 대한 부담감을 고민하지 말고 특정 기능에 TypeScript를 사용함으로 얻은 이점이 현재 상황에 적합한지 판단하면 좋을 것 같다.

만약 TypeScript에 대한 장점을 알고 있으면 천천히 리팩터링을 즐겨라

 

결론

아직 TypeScript를 제대로 써본 적이 없지만, 이 포스팅을 작성하면서 점진적으로 공부하고 사용해봐야겠다.

TypeScript 장단점을 알 수 있는 포스팅이었다.

다음 포스팅을 세팅하는 법을 알아보겠다.

 

2021.03.08 - [개발일기/Vue.js] - [Vue.js] Vue 3 + TypeScript #2 - 세팅하기(Setting Up Vue 3 & TypeScript)

[Vue.js] Vue 3 + TypeScript #2 - 세팅하기(Setting Up Vue 3 & TypeScript)