프론트엔드 개발 · 기초
Vue 애플리케이션의 가장 기본적인 단위인 Vue 인스턴스는 어떻게 생성하며, 주요 옵션(data, methods 등)은 무엇이 있는지 설명해 주세요.
힌트 · `new Vue({})`로 생성하며, `el`, `data`, `methods`, `computed`, `watch` 등의 옵션을 사용하여 인스턴스의 동작을 정의합니다.
Vue 인스턴스new Vue()datamethods컴포넌트
모범답안
Vue 애플리케이션의 가장 기본적인 단위는 Vue 인스턴스입니다. new Vue({})를 통해 생성할 수 있습니다. 이 때, 객체 안에 다양한 옵션을 설정하여 인스턴스의 동작을 정의합니다.
주요 옵션으로는 el, data, methods, computed, watch 등이 있습니다.
el은 Vue 인스턴스가 마운트될 DOM 요소를 지정합니다. data는 Vue 인스턴스 내에서 사용할 데이터를 정의하며, 템플릿에서 접근하고 변경할 수 있습니다. methods는 Vue 인스턴스 내에서 호출할 수 있는 함수들을 정의합니다. computed는 데이터에 기반하여 계산된 값을 반환하는 속성을 정의하며, 종속된 데이터가 변경될 때 자동으로 업데이트됩니다. 마지막으로 watch는 특정 데이터의 변화를 감지하고 그에 따른 동작을 수행하는 기능을 제공합니다.
이러한 옵션들을 통해 Vue 인스턴스의 동작을 정의하고, 애플리케이션의 UI와 로직을 구성할 수 있습니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 Vue.js / Nuxt 면접 질문
- Vue.js는 어떤 프레임워크이며, 프론트엔드 개발에서 어떤 장점을 제공하는지 설명해 주세요.
- Vue.js에서 `v-bind`와 `v-model` 디렉티브는 각각 어떤 용도로 사용되며, 둘의 주요 차이점은 무엇인지 설명해 주세요.
- Vue.js에서 조건부 렌더링을 위해 사용되는 `v-if`와 `v-show` 디렉티브의 차이점을 설명하고, 각각 어떤 상황에 더 적합한지 예시를 들어 설명해 주세요.
- Vue.js에서 배열 데이터를 기반으로 여러 개의 요소를 반복적으로 렌더링할 때 `v-for` 디렉티브를 어떻게 사용하는지 설명해 주세요. 이때 `key` 속성의 중요성도 함께 언급해 주세요.