JavaScript 시니어 프레임워크 심화 기술면접

기존 Stack Reconciler는 재귀적으로 동작하여 한 번 시작하면 중단할 수 없어 16ms 프레임 버짓을 초과하면 UI가 끊기는 문제가 있었습니다. Fiber는 각 컴포넌트를 작은 작업 단위(Fiber Node)로 분할하고 Linked List 구조로 연결하여, requestIdleCallback을 활용해 우선순위에 따라 작업을 중단하고 재개할 수 있습니다. Time Slicing은 Fiber의 우선순위 스케줄링을 통해 긴급한 업데이트(사용자 입력)를 먼저 처리하고, Suspense는 비동기 컴포넌트 로딩 시 Fiber 트리의 일부를 pending 상태로 유지하며 fallback을 렌더링합니다. 이를 통해 대규모 업데이트에서도 60fps를 유지하며 사용자 경험을 개선할 수 있습니다.

Vue 2는 Object.defineProperty를 사용하여 각 속성마다 getter/setter를 정의하지만, 새로운 속성 추가나 배열 인덱스 변경을 감지할 수 없고 초기화 시 모든 속성을 순회해야 하는 한계가 있습니다. Vue 3의 Proxy는 객체 전체를 가로채서 동적 속성 추가/삭제, 배열 메서드를 모두 감지할 수 있고 lazy하게 중첩 객체를 반응형으로 만들어 성능이 향상됩니다. ref는 원시값을 .value 속성을 가진 객체로 래핑하여 반응성을 제공하고, reactive는 객체를 Proxy로 감싸며 ref는 자동 언래핑됩니다. 원시값이나 단일 값에는 ref를, 관련된 여러 속성을 가진 객체에는 reactive를 사용하는 것이 권장됩니다.

Zone.js는 비동기 작업(이벤트, setTimeout, HTTP 요청)을 monkey patching으로 가로채서 작업 완료 시 자동으로 Change Detection을 트리거합니다. Default Strategy는 모든 컴포넌트 트리를 검사하지만, OnPush Strategy는 Input 속성 참조 변경이나 이벤트 발생 시에만 해당 컴포넌트와 자식들을 검사하여 성능을 크게 향상시킵니다. detach()로 컴포넌트를 Change Detection 트리에서 분리하고, 필요한 시점에만 detectChanges()로 수동 검사하며, reattach()로 다시 연결할 수 있습니다. 실시간 대시보드나 대용량 리스트에서 불필요한 검사를 줄이고 throttle이나 debounce와 함께 사용하면 효과적입니다.

SSR은 요청마다 서버에서 HTML을 생성하여 최신 데이터를 보장하지만 TTFB가 길고, SSG는 빌드 시 HTML을 생성하여 CDN으로 빠르게 제공하지만 데이터가 정적이며, ISR은 일정 시간마다 페이지를 재생성하여 둘의 장점을 결합합니다. Hydration 시 서버와 클라이언트의 마크업 불일치, 큰 번들로 인한 TTI 지연, 중복 데이터 fetching 문제가 발생할 수 있으며, 조건부 렌더링 최소화, Progressive Hydration, Streaming SSR로 해결합니다. React Server Components는 서버에서만 실행되어 클라이언트 번들에 포함되지 않고, 직접 DB 접근이 가능하며 자동 코드 스플리팅을 제공하여 기존 SSR보다 효율적입니다.

Redux는 단방향 데이터 흐름과 불변성 기반으로 예측 가능하지만 보일러플레이트가 많고, MobX는 Observable 기반 자동 추적으로 간결하지만 암묵적 동작이 디버깅을 어렵게 합니다. Zustand는 경량 flux 패턴으로 간단하고, Jotai/Recoil은 Atomic 상태로 세밀한 구독과 동시성을 지원합니다. 복잡한 비즈니스 로직과 시간여행 디버깅이 필요하면 Redux, 반응형과 간결함이 중요하면 MobX, 작은 앱이나 빠른 개발은 Zustand, 세밀한 최적화는 Jotai/Recoil을 선택합니다. Server State는 캐싱, 재검증, 백그라운드 업데이트가 필요하므로 React Query/SWR로 관리하고, Client State(UI 상태, 폼 데이터)는 가벼운 라이브러리나 Context로 분리하여 관심사를 명확히 합니다.