상태관리 주니어 개발자 CS 기초 면접
새 면접Q. Redux나 Zustand 같은 상태관리 라이브러리에서 상태를 저장할 때 자주 사용되는 자료구조인 '객체(Object)'와 '배열(Array)'의 시간복잡도 차이를 설명해주세요. 특히 특정 값을 조회할 때와 추가할 때의 차이를 중심으로 말씀해주세요.
객체는 키-값 쌍으로, 배열은 인덱스로 접근한다는 점을 생각해보세요.
객체는 해시 테이블 기반으로 구현되어 있어 특정 키로 값을 조회할 때 평균 O(1)의 시간복잡도를 가집니다. 배열은 인덱스로 접근 시 O(1)이지만, 특정 값을 찾기 위해서는 O(n)이 필요합니다. 객체에 새로운 속성을 추가하는 것은 O(1)이고, 배열 끝에 요소를 추가하는 push도 O(1)입니다. 하지만 배열 중간에 요소를 삽입하거나 삭제하면 뒤의 요소들을 이동시켜야 하므로 O(n)이 소요됩니다. 따라서 ID 기반으로 빠른 조회가 필요한 경우 객체를, 순서가 중요한 경우 배열을 사용하는 것이 효율적입니다.
- • 객체는 키 기반 조회 시 O(1) 시간복잡도
- • 배열은 인덱스 접근은 O(1), 값 검색은 O(n)
- • 배열 중간 삽입/삭제는 O(n), 객체 추가는 O(1)
대량의 사용자 목록을 상태로 관리할 때 ID 기반 빠른 조회를 위해 배열 대신 객체 구조로 정규화합니다.
그렇다면 Redux에서 정규화(normalization)를 통해 배열 대신 객체 형태로 상태를 관리하는 이유가 무엇일까요?
Q. SPA 애플리케이션에서 상태관리 라이브러리를 사용하여 API 응답 데이터를 캐싱하고 있습니다. 사용자가 페이지를 새로고침했을 때 상태가 초기화되는 문제를 해결하기 위해 LocalStorage를 사용하려고 합니다. HTTP 캐시(Cache-Control)와 LocalStorage의 차이점, 그리고 각각의 장단점을 설명해주세요.
브라우저 레벨의 캐시와 애플리케이션 레벨의 저장소가 동작하는 위치와 제어 권한을 비교해보세요.
HTTP 캐시는 브라우저가 네트워크 레벨에서 관리하는 캐시로, Cache-Control 헤더를 통해 서버가 제어합니다. 네트워크 요청 자체를 줄일 수 있어 성능이 우수하지만, 개발자가 JavaScript로 직접 제어하기 어렵습니다. LocalStorage는 브라우저의 Web Storage API로 JavaScript에서 직접 읽고 쓸 수 있어 애플리케이션 상태 영속화에 적합합니다. 하지만 동기적으로 동작하여 대용량 데이터 처리 시 메인 스레드를 블로킹할 수 있고, 도메인당 약 5~10MB 용량 제한이 있습니다. HTTP 캐시는 자동 만료 관리가 가능하지만, LocalStorage는 명시적으로 삭제하지 않으면 영구 보관됩니다. 실무에서는 두 방식을 함께 사용하여 HTTP 캐시로 네트워크 최적화를, LocalStorage로 사용자 설정이나 임시 상태 저장을 담당합니다.
- • HTTP 캐시는 서버 제어, LocalStorage는 클라이언트 제어
- • HTTP 캐시는 네트워크 요청 자체를 줄이지만 JS로 직접 제어 어려움
- • LocalStorage는 동기 방식이며 용량 제한(5~10MB) 존재
API 응답을 LocalStorage에 캐싱하여 오프라인 상황에서도 이전 데이터를 보여주거나, 페이지 새로고침 시에도 상태를 유지합니다.
그렇다면 민감한 인증 토큰을 LocalStorage에 저장하는 것이 안전한지, 대안은 무엇인지 설명해주세요.
Q. JavaScript는 싱글 스레드 언어인데, Redux나 Zustand에서 비동기 작업(API 호출)을 처리할 때 어떻게 동시에 여러 작업이 가능한 것처럼 보이는지 Event Loop와 Call Stack, Task Queue의 개념을 사용하여 설명해주세요.
JavaScript 엔진의 실행 컨텍스트와 브라우저가 제공하는 Web API의 역할을 구분해서 생각해보세요.
JavaScript는 싱글 스레드이지만 Event Loop 메커니즘을 통해 비동기 작업을 처리합니다. 동기 코드는 Call Stack에서 순차적으로 실행되고, fetch 같은 비동기 작업은 Web API(브라우저 또는 Node.js 환경)에게 위임됩니다. Web API는 별도 스레드에서 작업을 처리하고 완료되면 콜백 함수를 Task Queue(또는 Microtask Queue)에 넣습니다. Event Loop는 Call Stack이 비어있을 때 Queue에서 작업을 꺼내 Stack으로 옮기는 역할을 합니다. 이를 통해 메인 스레드는 블로킹되지 않고 UI 렌더링과 사용자 입력을 계속 처리할 수 있습니다. Redux Thunk나 Zustand의 비동기 액션도 이 메커니즘을 활용하여 API 응답을 기다리는 동안 다른 작업을 수행할 수 있습니다.
- • JavaScript는 싱글 스레드이지만 Event Loop로 비동기 처리
- • 비동기 작업은 Web API에 위임되어 별도로 처리됨
- • Event Loop가 Call Stack이 비었을 때 Task Queue의 작업을 실행
상태관리에서 여러 API를 동시에 호출할 때 메인 스레드가 블로킹되지 않아 사용자는 계속 UI를 조작할 수 있습니다.
Promise와 setTimeout의 콜백이 동시에 완료되었을 때, 어느 것이 먼저 실행되는지 그리고 그 이유를 Microtask Queue 개념을 사용해서 설명해주세요.
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!