Vue.js 주니어 프레임워크 기술면접

네비게이션 가드는 전역 가드(beforeEach, beforeResolve, afterEach), 라우트별 가드(beforeEnter), 컴포넌트 가드(beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave)로 구분됩니다. beforeEach는 모든 라우트 변경 시 실행되는 전역 가드이고, beforeEnter는 특정 라우트에만 적용되는 가드입니다. 인증 체크는 주로 router.beforeEach에서 to.meta.requiresAuth 같은 메타 필드를 확인하고, 인증되지 않은 경우 next('/login')으로 리다이렉트하여 구현합니다. next() 함수를 호출해야 네비게이션이 진행되며, next(false)는 네비게이션을 취소합니다.

Mixin은 여러 컴포넌트에서 재사용 가능한 옵션(data, methods, lifecycle hooks 등)을 분리하여 정의하고 믹스인할 수 있는 기능입니다. 장점은 코드 재사용성을 높이고 공통 로직을 중앙화할 수 있다는 점이지만, 단점은 네임스페이스 충돌 가능성, 암묵적 의존성, 출처 불명확성 등이 있습니다. Vue 3에서는 Composition API의 composable 함수를 사용하면 명시적 의존성, 명확한 출처, 타입 추론 지원 등의 이점이 있어 Mixin보다 권장됩니다. Composition API는 함수 형태로 로직을 분리하여 더 유연하고 테스트하기 쉽습니다.

Teleport는 컴포넌트의 템플릿 일부를 DOM의 다른 위치로 렌더링할 수 있게 해주는 Vue 3의 내장 컴포넌트입니다. 컴포넌트의 논리적 구조는 유지하면서 실제 DOM 렌더링 위치만 변경할 수 있습니다. 모달(Modal), 토스트(Toast), 드롭다운 등 z-index나 position 문제로 인해 body 태그 직하위에 렌더링해야 하는 UI 요소에 유용합니다. 예를 들어 깊게 중첩된 컴포넌트 내부에서 모달을 정의하더라도 Teleport를 사용하면 body에 렌더링하여 CSS 스타일링 문제를 해결할 수 있습니다.

비동기 컴포넌트는 defineAsyncComponent를 사용하여 정의하며, 컴포넌트를 필요할 때만 로드하는 lazy loading을 구현합니다. import() 함수를 사용하여 동적으로 컴포넌트를 가져오며, 이는 웹팩 등의 번들러가 자동으로 코드 스플리팅을 수행하도록 합니다. 초기 번들 크기를 줄여 첫 로딩 속도를 개선하고, 사용자가 실제로 필요한 컴포넌트만 로드하여 성능을 최적화할 수 있습니다. loading, error 컴포넌트를 지정하여 로딩 상태와 에러 상태를 처리할 수 있으며, delay, timeout 옵션으로 세밀한 제어가 가능합니다.

Template Refs는 ref 속성을 사용하여 DOM 요소나 컴포넌트 인스턴스에 직접 접근할 수 있게 해줍니다. Options API에서는 템플릿에 ref='myElement'를 지정하고 this.$refs.myElement로 접근합니다. Composition API에서는 ref()로 변수를 선언하고 템플릿의 ref 속성에 같은 이름을 사용하면, onMounted 이후 해당 변수에 DOM 요소가 할당됩니다. 주로 포커스 제어, 애니메이션 라이브러리 통합, 스크롤 위치 조작 등 명령형 DOM 조작이 필요한 경우에 사용하며, 남용하지 않고 선언적 방식을 우선하는 것이 권장됩니다.