면접대비 질문 정리: Vue.js

 

1. Vue.js란?

✅ 답변:
Vue.js는 사용자 인터페이스(UI) 구축을 위한 진행형(Progressive) JavaScript 프레임워크입니다.
React와 유사하게 컴포넌트 기반으로 UI를 개발할 수 있으며, Virtual DOM과 반응형 시스템을 활용하여 효율적인 렌더링을 제공합니다.

---

2. Vue의 Virtual DOM이란?

✅ 답변:
Virtual DOM은 실제 DOM을 직접 조작하는 대신, 가상의 DOM을 사용하여 변경 사항을 최소화하는 기술입니다.
Vue는 변경 사항을 감지하고, 효율적으로 필요한 부분만 업데이트하여 성능을 최적화합니다.

---

3. Vue의 반응형 시스템이란?

✅ 답변:
Vue는 Proxy 기반 반응형(Reactivity) 시스템을 사용합니다.
데이터가 변경되면 Vue가 이를 감지하고, 변경된 부분만 다시 렌더링합니다.
이 덕분에 computed, watch, methods 등을 활용해 효율적으로 상태를 관리할 수 있습니다.

---

4. {{ }}(Mustache)와 v-bind의 차이점?

✅ 답변:

• {{ }}(Mustache 문법)는 텍스트 바인딩에 사용되며, HTML 속성에서는 사용할 수 없습니다.
• v-bind는 HTML 속성에 데이터 바인딩할 때 사용합니다.

<p>{{ message }}</p>  <!-- 텍스트 바인딩 -->
<img v-bind:src="imageUrl" />  <!-- 속성 바인딩 -->

---

5. computed vs methods 차이점?

✅ 답변:

• computed는 캐싱(caching) 되며, 종속된 데이터가 변경될 때만 다시 실행됩니다.
• methods는 매번 실행되므로, 연산량이 많을 경우 computed가 더 효율적입니다.

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;  // 캐싱됨
  }
}
methods: {
  getFullName() {
    return this.firstName + ' ' + this.lastName;  // 매번 실행됨
  }
}

---

6. watch와 computed의 차이?

✅ 답변:

• computed는 반환값을 가지고 있고 자동으로 값이 변경될 때 업데이트됩니다.
• watch는 특정 데이터를 감시하고 있다가, 값이 변할 때 특정 동작을 실행합니다.

watch: {
  searchQuery(newVal, oldVal) {
    console.log(`검색어가 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    this.fetchResults(newVal);
  }
}

---

7. Vue의 디렉티브(Directives)란?

✅ 답변:
Vue에서 v- 접두어가 붙은 속성으로, HTML을 확장하는 기능입니다.
예:

• v-if, v-else, v-show (조건부 렌더링)
• v-for (반복문)
• v-model (양방향 바인딩)
• v-bind (속성 바인딩)
• v-on (이벤트 리스너)

---

8. v-if vs v-show 차이?

✅ 답변:

• v-if는 조건이 false면 DOM에서 완전히 제거됨. (초기 렌더링 성능 좋음)
• v-show는 CSS display: none을 사용하여 숨김, 하지만 DOM에는 남아 있음. (빈번한 UI 토글 시 유리)

<p v-if="isVisible">보이거나 안 보이거나</p>
<p v-show="isVisible">보이지만 숨길 수 있음</p>

---

9. v-for에서 key가 필요한 이유?

✅ 답변:
Vue는 v-for로 생성된 리스트의 변경 사항을 추적합니다.
key 속성을 추가하면 각 요소의 고유성을 보장하여 불필요한 렌더링을 방지합니다.

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

---

10. Vue의 컴포넌트란?

✅ 답변:
Vue의 컴포넌트는 재사용 가능한 UI 단위입니다.
컴포넌트 기반 아키텍처를 활용하여 코드의 재사용성과 유지보수성을 높일 수 있습니다.

<template>
  <ChildComponent :message="parentMessage" />
</template>

---

11. Props와 Emit이란?

✅ 답변:

• props는 부모 → 자식으로 데이터를 전달하는 방법입니다.
• emit은 자식 → 부모로 이벤트를 전달하는 방법입니다.

<!-- 부모 -->
<ChildComponent :message="parentMessage" @childEvent="handleEvent" />

// 자식
props: ['message'],
methods: {
  sendToParent() {
    this.$emit('childEvent', '데이터 전송!');
  }
}

---

12. Vue의 이벤트 버스란?

✅ 답변:
이벤트 버스는 Vue의 mitt 라이브러리를 사용하여 컴포넌트 간 데이터를 주고받는 방법입니다.

// eventBus.js
import mitt from 'mitt';
export const eventBus = mitt();

// A.vue
eventBus.emit('customEvent', data);

// B.vue
eventBus.on('customEvent', (data) => {
  console.log(data);
});

---

13. Vuex란?

✅ 답변:
Vuex는 Vue.js의 상태 관리 라이브러리입니다.
컴포넌트 간 데이터를 효율적으로 공유하고 관리할 수 있도록 도와줍니다.

---

14. Vue Router란?

✅ 답변:
Vue Router는 Vue의 공식 라우팅 라이브러리로, SPA(Single Page Application)에서 페이지 전환을 가능하게 합니다.

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];
 
const router = createRouter({
  history: createWebHistory(),
  routes
});

---

15. keep-alive란?

✅ 답변:
Vue에서 <keep-alive>는 컴포넌트를 캐싱하여 다시 마운트될 때 초기화되지 않도록 하는 기능입니다.

<keep-alive>
  <component :is="currentComponent" />
</keep-alive>

 

 

---

16. Vue 3의 Composition API란?

✅ 답변:
Composition API는 Vue 3에서 새롭게 도입된 API로, setup() 함수를 활용하여 코드의 재사용성과 가독성을 개선하는 방식입니다.
Options API와 비교했을 때, 로직을 더 구조적으로 관리할 수 있습니다.

<script setup>
import { ref } from 'vue';
 
const count = ref(0);
const increment = () => count.value++;
</script>
<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

---

17. Vue 2와 Vue 3의 차이점은?

✅ 답변:

1. Composition API 도입 (setup(), ref(), reactive())
2. Fragments 지원 (한 컴포넌트에 여러 루트 요소 사용 가능)
3. Teleport 추가 (컴포넌트 렌더링 위치 변경 가능)
4. Vuex 대신 Pinia 사용 권장 (더 가볍고 직관적)
5. Reactivity 시스템 개선 (Proxy 기반 반응형 시스템)

---

18. ref() vs reactive() 차이점?

✅ 답변:

• ref()는 기본 타입(Primitive) 값을 반응형으로 만듭니다. (value로 접근해야 함)
• reactive()는 **객체(Object)와 배열(Array)**을 반응형으로 만듭니다. (value 없이 직접 접근)

const count = ref(0);
const user = reactive({ name: 'Vue', age: 3 });
 
console.log(count.value);  // ref는 .value 필요
console.log(user.name);  // reactive는 .value 없이 사용 가능

---

19. Vue의 LifeCycle Hook 종류와 순서?

✅ 답변:
Vue의 라이프사이클 훅은 컴포넌트의 생성부터 소멸까지 특정 시점에서 실행되는 함수입니다.

Vue 2

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestroy
8. destroyed

Vue 3

1. setup()
2. onBeforeMount()
3. onMounted()
4. onBeforeUpdate()
5. onUpdated()
6. onBeforeUnmount()
7. onUnmounted()

<script setup>
import { onMounted, onUnmounted } from 'vue';
 
onMounted(() => console.log('컴포넌트 마운트 완료'));
onUnmounted(() => console.log('컴포넌트 제거됨'));
</script>

---

20. Vue에서 $nextTick()은 언제 사용하나요?

✅ 답변:
$nextTick()은 DOM 업데이트 후 실행될 콜백을 등록하는 함수입니다.
비동기적으로 UI 변경 후 실행되는 코드를 보장할 때 사용됩니다.

methods: {
  updateText() {
    this.message = "업데이트됨!";
    this.$nextTick(() => {
      console.log(this.$refs.text.innerText); // 업데이트된 DOM 값 확인
    });
  }
}

---

21. Vue의 provide / inject란?

✅ 답변:
provide와 inject는 컴포넌트 트리의 깊은 곳까지 데이터를 전달할 때 사용됩니다.
Props 대신 사용하여 상위-하위 관계의 컴포넌트 간 데이터 공유를 쉽게 합니다.

// 부모 컴포넌트
provide('theme', 'dark');

// 자식 컴포넌트
const theme = inject('theme');
console.log(theme); // 'dark'

---

22. Vue 3의 script setup의 장점은?

✅ 답변:

1. 더 간결한 문법 (export default 불필요)
2. Composition API 자동 바인딩 (this 필요 없음)
3. setup() 함수 생략 가능
4. 성능 최적화 (트리 쉐이킹 지원)

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

---

23. Vue에서 v-model은 어떻게 동작하나요?

✅ 답변:
v-model은 양방향 바인딩을 제공하여, 입력 값이 변경될 때 데이터도 즉시 업데이트됩니다.

<input v-model="message" />

Vue 3에서는 v-model을 여러 개 정의할 수도 있습니다.

<ChildComponent v-model:title="title" v-model:content="content" />

---

24. Vue의 watchEffect()란?

✅ 답변:
watchEffect()는 의존성 자동 추적을 통해 반응형 데이터를 감시하는 Vue 3 기능입니다.

watchEffect(() => {
  console.log(user.name); // user.name이 변경될 때마다 실행
});

---

25. Vue의 SSR(Server-Side Rendering)이란?

✅ 답변:
SSR은 Vue 컴포넌트를 서버에서 렌더링하여 초기 HTML을 생성하는 방식입니다.
Vue의 공식 SSR 프레임워크는 Nuxt.js입니다.

장점:

• SEO 최적화 (검색 엔진 크롤러 지원)
• 초기 로딩 속도 개선

단점:

• 서버 부하 증가
• 개발 복잡도 증가

---

26. Vue에서 Teleport란?

✅ 답변:
Teleport는 특정 DOM 요소로 컴포넌트를 렌더링할 때 사용됩니다.
주로 모달 창, 알림 팝업 등에 활용됩니다.

<teleport to="body">
  <div class="modal">모달 내용</div>
</teleport>

---

27. Vue에서 성능 최적화 방법은?

✅ 답변:

1. v-if와 v-show 적절히 사용
2. key 속성 추가하여 리스트 업데이트 최적화
3. computed와 watch를 적절히 사용
4. keep-alive 활용하여 캐싱
5. Lazy Loading(코드 스플리팅) 적용

---

28. Vue에서 defineProps와 defineEmits란?

✅ 답변:
defineProps와 defineEmits는 Composition API에서 props와 이벤트를 선언하는 함수입니다.

<script setup>
defineProps(['title']);
defineEmits(['updateTitle']);
</script>

---

29. Vue에서 Suspense란?

✅ 답변:
<Suspense>는 비동기 컴포넌트를 로딩하는 동안 대체 UI를 표시할 수 있도록 하는 Vue 3의 기능입니다.

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <p>로딩 중...</p>
  </template>
</Suspense>

---

30. Vue에서 Pinia란?

✅ 답변:
Pinia는 Vuex를 대체하는 더 가볍고 직관적인 상태 관리 라이브러리입니다.

import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++; }
  }
});

 

 

Vue 설치

npm install -g @vue/cli (설치)
vue -V (버전 확인)
vur create 프로젝트명 (vue 프로젝트 생성)

https://vuejs.github.io/vetur/guide/

Quick start | Vetur