📆 23.02.10 - Vue 3..! 이전 버전과는 무엇이 달라졌을까

Vue 3 의 도입

기본적으로 Vue 프레임워크를 사용하고 있는 유저들은 Vue 2.x 단계를 사용하고 있었다. 그렇지만 22년 상반기부터 Vue는 공식적으로 버전 3을 내세우기 시작하였다. 여기서 Vue 2와 다른 점이 없다고 말하기도, 달라진 부분이 많아졌다 하기도 애매한 것이 이 Vue 3인 것 같다.

기존에 상용되었던 Vue 2와 한번 비교해볼까 한다!

본격적인 글에 앞서 Vue 2에 대한 소식 ( Official 입니당 )

Vue 3 공식문서에서 공부 과정에서 발견한 글이다.
Vue 2 에 관한 지원은 23년이 마지막 이라고 한다. 혹시라도 많이 부족한 이 글을 접한 모든 분들은 Vue 개발 공부 방향성에 있어 참고하면 좋을 것 같다!

Vue 3가 공식화되었습니다

유명한 프론트엔드 프레임워크 3인방 (Angular, React (사실 라이브러리), Vue) 중에서 Vue라는 친구는 타 프레임워크에 비해 러닝커브가 상대적으로 완만하다. 그래서 필자도 정보보호학을 전공하다 적성이 안맞아 프론트엔드를 독학할 때 그러한 이유로 Vue를 처음 선택하여 개인 프로젝트를 만들게 되었다.

그만큼 Vue는 프레임워크라는 장점을 최대한 살려 개발자들이 좀 더 코드를 작성할 때, 기능을 구현하려고 할 때의 난이도를 최소화하려는 모습을 보였었다.

이번 Vue 3 업데이트는 그러한 모습 속에서 기능적으로, 코드를 설계할 때에 다양한 환경에서 잘 짜임새 있는 구조로 무언가를 더 더해가는 것 같다. Vue 2에서 엄청나게 크게 바뀐 부분은 없으니 걱정하지 말고 공식문서를 참고해가며 변경점 차근차근 이해해 나가도록 하자.

Install

설치는 기존 Vue 2 에서의 방식과 크게 다르지 않다.
npm create vue@3 그런데 다른 방법이 있다는 것을 공식문서를 통해 알게되었는데,

바로 npm init vue@latest
이 방법은 Node.js 가 설치되어있는 가정하에 실행하면 되는데, 공식 Vue 프로젝트 및 그거에 필요한 부속품(?) 들을 함께 설치해주는 명령어이다. 아래와 같은 선택지가 나오는데, 개발자들이 어떻게 개발할 것인지에 따라 다르게 설정해주면 된다. 참고로 하단은 Vue 공식 홈피의 Default 값이다.

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

아 부가적으로 원래는 Vue 가 Default Bundler로 Webpack을 사용했는데, 이번에 공부하려고 Vue 3 프로젝트를 설치해보니 자동적으로 Vite로 사용이되는 것을 볼 수 있었다. 덕분에 컴파일이랑 서버 여는 속도가 좀 빠르다는게 느껴지긴한다.

Reference
https://v3-docs.vuejs-korea.org/guide/introduction.html#api-styles
https://javascript.plainenglish.io/differences-between-vue-2-and-vue-3-ee627e2c83a8