프론트엔드 프레임워크 현황 요약 (2022년 11월 기준)

Dev 2023. 2. 12. 19:58

Vue 관점에서 프론트엔드 프레임워크 현황을 요약함

2022-11-07. 개념검증 차원의 간단한 웹3 어플리케이션을 개발하게 됨. 작업에 앞서 웹 프론트엔드 프레임워크의 현황을 조사해서 요약함. Vue 에 포커스를 두고 조사함.
2023-02-12. 약 3달간 간단한 Vue3 프로젝트를 진행한 소감을 덧붙여 요약함

2021년 개발자 설문 결과 아직 건재
- 사용중인 f/w Top3 (React, Angular, Vue.js ...), 공부하고 싶은 f/w Top3 (Svelte, Solid, Vue.js, ...)
- 언젠가 Svelte/스벨트를 배워야 할 듯
2022-11-07 선택: Vue를 쓰자 - 친숙하다

현재 쓰고 있는 프레임워크 랭킹

공부하고 싶은 프레임워크 랭킹

2023-02-12 회고: Vue는 당분간 괜찮은 위치를 유지할 것 같다. 2022년 연말에 새로 발표된 설문 결과에서도 관심있는 프레임워크 3위, 많이 쓰는 프레임워크 3위 자리를 유지했다. 무엇보다 커뮤니티 활동이 활발하고 합리적인 것이 마음에 든다. 정체되어 있지 않고 꾸준히 발전하는 느낌이다.

Vue 히스토리 : 2014년 첫 출시, 2020년 Vue3 출시
Vue3의 목표는...
- 도구의 처리 속도를 빠르게 하는 것
- 코딩 방식을 단순하고 직관적으로 만드는 것
Vue3에서 달라진 점
- Vite/빗 기반 툴체인 혁신
- Composition API 스타일 도입 (복잡한 코드일수록 더 간결하게 관리)
- Teleport API 제공 (컴포넌트를 더 유연하게 재활용)
- 앱 성능 개선 (메모리 사용량 133% 개선, 번들 크기 41% 절약)
2022-11-07 선택: Vue3를 쓰자 - 지금 안 배우면 언제 배울까?
2023-02-12 회고: 새로 시작하는 프로젝트여서 익숙한 Vue2 대신 Vue3를 선택했는데, 잘한 선택이었다. Vue3에 새로 도입된 <script setup> 태그와 Composition API 스타일의 조합이 좋았다. 프레임워크가 강제하는 것이 아무것도 없는 느낌이었다.

Vite/빗이 기존 웹팩 기반의 Vue CLI를 대치
Vue 저자인 Evan You가 만듬
Go랭으로 만들었으며 Vue CLI 대비 처리 속도가 압도적
2022-11-07 선택: Vite/빗 을 쓰자 - Vue CLI를 고집할 이유가 없다
2023-02-12 회고: 일단 Vue3를 선택했다면 Vite/빗을 쓰지 않을 이유가 없다. 웹팩을 쓸 때도 속도가 아쉬웠던 적은 없었지만, 확실히 Vite/빗이 더 빨랐다.

Vitest/빗테스트가 기존 Jest를 대치
Vitest/빗테스트는...
- 처음부터 빌드도구 Vite/빗를 염두에 두고 개발
- Jest와 유사, 기존 Jest 테스트 코드를 쉽게 마이그레이션 할 수 있음
Vue 코어팀이 만듬
테스트 코드 실행 속도가 빠름
2022-11-07 선택: Vitest/빗테스트를 쓰자 - 빌드도구로 Vite/빗을 쓸 거라면 당연한 선택
2023-02-12 회고: Vitest/빗테스트도 만족스러웠다. 사용법이 Jest와 거의 동일했다. 유닛테스트 실행 속도는 체감할 수 있을 정도로 빨랐다.

Pinia/피냐가 기존 Vuex를 대치
- Vuex가 없어지는 것은 아님
- Piania는 Vuex와 같은 혈통 (Vuex5에서 Vuex가 Pinia와 합쳐질 수도 있다)
- Vue 저자 Evan You가 Vuex5와 Pinia/피냐는 사실상 같은 프로젝트라고 언급
Pinia/피냐의 특징
- 타입스크립트를 더 잘 지원
- mutation을 제거, vuex 보다 간결해진 문법
- Composition API 스타일을 지원
2022-11-07 선택: Pinia/피냐를 쓰자 - 지금 안 배우면 언제 배울까?
2023-02-12 회고: Vue 개발팀의 공식 프로젝트 다운 신뢰감을 느꼈다. Pinia를 Composition API 스타일로 사용했다. Vuex와 사용법이 달라 학습이 필요했는데, 대부분 Composition API 스타일에서 기인한 것이었다. Pinia를 Options API 스타일로 사용했다면 아무런 차이점도 느끼지 못했을 것 같다. Pinia가 Vuex를 계승하고, 차후 Vuex를 통합할 것이라는 얘기가 자연스럽게 이해됐다.

Vue를 위한 UI 라이브러리로 Quasar와 Vuetify가 많이 쓰임
- Quasar는 다양한 장치를 지원해야 할 때 좋은 선택
- Vuetify는 UI 디자인에 투입할 자원이 없을 때 좋은 선택
2022-11-07 선택: Vuetify를 쓰자 - 버텨줘서 고맙다
2023-02-12 회고: 3달 전 Vue3 프로젝트를 시작하고 나서야 Vue3를 지원하는 Vuetify가 개발 중인 것을 알았다. 나는 방황하고 좌절했지만 이젠 Vuetify3를 선택해서 Vue3 프로젝트를 진행해도 좋을 것 같다 (얼마 전 Vuetify3가 릴리즈됐다).