JavaScript 프레임워크 미드레벨 기술면접
새 면접Q. React 16에서 도입된 Fiber 아키텍처가 무엇인지 설명하고, 기존 Stack Reconciler와의 차이점을 설명해주세요. 특히 Time Slicing과 Suspense가 Fiber 아키텍처를 통해 어떻게 구현되는지, 그리고 실무에서 Concurrent Mode를 사용할 때 주의해야 할 점을 설명해주세요.
Fiber는 React의 재조정 엔진을 재작성한 것으로, 작업을 중단 가능한 작은 단위로 쪼개어 우선순위를 부여할 수 있게 합니다. 기존 Stack Reconciler는 동기적으로 전체 컴포넌트 트리를 재귀적으로 처리했지만, Fiber는 각 컴포넌트를 Fiber 노드로 표현하여 작업을 중단하고 재개할 수 있습니다. Time Slicing은 브라우저의 프레임 단위로 작업을 분할하여 메인 스레드를 차단하지 않고, Suspense는 비동기 작업이 완료될 때까지 렌더링을 지연시킵니다. Concurrent Mode 사용 시 useTransition과 useDeferredValue를 적절히 활용하고, 외부 상태 관리 라이브러리의 호환성을 확인해야 하며, 예상치 못한 렌더링 순서 변경에 대비한 테스트가 필요합니다.
- • Fiber는 작업을 중단 가능한 단위로 분할하여 우선순위 기반 렌더링 가능
- • Stack Reconciler는 동기적 재귀 처리, Fiber는 비동기적 작업 스케줄링
- • Time Slicing으로 메인 스레드 차단 방지, Suspense로 비동기 렌더링 제어
- • Concurrent Mode에서는 렌더링 순서와 외부 상태 관리 호환성 주의 필요
Fiber 아키텍처에서 우선순위 레벨은 어떻게 결정되며, startTransition으로 감싼 업데이트와 일반 setState의 우선순위 차이는 무엇인가요?
Q. Vue 3의 Composition API에서 setup 함수의 실행 시점과 생명주기를 설명하고, Options API와 비교했을 때의 장점을 코드 재사용성과 타입 추론 관점에서 설명해주세요. 또한 script setup 문법의 동작 원리와 일반 setup 함수와의 차이점을 설명해주세요.
setup 함수는 컴포넌트 인스턴스가 생성되기 전에 실행되며, beforeCreate와 created 사이에 호출됩니다. Options API는 로직이 생명주기별로 분산되지만, Composition API는 관련 로직을 함께 그룹화할 수 있어 composable 함수로 추출하여 재사용하기 쉽습니다. TypeScript와의 통합이 자연스러워 타입 추론이 잘 작동하며, 별도의 타입 선언 없이도 IDE 지원을 받을 수 있습니다. script setup은 컴파일 타임에 setup 함수로 변환되는 syntactic sugar로, 최상위 변수가 자동으로 템플릿에 노출되고, import한 컴포넌트가 자동 등록되며, defineProps와 defineEmits로 간결하게 props와 emits를 정의할 수 있습니다.
- • setup은 컴포넌트 인스턴스 생성 전 실행되어 beforeCreate/created 대체
- • Composition API는 로직 그룹화와 composable 함수로 재사용성 향상
- • TypeScript 타입 추론이 자연스럽고 IDE 지원 우수
- • script setup은 컴파일 타임 변환으로 보일러플레이트 코드 제거
Composition API에서 reactive와 ref를 사용할 때 toRefs를 사용하는 이유와, destructuring 시 반응성이 유지되는 원리를 설명해주세요.
Q. React Context API를 사용할 때 발생할 수 있는 성능 문제를 설명하고, Context 값이 변경될 때 불필요한 리렌더링을 방지하기 위한 최적화 기법들을 제시해주세요. 또한 Context를 여러 개로 분리하는 것과 하나로 통합하는 것의 트레이드오프를 실무 관점에서 설명해주세요.
Context의 value가 변경되면 해당 Context를 구독하는 모든 하위 컴포넌트가 리렌더링되며, value 객체를 매번 새로 생성하면 참조 동일성이 깨져 불필요한 렌더링이 발생합니다. useMemo로 Context value를 메모이제이션하고, Context를 기능별로 분리하여 필요한 데이터만 구독하도록 하며, useContextSelector 같은 라이브러리나 별도의 상태 관리 라이브러리를 고려할 수 있습니다. Context를 분리하면 세밀한 렌더링 제어가 가능하지만 Provider 중첩이 깊어지고, 통합하면 구조는 단순하지만 불필요한 렌더링이 증가할 수 있어 변경 빈도와 구독 범위를 고려하여 결정해야 합니다.
- • Context value 변경 시 구독하는 모든 컴포넌트 리렌더링 발생
- • useMemo로 value 메모이제이션, Context 분리로 구독 범위 최소화
- • useContextSelector나 상태 관리 라이브러리로 선택적 구독 구현
- • Context 분리와 통합은 변경 빈도와 구독 범위 고려하여 결정
Zustand나 Jotai 같은 atomic 상태 관리 라이브러리가 Context API의 성능 문제를 어떻게 해결하는지 설명해주세요.
Q. Angular의 Zone.js 기반 변화 감지 메커니즘을 설명하고, OnPush 전략과 Default 전략의 차이점을 설명해주세요. 또한 대규모 애플리케이션에서 변화 감지 성능을 최적화하기 위한 전략들과, detach/reattach를 사용한 수동 변화 감지 제어 시나리오를 실무 예시와 함께 설명해주세요.
Angular는 Zone.js를 통해 비동기 작업(이벤트, 타이머, HTTP)을 가로채서 변화 감지를 자동으로 트리거합니다. Default 전략은 모든 비동기 이벤트마다 전체 컴포넌트 트리를 검사하지만, OnPush 전략은 Input 참조 변경이나 이벤트 발생, async 파이프 사용 시에만 해당 컴포넌트와 자식들을 검사합니다. 성능 최적화를 위해 OnPush를 기본으로 사용하고, trackBy 함수로 리스트 렌더링 최적화, Pure Pipe 활용, 그리고 runOutsideAngular로 Zone 외부에서 작업을 실행할 수 있습니다. detach는 실시간 데이터 스트림에서 일정 주기로만 UI 업데이트가 필요한 경우나, 애니메이션 중 변화 감지를 중지할 때 유용하며, reattach로 다시 활성화합니다.
- • Zone.js가 비동기 작업을 가로채서 자동 변화 감지 트리거
- • OnPush는 Input 변경과 이벤트 시에만 검사하여 성능 향상
- • trackBy, Pure Pipe, runOutsideAngular로 최적화
- • detach/reattach로 수동 제어하여 불필요한 검사 방지
Angular의 Ivy 렌더러가 변화 감지 성능에 미친 영향과, Incremental DOM 방식의 장점을 설명해주세요.
Q. React Server Components(RSC)의 개념과 동작 원리를 설명하고, 기존 SSR과의 차이점을 설명해주세요. 특히 Server Component와 Client Component의 경계를 어떻게 설정해야 하는지, 그리고 Server Component에서 데이터를 fetch할 때의 장점과 주의사항을 실무 관점에서 설명해주세요.
React Server Components는 서버에서만 렌더링되는 컴포넌트로, JavaScript 번들에 포함되지 않아 클라이언트 번들 크기를 줄입니다. 기존 SSR은 초기 HTML을 서버에서 생성하지만 클라이언트에서 재실행되어 hydration이 필요한 반면, RSC는 서버에서만 실행되고 직렬화된 결과만 클라이언트로 전송됩니다. 상태나 이벤트 핸들러가 필요 없고 데이터 fetching이 필요한 컴포넌트는 Server Component로, 인터랙션이 필요한 부분은 Client Component로 분리합니다. Server Component에서 직접 DB 접근이 가능하고 민감한 API 키를 안전하게 사용할 수 있지만, async/await 사용 시 waterfall 문제를 주의하고, Suspense 경계를 적절히 설정해야 합니다.
- • RSC는 서버에서만 실행되어 클라이언트 번들 크기 감소
- • SSR은 hydration 필요, RSC는 직렬화된 결과만 전송
- • 데이터 fetching은 Server Component, 인터랙션은 Client Component
- • DB 직접 접근 가능하나 waterfall과 Suspense 경계 설정 주의
Server Component에서 Client Component로 props를 전달할 때 직렬화 제약사항과, use hook을 사용한 비동기 데이터 처리 방식을 설명해주세요.
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!