Vue 를 사용하는 이유

Vue 란?

Vue(Vue.js) 는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크입니다.

다른 자바스크립트 라이브러리를 사용하는 웹 애플리케이션 프로젝트에 Vue.js 를 도입하기 쉽게 설계되어 있는데, 이는 Vue.js 가 점진적으로 채택할 수 있게 설계되어 있기 때문입니다.

 

 

 

사용하는 목적

웹 앱을 만들 때 사용되는데, 싱글 페이지 어플리케이션 또는 웹 앱이라고 칭하는 것들이 있는데, 이 사이트들은 페이지를 넘어갈 때 되게 부드럽습니다. 실제로 모바일 앱처럼 사용할 수 있다고 해서 웹 앱이라고 부릅니다.

웹 앱을 만들 때 사용되는 도구가 Vue.js 라는 자바스크립트 라이브러리입니다.

그렇지만, 사실 Vue.js 말고도 React, Angular 등 똑같이 구현할 수 있는 라이브러리들이 있습니다. 실제 사용자 수 통계를 보았을 때도 React, Angular, Vue 순서로 Vue 가 가장 낮은 사용자 수를 보유하고 있습니다.

그럼 Vue 는 거의 사용되지 않는지에 대해 의문이 있지만, 실제로 네이버의 'VIBE', 카카오 프론트엔드 개발자들은 리액트랑 반반 섞어 쓴다는 것을 인터뷰를 통해 알 수 있습니다.

 

https://tech.kakao.com/2020/09/21/kakao-fe-platform-team/

FE플랫폼팀이 궁금하세요? - 함께 성장해가는 개발팀 이야기

 

다만 가장 유행인 리액트를 두고 네이버든 카카오든 Vue 로 새로운 페이지들을 만들어내는 경우가 많습니다.

Vue 를 굳이 왜 사용하는지에 대해 알아보려고 합니다.

 

 

 

사용하는 이유

1. 쉬어서 씁니다.

가장 중요하면서 명쾌한 이유죠. 

React Vue Angular 저부 똑같이 웹앱을 만들어낼 수 있습니다. Angular 는 매우 방대하고, TypeScript 를 강제로 사용해야하고, React 는 기존 JS문법을 매우 많이 활용하고, Vue 는 Vue 문법을 새로 배워야 합니다.

그래서 자바스크립트에 취약할수록 Vue 가 쉽게 느껴질 수 있습니다. 초보도 두세시간 배우면 웹앱을 만들어낼 수 있을 정도로요.(다만, 문법만 배워선 안되고, 코드 짜는 법, 웹앱 구조 등을 배워야 좋은 코드를 잘 작성할 수 있음)

 

React vs Vue 

같은 기능을 구현한다고 했을 때의 React 와 Vue 차이입니다.

if 사용

 

상태 변경

 

반복문

 

많은 경우에 Vue 가 더 깔끔합니다. 특히 짜야할 코드가 복잡해질수록 장점이 드러납니다. HTML 중간중간 자바스크립트 중괄호 같은 것을 많이 섞지 않고, 깔끔하게 HTML 스럽게 볼 수 있어서 페이지 구조를 파악하기에도 비교적 쉽습니다.

 

Vue 는 기능이 떨어진다?  X

다른 라이브러리들과 기능적 차이는 거의 없습니다. 세 라이브러리 모두 결과물은 똑같이 만들어낼 수 있습니다.

다만 구현하는 방법이 다른 뿐입니다.

 

 

2. Right-Way 가 있습니다.

리액트는 코드짜는 방법이 매우 자유롭습니다. HTML 을 Array 에 담아서 쓰든 함수에 넣었다가 뱉어주든 프로그래밍언어를 적극 활용해 개발하게 됩니다.

for 반복문을 하나 쓰려고 해도

• map
• forEach
• for in
• for of

등 많은 반복문을 이용할 수 있으며 언제 어디서 쓸 지도 개발자가 알아서 선택할 수 있습니다.

그치만, Vue 는 한 가지 답이 정해져있습니다. HTML 에 v-for 를 이용해야하죠. 

• 자유를 주면, 중수 & 고수는 편리할 수 있겠으나 초보는 "코드 이렇게 짜도 되나?", "다른 좋은 방법이 더 있지 않나?" 등 고민하며 헤매게 되는 경우가 많습니다. 그래서 코드짜는 방법을 정해주고, 가르쳐주는 Vue 가 초보에겐 좋다고 생각합니다.
• 협업할 때도 편리함을 느낄 수 있는데, 다들 코딩스타일이 자유로우면 코딩 스타일 맞추는 데도 시간이 소요됩니다. 그치만, 통일된 하나의 답을 갖는 Vue는 React 보다 코딩스타일이 한정적이여서 서로의 코드를 예측가능할 겁니다.
• 코드의 양이 많아질 때에 "코드짜는 방법이 제한적" 인 건 매우 큰 장점입니다. 무엇을 개발하든 틀에 맞춰 코드를 짜두어야 수정과 관리가 편해집니다.(그렇다고 Vue 가 꽉막힌 건 아니고, JSX, functional component 같은 리액트스러운 웹앱 프로그래밍도 지원합니다.)

 

 

 

3. 빠릅니다.

실제 Vue 로 만든 사이트를 방문할 때 HTML 렌더링하는 시간이 빠릅니다.

물론, 밀리세컨드 단위라 체감은 안되지만, 벤치마크에서 React랑 비교했을 때, 렌더링시간이 더 빠르다는 자료가 많습니다. 그래서인지 비트고인 서래사이트에서도 Vue 를 가끔 사용합니다.