JavaScript 프레임워크 미드레벨 기술면접
새 면접Q. React의 useMemo와 useCallback의 차이점을 설명하고, 각각을 사용해야 하는 상황을 구분해주세요. 또한 이 두 훅을 과도하게 사용했을 때 오히려 성능이 저하될 수 있는 이유와, 실제로 최적화가 필요한지 판단하는 기준을 제시해주세요.
useMemo는 계산 비용이 높은 값을 메모이제이션하고, useCallback은 함수 자체를 메모이제이션합니다. useMemo는 복잡한 연산 결과를 캐싱할 때, useCallback은 자식 컴포넌트에 props로 전달되는 함수를 최적화할 때 사용합니다. 과도한 사용은 메모이제이션 자체의 오버헤드(의존성 비교, 메모리 사용)가 발생하여 오히려 성능을 저하시킬 수 있습니다. React DevTools Profiler로 실제 렌더링 시간을 측정하고, 복잡한 연산이나 빈번한 리렌더링이 확인될 때만 선택적으로 적용하는 것이 좋습니다.
- • useMemo는 값 메모이제이션, useCallback은 함수 메모이제이션
- • 메모이제이션 자체의 오버헤드가 존재하여 모든 곳에 사용하면 역효과
- • React DevTools Profiler로 실제 성능 병목 지점을 측정 후 적용
- • 자식 컴포넌트가 React.memo로 최적화된 경우 useCallback이 효과적
useMemo의 의존성 배열에 객체나 배열을 넣을 때 주의해야 할 점은 무엇인가요?
Q. Vue 3의 Composition API에서 watchEffect와 watch의 차이점을 설명하고, 각각의 실행 타이밍과 사용 시나리오를 비교해주세요. 또한 watch의 deep 옵션과 immediate 옵션이 성능에 미치는 영향과, 대용량 객체를 감시할 때의 최적화 전략을 설명해주세요.
watchEffect는 함수 내부에서 사용된 반응형 데이터를 자동으로 추적하여 즉시 실행되고, watch는 명시적으로 지정한 소스만 감시하며 lazy 실행됩니다. watchEffect는 의존성을 자동으로 수집하므로 간단한 사이드 이펙트에 적합하고, watch는 이전 값과 새 값을 비교하거나 특정 데이터만 감시할 때 유용합니다. deep 옵션은 중첩된 객체의 모든 속성을 재귀적으로 감시하므로 대용량 객체에서는 성능 저하가 발생할 수 있으며, 이 경우 computed를 사용해 필요한 값만 추출하거나 특정 속성만 watch하는 것이 좋습니다. immediate 옵션은 컴포넌트 마운트 시 즉시 실행되므로 초기화 로직에 유용합니다.
- • watchEffect는 자동 의존성 추적 및 즉시 실행, watch는 명시적 감시 및 lazy 실행
- • watch는 oldValue와 newValue 접근 가능하여 변경 전후 비교 가능
- • deep 옵션은 재귀적 감시로 성능 비용이 높아 필요한 경우만 사용
- • 대용량 객체는 computed로 필요한 값만 추출 후 watch하는 것이 효율적
Vue 3에서 watch를 사용할 때 cleanup 함수를 등록하는 방법과 그 활용 사례를 설명해주세요.
Q. Next.js의 getStaticProps, getServerSideProps, getStaticPaths의 차이점을 설명하고, 각각 어떤 상황에서 사용해야 하는지 실무 예시와 함께 설명해주세요. 또한 ISR(Incremental Static Regeneration)의 동작 원리와 revalidate 옵션의 의미, 그리고 on-demand revalidation과의 차이점을 설명해주세요.
getStaticProps는 빌드 타임에 데이터를 가져와 정적 페이지를 생성하며 블로그나 문서 페이지에 적합하고, getServerSideProps는 매 요청마다 서버에서 데이터를 가져와 사용자별 맞춤 콘텐츠나 실시간 데이터에 사용됩니다. getStaticPaths는 동적 라우트에서 빌드할 경로를 지정합니다. ISR은 revalidate 옵션으로 지정한 시간이 지난 후 첫 요청 시 백그라운드에서 페이지를 재생성하여 정적 생성의 성능과 최신 데이터를 모두 확보합니다. on-demand revalidation은 특정 이벤트(예: CMS 업데이트)가 발생했을 때 API를 통해 즉시 재생성을 트리거하여 더 정확한 캐시 무효화가 가능합니다.
- • getStaticProps는 빌드 타임, getServerSideProps는 요청 타임에 데이터 페칭
- • ISR의 revalidate는 시간 기반 자동 재생성으로 stale-while-revalidate 패턴 사용
- • on-demand revalidation은 이벤트 기반 즉시 재생성으로 더 정확한 제어 가능
- • getStaticPaths의 fallback 옵션으로 빌드되지 않은 경로 처리 방식 결정
Next.js 13의 App Router에서 도입된 Server Actions와 기존 API Routes의 차이점은 무엇인가요?
Q. Zustand, Jotai, Recoil 같은 모던 React 상태 관리 라이브러리들이 Redux보다 가벼운 이유를 설명하고, 각 라이브러리의 핵심 특징과 차이점을 비교해주세요. 또한 atomic 상태 관리 패턴의 장점과, 전역 상태를 여러 개의 작은 atom으로 분리했을 때의 리렌더링 최적화 원리를 설명해주세요.
Zustand는 Flux 패턴 없이 단순한 스토어 구조를 사용하고, Jotai와 Recoil은 atom 기반으로 상태를 분산 관리하여 보일러플레이트가 적습니다. Zustand는 Provider 없이 사용 가능하고, Jotai는 React Context 기반으로 가볍고 TypeScript 친화적이며, Recoil은 Facebook에서 개발하여 비동기 처리와 선택자가 강력합니다. atomic 패턴은 상태를 최소 단위로 분리하여 특정 atom 구독 컴포넌트만 리렌더링되므로 불필요한 렌더링이 줄어듭니다. 각 atom은 독립적으로 구독되며, React의 렌더링 최적화와 결합하여 세밀한 업데이트 제어가 가능합니다.
- • Zustand는 Provider 불필요, Jotai는 가볍고 TypeScript 친화적, Recoil은 비동기와 선택자 강력
- • atomic 패턴은 상태를 최소 단위로 분리하여 구독 기반 선택적 리렌더링
- • Redux는 단일 스토어와 미들웨어 아키텍처로 보일러플레이트가 많음
- • atom 단위 구독으로 변경된 상태를 사용하는 컴포넌트만 리렌더링
Zustand에서 middleware를 사용하여 persist나 devtools 기능을 추가할 때의 구현 원리를 설명해주세요.
Q. React나 Vue 애플리케이션에서 번들 크기를 줄이기 위한 Tree Shaking의 원리를 설명하고, Tree Shaking이 제대로 동작하지 않는 경우와 그 해결 방법을 제시해주세요. 또한 sideEffects 필드의 역할과, 라이브러리를 개발할 때 Tree Shaking을 지원하기 위해 고려해야 할 사항들을 설명해주세요.
Tree Shaking은 ES6 모듈의 정적 구조를 분석하여 실제로 사용되지 않는 코드를 번들에서 제거하는 최적화 기법입니다. CommonJS(require/module.exports)를 사용하거나, 모듈에 side effect가 있거나, export default로만 내보내면 Tree Shaking이 제대로 동작하지 않을 수 있습니다. package.json의 sideEffects 필드를 false로 설정하거나 특정 파일만 명시하여 번들러에게 안전하게 제거 가능한 코드를 알려줄 수 있습니다. 라이브러리 개발 시 named export 사용, ES6 모듈 형식 제공, 순수 함수 작성, CSS import 같은 side effect 명시가 중요합니다.
- • Tree Shaking은 ES6 모듈의 정적 분석으로 미사용 코드 제거
- • CommonJS 사용, side effect 존재, default export만 사용 시 Tree Shaking 제한
- • sideEffects 필드로 안전하게 제거 가능한 파일을 번들러에 명시
- • 라이브러리는 named export, ES6 모듈, 순수 함수로 개발해야 Tree Shaking 지원
Webpack의 usedExports와 sideEffects 옵션의 차이점과 함께 사용했을 때의 시너지 효과를 설명해주세요.
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!