Question 1

Vue의 반응성 시스템이란 무엇인가요?

Accepted Answer

Vue의 반응성 시스템은 데이터의 변경을 자동으로 감지하고 그에 따라 DOM을 업데이트합니다. 프로퍼티 접근과 수정을 가로채는 JavaScript Proxy에 의존합니다. 이 시스템은 수동 개입 없이도 사용자 인터페이스가 애플리케이션 상태와 동기화된 상태를 유지하도록 보장합니다.

Question 2

ref()와 reactive()의 주요 차이점은 무엇인가요?

Accepted Answer

ref()는 primitive 값이나 객체에 대한 반응형 참조를 생성하며 .value를 통해 접근합니다. 반면 reactive()는 객체의 반응형 proxy를 생성하며 프로퍼티에 접근할 때 .value가 필요하지 않습니다. ref()는 범용적이며(primitive + 객체) 단순한 값에 이상적인 반면, reactive()는 객체에 최적화되어 있지만 primitive에는 동작하지 않습니다. 실무에서는 모든 타입에서 동작하기 때문에 ref()가 자주 선호됩니다.

Question 3

template과 script에서 ref의 값에 어떻게 접근하나요?

Accepted Answer

template에서는 Vue가 ref를 자동으로 unwrap하므로 .value 없이 직접 접근할 수 있습니다(예: {{ count }}). script에서는 ref의 값을 읽거나 수정하기 위해 .value를 사용해야 합니다(예: count.value++). template에서의 이 자동 동작은 코드 작성을 단순화하면서 JavaScript 로직에서는 명시적인 제어를 유지합니다.

Vue 반응성

Vue의 반응성 시스템이란 무엇인가요?

답변

ref()와 reactive()의 주요 차이점은 무엇인가요?

답변

template과 script에서 ref의 값에 어떻게 접근하나요?

답변

reactive() 객체를 구조 분해하면 어떻게 되나요?

Vue에서 toRefs()의 용도는 무엇인가요?

기타 Vue.js / Nuxt.js 면접 주제

JavaScript 기초

모던 JavaScript (ES6+)

Vue 기초

Vue 컴포넌트

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

Nuxt 기초

Nuxt 데이터 페칭

Nuxt SSR 및 SSG

Nuxt 서버 라우트

Nuxt 모듈

Vue 컴포저블

Vue 폼과 유효성 검사

Nuxt 상태 관리

Vue 테스팅

Nuxt 배포 및 CI/CD

Vue 성능

Vue 고급 패턴

Vue와 함께 사용하는 TypeScript

Nuxt 인증

Nuxt에서의 SEO

Nuxt 국제화

Vue 아키텍처

Nuxt 보안

Vue 생태계

Vue 2→3 및 Nuxt 2→3 마이그레이션

다음 면접을 위해 Vue.js / Nuxt.js을 마스터하세요