JavaScript 프레임워크 미드레벨 기술면접
새 면접Q. React의 useReducer와 useState의 차이점을 설명하고, 어떤 상황에서 useReducer를 선택하는 것이 더 적합한지 실무 예시와 함께 설명해주세요. 또한 useReducer를 사용할 때 dispatch 함수가 리렌더링 간에 안정적인 참조를 유지하는 이유와 이것이 성능 최적화에 어떻게 도움이 되는지 설명해주세요.
useState는 단순한 상태 관리에 적합하며, useReducer는 복잡한 상태 로직이나 다수의 하위 값을 포함하는 상태, 이전 상태에 의존하는 복잡한 업데이트 로직에 적합합니다. useReducer의 dispatch 함수는 컴포넌트 생명주기 동안 동일한 참조를 유지하므로 자식 컴포넌트에 props로 전달할 때 불필요한 리렌더링을 방지할 수 있습니다. 특히 여러 액션 타입에 따라 상태를 업데이트하는 폼 관리나 복잡한 UI 상태 머신을 구현할 때 useReducer가 코드의 예측 가능성과 테스트 용이성을 높여줍니다. Redux와 유사한 패턴으로 상태 변경 로직을 중앙화하여 관리할 수 있습니다.
- • useState는 단순 상태, useReducer는 복잡한 상태 로직과 다중 하위 값 관리에 적합
- • dispatch 함수는 리렌더링 간 안정적 참조 유지로 자식 컴포넌트 최적화 가능
- • 상태 변경 로직을 reducer로 분리하여 테스트와 유지보수 용이
- • 여러 액션 타입을 다루는 복잡한 상태 머신 구현에 효과적
useReducer와 Context API를 함께 사용하여 전역 상태를 관리할 때, Redux와 비교했을 때의 장단점과 어떤 규모의 프로젝트에서 각각을 선택해야 하는지 설명해주세요.
Q. Angular의 의존성 주입(Dependency Injection) 시스템의 동작 원리를 설명하고, Hierarchical Injector의 개념과 providedIn 옵션('root', 'platform', 'any')의 차이점을 설명해주세요. 또한 서비스의 생명주기가 컴포넌트와 어떻게 연결되는지, 그리고 Singleton 패턴을 유지하면서 모듈별로 서비스 인스턴스를 분리해야 할 때의 구현 전략을 설명해주세요.
Angular의 DI 시스템은 Hierarchical Injector 구조로 되어 있어, Root Injector부터 시작해 Module Injector, Component Injector까지 계층적으로 의존성을 해결합니다. providedIn: 'root'는 애플리케이션 전체에서 싱글톤으로 작동하며 트리 쉐이킹이 가능하고, 'platform'은 여러 Angular 앱이 공유하는 플랫폼 레벨에서, 'any'는 각 lazy-loaded 모듈마다 별도 인스턴스를 생성합니다. 서비스를 컴포넌트의 providers 배열에 등록하면 해당 컴포넌트와 그 자식들만 새로운 인스턴스를 공유하며, 컴포넌트가 파괴될 때 함께 정리됩니다. 모듈별로 서비스를 분리하려면 forRoot/forChild 패턴을 사용하거나, 각 lazy module의 providers에 직접 등록하여 모듈 스코프 인스턴스를 생성할 수 있습니다.
- • Hierarchical Injector 구조로 Root, Module, Component 레벨에서 의존성 해결
- • providedIn 옵션에 따라 서비스 스코프와 생명주기가 결정됨
- • 컴포넌트 providers에 등록하면 컴포넌트 트리 스코프의 새 인스턴스 생성
- • forRoot/forChild 패턴으로 모듈별 서비스 인스턴스 관리 가능
Angular의 Injection Token과 useFactory, useValue, useClass, useExisting의 차이점을 설명하고, 런타임 환경에 따라 다른 서비스 구현체를 주입해야 할 때의 패턴을 제시해주세요.
Q. Svelte의 반응성 시스템이 React나 Vue와 근본적으로 다른 점을 설명하고, 컴파일 타임에 반응성을 처리하는 방식의 장점과 단점을 설명해주세요. 또한 Svelte의 $: 레이블 구문의 동작 원리와, 이것이 Vue의 computed나 React의 useMemo와 어떻게 다른지 비교해주세요.
Svelte는 Virtual DOM을 사용하지 않고 컴파일 타임에 반응성 코드를 생성하여 런타임 오버헤드가 없는 것이 가장 큰 차이입니다. 변수 할당 자체가 반응성을 트리거하며, 컴파일러가 의존성을 분석해 최적화된 업데이트 코드를 생성합니다. $: 레이블 구문은 컴파일 타임에 의존성을 추적하여 자동으로 재계산되는 reactive statement로 변환되며, Vue의 computed처럼 캐싱되지만 명시적인 의존성 배열이 필요 없고 React의 useMemo보다 간결합니다. 장점은 번들 크기가 작고 런타임 성능이 우수하지만, 단점은 복잡한 상태 관리나 동적인 반응성 패턴 구현이 제한적이고, 디버깅 시 생성된 코드를 이해해야 할 수 있습니다.
- • 컴파일 타임에 반응성 코드 생성으로 런타임 오버헤드 제거
- • 변수 할당이 직접 반응성 트리거하는 간결한 문법
- • $: 레이블로 자동 의존성 추적 및 재계산, 명시적 배열 불필요
- • 작은 번들 크기와 우수한 성능, 하지만 복잡한 상태 관리는 제한적
Svelte Store(writable, readable, derived)의 동작 원리를 설명하고, 컴포넌트 간 상태 공유 시 Context API와 Store 중 어떤 것을 선택해야 하는지 판단 기준을 제시해주세요.
Q. Next.js 13의 App Router에서 도입된 Server Actions의 개념과 동작 원리를 설명하고, 기존 API Routes와 비교했을 때의 장점을 설명해주세요. 또한 Server Actions에서 데이터 변경 후 revalidatePath와 revalidateTag를 사용한 캐시 무효화 전략의 차이점과, 낙관적 업데이트(Optimistic Update)를 구현할 때의 패턴을 설명해주세요.
Server Actions는 'use server' 지시어로 표시된 서버 사이드 함수로, 클라이언트에서 직접 호출할 수 있어 별도의 API 엔드포인트 없이 서버 로직을 실행할 수 있습니다. 폼 제출과 자연스럽게 통합되며, 자동 직렬화와 타입 안정성을 제공하고, Progressive Enhancement를 지원해 JavaScript 없이도 작동합니다. revalidatePath는 특정 경로의 캐시를 무효화하고, revalidateTag는 여러 페이지에 걸친 태그 기반 캐시를 무효화하여 더 세밀한 제어가 가능합니다. 낙관적 업데이트는 useOptimistic 훅을 사용하여 Server Action 호출 전에 UI를 즉시 업데이트하고, 실제 응답이 오면 자동으로 동기화하는 방식으로 구현하며, 실패 시 롤백 처리를 해야 합니다.
- • Server Actions는 별도 API 없이 서버 함수를 직접 호출 가능한 패턴
- • 폼 통합, 자동 직렬화, Progressive Enhancement 지원
- • revalidatePath는 경로 기반, revalidateTag는 태그 기반 캐시 무효화
- • useOptimistic으로 즉시 UI 업데이트 후 서버 응답과 동기화
Server Actions에서 발생하는 에러를 클라이언트에서 처리하는 방법과, 파일 업로드나 스트리밍 응답 같은 복잡한 시나리오에서 Server Actions의 한계와 대안을 설명해주세요.
Q. Vue 3에서 Teleport 컴포넌트의 사용 목적과 동작 원리를 설명하고, 모달이나 토스트 알림 같은 UI 요소를 구현할 때 Teleport를 사용하는 것과 사용하지 않는 것의 차이점을 설명해주세요. 또한 여러 Teleport가 같은 대상을 타겟으로 할 때의 동작 방식과, SSR 환경에서 Teleport 사용 시 주의해야 할 점을 설명해주세요.
Teleport는 컴포넌트의 DOM 구조를 논리적 위치와 분리하여 다른 DOM 위치에 렌더링할 수 있게 해주는 기능으로, z-index나 CSS 스타일 상속 문제를 해결합니다. 모달을 Teleport 없이 구현하면 부모 요소의 overflow나 position 속성에 영향을 받아 레이아웃이 깨질 수 있지만, body나 특정 컨테이너로 Teleport하면 독립적인 렌더링이 가능합니다. 여러 Teleport가 같은 대상을 사용하면 순서대로 append되며, disabled 속성으로 조건부 활성화가 가능합니다. SSR 환경에서는 서버에서 렌더링된 마크업과 클라이언트 하이드레이션 시 위치가 달라 mismatch가 발생할 수 있으므로, 클라이언트에서만 활성화하거나 동일한 구조를 유지해야 합니다.
- • Teleport로 DOM 구조와 논리적 위치 분리, CSS 문제 해결
- • 모달/토스트 등에서 부모 스타일 영향 없이 독립적 렌더링
- • 같은 타겟에 여러 Teleport 사용 시 순서대로 append
- • SSR에서 hydration mismatch 주의, 클라이언트 전용 활성화 고려
Vue 3의 Suspense 컴포넌트와 Teleport를 함께 사용하여 비동기 모달을 구현할 때의 패턴과, 전역 모달 관리 시스템을 설계할 때 고려해야 할 사항들을 설명해주세요.
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!