고정 헤더 영역
상세 컨텐츠
본문
CONTENT : click :
오프닝
오늘은 Web-app을 만드는 대표적인 툴 3가지(리액트, 앵귤러, 뷰) 중 뷰에 대해 탐구해보고자 합니다.
Vue.js 란?
먼저 뷰가 무엇인지부터 알아보겠습니다. 뷰는 웹페이지 화면을 개발하기 위한 자바스크립트 프레임워크입니다. 구글에서 AngularJS를 사용하여 작업하던 Evan You(에반유)가 2014년에 개발하였습니다. 에반유의 인터뷰에 따르면 앵귤러를 사용하던 중 앵귤러의 장점을 뽑아내면서도 가벼운 프레임워크를 만들면 어떨까라는 생각에서 뷰를 만들게 되었다고 합니다.
" 앵귤러에서 내가 정말 좋아했던 부분을 뽑아내서 관련된 모든 추가적인 개념 없이 진짜 가벼운 걸 만들면 어떨까 싶었다. 나는 그 내부 구현이 작동하는 방식에 관해서도 호기심이 있었다. 이 최소한의 특징 셋을 복제하는 방식으로 이 실험을 시작했다. 예를 들면 declarative 데이터 바인딩 같은 것 말이다. 그게 바로 Vue가 기본적으로 시작한 방식이었다. "
Vue.js 의 특징
뷰의 특징은 ' 리액트와 공통으로 가지는 특징 ',' 뷰의 독자적 특징 ' 두 가지로 나누어 이야기 할 수 있습니다.
우선 리액트와 공통으로 가지는 특징을 살펴보겠습니다.
리액트와 뷰 모두 웹 UI를 작은 컴포넌트 단위로 구성합니다.
컴포넌트는 블록처럼 잘 조합해서 쌓으면 원하는 화면을 구성할 수 있습니다. 컴포넌트 기반의 개발방식을 이용하면 재사용이 쉬우며, 캡슐화와 확장을 가능하게 만들어 유연한 개발을 돕습니다. 또 모두가 정해진 방식대로 컴포넌트를 활용하므로 빠르게 구현할 수 있을 뿐 아니라 남이 작성한 코드를 볼 때도 수월해집니다.
다음으로는 Virtual DOM 방식을 통해 성능을 향상시킨다는 특징이 있습니다.
Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다. 따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 됩니다.
[node.js] React,.js Vs Vue js 자바스크립트 프레임워크 비교
이제 뷰의 독자적인 특징을 살펴보겠습니다.
먼저 뷰는 단일 파일 컴포넌트 기반 프레임워크입니다.
HTML, CSS 등 view를 구성하는 요소를 .vue 확장자를 가진 파일 하나에 모두 정의합니다. 이는 적당한 규모의 프로젝트에서 생산성을 높이고 협업을 수월하게 만듭니다.
추가적으로 HTML 기반 템플릿 구문을 사용한다는 특징이 있습니다. 뷰는 프론트엔드 파일을 브라우저에 렌더링 하는 과정에서 템플릿 문법을 사용합니다. 이 템플릿 문법이 HTML 기반으로 이루어져 있으므로 배우기 쉽습니다.
Vue.js 를 사용하는 이유
뷰를 사용하는 이유는 크게 네 가지입니다.
먼저, 앞서 여러번 언급했듯, '추가적인 개념 없이 진짜 가볍기'때문에 리액트나 앵귤러에 비해 사용이 쉽습니다. 기존 웹 개발자 뿐 아니라 HTML, CSS, 자바스크립트 기초만 아는 웹 개발 입문자 및 컴퓨터 비전공자들도 배우기 쉽게 만들어졌습니다.
이 장점의 연장선으로 만드는 방법이 하나라는 점도 뷰의 장점 중 하나입니다. 예를 들어보겠습니다.
우리가 <HTML>을 조건부로 보여주고 싶은 상황이 있다고 생각해봅시다.
리액트의 경우 이럴 때, tenary operator / && || / if else / enum 등을 사용해 조건부를 나타내야 합니다.
하지만 뷰는 아주 심플합니다. 그저 v-if (v-else-if, v-else) 하나만 존재하며, 이를 이용해 조건부를 나타내면 됩니다.
이 장점 덕에 협업할 때 스타일 통일에 대한 논의가 필요하지 않다는 이점이 뒤따라옵니다.
세 번째 장점은 html 렌더링이 빠르다는 점입니다. 뷰 제작팀에서 리액트와 앵귤러를 가지고 같은 테스트케이스에서 성능을 비교한 결과 뷰가 가장 빠른 것으로 나타났다고 합니다. 하지만 리액트와 유의미를 논할 만큼 큰 차이를 보이진 않습니다.
마지막 장점은 업데이트가 잘된다는 점입니다. 기존 Vue 2.0에서 진보할 새로운 버전의 개발이 시작된 지 약 2년 만인 2020년 9월에 Vue.js 3.0 이 업데이트 되었습니다. 점점 더 빠르고 작은 프레임워크로 나아가고자 하는 방향성이 꾸준하게 보이고 있기 때문에 이 또한 뷰의 장점으로 꼽힙니다.
리액트도 리액트만의 장점이 있고 뷰도 뷰만의 장점이 있으므로 어떤 것의 우위를 가리기 보단, 본인에게 잘 맞는 프레임 워크가 무엇인지 알고 사용하는 것이 중요합니다.
프레임워크 시장 속 뷰의 위치와 상징성
뷰는 2014년 2월에 처음 공식 배포되었기 때문에 상대적으로 역사가 오래된 리액트에 비해 시장 점유율이 낮지만 성장세는 가파릅니다. 실제로 State of Js 설문조사 결과를 보면 Vue의 가파른 성장세를 살펴볼 수 있습니다.
마무리
정리하면, 뷰는 앵귤러의 양방향 데이터 바인딩(Two-way Data Binding)과 리액트의 단방향 데이터 흐름(Ont-way Data Flow)의 장점을 모두 결합한 자바스크립트 프레임워크입니다. 가상돔(Virtual DOM) 방식을 적용하여 사용자 인터랙션이 많은 요즘의 웹 화면에 적합한 동작구조를 갖추고 있습니다. 2014년에 개발되어 급격한 성장세를 보이고 있으며, 우리나라에서도 카카오, 네이버(바이브) 등에서 뷰를 사용하고 있습니다.
이상으로 초보자에게도, 기존 리액트, 앵귤러 개발자에게도 접근하기 쉬운 뷰! 탐구생활을 마무리 하겠습니다.
감사합니다.
참고
Do it! Vue.js 입문
Vue를 만드는 여정은 개발자로 성장하는 여정이었다 - 비전공자가 Vue.js를 창작하기까지
[Node.js] React.js vs Vue.js, 자바스크립트 프레임워크 비교
'[8기 SSAFYcial] 싸피의 모든 것' 카테고리의 다른 글
| [12월] 초보 개발자 레벨업 :: 그래서 "도커"가 뭔데? (0) | 2022.12.15 |
|---|---|
| [11월] 싸피 비전공자 합격 팁 한 번에 보기! "8기 합격자가 말해주는 꿀팁모음.zip" (0) | 2022.11.30 |
| [10월] 비전공자의 넓고 얕은 SSAFY이야기 String ver3 = "수학" (0) | 2022.10.23 |
| [10월] 내장점이 뭔지 알아? 바로 자격증이야 - SQLD (0) | 2022.10.10 |
| [9월] 비전공자의 넓고 얕은 SSAFY이야기 String ver2 = "대기과학" (0) | 2022.09.28 |
