Question 1

JavaScript에서 var와 let의 주요 차이점은 무엇인가요?

Accepted Answer

근본적인 차이는 변수의 scope에 있습니다. let은 block scope를 가지므로 let으로 선언된 변수는 정의된 블록(중괄호 안)에서만 존재합니다. var는 function scope를 가지며, 변수가 블록 외부에서도 접근 가능해 예기치 않은 동작을 일으킬 수 있습니다. 이러한 scope 차이로 인해 hoisting과 scope 관련 버그를 피하기 위해 let이 권장됩니다.

Question 2

JavaScript에서 Promise란 무엇입니까?

Accepted Answer

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 시간이 걸리는 작업(HTTP 요청, 파일 읽기)을 코드 실행을 차단하지 않고 처리할 수 있게 해줍니다. Promise는 pending(대기 중), fulfilled(성공적으로 완료됨), rejected(오류로 실패함)의 세 가지 상태를 가질 수 있습니다.

Question 3

Vue 인스턴스란 무엇인가요?

Accepted Answer

Vue 인스턴스는 createApp()을 호출하여 생성되며 애플리케이션을 나타내는 객체입니다. 이 루트 객체는 모든 반응형 데이터, 메서드, 구성 옵션을 포함합니다. 애플리케이션을 DOM 요소에 마운트하고 Vue의 반응성 시스템을 초기화하는 진입점 역할을 합니다.

Question 4

Vue 컴포넌트란 무엇입니까?

Accepted Answer

Vue 컴포넌트는 이름을 가진 재사용 가능한 Vue 인스턴스입니다. HTML, CSS, JavaScript를 독립적인 논리 단위로 캡슐화합니다. 컴포넌트를 사용하면 사용자 인터페이스를 재사용 가능하고 유지보수하기 쉬운 조각으로 나눌 수 있습니다. 각 컴포넌트는 자체 template, 로직, 스타일을 가지고 있어 코드 구성과 재사용성을 용이하게 합니다.

Question 5

Nuxt 3 애플리케이션에 필요한 최소 구조는 무엇인가요?

Accepted Answer

Nuxt 3 애플리케이션은 프로젝트 루트에 app.vue 파일 또는 pages/ 디렉터리만 있으면 됩니다. pages/ 폴더 없이 app.vue만 있으면 Nuxt는 Vue Router가 없는 애플리케이션을 생성합니다. pages/ 가 존재하면 Nuxt는 file-based routing을 자동으로 활성화하며, 라우트를 표시하기 위해 app.vue 안에 <NuxtPage /> 가 필요합니다.

Question 6

Nuxt에서 useFetch와 useAsyncData의 주요 차이점은 무엇인가요?

Accepted Answer

useFetch는 useAsyncData와 $fetch를 감싸는 래퍼로, 일반적인 API 호출을 단순화합니다. URL 구성을 자동으로 처리하며 첫 번째 인자로 URL을 직접 받을 수 있는 반면, useAsyncData는 고유 키와 커스텀 fetcher 함수가 필요합니다. 간단한 API 호출에는 useFetch를, 복잡한 페칭 로직에는 useAsyncData를 사용합니다.

Question 7

Nuxt에서 Server-Side Rendering(SSR)이란 무엇인가요?

Accepted Answer

SSR은 요청마다 서버에서 완전한 HTML을 생성한 다음 클라이언트로 전송합니다. 검색 엔진이 즉시 접근 가능한 HTML 콘텐츠를 받기 때문에 SEO가 향상되고, first paint까지의 시간도 개선됩니다. SSR은 Nuxt 3의 기본 렌더링 모드이며, JavaScript가 브라우저에서 콘텐츠를 생성하는 클라이언트 사이드 렌더링과 다릅니다.

Question 8

Vue에서 Virtual DOM이란 무엇입니까?

Accepted Answer

Virtual DOM은 실제 DOM 트리의 가벼운 JavaScript 표현입니다. Vue는 성능 면에서 비용이 큰 직접적인 DOM 조작을 최소화하기 위해 Virtual DOM을 사용합니다. 상태가 변경되면 Vue는 새로운 Virtual DOM을 생성하고 이를 이전 것과 비교한 다음(diffing 알고리즘), 실제 DOM에 필요한 변경 사항만 적용합니다. 이 접근 방식은 DOM 작업의 수를 크게 줄이고, 특히 업데이트가 많은 복잡한 애플리케이션에서 성능을 향상시킵니다.

Question 9

Vue 3에서 provide/inject의 주요 목적은 무엇인가요?

Accepted Answer

provide/inject를 사용하면 부모 컴포넌트에서 모든 중간 단계에 props를 전달하지 않고도 임의의 하위 컴포넌트로 데이터를 전달할 수 있습니다. 이를 통해 props가 필요하지 않은 여러 컴포넌트 단계를 거쳐 props를 전달해야 하는 'props drilling'을 피할 수 있습니다. 테마 구성이나 인증 상태와 같은 전역 데이터를 공유할 때 특히 유용합니다.

Question 10

TypeScript와 함께 사용하는 Vue 3에서 defineComponent의 주요 역할은 무엇인가요?

Accepted Answer

defineComponent는 컴포넌트 옵션에 대한 TypeScript type inference를 활성화합니다. 이 함수가 없으면 Options API에서 this 컨텍스트가 any로 처리됩니다. 이를 통해 props, data, computed, 메서드가 자동으로 올바르게 타입이 지정되도록 보장합니다.

Vue.js / Nuxt.js 면접 질문

Vue.js / Nuxt.js 면접 준비가 되셨나요?

모든 Vue.js / Nuxt.js 주제 탐색

JavaScript 기초

모던 JavaScript (ES6+)

Vue 기초

Vue 컴포넌트

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

Vue 반응성

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을 마스터하세요