[Vue] Vue를 선택한 이유와 비유를 통한 Vue 설명 그리고, 간단한 Final Vue Project 공유

Final Vue Project

Author : SeolHun

---

Simple Summary

안녕하세요. 설훈입니다. Vue Study도 진행하고, 여러가지 Github에 공식문서와 강의를 참조하면서 커밋하고 있었습니다. 이러한 블로그 형식의 글은 오랜만에 쓰게되는 것 같네요. 이렇게 글을 쓰는 이유는 개인 스터디한 내용을 공유하고 "왜 Vue를 쓰는지?"에 대한 개인의 의견을 그냥 쓰고자 합니다. 먼저, 저는 Vue에 상당히 큰 매력을 가지고 있으며, 다른 프레임워크보다 Vue에 더 큰 미래가 있다고 보고 있습니다. 이유는 차차 적어가겠습니다.

첫째, 첫 직장에서 JavaScript, jQuery로 작업을하면서 너무나 힘든 상황을 많이 했습니다. 특히, HTML을 렌더링해야하는 상황이나, 데이터를 계속 묶어서 처리해야하는 상황에서 발생되는 것들이죠. 추가적으로 이러한 이벤트들을 지속적으로 관리해야하는 문제도 발생되었습니다. 이러한 문제를 해결하기 Module Pattern을 알게되었고, 정말 제가 원하는 패턴임을 알게되었고 개인적으로 Module Pattern에 빠져서 대부분의 기능을 각각의 모듈로 구성하여 재사용할 수 있게 만들었습니다. 코드도 충분히 깔끔해졌고, Event에 기반한 Script를 작성할 수 있었습니다. 즉, Module Pattern은 제게 모든 문제를 해결할 수 있는 메시아 같은 존재였습니다.

1. Angular

   • AngularJS도 간단히 써보았고, JavaScript에 비해 많은 기능을 제공해주어 매력적이었지만 생각보다 문서의 질이 좋지 않았으며, Stack Over Flow에서 각각의 사람마다 제안하는 코드가 너무 다양하다는 것을 보았습니다. 그래서, Agnualr는 제게 큰 매력을 주지 못했습니다.
   • 개인적으로, 전 개발자에게 자유는 필수라고 생각하지만, 코드를 자유롭게 작성하는 것에는 찬성하는 입장은 아닙니다. 일종의 규칙을 정해서 그 틀 안에서 규칙적으로 자유롭게 코드를 작성해야 한다고 생각합니다. 그래서 esLint나 tsLint와 같은 규칙을 강조하는 것을 선호하는 편입니다.
   • Angular2를 사용하려고 했지만, ClientSide로 바꿔야하는 것과 TypeScript라는 새로운 러닝커브를 받아들이기에는 큰 시간이 없었습니다. 그리고 4가 나온다는 소식도 있어서 불안정이라는 느낌을 제게 주었습니다.

2. React

   • React에도 관심이 많았지만, 러닝커브가 제게는 너무 심하다는 생각을 하였습니다. 그리고, 개인적으로 JSX보다는 DOM을 통해 이벤트를 처리하는 것에 더 익숙하였습니다.

3. Vue

   • 그러던 찰나 'Vue'를 알게 되었고, 이것은 제가 찾던 모든 기능을 갖춘 프레임워크와 같았습니다. 각각의 데이터와 메소드 등이 모두 Module Pattern 형식으로 구성되어있었으며, DOM을 통해 JavaScript의 이벤트를 컨트롤 할 수 있었죠. 그 중 좋았던 것은 TypeScript로의 확장 및 질 좋은 문서와 손 쉬운 접근을 제공한다는 것이었습니다.

   • 당연히 Vue에는 Angualr와 React와는 다른 위험요소가 존재합니다. 앞으로의 미래에 대한 불안감(Angular와 React에 비해)이 있으며, 대기업의 지원이 아닌 순수 오픈소스 개발자들에 대한 운영이라는 것입니다. 오히려 후자의 내용은, 개발자들이 더 매력을 느끼기도 합니다. 대기업의 영리적인 부분이 제거되어 순수 오픈소스로서 존재할 수 있다는 것이었습니다.

   • 또한, Vue는 중국에서 많은 지원을 받고 있고, 중국인들의 고유 특징인 국산사랑(?)으로 인한 많은 지원이 보이고 있습니다. 알리바바, 바이두 등의 대기업에서 Vue를 채택하고 있다는 정보를 보았으며, Php에서도 Vue를 기본 프레임워크로 선정하는 등 많은 성장이 이뤄질 것으로 기대하고 있씁니다.

---

비유를 통한 Vue 설명

특히, 신입 면접에서는 Vue, Router, Vuex와 관련한 차이를 물어보는 질문을 받아보았습니다. 당연히 한번 쯤 써본 사람은 이를 설명할 수 있습니다. 하지만, 무엇인가 기술적으로 설명하기에는 코드를 하나하나 분석하여 이해하는 것이 아니기에 '이것이 이것이다'라는 표현을 쓰기에는 거부감이 들었습니다. 그래서, 비유를 통한 Vue를 설명하고 일반인도 이해할 수 있게 비유적으로 섦여하였습니다.

• Vue : 집을 지어주는 것

  • 제가 생각하는 Vue는 집을 지어주는 것입니다. 각각의 Component를 조립하여 집을 짓는 것이 비슷하며, 각각의 집에 기능들을 구성해주어야 하기 때문입니다.

• Vue Router : 방으로 안내해주는 것

  • 집을 지어주었으면, 각각의 방이 나누어져있습니다. 각각의 방으로 안내해주는 것입니다. 조건에 따라 문을 잠글 수도 있고, 열어줄 수도 있습니다.

• Vuex : 집에서 공유하는 일정관리/포스트잇 같은 것

  • Vuex는 창문의 청소를 했는지 안했는지에 대한 상태 및 액션을 정의할 수 있습니다. 청소가 되어있으면, 이를 다른 사람이 할 필요가 없다는 상태를 나타내주어야 하며, 그러한 일정 및 이벤트를 정의하여 사용할 수 있습니다.

당연히 위에 간단히 비유한 것보다 더 많은 기능을 내포하고 있습니다. Vue를 쓰기 위해서는 Webpack과 Babel 등에 대한 기본 지식도 숙지해야하며, TypeScript를 사용하면 더 방대한 양을 공부해야합니다. Angular든 React든 Vue를 사용하든 이 2가지에 대한 내용은 기본적으로 안고 가야 한다고 생각합니다. 개인적으로 ES6를 모두 지원할 수 있는 브라우저 시대가 오기를 바랄 뿐입니다.(Microsoft Explorer..... )

---

공유 Project

• Vue Final Project