JavaScript 미드레벨 기술면접
새 면접Q. JavaScript에서 requestIdleCallback API의 동작 원리와 용도를 설명하고, requestAnimationFrame과의 차이점을 비교해주세요. 또한 실무에서 requestIdleCallback을 활용할 수 있는 시나리오와 사용 시 주의해야 할 브라우저 호환성 문제를 설명해주세요.
requestIdleCallback은 브라우저의 메인 스레드가 유휴 상태일 때 낮은 우선순위 작업을 실행하도록 예약하는 API입니다. requestAnimationFrame은 다음 리페인트 전에 실행되어 애니메이션에 적합한 반면, requestIdleCallback은 프레임 렌더링이 완료되고 남은 시간에 실행되어 비필수적인 작업에 적합합니다. 실무에서는 분석 데이터 전송, 로그 처리, 백그라운드 데이터 동기화 등에 활용할 수 있으며, Safari에서 지원하지 않으므로 폴리필이나 대체 전략(setTimeout 사용)이 필요합니다.
- • 브라우저 유휴 시간에 낮은 우선순위 작업을 실행하는 API
- • requestAnimationFrame은 렌더링 전 실행, requestIdleCallback은 렌더링 후 유휴 시간에 실행
- • 분석, 로깅, 프리페칭 등 비필수 작업에 적합
- • Safari 미지원으로 폴리필 필요
deadline 파라미터의 didTimeout 속성이 true일 때 어떻게 처리해야 하며, 이것이 사용자 경험에 미치는 영향은 무엇인가요?
Q. JavaScript에서 Object.freeze, Object.seal, Object.preventExtensions의 차이점을 설명하고, 각각이 프로토타입 체인과 중첩된 객체에 미치는 영향을 비교해주세요. 또한 Deep Freeze를 구현할 때 고려해야 할 사항과 성능 트레이드오프를 설명해주세요.
Object.freeze는 속성 추가/삭제/수정을 모두 금지하고, Object.seal은 추가/삭제만 금지하며 수정은 가능하고, Object.preventExtensions는 추가만 금지합니다. 세 메서드 모두 1단계 깊이만 적용되며 프로토타입 체인이나 중첩 객체에는 영향을 주지 않습니다. Deep Freeze 구현 시 재귀적으로 모든 중첩 객체를 순회해야 하며, 순환 참조 처리를 위해 WeakSet으로 방문한 객체를 추적해야 합니다. 대용량 객체에 Deep Freeze를 적용하면 초기화 비용이 크므로, 정말 불변성이 필요한 부분에만 선택적으로 적용하는 것이 좋습니다.
- • freeze는 모든 변경 금지, seal은 수정만 허용, preventExtensions는 추가만 금지
- • 모두 얕은 적용으로 중첩 객체와 프로토타입에는 영향 없음
- • Deep Freeze는 재귀 순회와 순환 참조 처리 필요
- • 대용량 객체에는 성능 비용이 크므로 선택적 적용 권장
Immer 같은 불변성 라이브러리가 내부적으로 Proxy를 사용하는 이유와, Object.freeze 기반 접근법과 비교했을 때의 장단점은 무엇인가요?
Q. JavaScript에서 Generator 함수와 Iterator 프로토콜의 관계를 설명하고, Generator를 활용한 비동기 제어 플로우 패턴을 설명해주세요. 또한 async/await가 나온 이후에도 Generator가 여전히 유용한 사용 사례를 2가지 이상 제시해주세요.
Generator 함수는 실행을 중간에 멈추고 재개할 수 있는 함수로, next() 메서드를 가진 Iterator 객체를 반환하여 Iterator 프로토콜을 구현합니다. yield 키워드로 값을 생성하고 실행을 일시 중지할 수 있어, co 라이브러리처럼 Promise를 yield하여 비동기 제어 플로우를 구현할 수 있습니다. async/await 이후에도 Generator는 무한 시퀀스 생성, 지연 평가가 필요한 데이터 스트림 처리, Redux-Saga처럼 복잡한 비동기 사이드 이펙트 테스트, 커스텀 이터레이션 로직 구현 등에 여전히 유용합니다.
- • Generator는 Iterator 프로토콜을 구현하는 실행 제어 가능한 함수
- • yield로 값 생성과 실행 일시 중지 가능
- • 무한 시퀀스, 지연 평가, 복잡한 비동기 플로우 테스트에 유용
- • Redux-Saga는 Generator 기반으로 사이드 이펙트를 선언적으로 관리
Generator의 throw() 메서드와 return() 메서드의 역할을 설명하고, 이를 활용하여 Generator 내부에서 에러 핸들링과 조기 종료를 구현하는 방법을 설명해주세요.
Q. JavaScript에서 WeakMap과 WeakSet의 동작 원리를 설명하고, 일반 Map/Set과의 차이점을 가비지 컬렉션 관점에서 비교해주세요. 또한 실무에서 WeakMap을 활용하여 메모리 누수를 방지할 수 있는 구체적인 패턴 2가지를 제시해주세요.
WeakMap과 WeakSet은 키(또는 값)로 객체만 허용하며, 약한 참조(weak reference)를 유지하여 다른 참조가 없으면 가비지 컬렉션 대상이 됩니다. 일반 Map/Set은 강한 참조로 명시적으로 삭제하지 않으면 메모리에 유지되지만, WeakMap/WeakSet은 외부 참조가 사라지면 자동으로 정리됩니다. 실무 패턴으로는 DOM 노드에 메타데이터를 저장할 때 WeakMap을 사용하여 DOM이 제거되면 자동으로 데이터도 정리되게 하거나, 객체의 private 데이터를 저장하는 클로저 대신 WeakMap을 사용하여 인스턴스가 삭제되면 private 데이터도 자동 정리되게 할 수 있습니다.
- • WeakMap/WeakSet은 약한 참조로 가비지 컬렉션 허용
- • 일반 Map/Set은 강한 참조로 명시적 삭제 필요
- • DOM 노드 메타데이터 저장 시 자동 정리
- • 객체 private 데이터 저장으로 메모리 누수 방지
WeakMap은 왜 이터레이션이 불가능하며, 이것이 가비지 컬렉션과 어떤 관계가 있나요? 또한 keys() 메서드가 제공되지 않는 이유를 설명해주세요.
Q. JavaScript에서 console.log 이외에 디버깅에 유용한 console API 메서드들을 3가지 이상 설명하고, 각각의 활용 사례를 제시해주세요. 또한 프로덕션 환경에서 console 호출을 자동으로 제거하는 방법과 조건부 브레이크포인트를 활용한 효율적인 디버깅 전략을 설명해주세요.
console.table은 배열이나 객체를 테이블 형태로 보기 좋게 출력하여 데이터 구조 파악에 유용하고, console.time/timeEnd는 코드 실행 시간을 측정하여 성능 병목 지점을 찾는 데 활용됩니다. console.trace는 함수 호출 스택을 출력하여 실행 경로를 추적할 수 있고, console.assert는 조건이 false일 때만 에러를 출력하여 조건부 디버깅에 유용합니다. 프로덕션에서는 Webpack의 TerserPlugin이나 Babel 플러그인(babel-plugin-transform-remove-console)으로 console 호출을 자동 제거할 수 있으며, Chrome DevTools의 조건부 브레이크포인트는 특정 조건일 때만 중단하여 반복문에서 특정 케이스만 디버깅할 수 있습니다.
- • console.table로 데이터 구조 시각화, console.time으로 성능 측정
- • console.trace로 호출 스택 추적, console.assert로 조건부 디버깅
- • Webpack TerserPlugin이나 Babel 플러그인으로 프로덕션 console 제거
- • 조건부 브레이크포인트로 특정 상황만 효율적으로 디버깅
console.log에 객체를 출력할 때 참조로 출력되어 나중에 확장하면 변경된 값이 보이는 문제를 해결하는 방법과, 이를 방지하기 위한 디버깅 베스트 프랙티스를 설명해주세요.
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!