vue.js는 프론트엔드 프레임워크 중 하나이다. 여타 다른 프론트엔드 프레임워크보다 배우기가 쉽고, 러닝커브가 낮아 초보자들이 쉽게 배울 수 있는 프레임워크이다.
실제로 공식문서에 평범하지 않은 애플리케이션을 작성하기에 충분한 학습기간은 일반적으로 1 일 미만으로 소요 될 것 이다. 라고 쓰여있다.
내가 vue를 배우게 된 이유👏
위코드에서는 기본적으로 React를 학습한다. 1차 2차 프로젝트 역시 모두 React로 진행이 되었고 숨가쁘게 달려왔던 2개월 역시 React에 몰두했고 이제 막 React의 기본적인 빌드업 플로우에 대해 어느정도(?) 이해도가 생기고 있었다. 1, 2차 프로젝트가 마무리 되고 위코드에서의 꽃 기업협업을 나가게 되었는데, 나는 좋은 기회로 스토어링크 라는 회사로 2명의 동기와 함께 나가게 되었다. 스토어링크는 마케팅 어려움을 겪는 온라인 판매자를 위해 시작된 플랫폼 서비스를 하는 기업이며, 퍼그샵이라는 구매 체험단 쇼핑몰까지 운영하고 있다. 스토어링크는 기본적으로 Vue.js 를 이용하여 빌드업 되어있고, Firebase의 실시간 데이터베이스를 이용하여 Db를 구축하고 있는 회사라 Vue를 공부하게 되었다.
Vue 와 React
나는 vue를 배우기 전에 가장 먼저 React와 vue의 다른점이 무엇인지 부터 살펴봤다. 프론트엔드의 프레임워크는 삼국지 처럼 대표적인 3개의 엥귤러, 리액트, 뷰 가 있고 셋다 작동하는 원리는 비슷하여 하나만 익혀놓으면 쉽게 배울 수 있다고 들었기에 차이점을 먼저 보아야겠다고 생각했다.
1. Templates
Template 은 전통적인 웹 개발 패러다임과 유사하므로 입문 개발자가 이해하기 쉽다. 그리고 심지어 숙련된 개발자분들께도 Functionality 동작과 태그 Layout 을 분리할 수 있어 선호되는 방식이다.
하지만 Template 은 표준 HTML 이외에 추가적인 HTML 구문을 학습해야 한다는 단점이 있다. React 의 render() 는 표준 HTML 과 Javascript 만 알면 된다. render() 는 또 쉽게 디버깅 하고 테스팅이 가능한 장점이 있다.
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('');
}
}
});2. immutable(불변성)
React 에서 state 는 불변(immutable) 의 속성을 가진다. 그래서 직접적으로 변경할 수 없다. 만약 상태를 변경하고 싶다면 setState() 를 사용해야 합다.React 는 현재와 이전 상태를 비교하여 언제, 어떻게 다시 DOM 을 렌더링 할지 결정한다. 그렇기 때문에 불변하는 속성이 필요하다.
반대로, Vue 에서 data 는 변경될 수 있다. Vue 의 렌더링 시스템이 React 보다 효율성이 떨어진다고 결론짓기 전에, Vue 가 실제로 어떻게 렌더링을 하는지 더 자세히 살펴보면: state 에 새로운 객체를 추가했을 때, Vue 가 해당 객체의 모든 속성을 확인하고 나서 getter 와 setter 로 변환한다. Vue 의 reactivity system 이 모든 상태를 모니터링하여 변경이 일어날 때마다 자동으로 DOM 을 다시 렌더링 한다.
더 인상적인 부분은, Vue 에서 state 를 간단하게 변경할 수 있을 뿐만 아니라, Vue 의 렌더링 시스템이 React 보다 빠르고 더 효율적이라는 것이다.
Vue 의 reactivity system 에도 몇가지 주의할 점이 있는데, 예를 들어, 속성 추가 및 삭제 그리고 특정 배열에 대한 변경을 감지하지 못한다. 물론 이러한 부분들을 React 처럼 Vue set() API 로 해결할 수 있다.
this.message = this.message.split('').reverse().join('');3. 양방향 바인딩
Vue.js에서 양방향 데이터 바인딩이라는 것은 DOM과 자바스크립트 객체 사이에서의 뷰모델로서 항상 DOM과 JS를 일치시켜준다는데 의미가 있다. 예를 들어 input 태그에 어떤 값을 입력하게 되면 DOM에 변화가 일어남과 동시에 JS에도 해당 DOM과 바인딩 시켜놓은 변수에 변화가 생긴다.
instance => template은 뷰 인스턴스의 데이터 값을 HTML 상의 템플릿에 데이터를 바인딩한다는 의미이다. 이것이 단방향 데이터 바인딩의 기본적인 작동 방식이다. 여기서 Vue.js는 template => instance로 이벤트를 전달해주고, 더 나아가 v-model이라는 디렉티브도 제공한다.
v-model을 설정함으로써 input 태그에 값을 입력할 때 뷰인스턴스에 data를 바로 변경시킬 수 있다.
단방향 데이터 바인딩을 사용하게 되면 데이터가 한 방향으로만 흐르기 때문에 하위 컴포넌트가 부모의 상태를 변경하는 것이 다른 조치를 취하지 않고서는 불가능하다. 따라서 데이터의 흐름을 추론하기는 더 쉽다. 하지만 동시에 단점으로도 작용할 수 있는데 컴포넌트 간의 데이터 전달에 항상 특정 로직이 들어가야 한다는 것이다.
양방향 데이터 바인딩은 인스턴스가 템플릿의 값을 변경시킬 수 있다. 따라서 뷰와 모델의 값이 항상 동일하게 되고, 다르게 말하면 데이터와 화면이 항상 동일하다(단방향 데이터 바인딩에서는 이와 같은 효과를 내기 위해서 다른 작업을 해주어야 한다). 하지만 데이터 변경이 일정하지 않기 때문에 디버깅 시 어려움이 있을 수 있고, 변경되는 데이터를 감지하기 위해서 내부적으로 추가적인 작업이 들어가기 때문에 성능에 있어서 문제가 생길 수도 있다.
4. 공통점 !!!!!
React 와 Vue 이 다른 점보다는 유사점을 더 많이 갖고 있는 환경에 있다. 이 두 라이브러리의 공통된 특장점은
- Virtual DOM 으로 빠른 렌더링
- 경량 라이브러리
- Reactive Component
- Server Side Rendering
- 라우터, 번들러, state management 와 결합이 쉬움
- 훌륭한 개발자 커뮤니티와 지원Vue 공부를 시작한 만큼 대충하고 싶지 않다. 각자 다른 사람이 같은 환경속에서 강의와 세션을 들어도 사람마다 흡수하는 양은 다르다. 똑같은 학습을 하였음에도 누구는 잘하는 사람이 되어있고 누구는 배웠던 내용을 또 다시 질문하는 사람이 되어있다. 잘하는 사람은 머리가 좋거나 이해하는 방법이 다른게 아니라 학습하는 시간의 농도의 차이라고 믿는다. 나는 여태 진한 농도를 보내는 사람은 아니였다. 하지만 좋은 기회로 4주동안 기업협업에 나온 만큼 진한 농도를 만드는 사람이 되고싶다. 그렇기에 vue에 대해 깊이 있고 자유롭게 쓸 줄 아는 수준까지 공부를 하고 싶고 그렇게 할 것이다. 다시 한번 화이팅 하자....!
