2022년 2월 7일 부터 Vue 3가 Vue의 기본 버전이 되었습니다. 이는 근 2년 동안의 Vue 생태계에서 가장 기념비적인 일입니다. 최근 2년간 Vue에는 다음과 같은 변화가 있었습니다.
- 새로운 Composition API를 통해 더 쉽게 컴포저블(composable)한 코드를 작성할 수 있는 동시에 타입스크립트를 쉽게 도입할 수 있게 되었습니다.
- Vite는 매우 빠른 ESM 기반의 개발 워크플로우를 다양한 프레임워크에 제공함으로써 웹 개발 분야를 휩쓸었습니다.
- 무엇보다도 Vue는 매우 빨라졌으며, Vue 생태계가 전반적으로 발전했습니다.
이 글은 Vue가 거쳐온 변화 과정에 대해 다룹니다. 지금부터 함께 이 변화들이 Vue 개발자들에게 어떤 의미인지, 어떻게 웹 개발에 영향을 끼쳤는지 그리고 미래에는 무엇이 등장할지를 알아보겠습니다.
Vue의 진화
먼저 Vue core와 핵심 라이브러리의 변경 사항에 대해 알아보겠습니다.
Core API의 변화
Vue core의 가장 큰 변화는 두말할 것 없이 Composition API입니다. Composition API는 Vue API를 보다 더 기능적이고 컴포저블하게 만들었을 뿐만 아니라, this에 대한 의존도를 낮추고 Vue 개발자들에게 더 유연한 반응형 모델을 제공합니다.
타입스크립트, SFC(Single File Component) 와 JSX :
Composition API를 통해 전체적인 코드 베이스를 타입스크립트로 작성할 수 있게 되었습니다. 타입스크립트를 도입하는 것은 구조적인 이점 외에도 더 나은 타입 지원과 VS Code와 같은 IDE에서 자동 완성 지원이 가능하다는 것을 의미합니다.
또한 Vue의 싱글 파일 컴포넌트 (SFCs) 도 <script setup>형태의 문법적 설탕 과 <style>내에서의 v-bind 사용을 통해 상태 기반 CSS 에 대한 지원을 받을 수 있도록 개선되었습니다.
JSX 변환도 개선되었으므로 리액트 개발자가 JSX/TSX 를 Vue와 사용할 때 더 나은 개발 경험을 기대할 수 있게 됐습니다.
결정 피로 (Decision fatigue) : 위의 모든 사항 덕분에 이제는 Vue 앱을 구성하는 방법에 대한 선택의 폭이 그 어느 때보다도 넓어졌습니다. Composition API 또는 Option API? JS 또는 TS? <script setup> 사용 여부? 같이요. 아마 전체적으로 SFCs 대신 JSX를 사용할 수도 있을 것입니다. 이렇게 매우 많은 선택지로 인해 결정 피로는 Vue 개발자들의 현실이 되고 있습니다. Vue가 특정 선택지를 더 권장할 것 같지는 않은 상황이라, 개발자들은 스스로가 선택한 Vue 셋업에 대해 강한 확신과 경험이 있어야 합니다.
Vite
Vite는 작년 Vue의 핵심 생태계에서 가장 큰 영향력을 행사한 라이브러리 도구였습니다. Vite는 릴리즈와 동시에 웹 개발 분야를 휩쓸었으며, 프레임워크에 관계없이 많은 개발자들이 찾는 도구가 되었습니다.
Vite 이전에도 Snowpack 과 WMR 같은 비슷한 종류의 시도가 있었습니다. 하지만 Vue와 같은 유명 프레임워크와의 강력한 연계, 간단한 기본 설정, 최적화된 프로덕션 결과물, Rollup과의 통합, 그리고 기타 다른 장점들 덕분에 Vite는 같은 종류의 도구 중 가장 유명해질 수 있었습니다. Vite의 유명세는 많은 개발자에게 완전히 새로운 수준의 개발 경험을 선사했으며, 생태계 내의 다른 도구들이 따라야 할 기준을 높였습니다.
Vue 프레임워크
Vite 외에도 많은 핵심 라이브러리가 개선되었으며, 몇 가지 새로운 라이브러리가 추가되었습니다. 예를 들면 Vue Router, Pinia (Vuex의 대안), Vue Devtools, VitePress, 그리고 Vue를 완전한 기능을 갖춘 프레임워크로 만들기 위한 기타 다른 라이브러리들이 있습니다.
새롭게 추가되고 개선된 라이브러리들은 모두 Vue core와 같이 타입스크립트 지원과 컴포저블 API를 제공합니다.
종합해보면 Vue와 그에 수반되는 라이브러리들은 모두 최신 동향에 맞춰져 있으며 심지어는 다른 라이브러리들이 따를 수 있도록 독자적인 트렌드를 설정해놓기도 합니다.
생태계 재건
Vue 3의 릴리즈에서 수많은 주요 사항 이 변경되었기 때문에 희망적이지만은 않습니다.
겉보기에는 그렇지 않은 것 같지만(특히 Option API를 사용할 경우), Vue 3의 변경 사항들은 아직도 Vue 2와 충분히 호환되지 않습니다.
일부 변경 사항은 쉽게 구현할 수 있지만, 전체 생태계가 하룻밤 사이에 전환되지는 않습니다. 실제로 Vue 3 beta의 1년이 지난 지금 시점에 일부 라이브러리, 심지어는 잘 관리되고 있는 라이브러리들도 아직 안정적인 단계가 아니거나, Vue 3로의 전환이 이뤄지지 않았습니다.
따라서 요점은 명확합니다. Vue 생태계는 전체적으로 개선되거나 새로운 도구의 도입이 필요합니다. 이는 장기적으로 좋은 결정입니다. 왜냐하면 Vue의 인기 덕분에 생태계는 완전히 재건되고 이전보다 더 나은 상태로 변화할 것이기 때문입니다. 그러나 이를 위해서는 모든 Vue 개발자의 시간과 노력이 필요합니다.
광범위한 영향
앞서 타입스크립트의 도입과 더 기능적이고 컴포저블한 API로의 전환, 그리고 이들이 Vue 생태계에 미치는 영향에 대해 다뤘습니다. 또한 Vite가 어떻게 전반적인 프레임워크에서 개발 경험을 개선했고 웹 개발 도구의 새로운 동향에 부분적으로 기여했는지에 대해서도 설명했습니다. 그렇다면 Vue는 웹 개발 환경에 어떤 영향을 미쳤을까요?
타입스크립트의 보편성
타입스크립트가 여러 프레임워크로 도입되면서 이제는 보편적이라고 말할 수 있습니다. 오늘날 대부분의 라이브러리는 타입스크립트를 지원하거나 완전히 도입할 것입니다.
타입스크립트는 JSX 지원, 더 나은 성능, 그리고 Composition API와 같은 훅과 결합하여 많은 리액트 개발자들이 Vue를 사용하게 하고, 이는 생태계의 확장, 새로운 직업 기회의 창출 등으로 이어질 것입니다.
Vue 3 도입에 더 나아가
Vue 3로 "기본 버전"이 변경됨에 따라, 생태계에 다음으로 중요한 단계는 Nuxt.js의 안정적인 출시입니다. Nuxt.js는 Vue 3에 Next.js와 같이 풀 스택 앱을 제작 가능한 메타 프레임워크를 제공함으로써 Vue 3의 도입을 더욱 활성화할 것입니다. 이를 통해 Vue 개발자들은 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)과 같은 최신 기술에 더욱 쉽게 접근할 수 있을 것입니다.
효율적인 도구 제작
Vite와 esbuild와 같은 기본 도구가 발전함에 따라 이전보다 더 많은 도구가 훨씬 더 빠르고 효율적으로 개발될 수 있었습니다. Vite는 이미 부분적 하이드레이션을 통해 무거운 웹사이트에서 빠른 개발을 가능케 한 Astro 의 가능성을 발전시켰습니다. 더 많은 사례를 기대해 볼 만할 것 같습니다.
미래
그럼 Vue 4는 언제 기대해 볼 수 있을까요? 현재로서는 그렇게 앞서나갈 필요는 없다고 생각합니다. 우리가 보았듯이 Vue 3는 많은 변화를 가져왔으며, 주 버전 업데이트의 가치를 지니는 여러 기능이 출시되기까지 상당한 시간이 걸릴 것입니다.
클래스와 this 의 사용에서 좀 더 기능적이고 컴포저블한 API로의 이동이 리액트(리액트 훅스)와 Vue(Composition API)와 같은 프레임워크 전반에서 본격화됨에 따라 이후에 어떤 형태의 API가 나올지 예측하기가 어렵습니다.
그렇지만 다음의 영역에서는 발전이 있을 것이라고 확신합니다.
- 비동기 컴포넌트 (리액트와 Vue Suspense)
- 개발 및 프로덕션 환경의 도구 (Vite, esbuild, SWC 등)
- SSR 및 부분적 하이드레이션
웹뿐만 아니라 자바스크립트가 사용되는 네이티브 데스크톱과 모바일 같은 다른 영역도 기대해볼 만하다고 생각합니다.
다음은 글 원작자의 요청으로 삽입된 광고입니다.
Open Source Session Replay
프로덕션 환경에서 웹 애플리케이션을 디버깅하는 것은 어렵고 시간이 많이 걸립니다.
OpenReplay 는 FullStory, LogRocket, Hotjar을 대체하는 오픈 소스입니다.
사용자가 수행하는 모든 작업을 모니터링하고 다시 볼 수 있으며 모든 이슈에 대해 앱이 어떻게 동작하는지를 보여줍니다. 이는 브라우저의 개발자 도구를 열고 사용자의 행동을 주의깊게 보는 것과 같습니다. OpenReplay는 현재 이용 가능한 유일한 오픈 소스 대안입니다.
프런트엔드 팀을 위한 행복한 디버깅 - 무료로 당신의 웹 앱을 모니터링하세요.
