Hoon's Company - Frontend/Backend/Data & Android

[Vue.js] SFC (Single File Components) 는 무엇인가? 본문


[Vue.js] SFC (Single File Components) 는 무엇인가?

훈즈 플로거 2020. 2. 18. 17:10

Single File Components , SFC - .vue 확장자를 가진 싱글 파일 컴포넌트


싱글 파일 컴포넌트 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크


페이지내 Vue 선언 방식의 disadvantages(약점)

Global definitions - 모든 컴포넌트에 대한 고유한 이름 필요

String templates - 구문 강조가 약함, 여러 줄로 된 HTML에 보기 안좋은 슬래시

No CSS support - CSS is conspicuously left out

        CSS 를 지원하지 않는 것이 아니라 CSS 가 눈에 띄게 모듈화 되지 않음

No build step – 전처리기가 아닌 HTML ES5 JavaScript제한

페이지내 Vue 선언 방식 약점을 해결한 SFC 의 특징

Complete syntax highlighting  - Atom, Sublime Text, Visual Studio Code, Intellij



🎉 A curated list of awesome things related to Vue.js - vuejs/awesome-vue


CommonJS modules ES2015(ES6), CommonJS(ServerJS)


Modules | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.



CommonJS - 위키백과, 우리 모두의 백과사전



Component-scoped CSSScoped CSS


Scoped CSS | Vue Loader

Scoped CSS When a tag has the scoped attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM. It comes with some caveats, but doesn't require any polyfills. It is achieved by u


실제 SFC 로 개발된 Example

Simple To Do App - https://codesandbox.io/s/o29j95wx9


Simple Todo App with Vue - CodeSandbox

A very simple todo app to provide a taste of developing with single-file components.


  • index.html  
  • index.js  
  • App.vue
  • variables.scss
  • TodoList.vue
  • TodoListItem.vue
  • BaseInputText.vue



npm Documentation

The current stable version of npm is here. To upgrade, run: npm install [email protected] -g To report bugs or submit feature requests for the docs, please post here. Submit npm issues here.



npm (소프트웨어) - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전.




Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript



ECMAScript 6

ECMAScript 6 - ECMAScript 2015 What is ECMAScript 6? ECMAScript 6 is also known as ES6 and ECMAScript 2015. Some people call it JavaScript 6. This chapter will introduce some of the new features in ES6. JavaScript let JavaScript const JavaScript Arrow Func



댓글쓰기 폼