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 CSS – Scoped 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
인프런 인강 55%할인 쿠폰 - 커피한잔으로 Vue.js 핵심 강의!
인프런 인터넷 강의 55% 할인 쿠폰 - 커피한잔(5000원)으로 배우는 Vue.js 핵심 강의! 모바일 환경에서도 강의를 수강할 수 있도록 강의가 많이 개선되었습니다. 인프런 인터넷 강의 선착순 100명 55% �
plogger.tistory.com
[Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런
이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 ��
www.inflearn.com
'Frontend > vue' 카테고리의 다른 글
| [Hoon] Vuejs 강의 - 조건문과 반복문 (0) | 2020.04.13 |
|---|---|
| [Hoon] Vuejs 강의 - Vue 시작하기(Getting Started) (0) | 2020.04.13 |
| [Hoon] Vuejs 강의 - SPA (Single-Page Application)는 무엇인가? (0) | 2020.02.17 |
| [Hoon] Vuejs 강의 - PWA (Progressive Web Application) 는 무엇인가? (0) | 2020.02.17 |
| [Hoon] Vuejs 강의 - Vue.js가 무엇인가? (0) | 2020.02.17 |
댓글