[Vue.js] Vue 프로젝트 생성할때 TypeScript 적용하기

안녕하세요.

오늘은 Vuejs에서 타입스크립트(TypeScript)를 적용하는 방법에 대해 알아보겠습니다.

 

Vue.js 프로젝트에 타입스크립트를 적용하는 방법은 두 가지가 있습니다.

 

첫번째로 프로젝트를 생성할 때 타입스크립트를 선택할 수 있습니다.

해당 옵션을 선택하여 진행할 경우, Vue.js 프로젝트가 생성되면서 환경설정 및 구조를 자동으로 생성하기 때문에 굉장히 편리하지만 필요한 특정 플러그인, 혹은 라이브러리의 버전을 수정하거나 구조를 수동으로 변경해야하는 번거로움이 있습니다.

 

두번째로 이미 존재하는 프로젝트에 타입스크립트를 적용하는 방법이 있습니다.

이미 기존에 Vue.js와 자바스크립트로 진행했던 프로젝트가 있는 분들이 많이 선택하시는 방법으로 점진적으로 타입스크립트를 적용할 수 있습니다.

nuxt를 설치하고 일부 값을 변경하여 빌드 환경을 구축하고 사용할 수 있는데, 기존 코드들의 타입을 선언해주어야 하고 js파일을 ts파일로 변경하는 등 생각보다 번거로운 작업이 많습니다.

 

 

그래서 여기서는 비교적 간단한 신규 프로젝트를 생성한다는 가정하에 첫번째 옵션인 Vue.js & typescript 프로젝트를 생성하는 방법을 알려드리려고 합니다.

 

우선 프로젝트를 생성하기 전에 Vue.js와 node.js 등을 설치해주시고, vscode를 쓰시는 경우 extension도 설치해줍니다.

신규 프로젝트를 설치할때 해당되지 않지만 이미 존재하는 프로젝트에 타입스크립트를 추가할 경우, prettier를 포함한 일부 플러그인은 설치 순서에도 영향을 받으니 본인이 사용하는 플러그인의 종류와 버전도 알아두시는걸 추천드립니다.

 

 

vscode의 터미널에서 아래 명령어를 입력해줍니다.

여기서 testvueproject는 프로젝트명이자 폴더명이니 원하시는 이름으로 바꿔주시면 됩니다.

vue create [프로젝트명]

예시)
Spencers-MacBook-Pro testvueproject % - vue create testvueproject

 

해당 명령어를 실행하고 나면 Vue.js의 버전을 물어봅니다.

기존에 프로젝트를 진행하시던 분들은 2버전을 많이 사용하실 것이고 새로 공부하시는 분들은 3버전을 많이 사용하시는 것 같더라구요.

하지만 여기서 프로젝트를 타입스크립트와 함께 설정하기 위해서는 가장 아래의 Manually select features를 선택해주셔야 합니다.

Vue.js 프로젝트 설치화면 - 1

 

Vue.js 버전을 선택하고 난 뒤에는 함께 프로젝트를 구성할 기능들을 선택하면 됩니다.

아래 설명과 같이 원하는 기능으로 키보드를 통해 이동한 뒤, space바를 눌러 선택하면 됩니다.

저는 여기서 TypeScript만 선택하였습니다. (Babel과 Linter는 기본으로 선택되어 있음)

Vue.js 프로젝트 설치화면 - 2

 

그 다음으로는 Vue.js 버전을 선택해 주시면 됩니다.

저는 최근 많이 쓰이는 3.x버전을 선택했습니다.

Vue.js 프로젝트 설치화면 - 3

2020년부터 Vue.js 3.0도 정규 버전이 출시되어 많이 사용되고 있는 추세입니다.

자세한 내용은 아래 문서를 읽어주세요.

(https://vuejs.org/guide/introduction.html)

 

그 다음으로는 클래스 스타일 컴포넌트 syntax를 사용할 것이냐고 물어보는 질문이 나옵니다.

최근에는 Composition API와 같이 Setup()만 구성해놓고 자유롭게 사용하는 추세입니다. (= Extended 형식)

따라서 N을 적고 엔터를 칩니다. 

(해당 질문에 대한 답변은 본인 프로젝트 구성에 맞춰 직접 선택하시면 됩니다.)

Vue.js 프로젝트 설치화면 - 4

 

그 다음으로는 babel과 타입스크립트를 함께 사용하냐는 질문이 나올탠데 Yes를 입력해줍니다.

babel에 대해서는 추후 다루겠습니다.

그 뒤에는 ESLint와 함께 사용할 formatter를 설정하면 됩니다.

저는 강사님들이나 블로거분들을 보고 Prettier를 선택했습니다. 

Vue.js 프로젝트 설치화면 - 5

 

해당 옵션에서는 Lint on save를 선택합니다.

Vue.js 프로젝트 설치화면 - 6

 

마지막으로 config 파일 설정인데 설정 파일을 독립적으로 두고 관리하는 것이 확장성을 확보하는데 좋기 때문에 In dedicated config files를 선택합니다.

Vue.js 프로젝트 설치화면 - 6

 

마지막으로 설정(preset)을 저장하겠냐는 질문에 y를 입력하시고 엔터를 치시면 설정이 끝나고 설치가 시작됩니다.

경우에 따라 preset 저장명을 물어보기도 하는데 사용자가 원하는 이름으로 저장해두셨다가 사용하셔도 됩니다.

Vue.js 프로젝트 설치화면 - 6

 

이렇게 Vue.js 프로젝트를 구성해보셨다면 터미널에서 아래 명령어를 입력하여 서버를 실행시켜서 서버가 동작하는 것을 확인해보실 수 있습니다.

npm run serve

 

서버가 실행되면 아래와 같은 화면이 표시되고, 주소 위에 마우스를 가져다대고 cmd 클릭을 하시면 기본 브라우저에서 해당 서버를 열어보실 수 있습니다.

Vue.js 서버 실행화면

 

서버 화면

 

 

끝!