Vue.js는 공식 문서에 대문짝만 하게 쓰여있듯이
프로그레시브 자바스크립트 프레임워크입니다.
이는 애플리케이션을 단계적으로 개발하고 향상시킬 수 있으며,
개발하려는 웹 사이트의 규모와 요구사항에 따라
추가적인 기능과 기술을 적용할 수 있는 방식을 말합니다.
공식적인 내용은 위와 같고,
왜 Vue가 React와 Angular와 더불어
프론트엔드 프레임워크 3대장이 되었는지 알아보겠습니다. 😀
📝통계로 현황 살펴보기
⦁ 2023 프로그래머스 개발자 설문조사 리포트
✔ 국내 4,034명의 개발자가 참여한 온라인 설문조사 결과입니다.
주로 사용하는 웹 프레임워크에 대한 응답으로,
역시 국내에서는 React가 대장인 모습을 볼 수 있습니다.
하지만 그에 못지 않게 Vue.js도 많이 사용되고 있습니다.
Angular가 가장 하위에 위치하고 있네요.
⦁ Stackoverflow survey 2023
✔ 해외 개발자들의 선택도 알아봅시다. 😀
2023년 5월에 90,000명 이상의 개발자가 연례 설문조사에 응답했습니다.
해당 그래프는 사용하는 웹 프레임워크 및 기술에 대한 응답입니다.
해외 개발자들도 마찬가지로 React를 가장 많이 사용하고 있습니다.
React 기반의 프레임워크인 Next.js도 강세네요.
⦁ 정리
✔ 정리하자면, 국내와 해외가 동일하게 React, Vue, Angular 순으로 선택받고 있습니다.
Next.js는 리액트 친구니까 제외입니다.
또한 같은 회사라도 프로젝트마다 Vue와 React를 다양하게 채택하는 회사가 증가하고 있습니다.
그럼 어째서 Vue를 선택하는 회사가 많아지고 있는지 알아봅시다. 🤔
📝Vue.js를 사용하는 이유
⦁ 쉬워서.
✔ 가장 명료하면서도 근본적인 이유입니다.
Vue는 기본적으로 통일된 문법과 접근 방식으로 협업과 코드의 일관성을 강조합니다.
초보 개발자에게 선택지가 적다는 것은 호재입니다.
예시1. 컴포넌트 반복 렌더링
⦁ React
- map(), for문, forEach() 등의 다양한 문법
- 컴포넌트 내부, 외부 어디서 사용할지 선택
...
⦁ Vue
v-for
예시2. 조건부 렌더링
⦁ React
JSX 내에서 if 문이나 삼항 연산자 등등 여러 가지 방법 존재
⦁ Vue
v-if, v-else, v-else-if
✔ 같은 기능을 구현하더라도 React는 구현에 많은 선택지가 존재하고
개발자의 성향에 따라 코드 스타일도 상이한 경우가 많습니다.
하지만 Vue는 선택지가 한정적이기 때문에 코드를 간결하고 명확하게 유지합니다.
선택지가 적다는 것이 안 좋게 들릴 수도 있지만,
회사에 입사하면 많은 개발자들의 코드 스타일을 통일시키기 위해
노력하는 모습을 볼 수 있습니다. (prettier가 대표적입니다.)
Vue의 명확한 코드 스타일이 유지보수와 협업에 큰 도움을 줍니다. 😎
저는 두 프레임워크를 모두 사용해본 결과, Vue의 간결한 문법이 상당히 만족스러웠습니다.
확실히 React보다는 언어에 대한 허들이 낮은 느낌입니다.
⦁ 성능
✔ 쉬우면 그만큼 성능이 안 좋은 것 아닌가?라고 생각하실 수 있지만
React와 Vue 모두 가상 DOM 기반이기 때문에 거의 비슷한 성능이 나온다고 합니다.
⦁ 생태계
https://ko.vuejs.org/guide/introduction.html#api-styles
소개 | Vue.js
ko.vuejs.org
✔ 활발하게 커뮤니티가 성장하고 있고, 공식 문서도 정말 친절한 편입니다.
공식 문서에 쉽고 재밌게 학습할 수 있는 튜토리얼도 존재합니다. 꼭 한번 해보세요.
+ Quasar라는 프레임 워크가 정말 훌륭합니다. 다음에 포스팅 하겠습니다. 😀
참고 문헌 :
https://www.youtube.com/watch?v=-tVaahsXpwk&t=3s