Vue.js 주니어 코딩 면접

v-model은 양방향 데이터 바인딩을 위한 문법 설탕(syntactic sugar)입니다. 내부적으로 :value props와 @input 이벤트의 조합으로 동작합니다. input과 textarea는 value 속성과 input 이벤트를 사용하고, checkbox와 radio는 checked 속성과 change 이벤트를, select는 value 속성과 change 이벤트를 사용합니다. 이를 통해 사용자 입력이 즉시 데이터에 반영되고, 데이터 변경이 화면에 반영되는 양방향 바인딩이 구현됩니다.

형제 컴포넌트 간 통신 방법은 1) 부모 컴포넌트를 중간 매개체로 사용(Props down, Emit up), 2) Event Bus 패턴 사용, 3) Vuex나 Pinia 같은 상태관리 라이브러리 사용이 있습니다. 부모를 통한 방법은 간단하지만 깊은 계층에서는 props drilling 문제가 발생합니다. Event Bus는 간편하지만 디버깅이 어렵고 Vue 3에서는 권장되지 않습니다. 상태관리 라이브러리는 복잡한 상태 공유에 적합하지만 작은 프로젝트에서는 오버엔지니어링이 될 수 있습니다.

setup 함수는 컴포넌트 인스턴스가 생성되기 전, beforeCreate와 created 훅 사이에 실행됩니다. 이 시점에는 아직 컴포넌트 인스턴스가 완전히 생성되지 않았기 때문에 this를 사용할 수 없습니다. setup 함수에서 반환한 객체의 모든 속성은 자동으로 템플릿에 노출되어 직접 사용할 수 있으며, ref로 선언된 값은 템플릿에서 자동으로 언래핑되어 .value 없이 사용 가능합니다. props와 context(emit, slots, attrs 포함)는 setup의 인자로 받아 사용합니다.

대량 리스트 렌더링 최적화 방법으로는 1) Virtual Scrolling(vue-virtual-scroller 등)을 사용하여 화면에 보이는 항목만 렌더링, 2) v-once 디렉티브로 정적 콘텐츠를 한 번만 렌더링, 3) Object.freeze()로 반응성이 필요 없는 데이터의 옵저버 생성 방지, 4) Pagination이나 Infinite Scroll로 데이터를 분할 로딩, 5) key 속성에 고유한 ID 사용으로 불필요한 재렌더링 방지가 있습니다. 이들은 DOM 노드 수 감소, 반응성 오버헤드 제거, 효율적인 diff 알고리즘 활용을 통해 성능을 개선합니다.

커스텀 디렉티브는 app.directive() 또는 컴포넌트의 directives 옵션으로 등록하며, 라이프사이클 훅으로 created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted를 제공합니다. mounted는 엘리먼트가 DOM에 삽입될 때, updated는 부모 컴포넌트가 업데이트될 때, unmounted는 엘리먼트가 제거될 때 호출됩니다. 실무 사례로는 v-focus(자동 포커스), v-click-outside(외부 클릭 감지), v-lazy(이미지 지연 로딩), v-permission(권한 기반 엘리먼트 표시) 등이 있으며, DOM 직접 조작이 필요한 재사용 가능한 로직에 적합합니다.