Question 1

Vue 3에서 provide/inject의 주요 목적은 무엇인가요?

Accepted Answer

provide/inject를 사용하면 부모 컴포넌트에서 모든 중간 단계에 props를 전달하지 않고도 임의의 하위 컴포넌트로 데이터를 전달할 수 있습니다. 이를 통해 props가 필요하지 않은 여러 컴포넌트 단계를 거쳐 props를 전달해야 하는 'props drilling'을 피할 수 있습니다. 테마 구성이나 인증 상태와 같은 전역 데이터를 공유할 때 특히 유용합니다.

Question 2

Composition API를 사용하는 컴포넌트에서 provide로 값을 선언하려면 어떻게 하나요?

Accepted Answer

Composition API에서는 provide 함수를 두 개의 인수, 즉 키(string 또는 Symbol)와 제공할 값과 함께 사용합니다. 예를 들어 setup 안에서 사용합니다. 이 값은 inject를 통해 하위 컴포넌트에서 접근할 수 있습니다. 키로 Symbol을 사용하면 고유성이 보장되고 이름 충돌을 피할 수 있습니다.

Question 3

Vue 3에서 Teleport 디렉티브의 주요 기능은 무엇인가요?

Accepted Answer

Teleport를 사용하면 컴포넌트의 콘텐츠를 Vue 컴포넌트 트리에서의 위치와 다른 DOM 노드에 렌더링할 수 있습니다. 일반적으로 z-index 및 CSS 위치 지정 문제를 피하기 위해 문서 루트에 렌더링해야 하는 모달, 툴팁, 알림 등에 사용됩니다. 컴포넌트는 Vue 컨텍스트를 유지하며 부모의 데이터에 접근할 수 있습니다.

Vue 고급 패턴

Vue 3에서 provide/inject의 주요 목적은 무엇인가요?

답변

Composition API를 사용하는 컴포넌트에서 provide로 값을 선언하려면 어떻게 하나요?

답변

Vue 3에서 Teleport 디렉티브의 주요 기능은 무엇인가요?

답변

Vue 3에서 Teleport를 사용하기 위해 필수인 속성은 무엇인가요?

Vue에서 커스텀 디렉티브(custom directive)란 무엇입니까?

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

JavaScript 기초

모던 JavaScript (ES6+)

Vue 기초

Vue 컴포넌트

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

Vue 반응성

Nuxt 기초

Nuxt 데이터 페칭

Nuxt SSR 및 SSG

Nuxt 서버 라우트

Nuxt 모듈

Vue 컴포저블

Vue 폼과 유효성 검사

Nuxt 상태 관리

Vue 테스팅

Nuxt 배포 및 CI/CD

Vue 성능

Vue와 함께 사용하는 TypeScript

Nuxt 인증

Nuxt에서의 SEO

Nuxt 국제화

Vue 아키텍처

Nuxt 보안

Vue 생태계

Vue 2→3 및 Nuxt 2→3 마이그레이션

다음 면접을 위해 Vue.js / Nuxt.js을 마스터하세요