[Vue][퀴즈] 10문제

Vue.js 기본 개념 퀴즈

총 10문항

---

1. 뷰 싱글 파일 컴포넌트(.vue)의 기본적인 세 가지 필수 섹션은 무엇일까요?

A html, js, css
B template, script, style
C view, data, methods
D layout, logic, style

정답 보기

정답: B template, script, style

Vue 싱글 파일 컴포넌트는 <template>, <script>, <style> 세 가지 섹션으로 구성됩니다.

---

2. Vue에서 입력 요소의 값과 컴포넌트 데이터를 양방향으로 쉽게 연결할 때 사용하는 핵심 디렉티브는 무엇일까요?

A v-bind
B v-on
C v-model
D v-if

정답 보기

정답: C v-model

v-model은 양방향 데이터 바인딩을 제공하여 입력 요소와 데이터를 쉽게 연결할 수 있습니다.

---

3. Vue에서 배열이나 객체의 항목들을 반복하여 목록을 화면에 렌더링할 때 주로 사용하는 디렉티브는 무엇일까요?

A v-if
B v-show
C v-for
D v-else

정답 보기

정답: C v-for

v-for 디렉티브는 배열이나 객체의 항목들을 반복하여 렌더링할 때 사용됩니다.

---

4. v-for 디렉티브와 함께 사용할 때, Vue가 목록의 변경사항을 추적하고 재사용 가능한 엘리먼트를 관리하여 성능을 최적화하는 데 권장되는 속성은 무엇일까요?

A v-bind:ref
B v-bind:id
C v-bind:key
D v-bind:index

정답 보기

정답: C v-bind:key

:key 속성은 Vue가 목록 항목을 추적하고 효율적으로 업데이트할 수 있도록 도와줍니다.

---

5. Vue 컴포넌트에서 컴포넌트 인스턴스의 반응형 상태(state)를 정의하고 초기화하기 위해 사용하는 속성은 무엇일까요?

A methods
B computed
C data
D watch

정답 보기

정답: C data

data 함수는 컴포넌트의 반응형 상태를 정의하고 초기화하는 데 사용됩니다.

---

6. Vue 컴포넌트 인스턴스가 생성된 직후에 호출되는 라이프사이클 훅으로, 주로 인스턴스가 데이터 옵션을 처리한 후에 초기 설정을 할 때 사용되는 것은 무엇일까요?

A mounted
B created
C updated
D destroyed

정답 보기

정답: B created

created 훅은 컴포넌트 인스턴스가 생성된 직후에 호출되며, 초기 데이터 설정에 주로 사용됩니다.

---

7. Vue 싱글 파일 컴포넌트의 <style> 태그에 scoped 속성을 추가하면 해당 스타일이 어떻게 적용될까요?

A 스타일이 전역으로 적용되어 모든 컴포넌트에 영향을 줍니다.
B 스타일이 해당 컴포넌트에만 적용되며 다른 컴포넌트에 영향을 주지 않습니다.
C 스타일이 자식 컴포넌트에도 상속되어 적용됩니다.
D 해당 스타일 섹션의 스타일이 무시됩니다.

정답 보기

정답: B 스타일이 해당 컴포넌트에만 적용되며 다른 컴포넌트에 영향을 주지 않습니다.

scoped 속성은 스타일을 현재 컴포넌트에만 적용하여 스타일 격리를 제공합니다.

---

8. 브라우저의 Local Storage는 문자열 데이터만 저장할 수 있습니다. JavaScript 객체나 배열을 Local Storage에 저장하기 위해 문자열로 변환할 때 사용하는 내장 객체 메소드는 무엇일까요?

A JSON.parse()
B JSON.stringify()
C Object.keys()
D Array.prototype.join()

정답 보기

정답: B JSON.stringify()

JSON.stringify()는 JavaScript 객체를 JSON 문자열로 변환하여 Local Storage에 저장할 수 있게 해줍니다.

---

9. 브라우저의 Local Storage에 현재 도메인에 저장된 모든 키(key)와 값(value)을 한 번에 삭제할 때 사용하는 Local Storage API 메소드는 무엇일까요?

A removeItem()
B deleteItem()
C clear()
D removeAll()

정답 보기

정답: C clear()

localStorage.clear() 메소드는 현재 도메인의 모든 Local Storage 데이터를 삭제합니다.

---

10. Vue에서 컴포넌트의 데이터 값(참/거짓 또는 문자열 등)에 따라 특정 HTML 요소에 CSS 클래스를 동적으로 추가하거나 제거할 때 사용하는 디렉티브는 무엇일까요?

A v-if
B v-show
C v-html
D v-bind:class

정답 보기

정답: D v-bind:class

v-bind:class (또는 :class)는 데이터 값에 따라 CSS 클래스를 동적으로 바인딩할 때 사용됩니다.

---

다들 잘 맞히셨나요? ㅎㅎ