[SFC] App.vue 파일 구조

Vue.js 싱글 파일 컴포넌트 (SFC) 구조 이해하기

🧩 Vue 싱글 파일 컴포넌트 (SFC) 구조

Vue.js의 가장 큰 특징 중 하나는 싱글 파일 컴포넌트(Single File Component, SFC)입니다. 하나의 .vue 파일 안에 HTML, JavaScript, CSS가 모두 포함되어 있습니다.

App.vue 파일 구조

<template>
  <!-- HTML 템플릿 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
// JavaScript 로직
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
/* CSS 스타일 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

각 섹션의 역할

섹션	역할	변환 결과
<template>	HTML 마크업	브라우저에서 렌더링되는 DOM 구조
<script>	JavaScript 로직	컴포넌트의 동작과 데이터 관리
<style>	CSS 스타일	컴포넌트의 시각적 표현

SFC의 장점

• 관심사 분리: HTML, JS, CSS가 하나의 파일에 있지만 명확히 구분됨
• 모듈화: 각 컴포넌트가 독립적인 파일로 관리
• 재사용성: 다른 컴포넌트에서 쉽게 import하여 사용
• 개발 효율성: 관련 코드가 한 곳에 모여 있어 유지보수 용이

이렇게 Vue.js의 SFC 구조를 이해하면 더욱 효율적인 컴포넌트 개발이 가능합니다.
다음 포스트에서는 싱글 파일 컴포넌트 코드 작성 요령에 대해 알아보겠습니다!