Vue.js
Vue(뷰)를 알아보자
장점
- 러닝커브가 낮다. -> 배우기 쉽다.
- JS 프론트엔드의 대표 프레임워크
-> 리액트, 앵귤러와 같은 기능을 하지만 다른 둘보다 배우기 쉽다. - 아무튼 두개보다 쉽다.
- 쉽다
Single Page Application (SPA)
Vue의 생태계, 문법 등등을 알기전에 일단 먼저 SPA를 간단하게 짚고 넘어가자!
SPA는 지금 시대에 스마트폰을 모두 사용해서 익숙하다. 스마트폰의 앱(Application)과 유사한 방식을 뜻한다. 기존의 서버 사이드 렌더링과 비교 했을 때, 비교적 간단하며, 스마트폰의 앱과 비슷한 UX를 제공한다.
SPA방식을 이용하는 웹 프론트엔트 프레임워크는 대표적으로 Vue, React, Angular등이 있다. 그렇다면 모던 웹 프레임워크에서는 왜 SPA방식을 채택을 했을까?
모바일UX, 빠른 속도(CPU의 성능 상승), 자바스크립트의 발전
원래 웹 페이지 안에서 다른 게시판이나 이렇게 이동을 하게 되면 계속해서 페이지 새로고침이 일어났다. 페이지 마다 각각 세팅이 되어 있고, 페이지를 이동하는 등의 사용자 인터랙션이 발생하면 브라우저 - 클라이언트 - 서버 - DB의 과정을 거치게 되고 새로운 리소스를 매번 제공해주었다. 이 때 단점은 작은 것 하나를 변경하려고 해도 역시나 위의 과정을 반복하여 페이지를 새로고침 하게 된다. 반면 SPA는 처음에 모든 것을 다 불러오고 변경 인터랙션이 있을 때, 변경되는 부분만 다시 불러와서 변경이 된다.
자세한 SSR과 CSR 및 SPA, MPA는 꼭 제대로 숙지하는 것이 필수!!!!
적어도 내가 만드는 프로그램, 프로젝트, 회사에가게 되어서 투입되는 프로젝트가 어떤 프레임워크, 언어 쓰는지는 바로 알겠지만 어떻게 돌아가는지는 알아야 할 것!!!!!!
Vue 생태계
React.js VS Vue.js
일단, 나의 첫 프로젝트에서 Node.js 백엔드를 담당하였고, 프론트엔드는 React를 사용했지만 담당은 다른 분들이 했다. 하지만 백엔드개발자라고 해서 프론트엔드를 아예 몰라도 된다는 것은 말 같지도 않은 소리!
오히려 백엔드 개발자가 프론트엔드를 잘하면 프론트엔드 개발자의 심정이나 막히는 부분을 더욱 더 이해를 잘 할 수 있으며, 백엔드 개발에도 도움이 될 것 같다는 생각을 많이 했다!!! 그렇다면 풀스택 개발자가 되어야 하는건가???!!!
내가 묻고 내가 답한다. 나는 YES라고 본다. 다만 그 중 강점 하나를 선택하는 것이다. 백엔드개발자면 백엔드쪽은 전문가 정도로 숙련을 하고 프론트엔드는 기본이상을 해야 한다라고 생각한다. (둘다 잘해서 풀스택으로 가도 될 것 같다. 올라라 나의 몸값이여!)
그리고 취업을 해서는 Vue.js 프로젝트에 첫 투입이 되어서 소스코드 파악 및 Vue공부를 하라고 지시받았다. (Vue.js하기 싫어 리액트하고 싶어!! 라고 하면 안된다.) 그래서 React공부 하듯 Vue도 똑같이 공부하면서 공통점과 차이점, 그리고 생태계를 알아보았다.
React는 넘사벽수준의 웹 프론트엔드의 프레임워크이다. (사실 리액트는 라이브러리 이다. 하지만 설명 및 공부할 때 편의를 위해 프레임워크라 표현)
현재 SPA방식을 채택한 웹 서비스에서 대부분의 프론트엔드 프레임워크는 리액트이다. (앵귤러는 신경쓰지말자. 스벨트도 아직 신경쓰지는 말자.) Vue는 이제서야 많이 치고 올라오는 추세지만 아직 리액트에는 상대가 되지 않는다.
주니어개발자들에게 가장 중요한 것은 취업시장이라고 생각한다. 우리나라는 자본주의 사회이기에 시장이 큰 쪽을 선택하는게 유리하기 때문이다. 그리고 취업시장이라고 하는 것은 결국 웹 서비스가 많으면 많을 수록 취업시장과 비례하기 때문에 어떤 것이 더 많이 쓰이냐랑 같다. 예를 들면 우리나라는 아직 자바민국이라고 부를 수 있다. 마찬가지로 Node.js, 장고 등등 다른 백엔드 프레임워크가 많지만 아직은 스프링 프레임워크가 비교할 수 없이 많다. 물론 퀄리티를 비교하자고 하면 오래된 기술이 많아서 높을 수 있다. (전자정부프레임워크....) 자바도 업데이트 되고 있다.
그럼 대체 왜 Vue를 쓰는 걸까?
일단, 이 주제에 답을 하기 전에 React와 Vue 둘 다 같은 기능을 할 수 있다. 즉, 필요한 프론트엔드 개발(구현)이 둘다 똑같이 가능 하다는 것이다. -> 그렇다면 더욱더 의문이 가중이 될 수 있다. 그럼 이미 널리 많이 쓰고 있는 React 쓰면 되는 걸... 왜 Vue를 쓰는 걸까? 그리고 심지어 React와 Vue를 비교 했을 때 문법상 React가 JavaScript와 가깝다.
그 이유는..... 위에서 강조하듯 적었다. 쉽다
쉽다. 그 이유이다. 똑같은 동작을 하는 것을 Vue와 React방식으로 짜면 비교 할 수 없이 Vue가 간단하다. 그리고 리액트는 여러가지 방법이 있다. 개발자 나름이다. 하지만 Vue는 템플릿 문법이므로 거의 동일한 방법으로만 구현을 해야한다. 그렇다는 것은 협업에 굉장히 유리하며, 다른 시니어Vue개발자가 다른 Vue프로젝트를 참여하거나 코드를 읽을 때에도 상당히 유리한 조건이다.
또한 프론트엔드에 시간을 아낀다면 그 만큼 다른 면에 시간을 투자할 수 있다는 말이기도 하다.
그래서 현재 Vue 점유율이 오르는 추세이다. (그래도 리액트 점유율에 한 참 못 미친다.)
나의 생각
Vue와 React에 대한 생각
React로 개발하면 확실히 JS를 사용하는 느낌이 든다. Vue는 HTML자체에서 조작을 한다. JS의 코드를 사용하여 HTML 태그들을 조작하는 React는 JS의 문법을 철저히 따른다. 하지만 Vue는 HTML 태그 내에서 조작이 가능하다. 무언가 JS의 깊은 문법을 몰라도 단순하게 사용이 가능하게 하는? 그런 느낌이 많이 든다.
절대적으로 두 개 중에 하나가 좋다. 하나가 안 좋다라고 말은 못한다. 아니 할 수 없다. 사장되어가는 기술도 아니고, JSP같이 중구난방한 코드도 아니다. (개인적으로 JSP는 진짜 진짜 싫어한다. 진짜 그냥 없어졌으면 하는 기술이라고도 생각한다.) 두 개를 다 안고 성장하는 것도 나쁘지 않다라고 생각한다. 사실 둘 중에 하나만 파도 괜찮다고 생각한다. 만약 둘 중에 하나를 선택하라고 하면 나는 리액트를 선택할 것 같다. 왜냐하면 리액트가 좀 더 재미있었다. 그리고 TypeScript 공부를 열심히하자.
다음 부터는 Vue 문법을 포스팅 할 예정이다. 개발자로 살아남으려면 진취적인 생각을 많이 해야한다.
나의 생각 (2)
아침에 1시간 남들 보다 일찍 출근해서 프로그래머스(코테)문제 풀고, 업무시간에 Vue 프로젝트 열심히 따라가고, 부족한 부분은 야근 및 주말에 공부해서 채운다. 그리고 매일 운동하면서 체력을 늘리고.... 나중에는 나도 대기업, 스타트업에서 스카웃이 오거나 몰래 빼가려고 하는 시니어개발자가 되지 않을까??????
