Vue.js 선택한 이유 ... ( feat. Angulra.js , React.js )

 기존엔 항상 html+JS 혹은 JSP 를 사용 했던거 같다. 거기다 JS 는 대부분 Jquery 사용이 80%는 차지 했기 때문에 순수 JS 라고 보기 힘들다. Jquery 의존도가 높은 댓가로 JS 에 대한 스킬이 많이 늘지 않았다 ( 여태 해놨던 프로젝트 대부분이 단순한 백오피스 개념의 페이지들만 제작 하다보니 뭔가 대단한(?) 기술을 쓴 일이 없었다 ) 

 개인적으로 Front-end 쪽이 굉장히 약하다 다들 별거없다고 하는 CSS 도 솔직히 진짜 잘모른다. 백엔드개발자들중에도 충분히 front-end 를 어느 정도 하는 사람들이 많다. 볼때 마다 부러웠으나 체질적(?)으로 front-end 쪽은 손이 잘안갔다. 내 잘못이긴 하지만 해보려고 노력중이다. 

 난 JS 는 간단하게 사용 만 가능하 CSS 는 정말 모른다 ( 하루종일 구글링 해야 할거 같다 ) 내 상태를 알기에 최대한 쉽게 front-end 를만들수있고 남들이 보기에 그럴싸하게 보일수 있는 그런 개발 두구가 필요 했다. 보통 그럴때 찾는게 프레임워크가 아닌가 싶다. 

Angulra.js 

 구글이다! 이한마디면 될거 같다. 구글이 만들어 냈고 구글이 키우는 프레임워크 근데 문제는 지금 내가 알기론 구글만 쓴다 라고 알고 있다. 지금 최신버전은 많이 개선 됬다고 하지만 내가 한창 프런트 프레임워크를 찾아볼때 Angulra.js  는 기존의 프런트 환경을 만드는 방식들보단 충분히 경쟁력이 있었지만 정말 헤비 했다.

 컴포넌트 기반으로 되있기 때문에 Spring 과 친한 나에겐 굉징히 친밀감을 느꼈고 , 코드분리나 재사용이 컴포넌트 기반답게 아주 우수했다. 

그리고 다른페이지로 이동도 빠른편이였다 필요한 데이터만 Ajax 로 요청해서 서버에서 내려 받게만 구성하면 딜레이가 적었다 ( 속도의 우수성은 SPA 기반의 다른 프레임워크들의 공통적인 장점이라 Angulra.js 만의 장점이라기엔.... ) 

 -> Angular 5 부터는 TypeScript 2.4를 사용해서 배우기 쉬워 졌다고는 하지만 그게 전 버전보다 상대적으로 쉬워진것이라... 

 장점이 있었지만 앞서 말한 헤비함에 난 이녀석을 과감히 보내 줬다. 일단 로딩되면 빨랐지만 첫로딩은 빠르다고 할수 없었고 ( 개인적으로 뭔가 반쪽짜리라는 느낌이 ... ) 제일 중요한건 학습할게 너무 많았다.... TypeScript 를 배워야 하고 Angular.js 만의 기본적인 개념도 다시 익혀야 한다는거였다. Javascript 만으로도 충분히 스크립트 언어에 대한 괴롭힘을 당하고 있었기에 TypeScript 는... 그냥... 패스...

React.js 

 Angulra.js 를 포기하고 가장 먼저 내가 찝적댄 녀석이다.  지금은 여러가지 모진풍파로 메이저급이라고 하기도 애매한 페이스북에서 밀어 붙인 한때(?) 이게 최고다라는 소릴 들었던 녀석이다. 반응형 웹을 제작가능하며 굉장히 빠른 성능을 보여주는 프레임워크다.  PHP 를 사용하던 페이스북에서 만들어 냈다는것에 호기심을 자극했다. 

 

React.js 에 대해서 찾다보면 JQuery 이야기가 많이 나오고 그다음 이야기가 나오는것은 DOM 인거 같다.  Jquery 가 DOM 을 뭔가 잘라내고 가공하는 느낌이라면 React.js 는 가상의 DOM 을 만들고 그 실제 DOM 이 아닌 가상의 DOM 을 사용한다는 느낌이랄까... ? 좀 처음엔 개념이 이해가 잘 가지 않았다. 

 React를 잘해놓으면 React native 라는 녀석을 배우기 쉽다 native 는 native 앱을 만들수 있게 해준다 ! 웹프런트 프레임워크 하나 잘익혀놓으면 앱까지 할수 있다. 아주 매력적인 부분이였고 좀더 React 를 해봐야겠단 생각이 들었다. 

 그리고 JSX ! html 아 아닌 독자적으로 만든 JSX 란 녀석을 쓴다.  ES6 문법이 익숙한 사람이 보면 쉽다고 한다. 문법을 예제들을 보하니 그렇게 어려운 구조는 아니였다. 배우면 될거 같은데라는 생각이 들었지만 이건 내가 문제가 아니였다.  문제는 회사에서 같이 일하는 퍼블리셔들도 JSX 사용법을 배워야 한다. 기존에 단순 CSS 로만 업무를 하던 분들이라서 JSX 를 배우시겠어요 ? 라고 제안하기엔 ... 현실적 벽에 도달했다. 

 솔직히 이게 포기하게 만든 젤 큰이유였다. 내욕심에 남들까지 피해주기가 참 미안했기 때문이다 물론 해달라고 해서 퍼블리셔쪽에서 수용은 안하겠지만 말이다.

 넓은 자유도를 보장한다는건 상대적으로 사용하는사람에겐 막막함을 줄수도 있는거 같다. 막막함에 부딪혔고 여기서 좀더 파다보니 npm 을 내가 알아야 하고 webpack 과 babel 을 알아야만 제대로 쓸수 있다는걸 느꼈다.  아주 쉽게 될거란 생각은 오산이 였던거 같다. 

 그래도 ! Angurla 보단!! React 가 더 좋지 않나 싶다. JSX 문제만 해결된다면 말이다.

Vue.js 

 별관심 없는 녀석이였다 React 의 매력이 이미 설득당한 상태였고, 충분하다고 느꼈기 때문이다. vue 는 단지 요즘 뜬다니까 한번 봐보기나 할까 ?라는 생각으로 시작됬다. 

 2013년도에 나왔다. 생각보다 React 와 많은것들이 비슷하단 느낌이 들었다.  SPA 를 구축하는데 적합한것은  앞선 두 프레임워크와 동일하고 React 와 거의 유사한 자유도와 다른 두 가지에 전혀 뒤지지않는 성능을 보이는것을 확인했다. 

Vue.js 도 React 나 Angulra 처럼 컴포넌트 기반이기 때문에 소스 분리나 소스의 재활용 그리고 컴포넌트의 재사용이 아주 쉽다. 어느정도 템플릿을 만들어 놓고 유지만 한다면 비슷한 유형의 페이지들은 컴포넌트의 조합만으로 금새 찍어 낼수 있을거 같다. 

 앞선 두가지 프레임워크와 별다를바가 없다면 ? 좀더 확인 해볼 필요가 있었다. 

 JSX 같은건 필요 없다 그냥 html 과 javascript 만 알면된다. 이부분이 아주 마음에 들었다 Typescript, JSX 새로 안배워도 할수 있는것 아닌가 ? 내가 많이 게을러졌다 싶다.  그래도 당장 뭔가 결과물을 내려면 새로운걸 배워서 하는거보다 익숙한 언어들로 할수 있는게 더 효율적 같았다. 그리고 보통 웹 개발자면 html 과 javascript 정도는 기본으로 알고 있으니 인수인계 할때도 편할거 같았다. 

 그리고 React.js 와 큰 차이점(?)은 퍼블리셔들은 그냥 기존 하던대로 CSS 를 사용하면 된다는것이다. JSX 안녕~~~!

 

 러닝 커브가 매우 낮고 다른 프레임워크보다 뒤지지 않는 성능을 가지고 있다. 그래서 Vue.js 를 써보기로 한다. 

 기존에 Angulra.js 를 해왔다면 굳이 Vue 나 React 로 갈필요는 없는거 같다. 배운게 아까우니까 그리고 지금 나오고있고 나올 버전들은 구글에서 계속 케어중이니 나아지지 않을까 ? 그렇다면 새로 시작하는게 아니라면 그런사람들에겐 Angulra.js 가 나은거 같다. 

그리고 React.js 는 페이스북에서 핵심개발자가 대부분이 퇴사했다는 이야기를 얼핏 들은거 같다. 그리고 페이스북이 흔들리고 있는 시점에서 개인적으로는 좀 불안하긴하다. 회사가 망하면 끝아닌가 싶어서다 물론 오픈소스를 누군가 이어서 갈수도 있을거 보지만 구글이나 페이스북같은 회사에서 키우던것과 오픈소스로 이어나가는것과는 달라도 확연히 다르지 않을까 싶다. 

 Vue.js 는 이제 떴오르고 있고  오픈소스상에선 제법 괜찮은 컴포넌트들을 공유되있고 Vue.js 한국 커뮤니티에 예제도 잘나와있었다. 자료가 많은건 아니지만 할수있는 부분은 순수 Javascript 로 구현하면 되는 부분들도 많았다. 당장 무언가를 만들어야하고 학습 할시간이 한정적인 나한테는 Vue.js 가 잘맞는 대안 같다.