Vue.js 사용하기 -1 ( 환경 설정 )

 Vue.js 을 사용하기 위해서는 기본적으로 webpack 과 babel 이 필요하다.  두가지를 사용할줄 알아야 진정한 Vue.js 를 사용할수 있다고 볼수 있다. 

 회사에서 어떤 사람은 Vue.js 를 빌드하지 않고 단순하게 사용을 하는것 보았는데 신기하게도 굳이 빌드를 하지 않고도 사용은 가능했다 아마 html + javascript 로 되있어서 크게 문제가 되지않았다고 판단은 되지만 실제로 그렇게도 구현이 가능하다고 나와있었다. 

단, 빌드를 하지 않고 썼을때 Vue.js 의 기능을 온전히 다 쓸수는 없다고 한다. 그렇게 때문에 Vue.js 를 100% 다 활용 하겠다고 하면 webpack 과 babel 은 필수로 알고 넘어가야 한다. 

Webpack

일단 webpack 은 검색해보면 번들링을 해준다는고 쉽게 찾을수 있다. 백엔드 개발자로써 뭔소리인가 싶었는데 팀원분중에 Vue.js 고수 가 계셔서 쉽게 설명을 들을수 있었다.  쉽게말하면 html 페이지에 css , image , js 를 가져와야 하는데 webpack 은 이 추가져와야 하는것들을 하나의 js 로 만들어버린다. 실제로 webpack 로 만들면 하나의 bundle.js 파일이 생성되는거 확인이 가능하다. 

 하나로 만드는 이유를 찾아보니 기존에 발생할수 있는 네트워크 요청을 단 한번의 요청으로 로딩 하기때문에 선능에 긍정적인 효과를 줄수가 있다고 한다. 

 그럼 webpack 을 많이 이용하는 이유는 ? 그냥 성능이 다른것보다 좋다고한다. 그렇다면 이유가 더 없지 않을까? 

Babel

 Webpack 번들링을 해준다고 생각하면 Babel 은 실제 빌드를 하는 역할을 한다. Javascript 는 스크립트 언어인데 왜 컴파일을 해서 빌드를 하는가? 라는 의문이 들었지만 내용을 알고 보면 납득이 간다. 웹개발을 하다보면 ES6,7 이런것들을 접하게된다. 각 버전별로 지원하는 기능이 차이가 있고 문법의 차이가 있지만 제일 큰 문제는 브라우저의 호환이다. 해외에선 어떻게보면 이슈사항이 아니겠지만 국내는 이슈가 충분히 될만한다. 

 IE8  그리고 그이하 버전 , 이녀석들이 문제이다. 현재 크롬을 많이들 쓰고 있고 엣지나 파이어폭스( 가장 표준을 잘지키는 개인적 최애 ! ) 등이 표준을 지키려 하고있어서 ES6 문법이나 이런것들에 지원이 많이 좋아졌지만 우리의 마소가 예전에 만들어낸 IE 는 참.. 독자적으로 지원을 하기도 힘들게 잘 만들어 놓은게 문제다 ( 실제로 Vue.js 로 만든 프로젝트를 IE8 과 IE11에서 접속해보니 하나도 안떴다. ) 

빌게이츠도 자기가 크롬을 사용하는 이유를 유투브에 올려놓은것으로 알고 있다. 영어가 약해서 왜 그런지는 봐도 모르겠다. 

 babel 하는 역할은 많다. ES6 를 사용하고 브라우저들이 알아들을수있게 컴파일도 해주지만 Webpack 이 트랜스 파일 할수 있도록 도와 주기도 하고  실제 Vue-loader 같은것을 이용하영 Vue 파일들을 인식하여 해석도 한다. 

 

 문제는 프로젝트 개발 진행이 먼저라 Babel 에 관해선 단순하게 보고 넘어갔다. 나중에 좀더 확인할 필요가 있어보이긴하다 ( 팀원의 도움을 받다보니 믿고 이부분은 스스로 패스한 상태 ) 

Webpack + babel 대해서 스스로 단순하게 결론은 내린건 babel이 vue 를 읽어서 해석하고 js로 변환하고 플러그인들을 모아모아 놓으면 Webpack 그 모아놓은것을 재배치해서 제공한다! 라고 결론짓고 넘어갔다. ( 틀릴수도 있겠지만 시간에 쫒기며 여기까지 ... 프런트가 참 어렵다. ) 

기본적으로 책이나 커뮤니티에 설정법은 잘나와 있는 편이다 예전엔 Vue.js 가 정보가 얼마 없다고 단점으로 지적이 됬으나 지금은 생각보다 블로그, 커뮤니티 , github 에 vue.js 관련된 자료가 많다. 참고해서 구성하기에 아주 적접하다고 본다. 참고해서 환경구성을 해본다면 좋을거 같다. 

(https://kr.vuejs.org/)

추가 적으로 intellij 를 사용한다면 vue.js 플러그인을 검색해서 등록하는걸 추천한다. 안그러면 intellij 에서 vue 파일 인식을 하지 못한다. 플러그인 검색을 해서 추가하면 끝이기 때문에 어려울게 없다. 그리고 크롬에서 vue.js 개발시 유용한 Vue devtool 을 설치가능하다 두가지는 꼭 하길 추천한다. 

 팀원을 잘만나서 이미 팀원 Vue.js 개발을 위한 환경을 구축 해놓은 상태다 난 그 곳에 숫가락을 얹고 환경 세팅 하여 vue.js 개발만 잘 하면 될거 같다. 환경설정을 이모 저모 개발하면서 뜯어 보긴 했지만 아직 정리를 못했다. 정리할 시간이 있으면 팀원에게 양해를 구하고 블로그에 기록을 해놓을까 싶다.