# Vue 성능 (Vue.js / Nuxt.js)

> Virtual DOM, 반응성 최적화, v-once, v-memo, lazy loading, code splitting, bundle 크기

- 22 면접 질문
- Senior
- [면접 질문: Vue.js / Nuxt.js](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions.md)

## 1. Vue에서 Virtual DOM이란 무엇입니까?

**답변**

Virtual DOM은 실제 DOM 트리의 가벼운 JavaScript 표현입니다. Vue는 성능 면에서 비용이 큰 직접적인 DOM 조작을 최소화하기 위해 Virtual DOM을 사용합니다. 상태가 변경되면 Vue는 새로운 Virtual DOM을 생성하고 이를 이전 것과 비교한 다음(diffing 알고리즘), 실제 DOM에 필요한 변경 사항만 적용합니다. 이 접근 방식은 DOM 작업의 수를 크게 줄이고, 특히 업데이트가 많은 복잡한 애플리케이션에서 성능을 향상시킵니다.

## 2. ref()와 shallowRef()의 주요 차이점은 무엇입니까?

**답변**

ref()는 모든 중첩된 프로퍼티도 반응형이 되는 깊은 반응형 참조를 생성하는 반면, shallowRef()는 .value 프로퍼티 자체만 반응형으로 만듭니다. shallowRef()를 사용하면 객체 내부의 깊은 변경은 업데이트를 트리거하지 않습니다. 반응성을 트리거하려면 .value 전체를 교체해야 합니다. shallowRef()는 깊은 반응성이 필요하지 않은 대규모 데이터 구조의 성능을 최적화하거나 외부 상태 시스템을 통합할 때 유용합니다.

## 3. v-once 디렉티브의 역할은 무엇입니까?

**답변**

v-once 디렉티브는 첫 번째 렌더링 동안 요소와 그 자식 요소를 한 번만 렌더링한 다음, 이후의 모든 렌더링에서는 정적 콘텐츠로 처리합니다. 이는 데이터가 변경되더라도 요소가 절대 업데이트되지 않음을 의미합니다. 이 디렉티브는 배너 이미지, 로고, 또는 동적 업데이트가 필요 없는 텍스트처럼 초기 마운트 후 절대 변하지 않는 정적 콘텐츠의 성능을 최적화하는 데 유용합니다.

## 19개 추가 질문 이용 가능

- Vue 3.2+에서 도입된 v-memo 디렉티브는 어떻게 작동합니까?
- Vue에서 markRaw()의 용도는 무엇입니까?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 Vue.js / Nuxt.js 면접 주제

- [JavaScript 기초](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/javascript-fundamentals.md): 20개 질문, Junior
- [모던 JavaScript (ES6+)](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/es6-modern-javascript.md): 20개 질문, Junior
- [Vue 기초](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-basics.md): 22개 질문, Junior
- [Vue 컴포넌트](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-components.md): 20개 질문, Junior
- [Vue Router](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-router.md): 18개 질문, Junior
- [Pinia State Management](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/pinia-state-management.md): 20개 질문, Junior
- [Vuex (Legacy)](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vuex-legacy.md): 15개 질문, Mid-Level
- [Composition API](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/composition-api.md): 24개 질문, Mid-Level
- [Vue 반응성](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-reactivity.md): 20개 질문, Mid-Level
- [Nuxt 기초](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-fundamentals.md): 22개 질문, Mid-Level
- [Nuxt 데이터 페칭](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-data-fetching.md): 20개 질문, Mid-Level
- [Nuxt SSR 및 SSG](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-ssr-ssg.md): 22개 질문, Mid-Level
- [Nuxt 서버 라우트](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-server-routes.md): 20개 질문, Mid-Level
- [Nuxt 모듈](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-modules.md): 18개 질문, Mid-Level
- [Vue 컴포저블](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-composables.md): 20개 질문, Mid-Level
- [Vue 폼과 유효성 검사](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-forms-validation.md): 20개 질문, Mid-Level
- [Nuxt 상태 관리](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-state-management.md): 18개 질문, Mid-Level
- [Vue 테스팅](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-testing.md): 20개 질문, Mid-Level
- [Nuxt 배포 및 CI/CD](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-deployment-cicd.md): 22개 질문, Mid-Level
- [Vue 고급 패턴](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-advanced-patterns.md): 24개 질문, Senior
- [Vue와 함께 사용하는 TypeScript](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/typescript-vue.md): 22개 질문, Senior
- [Nuxt 인증](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-auth.md): 20개 질문, Senior
- [Nuxt에서의 SEO](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-seo.md): 20개 질문, Senior
- [Nuxt 국제화](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-i18n.md): 18개 질문, Senior
- [Vue 아키텍처](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-architecture.md): 22개 질문, Senior
- [Nuxt 보안](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-security.md): 20개 질문, Senior
- [Vue 생태계](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-ecosystem.md): 18개 질문, Senior
- [Vue 2→3 및 Nuxt 2→3 마이그레이션](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/migration-vue2-vue3-nuxt2-nuxt3.md): 22개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-performance