프론트엔드 개발 · 중급
Vue 컴포넌트에서 'slot'을 사용하는 목적은 무엇이며, 'named slot'과 'scoped slot'의 차이점을 구체적인 예시와 함께 설명해주세요.
힌트 · slot은 컴포넌트 콘텐츠 배포를 위한 것입니다. named slot은 특정 위치에 콘텐츠를, scoped slot은 자식 컴포넌트의 데이터를 부모에서 렌더링할 때 사용합니다.
컴포넌트 재사용성컨텐츠 주입named slotscoped slotprops 전달
모범답안
Vue 컴포넌트에서 slot을 사용하는 주된 목적은 컴포넌트의 재사용성을 높이고, 부모 컴포넌트에서 자식 컴포넌트의 특정 영역에 원하는 콘텐츠를 삽입할 수 있도록 하기 위함입니다.
named slot은 컴포넌트 내의 특정 위치에 콘텐츠를 넣고 싶을 때 사용합니다. 예를 들어, <template v-slot:header>와 같이 이름을 지정하여 해당 슬롯에 맞는 콘텐츠를 삽입할 수 있습니다.
scoped slot은 자식 컴포넌트의 데이터를 부모 컴포넌트에서 렌더링하고 싶을 때 사용합니다. 자식 컴포넌트에서 slot에 데이터를 바인딩하여 부모 컴포넌트로 전달하고, 부모 컴포넌트에서는 이 데이터를 활용하여 슬롯 콘텐츠를 렌더링할 수 있습니다. 이를 통해 자식 컴포넌트의 로직과 데이터를 활용하면서도 UI는 부모 컴포넌트에서 제어할 수 있습니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 Vue.js / Nuxt 면접 질문
- Vue 컴포넌트에서 'computed' 속성과 'watch' 옵션(또는 watch effect)은 모두 반응형 데이터의 변화에 따라 특정 로직을 수행할 수 있습니다. 이 둘의 주요 차이점을 설명하고, 각각 어떤 상황에 더 적합한지 실무 예시를 들어 설명해주세요.
- Vue 컴포넌트 간 통신에서 'props'와 'emit'은 기본적인 부모-자식 통신 방식입니다. 이 외에 복잡한 컴포넌트 트리에서 부모-자식 관계가 아닌 컴포넌트 간 효율적인 통신 방법들(예: provide/inject, Pinia/Vuex)을 설명하고, 각 방법의 장단점을 비교해주세요.
- Vue Router의 내비게이션 가드(Navigation Guards)는 무엇이며, 어떤 종류(전역, 라우트별, 컴포넌트 내)가 있고 각각 어떤 시점에 호출되는지 설명하고 실제 애플리케이션에서 활용 사례를 들어주세요.
- Nuxt.js 3에서 서버 사이드 렌더링(SSR) 환경에서 데이터를 비동기적으로 가져오는 주요 방법들(예: useAsyncData, useFetch)을 설명하고, 각각의 특징과 사용 시나리오를 비교해주세요.
- Nuxt.js의 미들웨어(Middleware)는 무엇이며, 전역 미들웨어, 라우트 미들웨어, 명명된 미들웨어의 차이점을 설명하고 각 유형의 적절한 사용 사례를 제시해주세요.
- 대규모 Vue 3 애플리케이션에서 Composition API와 TypeScript를 사용하여 복잡한 비즈니스 로직을 모듈화하고 재사용 가능한 형태로 설계할 때, 어떤 디자인 패턴(예: Custom Composables, Provide/Inject)을 고려하며, 각 패턴의 장단점 및 적절한 사용 시나리오에 대해 설명해 주십시오.