이글은 2022년 여름방학 동안 인턴을 하면서 느꼈던 것을 적었습니다.
4학년 여름방학 인턴을 하면서 처음으로 Vue.js 접했다.
처음엔 서비스를 개발하면서 걍 기술스택을 Vue.js를 쓰기 때문에 아무생각없이 썼지만 인턴이 연장되면서 계속해서 Vue.js를 사용하게 되었다.(React 하고 싶었다...)
그렇기 때문에 Vue.js를 더 깊이있게 공부할 필요성을 느끼게 되었다. 그래서 Vue.js의 본질을 파악하고 왜 우리 회사에서 Vue.js를 사용하고 왜 Vue.js 가 인기가 있을까에 대하여 생각해 보게 되었다.
Vue.js 공식문서를 보면 가장 첫번째로 만나볼 수 있는 소개 페이지에 다음과 같이 나와있다.
Vue( view 와 같이 /vjuː/로 발음 )는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크입니다. 표준 HTML, CSS 및 JavaScript를 기반으로 구축되며 단순하거나 복잡한 사용자 인터페이스를 효율적으로 개발하는 데 도움이 되는 선언적 및 구성 요소 기반 프로그래밍 모델을 제공합니다.
위 소개 페이지의 문단으로 나눠보면 크게 3가지다.
1.표준 HTML, CSS 및 JavaScript를 기반으로 구축된다.
2.단순하거나 복잡한 사용자 인터페이스를 효율적으로 개발한다.
3.선언적 및 구성 요소 기반 프로그래밍 모델을 제공한다.
아래부터는 왜 공식문서에 이러한 설명이 있는지에 대해 분석하고 나의 생각을 적어보겠다.
1. 표준 HTML, CSS 및 JavaScript를 기반으로 구축된다.
Vue.js를 왜 써야하는지 구글링을 하다보면 하나같이 쉽다고 나와있다.
답은 React와 비교해보면 알 수 있다.
React 공식문서를 보면 “React 문서는 JavaScript 프로그래밍에 익숙한 사람을 대상으로 쓰여져 있습니다.” 라고 나와있다.
즉 JavaScript를 꾸준하게 공부한 사람들이 이용하기에 적합하다는 것이다.
반면 우리 개발팀 인원들을 보면 주로 Python,Java 사용하는 분들이 많이 있었다. 그래서 급하게 프론트앤드를 담당할 일이 있을때 JavaScript를 알아야 하기 때문에 개발시간이 많이 걸릴 수가 있다.
즉 JavaScript를 많이 알지 않더라도 공식문서만 보고 쉽고, 빠르게 웹을 만들 수 있기 때문에 회사에서 Vue.js를 사용하는것 같다. (제대로 깊이 들어가려면 JavaScript도 잘 해야함)
2. 단순하거나 복잡한 사용자 인터페이스를 효율적으로 개발한다.
단순하거나 복잡한 인터페이스를 효율적으로 개발이 가능한 이유는 Vue.js 는 MVVM패턴을 적용했기 때문이다.
Vue 의 MVVM
MVVM패턴은 Model-View-ViewModel 의 앞글자를 땄다.
각 하나하나 설명을 해보겠다.
Model은 data를 포함한 객체이다.
var model = {
message : "Hello World"
}View는 실제 화면에 보여지는 HTML 코드를 말한다.
<div id="app">
<h1></h1>
</div>ViewModel은 Vue 객체를 선언하였고 View 와 Model이 연결되어 있다.
var simple = new Vue({
el : #app, //View 부분
data : model //Model 부분
})이러한 MVVM패턴으로 인해 단순하거나 복잡한 인터페이스를 효율적으로 개발할 수 있다.
즉 MVVM 패턴은 View와 Model, ViewModel을 분리하여 독립적인 개발을 할 수 있도록해서, 테스트, 유지보수,재사용성을 높인 패턴같다.
3. 선언적 및 구성 요소 기반 프로그래밍 모델을 제공한다.
Vue.js는 다른 프레임워크와 다르게 Vue declarative(선언적이라는 말)를 제공한다.
이게 뭐냐면 공식 문서를 공부하다 보면 “v-”가 붙은 문법이 있을거다.
v-bind, v-on, v-for, v-if 와 같은 문법들이 있기 때문에 우리는 이것들만 배우면 쉽게 Vue.js를 사용할 수 있다.
그리고 구성 요소 기반 프로그래밍이란 말은 일단 아래 코드를 보자
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">You clicked me {{ count }} times.</button>
</template>
<style>
</style>위 코드가 구성 요소 기반 프로그래밍(JS,HTML,CSS를 분할했다는 뜻)이다. 버튼을 클릭하면 count가 증가하는 코드이다.
이렇게 CBA(Component-Based Architecture) 구성 요소 기반 프로그래밍이 주는 장점은 다음과 같다.
1.재사용이 가능하다.
2.단위테스트에 적합하자
3.가독성이 좋다.
내가 봐도 JS, HTML, CSS를 분리해 놨기 때문에 일단 가독성이 너무 좋고 재사용하기 편할거 같다.
이러한 이유때문에 Vue.js가 인기가 있고 매력적인 프레임워크라 생각한다.
Reference
https://www.tatvasoft.com/outsourcing/2021/10/what-is-vue-js-and-its-benefits.html
