Vue.js 사용 방법 비교: Standalone Script vs Single File Component(SFC)
Vue.js를 처음 접하는 개발자는 흔히 두 가지 접근법을 만나게 됩니다. 첫 번째는 HTML 문서에 직접 Vue.js를 추가해 사용하는 Standalone Script 방식이고, 두 번째는 .vue 확장자를 사용하는 SFC 방식입니다. 이번 글에서는 두 가지 접근법의 특징과 장단점을 비교하면서, 왜 새로 시작하는 프로젝트에서 SFC와 Composition API의 조합을 추천하는지 살펴보겠습니다.
Standalone Script
Standalone Script 방식은 가장 단순한 형태로, CDN을 통해 Vue.js를 불러오고 HTML 문서 내에서 바로 사용하는 방법입니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const message = ref('Hello, world!');
return { message };
}
}).mount('#app');
</script>
</body>
</html>
장점
- 매우 쉽고 빠르게 시작 가능
- 별도의 빌드 도구나 환경 설정이 필요하지 않음
- 기존 프로젝트에 점진적으로 Vue를 도입할 수 있음
단점
- 복잡한 애플리케이션을 관리하기 어려움
- 컴포넌트의 재사용성과 모듈화가 떨어짐
- 확장성과 유지보수 측면에서 한계가 명확
Options API vs Composition API
기존 Vue 2에서 주로 사용된 Options API는 데이터, 메서드, computed 속성 등 기능을 옵션 객체 형태로 나누어 정의합니다.
<!-- App.vue -->
<script>
const { createApp } = Vue;
createApp({
data() {
return { message: 'Hello, world!' };
},
methods: {
greet() {
alert(this.message);
}
}
}).mount('#app');
</script>
...
Options API는 규모가 커지면 연관된 로직끼리 묶을 수 없어 관리가 어려워질 수 있고 Vue의 배포 버전에 따라서 문제가 발생할 수도 있습니다. 특히 Composition API가 Vue의 기본 문법이 된 후로 많은 예제나 코드들이 Composition API로 작성되고 있습니다. 따라서 새로 프로젝트를 시작한다면 템플릿을 사용한다거나 예제를 가져다 사용할 때 코드가 섞이지 않도록 Composition API로 작성하는 것에 주의를 두며 작성하는 것을 추천합니다.
Single File Component(SFC) 방식
SFC는 HTML, CSS, JavaScript 로직을 하나의 .vue 파일로 통합하여 구조적으로 관리합니다.
<!-- App.vue -->
<script setup>
import { ref } from 'vue';
const message = ref('Hello, world!');
</script>
<template>
<div class="message">
{{ message }}
</div>
</template>
<style scoped>
div.message {
color: blue;
font-size: 1.125rem;
}
</style>
장점
- 명확한 구조로 코드의 가독성 향상
- 컴포넌트 단위의 모듈화로 관리와 유지보수가 쉬움
- 스타일 격리로 동일한 선택자를 사용하여 서로 다른 스타일 적용 가능
- 최신 개발 도구(Vite, Webpack 등)와의 높은 호환성
- 대규모 프로젝트 구성 시에도 코드의 재사용성과 확장성이 뛰어남
단점
- 초기 환경설정이 다소 복잡할 수 있음
- 점진적 통합이 어려울 수 있음
<script setup>에서의 return문 생략
SFC에서 Composition API를 사용하는 방식인 <script setup>블록에선 선언한 요소들을 return 문을 통해 드러내줄 필요가 없습니다. <script setup> 내에서 선언된 변수나 함수는 자동으로 <template>에서 사용할 수 있도록 연결됩니다. 선언한 변수를 return문에도 일일히 추가해주는 일, 삭제한 함수를 return문에서도 까먹지 않고 지워줘야 하는 일이 없기 때문에 코드를 더욱 간결하게 만들어주고 생산성과 코드 관리의 효율성을 높여줍니다.
SFC에서 권장하는 블록 배치
Vue 공식 문서에서마저 종종 혼용되어 등장하는 내용으로, SFC 구성 블록의 배치 순서는 template - script - style 보다 <script>블록이 가장 먼저 오는 script - template - style 순서가 더 좋습니다. 그 이유는 서로 연관 관계가 적은 <script>블록과 <style>블록이 붙어있는 구성보다, 개발자가 자주 오가며 작업하는 <script> 블록과 <template> 블록, 그리고 <template> 블록과 <style> 블록이 가까운 구성이 스크롤 이동을 최소화하여 코드의 가독성과 유지보수성을 높여주기 때문입니다.
마무리
Standalone Script 방식은 기존 프로젝트에 Vue를 도입하거나 Vue의 핵심 기능만 간단히 추가할 때 효과적입니다. 특히 jQuery가 여전히 현역인 국내 업계에서는 간편한 데이터 바인딩 용도로만 사용해도 유용하게 사용할 수 있다고 생각합니다. 그러나 프로젝트가 조금만 커져도 SFC 방식이 제공하는 구조화된 관리와 유지보수의 이점이 크기 때문에, 새롭게 프로젝트를 시작하거나 모던 개발 환경을 구축하고 싶다면 SFC와 Composition API 조합을 적극적으로 추천합니다.