[입문] Vue3 설치하기, 실전 편 ①

Vue-CLI를 사용하여 기본적인 Vue.js 프로젝트를 구성해보았다면, 이제 Vue3에서 권장하는 환경 설정으로 프로젝트를 구축하여 현업에 가깝게 실습해보도록 하자. 한 가지 알아둘 것은, 공식적인 권장사항이 필수는 아니다. 현업에서 프로젝트는 다양한 환경이 있고 본인이 익숙한 프레임워크 혹은 라이브러리를 사용하지 못할 수도 있다. 그러므로 늘 차선책을 준비해서 문제없이 프로젝트를 진행할 수 있기를 바란다.

 

왼쪽부터 Vite, Vue, Typescript

Vue3는 JavaScript가 아니라 TypeScript를 권장하고 있으며, Vue.js 라이브러리들이 점차 TypeScript를 지원하도록 발전하고 있다. 물론 JavaScript를 아예 쓸 수 없는 것은 아니지만, 웹 프로그래밍 언어의 흐름은 JavaScript에서 TypeScript로 발전하고 있는 추세인 만큼, 이 글을 시작으로 연재될 실전 편 시리즈에서는 TypeScript를 기본으로 작성할 예정이다.

 

이제 프로젝트 구축에 필요한 Vite + Vue3 + TypeScript에 대해 하나씩 알아보자.

 

① Vite

갑자기 생소한 Vite가 나타났다. 하지만 Vite은 점차 많은 프로젝트에 사용되고 있고, 그 성능을 인정받고 있다. Vite은 Webpack과 같은 번들링 도구다. JavaScript의 최신 기능들은 계속해서 나오고 있지만, 모든 브라우저에서 JavaScript가 호환되는 것은 아니다. 그래서 Webpack, Rollup 같은 번들링 도구를 통해 우회해서 모든 브라우저에서 호환될 수 있도록 하였고, 이는 프런트엔드 개발자들의 생산성을 크게 향상할 수 있었다.

 

그러나 애플리케이션이 점점 발전함에 따라 처리해야 하는 JavaScript 모듈의 갯수도 비약적으로 증가했다. 심지어 대규모 프로젝트에서는 수 천 개가 넘는 모듈이 사용된다. 이런 상황 속에서 JavaScript 기반의 도구는 성능 병목 현상이 발생되었고, 개발 서버를 재가동하는 데 비효율적으로 시간을 들일 수밖에 없었다. 프런트엔드 개발을 할 때도 변경된 파일이 적용될 때까지 수 초 이상 소요되곤 한다.

 

즉, 프로젝트의 규모가 커짐에 따라 번들링하는 속도가 느려졌고, 그 문제를 개선하기 위해 나온 것이 Vite다. 이름에서 알 수 있듯이 Vue.js를 위해 만들어졌지만, 효용성이 뛰어나 React, Svelte에서도 Vite을 사용하기 시작했다.

 

설명은 장황하게 했으나, 실제로 Vite 설정하는 것은 초반엔 거의 없다고 봐도 무방하니 겁먹지 말자. Vite이 어떤 역할을 하고, 어떤 이유로 나왔는지만 알아도 충분하다. 실제로 프로젝트 진행했을 때 개선된 퍼포먼스를 체감할 수 있었는데, 단순히 빌드하는 시간도 줄여주는 데 사용하지 않을 이유가 없다.

 

② Vue3

Vue3의 가장 큰 특징은 Option API가 아니라 Composition API를 사용한다는 점이다. Composition API를 간단하게 설명하면, 프로젝트가 커질 수록 데이터가 어디 있는지 찾기가 어렵고 관리가 복잡해지는 Vue.js의 단점을 보완하기 위한 개발 패턴이다. 

 

Vue.js의 라이프 사이클에 의거하면, 기능을 처리하는 로직이 computed 혹은 methods로 나뉘어 있어 데이터가 어디서 처리되는지 확인하기 어렵다. 그러나 Composition API를 사용하면, 각 데이터들에 대한 로직을 한 곳에서 묶어서 처리할 수 있게 되어 더욱 간결하고 직관적인 처리가 가능하도록 설계되어있다.

 

그 외 더 많은 변경점은 Vue3 공식 문서와 Vue.js 블로그에 정리되어 있으니 참고하여 잘 숙지하길 바란다.

 

[Vue3 공식 문서]

https://v3-docs.vuejs-korea.org/

Vue.js - The Progressive JavaScript Framework | Vue.js

 

[Vue.js 블로그 - Vue 3 as the New Default]

https://blog.vuejs.org/posts/vue-3-as-the-new-default.html

Vue 3 as the New Default | The Vue Point

 

③ TypeScript

자바스크립트에 정적 타입 문법을 추가한 프로그래밍 언어이며, 현업에서도 많은 개발자들이 선호하고 있는 추세다. 자바스크립트의 기반으로 만들어진 만큼 자바스크립트의 기능은 모두 지원하고 있으며, 가장 큰 차이점 Compile 단계에서 Error를 잡아주기 때문에 디버깅이나 효율성 측면에서 굉장히 높은 평가를 받고 있다.

 

 

Vite 기반 Vue3 프로젝트 설치하기

Vite + Vue3 + TS에 대해 알아보았으니, 이제 Vite 기반 프로젝트를 설치해보자.

 

// npm 6.x 이하
npm create vite@latest <project-name> —template vue-ts

// npm 7.x 이상
npm create vite@latest <project-name> -- —template vue-ts

 

npm에서 설치를 지원하며, 위 명령어처럼 입력하면 Vite 기반의 TypeScript를 지원하는 Vue.js 프로젝트가 생성된다. Node.js 버전은 꼭 16.x 이상 버전으로 설치한다.

 

npm 버전에 따라 명령어가 다르니 npm -v를 통해 버전을 확인 후, 버전에 맞는 명령어를 입력하여 설치한다. 그리고 이후 생성된 프로젝트에 들어가 npm install을 실행시킨 후, npm run dev를 통해 개발 모드까지 진입하면 기본적인 설정은 끝났다.

 

이제 다음 편에서 현업에선 어떻게 환경 설정하는지, 그리고 필수적으로 설치해야 하는 라이브러리들이 무엇이 있는지 이어서 작성될 예정이다.