Vue Academy · 강의

Vue Vapor 모드: 컴파일 시 최적화

Vapor 모드가 가상 DOM을 제거하는 방식, 성능에 미치는 의미와 선택적 컴파일을 알아봅니다.

Vue Vapor 모드: 컴파일 시 최적화은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Vapor Mode란

Vapor Mode는 가상 DOM을 완전히 제거하는 Vue의 대체 컴파일 전략입니다. VNode 트리를 비교하는 대신 컴파일러가 실제 DOM 노드를 직접 업데이트하는 코드를 생성합니다. 선택적으로 사용할 수 있으며 성능과 메모리를 크게 개선하는 것을 목표로 합니다.

현재 가상 DOM의 작동 방식

일반적으로 렌더 함수는 VNode 트리를 반환합니다. 업데이트가 발생할 때마다 Vue는 새 트리를 만들고 이전 트리와 비교하여 변경 사항을 찾습니다. 이 비교에는 실행 시간 비용이 들고 렌더링할 때마다 객체가 할당됩니다.

// conceptually, each render produces VNodes
function render() {
  return h('div', null, [
    h('span', null, count.value)
  ])
}
// Vue diffs new VNodes vs old to patch the DOM

Vapor: DOM 직접 업데이트

Vapor Mode에서 컴파일러는 컴파일 시점에 템플릿을 분석하고 변경될 수 있는 특정 DOM 노드만 건드리는 코드를 생성합니다. VNode 트리도 비교도 없으며, 반응형 효과가 노드에 직접 씁니다.

// conceptual Vapor output
const n0 = document.createElement('span')
// effect updates ONLY the text node when count changes
renderEffect(() => {
  n0.textContent = count.value
})

동일한 반응성 시스템

Vapor는 Vue의 익숙한 반응성을 그대로 유지하므로 ref, reactive, computed, watch가 모두 동일하게 작동합니다. 달라지는 것은 반응형 상태를 선언하는 방식이 아니라 DOM 업데이트를 적용하는 방식입니다.

import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)
// identical authoring experience under Vapor

컴포넌트별 옵트인

Vapor는 전역이 아니라 컴포넌트별로 활성화됩니다. 따라서 점진적으로 마이그레이션하고 하나의 앱에서 Vapor 컴포넌트와 일반 컴포넌트를 함께 사용할 수 있습니다. 일반적으로 <script setup> 또는 빌드 설정에 표식을 추가합니다.

<script setup vapor>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

더 빠른 이유

VNode 생성과 차이 계산을 건너뛰므로 Vapor는 업데이트마다 필요한 CPU 작업을 줄이고 훨씬 적은 객체만 할당하여 가비지 컬렉션에 가해지는 부담을 덜어 줍니다. 초기 마운트에서도 런타임 오버헤드가 줄어들어 메모리 사용량이 감소합니다.

더 작은 런타임

Vapor 컴포넌트에는 가상 DOM 런타임이 필요하지 않으므로 Vapor만으로 빌드한 앱은 더 작은 런타임 번들을 배포할 수 있습니다. 차이 계산 로직이 아예 포함되지 않기 때문입니다.

컴파일 시점 분석

핵심은 컴파일러가 템플릿의 정적 부분과 동적 부분을 구분하는 데 있습니다. 정적 마크업은 한 번만 생성하고, 동적 바인딩에만 반응성 효과를 적용합니다. 이 정적/동적 구분 덕분에 직접 업데이트가 가능해집니다.

<template>
  <div class="card">     <!-- static, created once -->
    <h2>{{ title }}</h2>  <!-- dynamic, gets an effect -->
  </div>
</template>

제한 사항과 상호 운용

실험 단계에서는 가상 DOM에 의존하는 일부 기능과 서드파티 라이브러리(사용자 지정 렌더링 함수, 일부 VNode API)가 Vapor 컴포넌트에서 완전히 지원되지 않을 수 있습니다. 일반 컴포넌트와의 상호 운용은 지원되므로 점진적으로 도입할 수 있습니다.

Solid/Svelte와의 관계

Vapor는 Vue의 API와 생태계를 유지하면서 Solid와 Svelte가 개척한 컴파일 시점, 가상 DOM 없는 접근 방식에 더 가까워집니다. 즉, 세밀한 반응성이 직접적인 DOM 변경을 구동하는 방식입니다.

Vapor를 고려할 때

Vapor가 안정화되면 성능이 중요하고 업데이트가 잦은 UI(대규모 목록, 대시보드, 애니메이션)에 Vapor를 고려해 보십시오. 일반적인 앱에서는 표준 런타임도 이미 충분히 빠르므로, 프로파일링을 통해 도움이 확인되는 부분에만 선택적으로 도입하는 것이 좋습니다.

빠른 확인

Vapor 모드에 대한 이해도를 확인해 보십시오.

요약

Vapor 모드에 대해 배운 내용입니다:

가상 DOM 차이 계산을 제거하고 컴파일러가 직접 DOM 업데이트 코드를 생성합니다
동일한 반응성 시스템을 사용하므로 ref, reactive, computed는 변경되지 않습니다
컴포넌트별 옵트인으로 점진적인 도입과 상호 운용이 가능합니다
컴파일 시점의 정적/동적 분석이 세밀한 업데이트를 가능하게 합니다
성능, 메모리 사용량, 런타임 크기가 크게 개선될 것으로 기대됩니다

자주 묻는 질문

“Vue Vapor 모드: 컴파일 시 최적화” 강의는 무료인가요?

네 — “Vue Vapor 모드: 컴파일 시 최적화” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Vue Vapor 모드: 컴파일 시 최적화”에서 뭘 배우나요?

Vapor 모드가 가상 DOM을 제거하는 방식, 성능에 미치는 의미와 선택적 컴파일을 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“Vue Vapor 모드: 컴파일 시 최적화” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기