안녕하세요?
이제 막 Vue.js 를 공부하고 있는 개발자입니다.
항상 jQuery 로 프론트엔드 개발을 해왔는데요. Vue.js 를 처음 접한 뒤로 코딩이 더욱
신나는 일이 되었습니다.
현재 제가 코딩하는 방식이 Vue.js 를 CDN 에서 받아와서 처리하는 방식입니다.
그런데 문서를 보다보니 .vue 형식의 싱글 파일 컴포넌트라는 것이 있더라고요?
이게 문서를 봐도 어떤 식으로 동작하는 지 잘 이해가 안되는데요.
싱글 파일 컴포넌트와 CDN 방식의 차이가 무엇인지요?
그리고 어떨 때 싱글 파일 컴포넌트를 사용하는 지도 궁금합니다.
싱글 파일 컴포넌트는 vue에서 제공하는 컴포넌트라는 개념에 template과 CSS 스타일링을 합쳐놓은 것이고, CDN 은 js 리소스를 땡겨오는 방식 중 하나이므로 둘을 비교하는 것은 적절하지 못한 것 같습니다.
.vue 파일은 브라우저가 이해할 수 있는 파일 형식이 아니기 때문에
브라우저가 렌더할 수 있는 파일들로 변환하기 위해서 webpack 의 vue-loader또는 browserify가 필요합니다.
.vue 파일 (싱글 파일 컴포넌트)는 하나의 파일에 HTML과 JS, CSS 를 한꺼번에 작성할 수 있는 장점이 있습니다.
기존 방식은 HTML, JS, CSS 각각 별도의 파일로 관리하게 되기 때문에 코드 유지 보수 및 수정이 엄청나게 번거롭습니다.
CDN에서 Vue를 받아오시면 HTML 파일마다 script tag를 오픈해서 사용하실 텐데, 공통으로 사용하는 JS 로직이 있다면
대부분의 페이지에서 복사 붙여넣기를 하시게 될 것입니다. 물론 JS로직을 파일로 분리할 수는 있겠지만, 프론트엔드 작업 특성상 JS파일을 보다가 HTML템플릿도 보고 CSS도 보는 일이 비일비재하니까 매우 불편하죠.
webpack과 같은 번들러로 번들링을 하시면 모든 페이지에서 하나의 app.js만 script에서 로딩해주시면 끝납니다. (물론, 실제 프로덕션 환경에서는 속도를 위해 하나의 js파일을 쓰지 않고 모듈별로 코드를 분리합니다.)
싱글 파일 컴포넌트를 쓰신 다음부터 Vue.js가 얼마나 좋은지 아시게 될 것이라고 확신해요~
웹페이지가 규모가 크고 페이지가 많다면, CDN 말고 번들러 사용하시는 방식을 추천 드립니다!
