Vue.js 미드레벨 CS 기초 기술면접

Access Token은 짧은 만료 시간(15-30분)으로 API 요청에 사용되고, Refresh Token은 긴 만료 시간(7-30일)으로 Access Token 갱신에만 사용됩니다. 이는 Access Token 탈취 시 피해를 최소화하면서도 사용자 경험을 유지합니다. Axios Response Interceptor에서 401 에러 발생 시 Refresh Token으로 새 Access Token을 요청하고, 실패한 원래 요청을 재시도합니다. 동시에 여러 요청이 실패할 경우 갱신 요청이 중복되지 않도록 Promise를 공유하는 Queue 패턴을 사용해야 합니다. Refresh Token도 만료되면 로그인 페이지로 리다이렉트합니다.

이중 연결 리스트(Doubly Linked List)와 해시맵(Map)을 조합하여 LRU(Least Recently Used) 캐시 구조를 구현합니다. Map은 검색어를 키로, 이중 연결 리스트의 노드를 값으로 저장하여 O(1)에 존재 여부 확인과 노드 접근이 가능합니다. 이중 연결 리스트는 head가 가장 최근 항목이고, 새 검색어 추가나 기존 검색어 재검색 시 해당 노드를 head로 이동시킵니다. 10개 초과 시 tail 노드를 제거하고 Map에서도 삭제합니다. Vue의 reactive에서는 Map 자체를 ref로 감싸고 변경 시 새 Map 인스턴스를 할당하거나, 배열로 변환하여 렌더링합니다.

인덱스는 B-Tree 구조로 특정 컬럼의 값을 정렬하여 저장해 O(log N) 시간에 데이터를 찾을 수 있게 합니다. WHERE 절에 사용되는 컬럼에 인덱스가 없으면 Full Table Scan이 발생하여 O(N) 시간이 소요됩니다. 복합 인덱스는 여러 컬럼을 조합하며, 컬럼 순서가 중요합니다. WHERE 절에 사용되는 컬럼을 먼저 배치하고, 그 다음 ORDER BY 컬럼을 배치해야 인덱스를 최대한 활용할 수 있습니다. 예를 들어 WHERE category AND ORDER BY created_at 쿼리에는 (category, created_at) 순서의 복합 인덱스가 효과적입니다. 하지만 인덱스는 INSERT/UPDATE 성능을 저하시키므로 적절한 균형이 필요합니다.

선형 검색은 배열의 모든 요소를 순회하므로 O(N)의 시간 복잡도를 가지며, 이진 검색은 정렬된 배열에서 중간값과 비교하며 탐색 범위를 절반씩 줄여 O(log N)의 시간 복잡도를 가집니다. 이진 검색을 사용하려면 배열이 정렬되어 있어야 하므로, 초기 데이터 로드 시 또는 필터링 전에 정렬 작업이 필요합니다. 하지만 정렬 자체가 O(N log N)이므로, 데이터가 자주 변경되는 경우 오히려 비효율적일 수 있습니다. 실시간 검색에서는 부분 문자열 매칭이 필요한 경우가 많아 이진 검색보다는 Trie 자료구조나 인덱싱된 검색 엔진 사용이 더 적합합니다.

가상 메모리는 물리 메모리보다 큰 주소 공간을 프로세스에 제공하는 기술로, 페이징을 통해 메모리를 고정 크기 블록(페이지)으로 나누어 필요한 부분만 물리 메모리에 로드합니다. 브라우저의 JavaScript 힙은 일반적으로 2-4GB로 제한되어 있어, 대용량 파일을 한 번에 메모리에 로드하면 Out of Memory 에러가 발생합니다. Blob.slice()를 사용하면 파일을 청크 단위로 나누어 순차적으로 읽고 업로드할 수 있으며, 각 청크 처리 후 가비지 컬렉션으로 메모리를 회수할 수 있습니다. FormData에 청크를 담아 전송하고, 서버에서 조립하는 방식으로 구현하며, 재시도 로직과 진행률 표시를 함께 제공해야 합니다.