본문 바로가기
frontend/vue

[Hoon] Vuejs 강의 - SFC (Single File Components) 는 무엇인가?

by 훈즈 플로거 2020. 4. 13.

SFC (Single File Components) 는 무엇인가?

 

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

 

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

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

kr.vuejs.org

페이지내 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

 

vuejs/awesome-vue

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

github.com

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.

webpack.js.org

 

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

 

ko.wikipedia.org

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

vue-loader.vuejs.org

실제 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.

codesandbox.io

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

NPM 

 

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.

docs.npmjs.com

 

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

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

ko.wikipedia.org

ES6

 

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

 

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

www.w3schools.com

bit.ly/3fXOzon

 

인프런 인강 55%할인 쿠폰 - 커피한잔으로 Vue.js 핵심 강의!

인프런 인터넷 강의 55% 할인 쿠폰 - 커피한잔(5000원)으로 배우는 Vue.js 핵심 강의! 모바일 환경에서도 강의를 수강할 수 있도록 강의가 많이 개선되었습니다. 인프런 인터넷 강의 선착순 100명 55% �

plogger.tistory.com

 

bit.ly/2TtRHis

 

[Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런

이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 ��

www.inflearn.com

 

댓글0