프론트엔드 개발 · 중급
Nuxt.js의 미들웨어(Middleware)는 무엇이며, 전역 미들웨어, 라우트 미들웨어, 명명된 미들웨어의 차이점을 설명하고 각 유형의 적절한 사용 사례를 제시해주세요.
힌트 · 미들웨어는 라우트 이동 전후에 실행되는 함수입니다. 전역은 모든 라우트에, 라우트별은 특정 라우트에, 명명된 미들웨어는 필요할 때 적용됩니다.
미들웨어전역 미들웨어라우트 미들웨어명명된 미들웨어컨텍스트(Context)
모범답안
Nuxt.js 미들웨어는 라우트 이동 전후에 특정 로직을 실행하는 함수입니다. 주로 인증, 권한 검사, 로깅 등에 사용됩니다.
전역 미들웨어는 nuxt.config.js에 등록되어 모든 라우트에 적용됩니다. 예를 들어, 모든 페이지 방문 기록을 남기는 데 사용할 수 있습니다.
라우트 미들웨어는 특정 라우트에만 적용됩니다. 페이지 컴포넌트 내에서 middleware 속성을 사용하여 지정합니다. 특정 페이지에만 필요한 권한 검사에 유용합니다.
명명된 미들웨어는 middleware/ 디렉토리에 정의하고, 필요에 따라 라우트나 컴포넌트에서 이름을 지정하여 사용합니다. 여러 라우트에서 재사용 가능한 로직을 구현할 때 효과적입니다. 예를 들어, 특정 사용자 역할에 대한 접근 권한을 확인하는 미들웨어를 만들고, 필요한 라우트에 적용할 수 있습니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 Vue.js / Nuxt 면접 질문
- Vue Router의 내비게이션 가드(Navigation Guards)는 무엇이며, 어떤 종류(전역, 라우트별, 컴포넌트 내)가 있고 각각 어떤 시점에 호출되는지 설명하고 실제 애플리케이션에서 활용 사례를 들어주세요.
- Vue 컴포넌트에서 'slot'을 사용하는 목적은 무엇이며, 'named slot'과 'scoped slot'의 차이점을 구체적인 예시와 함께 설명해주세요.
- Nuxt.js 3에서 서버 사이드 렌더링(SSR) 환경에서 데이터를 비동기적으로 가져오는 주요 방법들(예: useAsyncData, useFetch)을 설명하고, 각각의 특징과 사용 시나리오를 비교해주세요.
- 대규모 Vue 3 애플리케이션에서 Composition API와 TypeScript를 사용하여 복잡한 비즈니스 로직을 모듈화하고 재사용 가능한 형태로 설계할 때, 어떤 디자인 패턴(예: Custom Composables, Provide/Inject)을 고려하며, 각 패턴의 장단점 및 적절한 사용 시나리오에 대해 설명해 주십시오.
- Nuxt 3의 Nitro 서버 엔진이 제공하는 주요 이점은 무엇이며, 이를 활용하여 API 라우트, 서버 미들웨어, 서버 컴포넌트 등 백엔드 로직을 어떻게 효과적으로 구현하고 최적화할 수 있는지 구체적인 예시와 함께 설명해 주십시오.
- 수십만 개의 데이터 포인트를 렌더링해야 하는 대규모 Vue.js 테이블 컴포넌트에서 심각한 성능 저하가 발생했을 때, 이를 해결하기 위한 고급 최적화 전략(예: Virtual Scrolling, Time Slicing, Memoization)과 각 기법의 구현 방식 및 고려사항에 대해 설명해 주십시오.