# Vue 아키텍처 (Vue.js / Nuxt.js) > 컴포넌트 디자인 패턴, 폴더 구조, feature 모듈, domain-driven design, composables 구성 - 22 면접 질문 - Senior - [면접 질문: Vue.js / Nuxt.js](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions.md) ## 1. Vue/Nuxt에서 feature-first 아키텍처란 무엇인가요? **답변** feature-first 아키텍처는 코드를 기술적 유형이 아닌 비즈니스 기능별로 구성합니다. 각 feature는 전용 폴더 안에 자체 컴포넌트, composables, store, type을 포함합니다. 이 방식은 한 기능과 관련된 모든 것을 한곳에 모아 유지보수성을 향상시키고, 개발자가 독립적인 feature 작업을 할 수 있어 팀 작업을 용이하게 하며, feature를 쉽게 활성화/비활성화할 수 있게 하여 코드를 더 모듈화합니다. ## 2. Vue에서 Container/Presentational 패턴이란 무엇인가요? **답변** Container/Presentational 패턴은 컴포넌트를 두 가지 범주로 분리합니다. 비즈니스 로직, API 호출, 상태를 처리하는 container와, props만 받고 이벤트를 emit하는 presentational입니다. 이 분리는 UI 컴포넌트의 재사용성을 향상시키고, presentational 컴포넌트의 단위 테스트를 용이하게 하며, 로직을 container에 격리하여 책임을 명확히 합니다. ## 3. layer-first 아키텍처와 feature-first 아키텍처의 차이점은 무엇인가요? **답변** layer-first 아키텍처는 코드를 기술 계층(components, composables, stores, utils)으로 구성하여 모든 컴포넌트가 함께, 모든 composables가 함께 있는 식입니다. feature-first는 비즈니스 기능별로 그룹화하여 각 feature가 자체 컴포넌트, composables, store를 포함합니다. layer-first는 소규모 프로젝트에서는 더 간단하지만, 프로젝트가 커지면 동일한 기능과 관련된 파일이 흩어져 있어 유지보수가 어려워집니다. feature-first는 확장성이 더 좋고 팀 작업을 용이하게 합니다. ## 19개 추가 질문 이용 가능 - Vue에서 renderless components란 무엇인가요? - feature-first 아키텍처에서 composables를 어떻게 구성하나요? 무료로 가입하기: 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 고급 패턴](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-advanced-patterns.md): 24개 질문, 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 - [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-architecture