이 글은 아래 글을 번역한 글입니다.
https://www.trio.dev/blog/why-use-vue-js
What Is Vue.js? The Pros and Cons of Vue.js in 2023 - Trio Developers
Vue.js is a JavaScript framework for building user interfaces (UIs) and single-page applications (SPAs). Find out more about Vue.js and how it works!
www.trio.dev
Vue.js란 무엇일까요? '점진적(Progressive)' 프레임워크라고 하는 Vue.js는 추가적인 기능들을 점진적으로 채택하는 디자인 철학으로 유명합니다. '점진적 프레임워크'라는 별명에도 불구하고, Vue.js는 기능이 풍부하지 않습니다. 실제로 Vue.js는 JavaScript 프레임워크에서 기대할 수 있는 최소한의 기능을 제공합니다.
상상을 초월하는 복잡성과 기술로 가득한 세상에서, 때론 기본적인 것이 오히려 좋을 수도 있습니다. Vue.js는 이러한 목적에 부합하는 프레임워크입니다.
Vue.js 애플리케이션은 규모를 작게 시작하여 크게 만들 수 있는 반면, 다른 프레임워크는 기본적으로 복잡성이 높은 상태에서 시작합니다. Vue.js에 대해서 더 알고 싶거나, 어떻게 동작하는지 궁금하다면 계속 읽어주세요.
Vue.js란?
Vue.js는 UI와 SPA를 구축하기 위한 JavaScript 프레임워크입니다. 그 중 가장 좋은 점은 Vue.js가 오픈소스라는 것입니다. Vue.js는 Model-View-ViewModel(MVVM) 설계 패턴을 활용합니다.
Vue.js는 2014년에 Evan You에 의해 설계되었고, Evan You가 Google에서 AngularJS로 개발하며 지낸 것에 대한 직접적인 결과물입니다. Evan You는 AngularJS를 사용하면서 좋았던 부분을 참고해서, 가벼운 프레임워크를 새로 만들었습니다.
MVVM 아키텍쳐를 사용하면 비즈니스 로직, 모델, UI를 구분해서 만들 수 있습니다.
이러한 구분은 프런트엔드 개발자와 백엔드 개발자가 함께 작업할 수 있는 직관적인 패턴을 제공합니다. ViewModel은 개념을 구분하고, 행위를 연결하는 등의 구조입니다.
Vue.js는 오직 view layer에만 포커스를 맞춘 코어 라이브러리입니다. 다른 추가적인 기능들은 Vue.js를 지원하는 라이브러리를 사용해야 합니다. 하지만 Vue.js에 내장되어 있지 않으므로, '점진적'이라고 하는 것입니다.
하지만 Vue.js에서 가장 눈에 띄는 특징은 directive입니다. directive는 HTML을 확장할 수 있도록 허용하는 HTML attribute입니다.
Vue.js의 장점
위에서 설명한 Vue.js의 장점은 일부에 불과합니다.
1. 간단한 시작
Vue.js는 '점진적 프레임워크' 외에도, '증강적 채택(incrementally adoptable) 프레임워크'라고도 불립니다. 이는 Vue.js와 Vue.js를 사용하는 애플리케이션이 처음부터 이미 설계가 되어있다는 것을 의미합니다. 그렇기 때문에 시작이 간단해지며, 요구사항에 따라 복잡해질 수 있습니다.
2. 훌륭한 공식 라이브러리들
추가적인 기능을 원한다면, Vue.js의 공식 라이브러리들이 이를 커버할 수 있습니다. Vue.js의 기본적인 것들을 설정한 후에는 라우팅과 상태 관리 같은 기능이 가장 큰 문제입니다.
라우팅은 HTTP 요청을 어떻게 처리할 것인가에 대한 메커니즘입니다. 상태는 유저와의 상호작용을 위한 변할 수 있는 데이터를 말하고, 상태 관리는 유저와의 상호작용을 위해, 상태를 조작하고 다루는 모든 작업을 말합니다.
Vue Router와 Vuex는 라우팅과 상태관리를 위한 Vue.js 라이브러리입니다.
3. 빠른 렌더링 속도
패키지 사이즈가 21 KBs에 불과한 가벼운 Vue.js는 무거운 경쟁 프레임워크들 보다 렌더링이 더 빠릅니다. 특히 Virtual DOM은 렌더링 속도를 빠르게 해줍니다.
참고로, document object model(DOM)은 HTML과 XML을 위한 API이며, Virtual DOM은 UI 변경사항을 실제 DOM에 동기화해주는 기능을 합니다.
Virtual DOM을 사용해 동기화하는 것은 실제 DOM을 직접 수정하는 것보다 성능적으로 훨씬 효율적입니다.
4. 배우기 쉬움
Vue.js를 배울 때, 라이브러리와 JavaScript를 변형하는 것에 관한 지식을 필요로 하지 않습니다. 단순히 쭉 사용하던 CSS, HTML, JavaScript를 사용해도 좋습니다.
Vue.js 코딩을 좀 더 쉽게 하려면, Visual Studio나 Atom 같은 에디터를 사용하세요.
5. 커뮤니티
대부분의 오픈 소스 언어와 프레임워크와 같이, Vue.js도 전용 커뮤니티가 있습니다.
디스코드 채팅과 포럼, Vue.js 관련 질문이 72,000이 등록된 Stack Overflow, Vue.js를 사용하는 132,000명이 넘는 깃허브 멤버가 있습니다.
Vue.js의 단점
위의 장점들로 미루어 봤을 때, Vue.js를 사용하지 않을 이유가 없습니다. 당연하지만, 프로젝트에 새로운 기술을 적용할 때는 장점과 단점을 고려하는 것도 중요합니다.
너무 유연함
Vue.js에 대해 가장 흔한 불만은 필요 이상으로 Vue.js가 너무 유연하다는 것입니다.
Vue.js는 개발자들에게 처음부터 시작할 수 있는 기회를 제공하기 때문에, 새로운 기능을 구현할 수 있는 유연성이 더욱 높아집니다.
반면에, 큰 프로젝트에서 에러와 불규칙성으로 인해 더욱 복잡해질 수 있습니다.
사용할 수 있는 애드온이 너무 제한됨
Vue.js의 생태계는 공식 라이브러리와 커뮤니티를 포함하여 상당히 확장되어 있지만, React나 AngularJS와 비교하면 몇 가지 차이가 있습니다.
가장 우려되는 차이점은 Vue.js가 다른 프레임워크 만큼 많은 플러그인이나 컴포넌트가 없다는 것입니다. 이것은 분명한 Vue.js의 단점입니다.
너무 최신임
많은 이유로, Vue.js의 모던함이 좋은 점만 있지는 않습니다. 예를 들면, 커뮤니티 규모가 작다는 것입니다.
또한 Vue.js는 대체로 중국 개발자들에 의해 개발되었기 때문에 많은 관련 프로젝트들을 영어 사용자들이 이해하기에 어려움이 있습니다. 그리고 완전한 번역을 해주는 사람이 있다고 하더라도 시간이 오래 걸릴 것입니다.
Vue.js의 용도
일반적으로 JavaScript는 웹을 개발 하는 데에 최적입니다. 하지만 Vue.js는 다양한 용도로 사용됩니다. 아래는 Vue.js를 사용하는 정확한 방법을 보여줍니다.
1. 프로토타입 제작
웹 개발에서 프로토타입은 실제로 런칭하기 전, 웹 사이트가 어떻게 디자인되고 동작할지에 대한 목업입니다.
애초에 Vue.js는 프로토타입을 만들기 위해 설계됐습니다. 실제로 Evan You가 구글 브라우저에서 AngularJS로 프로토타입을 만들 때 영감을 얻었고, 이를 통해 대안인 Vue.js를 만들었습니다.
2. UI Projects에 사용
표준 HTML, CSS, JavaScript로만 Vue.js를 사용할 수 있기 때문에, stock UI 프로젝트를 만드는 것은 어렵지 않습니다. 러닝 커브가 작고, 빠른 렌더링과 같은 기능은 개발에 큰 도움이 됩니다.
3. 기존 애플리케이션에 사용
Vue.js는 기존에 개발하던 애플리케이션에 적용하기가 좋습니다. Vue.js는 작고, JavaScript에 의존하기 때문에, 기존 프로젝트와 통합하기가 쉽습니다.
언급하진 않았지만, Vue.js는 PHP의 Laravel, Express.js, Python의 Django, Ruby의 Rails와 같은 백엔드 프레임워크들과도 호환성이 좋습니다.
4. 모바일 앱 개발에 사용
공식적으로 Vue.js는 모바일 앱 개발을 위한 지원이 없습니다. 하지만, 이와 상관없이 몇몇 유용한 프로젝트들이 있습니다.
Capacitor는 크로스 플랫폼 모바일 앱 개발을 위한 SDK로써, Ionic이 인증한 프로젝트입니다. 이걸 사용하면 Vue.js로 iOS와 안드로이드와 같은 모바일 앱을 만들 수 있고, progressive web apps(PWAs)를 만들 수 있습니다.
또는 모바일 앱 개발을 위해, 크로스 플랫폼 네이티브 앱을 지원하는 NativeScript를 선택할 수도 있습니다. 이는 Vue.js와 함께 사용할 수 있으며, 프로젝트 전체가 JavaScript에 의존합니다.
5. SPA
SPA 애플리케이션을 설명하는 가장 쉬운 방법은 페이지를 새로 고칠 필요가 없는 웹 페이지로 상상하는 것입니다. 이건 모바일 앱과 상당히 유사합니다.
이러한 현상의 배경엔 새로운 데이터를 위해 전체 페이지를 새로 가져오는 대신, 현재 페이지를 동적으로 rewriting 하는 작업이 포함됩니다.
어떤 면에서는, 이것이 Vue.js를 사용하는 최적 용도입니다. SPA는 Vue.js와 같이 심플함을 유지시켜줍니다.
Vue.js를 사용하고 있는 기업들
수천 개 기업의 소프트웨어 툴을 공유하는 떠오르는 온라인 리소스인 StackShare에 따르면, 수많은 기업의 기술 스택을 봤을 때, Vue.js는 신뢰할 만한 기능입니다.
3,000개가 넘는 기업들이 Vue.js를 사용하는 것으로 목록에 표시되었으며, 그 중 Vue.js를 사용하는 유명한 기업들이 있습니다.
Trustpilot
Trustpilot은 인기가 많음에도 여전히 Vue.js를 UI 개발에 사용하고 있으며, Vue.js가 얼마나 확장 가능한지를 알 수 있습니다.
Trivago
Trivago는 여행 사이트입니다. 주로 React를 사용하지만, 개발 팀은 Vue.js도 사용한다고 확인됐습니다!
Accenture
Accenture에 대해 들어본 적이 없을 수 있지만, 다국적 Fortune 500대 기업입니다.
이 회사는 AngularJS, React와 같은 대규모 프런트 엔드 기술을 사용하며, Vue.js를 사용하는 주요 회사입니다.
Statista
Statista를 사용하면 일반 인터넷 사용자가 원하는 답을 찾을 수 없는 12개의 다양한 연구 기사를 검색하지 않고도 소비자 및 시장 데이터를 쉽게 찾을 수 있습니다.
사실상, Statista는 호기심이 많은 사람들이나 전문적인 수준의 연구자들에게 실용적인 자산이 될 수 있습니다. 이 웹사이트는 기본적으로 방대한 온라인 데이터베이스이며, Statista의 Vue.js 사용 덕분에 이 모든 데이터의 프런트엔드에 액세스할 수 있습니다.
결론
Vue.js란 뭘까요? 흔한 말로, Vue.js는 강력한 펀치를 가진 작은 프레임워크입니다. Vue.js는 텅 빈 상태에서 작업하는 것이 더 쉽다고 생각하는 개발자들에게 편의를 제공합니다.
Vue.js의 또 다른 이점은 속도, 단순성, 라이브러리와 커뮤니티의 지원입니다.
다양한 웹사이트와 다양한 Vue.js 애플리케이션들을 분석하면 프레임워크에 대한 이해도를 높일 수 있습니다. 하지만 자체 기술 스택으로 Vue.js를 사용하려면 기술에 대해 좀 더 깊은 이해가 필요합니다.
'JavaScript > VueJS' 카테고리의 다른 글
| Vue.js 개발 환경 구성(VSCode, 크롬 확장) (0) | 2023.06.24 |
|---|---|
| Vue3 Options API vs Composition API (1) | 2023.06.13 |
| vue-cli(v5) 설치 및 프로젝트 구조 정리 (0) | 2023.06.13 |
