Vue 컴포넌트
컴포넌트 라이프사이클, props, events, slots, scoped styles, 컴포넌트 간 통신, 동적 컴포넌트
20 면접 질문·
Junior
1Vue 컴포넌트란 무엇입니까?
1
Vue 컴포넌트란 무엇입니까?
답변
Vue 컴포넌트는 이름을 가진 재사용 가능한 Vue 인스턴스입니다. HTML, CSS, JavaScript를 독립적인 논리 단위로 캡슐화합니다. 컴포넌트를 사용하면 사용자 인터페이스를 재사용 가능하고 유지보수하기 쉬운 조각으로 나눌 수 있습니다. 각 컴포넌트는 자체 template, 로직, 스타일을 가지고 있어 코드 구성과 재사용성을 용이하게 합니다.
2script setup을 사용하는 Vue 3 컴포넌트에서 props를 어떻게 선언하나요?
2
script setup을 사용하는 Vue 3 컴포넌트에서 props를 어떻게 선언하나요?
답변
script setup을 사용하는 Vue 3에서 defineProps()는 명시적인 import 없이 props를 선언할 수 있게 해주는 컴파일러 매크로입니다. 이 매크로는 필요한 코드를 자동으로 생성하고 props를 template에 노출합니다. TypeScript와 JavaScript의 타입 검증을 지원하여 Options API 방식보다 코드를 더 간결하고 타입 안전하게 만듭니다.
3컴포넌트 라이프사이클에서 onMounted() 훅의 기능은 무엇인가요?
3
컴포넌트 라이프사이클에서 onMounted() 훅의 기능은 무엇인가요?
답변
onMounted() 훅은 컴포넌트가 DOM에 마운트된 후에 실행됩니다. 서드파티 라이브러리 초기화, API를 통한 데이터 가져오기, DOM 요소 직접 조작처럼 DOM 접근이 필요한 작업을 수행하기에 이상적인 시점입니다. 이 단계에서는 template이 렌더링되어 있고 refs에 접근할 수 있습니다.
4
자식 컴포넌트는 어떻게 부모 컴포넌트로 이벤트를 emit하나요?
5
Vue 컴포넌트에서 slots는 무엇을 위해 사용되나요?
+17 면접 질문
기타 Vue.js / Nuxt.js 면접 주제
JavaScript 기초
Junior
20개 질문모던 JavaScript (ES6+)
Junior
20개 질문Vue 기초
Junior
22개 질문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
22개 질문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개 질문