# Vue 고급 패턴 (Vue.js / Nuxt.js) > provide/inject, custom directives, render functions, JSX, teleport, suspense, async components - 24 면접 질문 - Senior - [면접 질문: Vue.js / Nuxt.js](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions.md) ## 1. Vue 3에서 provide/inject의 주요 목적은 무엇인가요? **답변** provide/inject를 사용하면 부모 컴포넌트에서 모든 중간 단계에 props를 전달하지 않고도 임의의 하위 컴포넌트로 데이터를 전달할 수 있습니다. 이를 통해 props가 필요하지 않은 여러 컴포넌트 단계를 거쳐 props를 전달해야 하는 'props drilling'을 피할 수 있습니다. 테마 구성이나 인증 상태와 같은 전역 데이터를 공유할 때 특히 유용합니다. ## 2. Composition API를 사용하는 컴포넌트에서 provide로 값을 선언하려면 어떻게 하나요? **답변** Composition API에서는 provide 함수를 두 개의 인수, 즉 키(string 또는 Symbol)와 제공할 값과 함께 사용합니다. 예를 들어 setup 안에서 사용합니다. 이 값은 inject를 통해 하위 컴포넌트에서 접근할 수 있습니다. 키로 Symbol을 사용하면 고유성이 보장되고 이름 충돌을 피할 수 있습니다. ## 3. Vue 3에서 Teleport 디렉티브의 주요 기능은 무엇인가요? **답변** Teleport를 사용하면 컴포넌트의 콘텐츠를 Vue 컴포넌트 트리에서의 위치와 다른 DOM 노드에 렌더링할 수 있습니다. 일반적으로 z-index 및 CSS 위치 지정 문제를 피하기 위해 문서 루트에 렌더링해야 하는 모달, 툴팁, 알림 등에 사용됩니다. 컴포넌트는 Vue 컨텍스트를 유지하며 부모의 데이터에 접근할 수 있습니다. ## 21개 추가 질문 이용 가능 - Vue 3에서 Teleport를 사용하기 위해 필수인 속성은 무엇인가요? - Vue에서 커스텀 디렉티브(custom directive)란 무엇입니까? 무료로 가입하기: 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-performance.md): 22개 질문, 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-advanced-patterns