Vue.js] 19. Single-File Components

Vue Single-File Components (*.vue 파일)은 컴포넌트의 템플릿, 로직, 스타일을 하나의 파일로 묶은 형태의 파일이다. 

<script>
export default {
  data() {
    return {
      greeting: '안녕 Vue!'
    }
  }
}
</script>

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

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

SFC는 Vue를 프레임워크로 정의하며, 다음과 같이 Vue를 사용하는 데 권장되는 접근 방식입니다.

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

 

일부 개발자는 전통적인 웹 개발 시, 본래 사용 목적의 성격에 따라 파일 타입이 분리되었던 HTML/CSS/JS를 SFC가 다시 한 곳에 혼합한다는 우려를 가질 수 있습니다!

이 우려에 대한 대답은 "관심사항의 분리가 파일 유형의 분리와 동일한 것이 아니다는 관점으로 바라보는 것이 중요하다"입니다.

컴포넌트 내부의 템플릿, 로직 및 스타일은 본질적으로 "동일한 사용 목적"으로 결합되어 있으며, 실제로 컴포넌트가 더 응집력 있고 유지 관리가 용이해집니다.

 

빌드 도구

실제 프로젝트에서는 일반적으로 SFC 컴파일러를 Vite 또는 Vue CLI와 같은 빌드 도구(webpack을 기반으로)와 통합합니다.

Vite​

Vite는 Vue SFC를 지원하는 가볍고 빠른 최신 빌드 도구입니다. Vue의 저자이기도 한 Evan You가 만들었습니다!

Vite + Vue를 시작하려면 다음을 실행하기만 하면 됩니다:

npm create vue@latest

Vue CLI

Vue CLI는 웹팩 기반의 Vue 공식 툴체인입니다. 특정 웹팩 전용 기능에 의존하는 유지보수 상태가 아니라면, Vite로 새 프로젝트를 시작하는 것이 좋습니다.

npm install -g @vue/cli
vue create my-project

 

IDE 지원

권장 IDE 설정은 VS Code + Vue - Official extension(이전의 Volar) 입니다. Vue - Official extension은 문법 강조 표시, TypeScript 지원, 템플릿 표현식 및 컴포넌트 props에 대한 인텔리센스를 제공합니다.

브라우저 개발자 도구

Vue 브라우저 개발자 도구 확장 프로그램을 사용하면, Vue 앱의 컴포넌트 트리를 탐색하고 개별 컴포넌트의 상태를 검사하고 상태 관리 이벤트 및 프로필 성능을 추적할 수 있습니다.

설치 후 파일 URL에 대한 액세스 허용을 체크한다. 

 

확장 프로그램 활성화 여부를 확인한다. 

DevTools에서 props 값을 변경해볼 수 있다. 

 

Vue DevTools는 Vue instances를 console에 inject한다. 

예를들어 $vm0를 입력해서 첫번째 instance를 확인할 수 있다. 

 

 

테스팅

Linting(코드 유효성 검사)

Vue 팀은 SFC별 린팅 규칙을 지원하는 ESLint 플러그인인 eslint-plugin-vue를 유지 관리합니다.

 

Formatting

• VS Code 확장 Volar는 Vue SFC에 대한 포매팅을 즉시 제공합니다.
• 또는 Prettier는 빌트인 Vue SFC 형식 지원을 제공합니다.