[7] Single File Component

개요

- 특정 화면 영역의 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법이다.

 

특징

- 파일 확장자는 vue이며 HTML 파일에서 뷰 개발을 진행할 때의 한계를 극복할 수 있다.

- 싱글 파일 컴포넌트로 개발하려면 Webpack과 같은 번들링 도구가 필요하다.

 

HTML 파일에서 뷰 개발을 진행할 때의 한계점

1) 모든 컴포넌트에 고유의 이름을 붙여야 한다.

2) js 파일에서 template 안의 HTML 문법 강조가 되지 않는다.

3) js 파일 상에서 css 스타일링 작업이 거의 불가능하다.

4) ES5를 이용하여 계속 앱을 작성할 경우 Babel 빌드가 지원되지 않는다.

 

싱글 파일 컴포넌트의 기본 골격

 

출처 : joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/#vuejs%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

Vue.js 입문서 - 프론트엔드 개발자를 위한