SFC(Single-File Components)

https://ko.vuejs.org/guide/scaling-up/sfc.html

Vue.js

 

SFC는 컴포넌트의 템플릿,로직 및 스타일을 하나의 파일(*.vue)로 묶어낸 특수한 파일 형태입니다.

 

아래는 예시(공식 페이지, Composition API)입니다.

<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

 

Vue SFC는 JavaScript, HTML, CSS를 자연스럽게 하나로 합친 것 입니다.

 

SFC의 이점 (공식 홈페이지 인용)

• 친숙한 HTML, CSS 및 JavaScript 문법을 사용하여 모듈화된 컴포넌트 작성
• 본질적으로 사용 목적에 따라 구성됨
• 런타임 컴파일 비용이 없는 사전 컴파일된 템플릿
• 컴포넌트 범위 CSS
• 컴포지션 API로 작업할 때 더욱 인체공학적인 문법
• 템플릿과 스크립트를 교차 분석하여 컴파일 시간을 더욱 더최적화
• 템플릿 표현식을 지원하는 IDE의 자동 완성 및 유형 검사
• 즉시 사용 가능한 핫 모듈 교체(Hot-Module Replacement: HMR) 지원

SFC(Vue) 사용 시, 권장 접근 방식

• 싱글 페이지 앱(Single Page Application: SPA)
• 정적 사이트 생성(Static-Site Generator: SSG)
• 더 나은 개발 경험(DX)을 위해 프론트엔드 개발 방식에 합리적으로 빌드 방식 도입.

우려사항 및 대안

전통적인 웹 개발 시, 본래 사용 목적의 성격에 따라 파일 타입이 분리되었던 HTML/CSS/JS를 SFC가 다시 한 곳에 혼합함.

싱글 파일 컴포넌트 아이디어가 마음에 들지 않는다면, JavaScript와 CSS를 별도의 파일로 분리하여 Src Imports 방식을 사용할 수 있다.