2022년 Vue 개발 보고서 [작성 및 공유]

2014년 처음 출시된 이후 Vue.js는 인기와 사용자 수가 지속적으로 증가하여 전 세계 수천 명의 개발자가 사용하는 성숙한 프레임워크가 되었습니다. 2022년에는 Vue가 어떻게 발전할지 함께 살펴보시죠!

1. Vue 생태계

Vue 3 출시 이후 점점 더 많은 라이브러리가 Vue 3를 수용하고 지원을 추가했으며, 다른 라이브러리에서는 호환 가능한 버전을 개발하고 있습니다. 2022년 Vue 생태계의 흥미로운 발전을 살펴보세요. (학습 영상 공유: vue 영상 튜토리얼)

(1) Vite

Vite는 프론트엔드 개발을 위한 새로운 빌드 도구입니다. 최신 버전은 v3.0.0-beta.9입니다. Vite는 초고속 개발 경험과 고도로 최적화된 생산 패키지를 제공합니다. 프레임워크에 구애받지 않으며 누구나 사용할 수 있습니다! Vue CLI가 유지 관리 모드로 들어가는 동안 Vite가 새로운 권장 선택입니다.

(2) Vitest

Vitest는 Vite에서 제공하는 새로운 단위 테스트 프레임워크이며 최신 버전은 v0.18.0입니다. Vitest는 후속 테스트 실행에 놀라운 속도를 제공하므로 TDD 방법에 탁월한 선택입니다.

(3) Pinia

Pinia는 이제 Vue 3에 권장되는 상태 관리 라이브러리입니다. 더 간단한 API, 적절한 TypeScript 지원 등을 소개하며 이는 개발 경험을 위한 큰 진전입니다. Vuex는 여전히 Vue 3과 호환되지만 현재 유지 관리 모드에 있습니다.

(4) Volar

Volar VS Code 확장 개발자인 Johnson Chu가 Vue.js 핵심 팀에 합류했습니다. Johnson은 릴리스와 버그 수정을 출시해 왔으며 내부 코드베이스를 보다 효율적이고 더 많은 기능을 포함하도록 리팩터링하는 작업을 진행하고 있습니다. 이제 확장 프로그램 관리자가 Vue의 후원을 받기 때문에 IDE 도구의 미래는 더욱 밝아졌습니다.

(5) Nuxt 3

Nuxt 팀은 가장 기대되는 릴리스 중 하나인 Nuxt v3가 올 여름에 출시될 것이라고 발표했습니다. 현재 출시 후보 단계에 있으며 안정에 가깝습니다.

(6) Vuetify

많은 사람들에게 Nuxt와 Vuetify는 Vue 2에서 Vue 3으로 업그레이드하는 것을 방해하는 두 가지 주요 요소입니다. Vuetify 3의 최신 버전은 베타 5로, 공식 출시에 가까워지고 있습니다.

(7) VitePress 1

VitePress는 최근 1.0 알파 4를 출시했으며 새로운 Vue 문서에 사용되었습니다. v1.0 릴리스를 준비하면서 핵심 팀원인 Kia는 최종 사용자에게 더 높은 수준의 API를 제공하기 위해 노력하고 있습니다. VitePress는 이제 Vue 3 지원을 통해 정적 사이트 생성에 권장되는 솔루션입니다. 그러나 VuePress와의 명칭 및 공존에 대한 문제는 여전히 논의 중입니다. 간단히 말해서, VitePress가 VuePress 3을 대체해야 할까요?

(8) Vue 새 문서

디자인 및 사용자 경험에 대한 포괄적인 검사 및 개선, 새로운 지침 도입, 옵션 API 간 전환이 포함된 새로운 Vue 문서가 출시되었습니다. 및 컴포지션 API 기능. 이 릴리스에는 Vue의 모든 주요 기능을 안내하는 대화형 튜토리얼도 도입되었습니다.

(9) Vue Core

4월과 5월 동안 Vue 팀은 약 한 달 동안 v3의 핵심 버그를 처리하여 대규모 패치 출시(3.2.24~26)를 하게 되었으며, ~ 70개의 PR이 병합되었고 ~140개의 문제가 해결되었습니다.

(10) Vue 기본 버전

Vue 3가 공식적으로 기본 버전이 됩니다.

2. Vue의 현재와 미래

이 섹션에서는 Vue.js의 작성자인 You Yuxi가 Vue 3의 주요 변경 사항을 요약하고 최신 기본 버전으로 업그레이드하는 과정의 세부 사항을 공유합니다. Vue의 미래를 기대합니다.

(1) 마지막 업데이트 이후 Vue 3에서 무엇이 변경되었나요?

소프트 런칭 프로세스가 완료되었음을 알리는 새로운 Vue 문서가 2022년 2월에 출시되었습니다. Vue 3가 출시되었을 때는 실제로 핵심에 불과했지만 시간이 지남에 따라 Vue는 라우팅, 상태 관리, 빌드 도구, 개발 도구, 확장, IDE 지원 등을 포함하는 완전한 생태계로 성장했습니다. 이 모든 것에는 업데이트하는 데 많은 노력이 필요합니다.

이제 기본적으로 모든 라이브러리와 도구의 새 버전이 있습니다. 새로운 문서가 출시되었고 Vuex는 최신 권장 상태 관리 라이브러리인 Pinia로 대체되었으며 빌드 도구는 이제 Vite로 구동됩니다. 새로운 IDE 확장은 더 나은 TypeScript 지원 및 경험을 제공하는 Volar입니다. <script setup></script>와 같은 중요한 DX 개선 사항도 출시되었으며 앞으로 더 많은 기능이 추가될 예정입니다.

(2) TypeScript는 Vue 개발 경험에 어떤 영향을 미치나요?

TypeScript가 증가하고 있으므로 모든 최신 프레임워크는 이를 염두에 두고 설계됩니다. TypeScript를 사용하지 않고도 Volar는 Vue 유형을 활용하고 힌트를 제공하므로 변수 유형을 기억해야 하는 정신적 부담을 없애줍니다. 모든 유형 추론 및 확인은 템플릿에도 적용됩니다. 또한 TypeScript를 사용하면 개발자가 대규모 코드 베이스를 리팩터링할 때 오류를 더 쉽게 발견할 수 있습니다. 도구는 사용자가 수정할 수 있도록 오류를 즉시 표시합니다. 특히 대규모 프로젝트를 개발할 때 Vue와 함께 TypeScript를 사용하면 코드의 견고성이 크게 향상됩니다.

(3) Vue 3가 출시된 지 1년 반이 지나서 기본 버전이 되었는데, 그 과정은 어땠나요?

Vue 3의 초기 버전에서는 TypeScript를 사용하여 모든 것이 다시 작성되었지만 Volar가 공식 확장이 될 때까지는 문서가 완전히 수정되고 모든 것이 수정되거나 다시 작성되었습니다. 옵션 API와 컴포지션 API를 함께 사용하고 전환할 수 있습니다. 결과적으로 학습 경험과 일상 경험이 업그레이드됩니다. 각각은 별도의 프로젝트이므로 최종적으로 모든 것을 준비하는 데 전체 프로세스가 너무 오래 걸렸습니다. 이제 Vue 3가 준비되었다고 말할 수 있습니다.

(4) 이렇게 깊은 전환 과정이 필요한가요?

꼭 필요한 것은 아니지만 업그레이드를 고려할 때 기존 코드베이스를 점진적으로 개선하거나 과감하게 다시 작성하는 것 사이에는 항상 균형이 있습니다. Vue 2 코드베이스를 기반으로 하고 100% 호환성을 보장하려면 Vue 2 관련 내부 동작에 의존하는 많은 라이브러리가 필요합니다. 우리가 이 짐을 가지고 다니면 우리의 혁신이 제한될 것입니다.

그래서 대규모 재작성은 우리에게 올바른 방향입니다. Vue 3의 상황은 단기적으로 일부가 희생되고 일부 라이브러리가 손상되었지만 이는 과거의 짐을 없애기 위해 기꺼이 지불할 댓가입니다. 지금 깨끗한 상태를 유지하면 미래에 배당금을 지불하게 될 것입니다.

React 또는 Ember는 새 버전을 거의 원활하게 도입할 수 있지만 이는 엄청난 유지 관리 오버헤드를 부과합니다. 그들은 새로운 기능을 천천히 추가하고 오래된 기능을 단계적으로 제거하는 훌륭한 시스템을 갖추고 있으며 우리는 그로부터 배울 수 있습니다. 결국 공학에는 절대적인 정답은 없습니다. 업그레이드할 때 장단점이 있습니다.

(5) Vue는 모든 유형의 애플리케이션과 다양한 규모의 회사에서 사용할 수 있습니다. 어떻게 프레임워크를 그렇게 다재다능하게 만들 수 있나요?

Vue의 초기 버전은 진입 장벽을 낮추어 쉽게 사용하고 기존 시스템에 통합할 수 있도록 설계되었으며 여전히 이 접근 방식을 매우 진지하게 고수하고 받아들입니다. 시간이 지남에 따라 단일 페이지 애플리케이션 라우팅, 상태 관리 및 TypeScript 지원과 같은 고급 프로젝트를 지원하기 위해 구성 요소를 천천히 추가할 것입니다.

처음에는 소규모 애플리케이션에서 Vue를 사용하는 사용자가 많았습니다. Vue의 사용자 기반은 더 많은 기능과 도구를 사용할 수 있게 되면서 계속해서 성장하고 있지만, 원래 사용자는 남아서 원하는 방식으로 계속 사용할 수 있습니다. 이것이 바로 우리의 비밀입니다. 모든 영역을 커버하는. 2014년 이후로 많은 어려움과 함께 긴 여정이 이어졌지만 새로운 기능을 추가할 때마다 Vue 사용의 핵심 경험을 유지하려고 노력합니다.

(6) 프런트엔드가 직면한 주요 과제는 무엇입니까?

웹 개발의 세계에는 간단한 로그인 페이지, 완전 대화형 애플리케이션, 백엔드 대시보드, 고성능 요구 사항을 갖춘 전자 상거래 애플리케이션 등 모든 종류의 애플리케이션이 있습니다. 일반적으로 문제는 개발자 생산성과 최종 애플리케이션 성능의 균형을 맞추는 것입니다. 우리는 컨텐츠 집약적인 전자상거래를 제외한 대부분의 영역에서 좋은 성과를 거두고 있습니다.

요즘에는 Remix나 Qwik과 같은 새로운 것들이 있습니다. 이들 중 다수는 컴파일러에서 서버, 클라이언트에 이르기까지 제어가 필요하며, 이 모든 것이 함께 작동하여 엔드투엔드에 최적화된 완전히 통합된 솔루션을 제공해야 합니다. 여전히 상대적으로 간단한 코드를 작성하고 궁극적으로 최고의 성능을 얻을 수 있습니다. 이것이 가장 큰 과제가 될 것입니다. 어떤 솔루션이 이 세 가지 부분을 가장 잘 통합합니까? 이는 Nuxt 팀 및 Vue 생태계의 다른 사람들과 긴밀하게 협력하여 탐색할 수 있는 방향입니다.

백엔드와 프런트엔드를 모두 처리할 수 있고 순수 클라이언트 또는 순수 백엔드 측면에서 생각하지 않는 수직적 솔루션이 더 필요합니다.

(7) 향후 5년을 바라보는 Vue의견은?

Vue는 끊임없이 진화하는 플랫폼입니다. Vue 3은 장기간에 걸쳐 확장할 수 있을 만큼 충분히 견고한 기반이기 때문에 향후 5년 동안 또 다른 "Vue 2에서 3으로의" 업그레이드는 없을 것입니다. Vue의 강점은 매우 유연하고 반응성이 뛰어난 시스템이기 때문에 우리는 계속해서 컴파일 전략을 실험할 것입니다.

다양한 출력으로 컴파일할 수 있는 컴파일된 단일 파일 구성 요소가 있습니다. 소스 코드는 변경되지 않은 채로 출력이 변경될 수 있습니다. 이 기간 동안 사용자 경험이 안정적으로 유지되기를 바랍니다. 개발 경험 관점에서 볼 때 안정적으로 유지되기를 바라지만, 컴파일된 접근 방식을 통해 우리는 이면에서 상당한 개선을 이룰 수 있습니다. 이것이 우리의 목표입니다.

3. Vue 개발 동향

프론트엔드 분야에서 Vue의 현황은 어떤가요? Vue는 얼마나 빠르게 성장하고 있나요? 다양한 기관의 설문조사 통계를 살펴보겠습니다!

(1) Statista

Vue는 2020년에 비해 2021년에 2단계 상승하여 5위를 차지했으며 응답자의 19%가 선택했습니다.

(2) BuildWith

2022년 5월 전 세계 100만개 웹사이트의 프레임워크 사용량은 다음과 같습니다.

(3) NPMtrends

NPMtrends에 따르면 Vue의 사용이 지난 5년 동안 꾸준히 증가하고 있다고 합니다.

(4) 유사한 기술

Vue로 구축된 웹사이트의 수는 처음부터 꾸준히 증가해 왔습니다.

(5) GitHub 종속

Vue로 구축된 애플리케이션 수는 2020년 이후 계속 증가하여 46.52% 증가했습니다.

(6) Stack Overflow 질문 수

Stack Overflow에서 사용자들은 점점 더 많은 Vue 질문을 하고 있습니다.

(7) JS 상태

Vue.js의 개발자 사용량이 증가하여 2021년에는 51%에 도달합니다.

(8) 스택 오버플로 설문조사

Stack Overflow에서는 매년 사용자에게 설문조사를 실시하여 가장 좋아하는 프레임워크와 가장 좋아하지 않는 프레임워크에 대해 질문합니다. 사용 가능한 설문조사 질문은 수년 동안 일관되지 않았지만 결과는 Vue의 상승 추세를 확인시켜줍니다.

2021:

2020:

2019:

2018:

(9) JetBrains 설문조사

2021년 JetBrains가 발표한 "2021년 개발자 생태계 현황" 보고서에 따르면 Vue.js 사용자 비율이 2020년 32%에서 2021년 43%로 증가한 것으로 나타났습니다.

(10) Google 트렌드

사용자는 2020년 10월에 출시된 모든 프레임워크를 검색하지만 그 이후로 Vue는 다시 인기를 얻었고 천천히 정상 궤도에 오르고 있습니다.

【관련 영상 튜토리얼 추천: 웹 프론트엔드】