Nuxt 기초
Nuxt 구조, pages 디렉터리, 자동 라우팅, layouts, app.vue, server 디렉터리, nuxt.config
22 면접 질문·
Mid-Level
1Nuxt 3 애플리케이션에 필요한 최소 구조는 무엇인가요?
1
Nuxt 3 애플리케이션에 필요한 최소 구조는 무엇인가요?
답변
Nuxt 3 애플리케이션은 프로젝트 루트에 app.vue 파일 또는 pages/ 디렉터리만 있으면 됩니다. pages/ 폴더 없이 app.vue만 있으면 Nuxt는 Vue Router가 없는 애플리케이션을 생성합니다. pages/ 가 존재하면 Nuxt는 file-based routing을 자동으로 활성화하며, 라우트를 표시하기 위해 app.vue 안에 <NuxtPage /> 가 필요합니다.
2pages/ 디렉터리에서 자동 라우팅은 어떻게 작동하나요?
2
pages/ 디렉터리에서 자동 라우팅은 어떻게 작동하나요?
답변
Nuxt의 pages/ 디렉터리는 file-based routing을 사용합니다. 각 .vue 파일이 자동으로 대응하는 route를 생성합니다. 예를 들어 pages/index.vue는 '/' route가 되고, pages/about.vue는 '/about'이 되며, pages/blog/[id].vue는 동적 route '/blog/:id'를 생성합니다. 이 방식은 수동 router 설정을 없애줍니다.
3app.vue에서 <NuxtPage /> 컴포넌트의 역할은 무엇인가요?
3
app.vue에서 <NuxtPage /> 컴포넌트의 역할은 무엇인가요?
답변
<NuxtPage /> 컴포넌트는 현재 route를 기반으로 활성 페이지 콘텐츠를 표시하는 outlet입니다. pages/ 디렉터리가 존재할 때 app.vue에서 필수입니다. <NuxtPage />가 없으면 route가 표시되지 않습니다. 표준 Vue Router의 <router-view />에 해당하지만 Nuxt에 맞게 조정된 것입니다.
4
Nuxt 3에서 페이지에 특정 layout을 적용하려면 어떻게 하나요?
5
app.vue에서 <NuxtLayout>를 사용하는 것과 사용하지 않는 것의 차이점은 무엇입니까?
+19 면접 질문
기타 Vue.js / Nuxt.js 면접 주제
JavaScript 기초
Junior
20개 질문모던 JavaScript (ES6+)
Junior
20개 질문Vue 기초
Junior
22개 질문Vue 컴포넌트
Junior
20개 질문Vue Router
Junior
18개 질문Pinia State Management
Junior
20개 질문Vuex (Legacy)
Mid-Level
15개 질문Composition API
Mid-Level
24개 질문Vue 반응성
Mid-Level
20개 질문Nuxt 데이터 페칭
Mid-Level
20개 질문Nuxt SSR 및 SSG
Mid-Level
22개 질문Nuxt 서버 라우트
Mid-Level
20개 질문Nuxt 모듈
Mid-Level
18개 질문Vue 컴포저블
Mid-Level
20개 질문Vue 폼과 유효성 검사
Mid-Level
20개 질문Nuxt 상태 관리
Mid-Level
18개 질문Vue 테스팅
Mid-Level
20개 질문Nuxt 배포 및 CI/CD
Mid-Level
22개 질문Vue 성능
Senior
22개 질문Vue 고급 패턴
Senior
24개 질문Vue와 함께 사용하는 TypeScript
Senior
22개 질문Nuxt 인증
Senior
20개 질문Nuxt에서의 SEO
Senior
20개 질문Nuxt 국제화
Senior
18개 질문Vue 아키텍처
Senior
22개 질문Nuxt 보안
Senior
20개 질문Vue 생태계
Senior
18개 질문Vue 2→3 및 Nuxt 2→3 마이그레이션
Senior
22개 질문